1009 lines
40 KiB
TypeScript
1009 lines
40 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
|
import { createRoot } from "react-dom/client"
|
|
import { invoke } from "@tauri-apps/api/core"
|
|
import { Store } from "@tauri-apps/plugin-store"
|
|
import { appLocalDataDir, executableDir, join } from "@tauri-apps/api/path"
|
|
import { ExternalLink, Eye, EyeOff, Loader2, RefreshCw } from "lucide-react"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs"
|
|
import { cn } from "./lib/utils"
|
|
import { DeactivationScreen } from "./components/DeactivationScreen"
|
|
|
|
type MachineOs = {
|
|
name: string
|
|
version?: string | null
|
|
architecture?: string | null
|
|
}
|
|
|
|
type MachineMetrics = {
|
|
collectedAt: string
|
|
cpuLogicalCores: number
|
|
cpuPhysicalCores?: number | null
|
|
cpuUsagePercent: number
|
|
memoryTotalBytes: number
|
|
memoryUsedBytes: number
|
|
memoryUsedPercent: number
|
|
uptimeSeconds: number
|
|
}
|
|
|
|
type MachineInventory = {
|
|
cpuBrand?: string | null
|
|
hostIdentifier?: string | null
|
|
}
|
|
|
|
type MachineProfile = {
|
|
hostname: string
|
|
os: MachineOs
|
|
macAddresses: string[]
|
|
serialNumbers: string[]
|
|
inventory: MachineInventory
|
|
metrics: MachineMetrics
|
|
}
|
|
|
|
type MachineRegisterResponse = {
|
|
machineId: string
|
|
tenantId?: string | null
|
|
companyId?: string | null
|
|
companySlug?: string | null
|
|
machineToken: string
|
|
machineEmail?: string | null
|
|
expiresAt?: number | null
|
|
persona?: string | null
|
|
assignedUserId?: string | null
|
|
collaborator?: {
|
|
email: string
|
|
name?: string | null
|
|
} | null
|
|
}
|
|
|
|
type AgentConfig = {
|
|
machineId: string
|
|
tenantId?: string | null
|
|
companySlug?: string | null
|
|
companyName?: string | null
|
|
machineEmail?: string | null
|
|
collaboratorEmail?: string | null
|
|
collaboratorName?: string | null
|
|
accessRole: "collaborator" | "manager"
|
|
assignedUserId?: string | null
|
|
assignedUserEmail?: string | null
|
|
assignedUserName?: string | null
|
|
apiBaseUrl: string
|
|
appUrl: string
|
|
createdAt: number
|
|
lastSyncedAt?: number | null
|
|
expiresAt?: number | null
|
|
heartbeatIntervalSec?: number | null
|
|
}
|
|
|
|
declare global {
|
|
interface ImportMetaEnv {
|
|
readonly VITE_APP_URL?: string
|
|
readonly VITE_API_BASE_URL?: string
|
|
}
|
|
interface ImportMeta { readonly env: ImportMetaEnv }
|
|
}
|
|
|
|
const STORE_FILENAME = "machine-agent.json"
|
|
const DEFAULT_APP_URL = import.meta.env.MODE === "production" ? "https://tickets.esdrasrenan.com.br" : "http://localhost:3000"
|
|
|
|
function normalizeUrl(value?: string | null, fallback = DEFAULT_APP_URL) {
|
|
const trimmed = (value ?? fallback).trim()
|
|
if (!trimmed.startsWith("http")) return fallback
|
|
return trimmed.replace(/\/+$/, "")
|
|
}
|
|
|
|
const appUrl = normalizeUrl(import.meta.env.VITE_APP_URL, DEFAULT_APP_URL)
|
|
const apiBaseUrl = normalizeUrl(import.meta.env.VITE_API_BASE_URL, appUrl)
|
|
|
|
async function loadStore(): Promise<Store> {
|
|
// Tenta usar uma pasta "data" ao lado do executável (ex.: C:\Raven\data)
|
|
try {
|
|
const exeDir = await executableDir()
|
|
const storePath = await join(exeDir, "data", STORE_FILENAME)
|
|
return await Store.load(storePath)
|
|
} catch {
|
|
// Fallback: AppData local do usuário
|
|
const appData = await appLocalDataDir()
|
|
const storePath = await join(appData, STORE_FILENAME)
|
|
return await Store.load(storePath)
|
|
}
|
|
}
|
|
|
|
async function readToken(store: Store): Promise<string | null> {
|
|
return (await store.get<string>("token")) ?? null
|
|
}
|
|
|
|
async function writeToken(store: Store, token: string): Promise<void> {
|
|
await store.set("token", token)
|
|
await store.save()
|
|
}
|
|
|
|
async function readConfig(store: Store): Promise<AgentConfig | null> {
|
|
return (await store.get<AgentConfig>("config")) ?? null
|
|
}
|
|
|
|
async function writeConfig(store: Store, cfg: AgentConfig): Promise<void> {
|
|
await store.set("config", cfg)
|
|
await store.save()
|
|
}
|
|
|
|
function bytes(n?: number) {
|
|
if (!n || !Number.isFinite(n)) return "—"
|
|
const u = ["B","KB","MB","GB","TB"]
|
|
let v = n; let i = 0
|
|
while (v >= 1024 && i < u.length - 1) { v/=1024; i++ }
|
|
return `${v.toFixed(v>=10||i===0?0:1)} ${u[i]}`
|
|
}
|
|
|
|
function pct(p?: number) { return !p && p !== 0 ? "—" : `${p.toFixed(0)}%` }
|
|
|
|
type MachineStatePayload = {
|
|
isActive?: boolean | null
|
|
metadata?: Record<string, unknown> | null
|
|
}
|
|
|
|
function extractActiveFromMetadata(metadata: unknown): boolean {
|
|
if (!metadata || typeof metadata !== "object") return true
|
|
const record = metadata as Record<string, unknown>
|
|
const direct = record["isActive"]
|
|
if (typeof direct === "boolean") return direct
|
|
const state = record["state"]
|
|
if (state && typeof state === "object") {
|
|
const nested = state as Record<string, unknown>
|
|
const active = nested["isActive"] ?? nested["active"] ?? nested["enabled"]
|
|
if (typeof active === "boolean") return active
|
|
}
|
|
const flags = record["flags"]
|
|
if (flags && typeof flags === "object") {
|
|
const nested = flags as Record<string, unknown>
|
|
const active = nested["isActive"] ?? nested["active"]
|
|
if (typeof active === "boolean") return active
|
|
}
|
|
const status = record["status"]
|
|
if (typeof status === "string") {
|
|
const normalized = status.trim().toLowerCase()
|
|
if (["deactivated", "desativada", "desativado", "inactive", "inativo", "disabled"].includes(normalized)) {
|
|
return false
|
|
}
|
|
}
|
|
return true
|
|
}
|
|
|
|
function resolveMachineActive(machine?: MachineStatePayload | null): boolean {
|
|
if (!machine) return true
|
|
if (typeof machine.isActive === "boolean") return machine.isActive
|
|
return extractActiveFromMetadata(machine.metadata)
|
|
}
|
|
|
|
function App() {
|
|
const [store, setStore] = useState<Store | null>(null)
|
|
const [token, setToken] = useState<string | null>(null)
|
|
const [config, setConfig] = useState<AgentConfig | null>(null)
|
|
const [profile, setProfile] = useState<MachineProfile | null>(null)
|
|
const [logoSrc, setLogoSrc] = useState<string>(() => `${appUrl}/logo-raven.png`)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [busy, setBusy] = useState(false)
|
|
const [status, setStatus] = useState<string | null>(null)
|
|
const [isMachineActive, setIsMachineActive] = useState(true)
|
|
const [showSecret, setShowSecret] = useState(false)
|
|
const [isLaunchingSystem, setIsLaunchingSystem] = useState(false)
|
|
const [tokenValidationTick, setTokenValidationTick] = useState(0)
|
|
const [, setIsValidatingToken] = useState(false)
|
|
const tokenVerifiedRef = useRef(false)
|
|
|
|
const [provisioningCode, setProvisioningCode] = useState("")
|
|
const [validatedCompany, setValidatedCompany] = useState<{ id: string; name: string; slug: string; tenantId: string } | null>(null)
|
|
const [companyName, setCompanyName] = useState("")
|
|
const [isValidatingCode, setIsValidatingCode] = useState(false)
|
|
const [codeStatus, setCodeStatus] = useState<{ tone: "success" | "error"; message: string } | null>(null)
|
|
const [collabEmail, setCollabEmail] = useState("")
|
|
const [collabName, setCollabName] = useState("")
|
|
const [updating, setUpdating] = useState(false)
|
|
const [updateInfo, setUpdateInfo] = useState<{ message: string; tone: "info" | "success" | "error" } | null>({
|
|
message: "Atualizações automáticas são verificadas a cada inicialização.",
|
|
tone: "info",
|
|
})
|
|
const autoLaunchRef = useRef(false)
|
|
const autoUpdateRef = useRef(false)
|
|
const logoFallbackRef = useRef(false)
|
|
const emailRegex = useRef(/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i)
|
|
const isEmailValid = useMemo(() => emailRegex.current.test(collabEmail.trim()), [collabEmail])
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const s = await loadStore()
|
|
setStore(s)
|
|
const t = await readToken(s)
|
|
setToken(t)
|
|
const cfg = await readConfig(s)
|
|
setConfig(cfg)
|
|
if (cfg?.collaboratorEmail) setCollabEmail(cfg.collaboratorEmail)
|
|
if (cfg?.collaboratorName) setCollabName(cfg.collaboratorName)
|
|
if (cfg?.companyName) setCompanyName(cfg.companyName)
|
|
if (!t) {
|
|
const p = await invoke<MachineProfile>("collect_machine_profile")
|
|
setProfile(p)
|
|
}
|
|
// Não assume online sem validar; valida abaixo em outro efeito
|
|
} catch {
|
|
setError("Falha ao carregar estado do agente.")
|
|
}
|
|
})()
|
|
}, [])
|
|
|
|
// Valida token existente ao iniciar o app. Se inválido/expirado, limpa e volta ao onboarding.
|
|
useEffect(() => {
|
|
if (!store || !token) return
|
|
let cancelled = false
|
|
;(async () => {
|
|
setIsValidatingToken(true)
|
|
try {
|
|
const res = await fetch(`${apiBaseUrl}/api/machines/heartbeat`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ machineToken: token, status: "online" }),
|
|
})
|
|
if (cancelled) return
|
|
if (res.ok) {
|
|
tokenVerifiedRef.current = true
|
|
setStatus("online")
|
|
setTokenValidationTick((tick) => tick + 1)
|
|
try {
|
|
await invoke("start_machine_agent", {
|
|
baseUrl: apiBaseUrl,
|
|
token,
|
|
status: "online",
|
|
intervalSeconds: 300,
|
|
})
|
|
} catch (err) {
|
|
console.error("Falha ao iniciar heartbeat em segundo plano", err)
|
|
}
|
|
const payload = await res.clone().json().catch(() => null)
|
|
if (payload && typeof payload === "object" && "machine" in payload) {
|
|
const machineData = (payload as { machine?: MachineStatePayload }).machine
|
|
if (machineData) {
|
|
const currentActive = resolveMachineActive(machineData)
|
|
setIsMachineActive(currentActive)
|
|
}
|
|
}
|
|
return
|
|
}
|
|
const text = await res.text()
|
|
const msg = text.toLowerCase()
|
|
const isInvalid =
|
|
msg.includes("token de máquina inválido") ||
|
|
msg.includes("token de máquina revogado") ||
|
|
msg.includes("token de máquina expirado")
|
|
if (isInvalid) {
|
|
try {
|
|
await store.delete("token"); await store.delete("config"); await store.save()
|
|
} catch {}
|
|
autoLaunchRef.current = false
|
|
tokenVerifiedRef.current = false
|
|
setToken(null)
|
|
setConfig(null)
|
|
setStatus(null)
|
|
setIsMachineActive(true)
|
|
setError("Este dispositivo precisa ser reprovisionado. Informe o código de provisionamento.")
|
|
try {
|
|
const p = await invoke<MachineProfile>("collect_machine_profile")
|
|
if (!cancelled) setProfile(p)
|
|
} catch {}
|
|
} else {
|
|
// Não limpa token em falhas genéricas (ex.: rede); apenas informa
|
|
setError("Falha ao validar sessão da máquina. Tente novamente.")
|
|
tokenVerifiedRef.current = true
|
|
setTokenValidationTick((tick) => tick + 1)
|
|
}
|
|
} catch (err) {
|
|
if (!cancelled) {
|
|
console.error("Falha ao validar token (rede)", err)
|
|
tokenVerifiedRef.current = true
|
|
setTokenValidationTick((tick) => tick + 1)
|
|
}
|
|
} finally {
|
|
if (!cancelled) setIsValidatingToken(false)
|
|
}
|
|
})()
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [store, token])
|
|
|
|
useEffect(() => {
|
|
if (!import.meta.env.DEV) return
|
|
|
|
function onKeyDown(event: KeyboardEvent) {
|
|
const key = (event.key || "").toLowerCase()
|
|
if (key === "f12" || (event.ctrlKey && event.shiftKey && key === "i")) {
|
|
invoke("open_devtools").catch(() => {})
|
|
event.preventDefault()
|
|
}
|
|
}
|
|
|
|
function onContextMenu(event: MouseEvent) {
|
|
if (event.ctrlKey || event.shiftKey) {
|
|
invoke("open_devtools").catch(() => {})
|
|
event.preventDefault()
|
|
}
|
|
}
|
|
|
|
window.addEventListener("keydown", onKeyDown)
|
|
window.addEventListener("contextmenu", onContextMenu)
|
|
return () => {
|
|
window.removeEventListener("keydown", onKeyDown)
|
|
window.removeEventListener("contextmenu", onContextMenu)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!store || !config) return
|
|
const email = collabEmail.trim()
|
|
const name = collabName.trim()
|
|
const normalizedEmail = email.length > 0 ? email : null
|
|
const normalizedName = name.length > 0 ? name : null
|
|
if (
|
|
config.collaboratorEmail === normalizedEmail &&
|
|
config.collaboratorName === normalizedName
|
|
) {
|
|
return
|
|
}
|
|
const nextConfig: AgentConfig = {
|
|
...config,
|
|
collaboratorEmail: normalizedEmail,
|
|
collaboratorName: normalizedName,
|
|
}
|
|
setConfig(nextConfig)
|
|
writeConfig(store, nextConfig).catch((err) => console.error("Falha ao atualizar colaborador", err))
|
|
}, [store, config, config?.collaboratorEmail, config?.collaboratorName, collabEmail, collabName])
|
|
|
|
useEffect(() => {
|
|
if (!store || !config) return
|
|
const normalizedAppUrl = normalizeUrl(config.appUrl, appUrl)
|
|
const normalizedApiUrl = normalizeUrl(config.apiBaseUrl, apiBaseUrl)
|
|
const shouldForceRemote = import.meta.env.MODE === "production"
|
|
const nextAppUrl = shouldForceRemote && normalizedAppUrl.includes("localhost") ? appUrl : normalizedAppUrl
|
|
const nextApiUrl = shouldForceRemote && normalizedApiUrl.includes("localhost") ? apiBaseUrl : normalizedApiUrl
|
|
if (nextAppUrl !== config.appUrl || nextApiUrl !== config.apiBaseUrl) {
|
|
const updatedConfig = { ...config, appUrl: nextAppUrl, apiBaseUrl: nextApiUrl }
|
|
setConfig(updatedConfig)
|
|
writeConfig(store, updatedConfig).catch((err) => console.error("Falha ao atualizar configuração", err))
|
|
}
|
|
}, [store, config])
|
|
|
|
useEffect(() => {
|
|
const trimmed = provisioningCode.trim()
|
|
if (trimmed.length < 32) {
|
|
setValidatedCompany(null)
|
|
setCodeStatus(null)
|
|
setCompanyName("")
|
|
return
|
|
}
|
|
let cancelled = false
|
|
const controller = new AbortController()
|
|
const timeout = setTimeout(async () => {
|
|
setIsValidatingCode(true)
|
|
try {
|
|
const res = await fetch(`${apiBaseUrl}/api/machines/provisioning`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ provisioningCode: trimmed }),
|
|
signal: controller.signal,
|
|
})
|
|
if (!res.ok) {
|
|
const message = res.status === 404 ? "Código não encontrado" : "Falha ao validar código"
|
|
if (!cancelled) {
|
|
setValidatedCompany(null)
|
|
setCompanyName("")
|
|
setCodeStatus({ tone: "error", message })
|
|
}
|
|
return
|
|
}
|
|
const data = (await res.json()) as { company: { id: string; name: string; slug: string; tenantId: string } }
|
|
if (!cancelled) {
|
|
setValidatedCompany(data.company)
|
|
setCompanyName(data.company.name)
|
|
setCodeStatus({ tone: "success", message: `Empresa encontrada: ${data.company.name}` })
|
|
}
|
|
} catch (error) {
|
|
if (!cancelled) {
|
|
console.error("Falha ao validar código de provisionamento", error)
|
|
setValidatedCompany(null)
|
|
setCompanyName("")
|
|
setCodeStatus({ tone: "error", message: "Não foi possível validar o código agora" })
|
|
}
|
|
} finally {
|
|
if (!cancelled) setIsValidatingCode(false)
|
|
}
|
|
}, 400)
|
|
return () => {
|
|
cancelled = true
|
|
clearTimeout(timeout)
|
|
controller.abort()
|
|
setIsValidatingCode(false)
|
|
}
|
|
}, [provisioningCode])
|
|
|
|
const resolvedAppUrl = useMemo(() => {
|
|
if (!config?.appUrl) return appUrl
|
|
const normalized = normalizeUrl(config.appUrl, appUrl)
|
|
if (import.meta.env.MODE === "production" && normalized.includes("localhost")) {
|
|
return appUrl
|
|
}
|
|
return normalized
|
|
}, [config?.appUrl])
|
|
|
|
async function register() {
|
|
if (!profile) return
|
|
const trimmedCode = provisioningCode.trim().toLowerCase()
|
|
if (trimmedCode.length < 32) {
|
|
setError("Informe o código de provisionamento fornecido pela equipe.")
|
|
return
|
|
}
|
|
if (!validatedCompany) {
|
|
setError("Valide o código de provisionamento antes de registrar a máquina.")
|
|
return
|
|
}
|
|
const normalizedEmail = collabEmail.trim().toLowerCase()
|
|
if (!normalizedEmail) {
|
|
setError("Informe o e-mail do colaborador vinculado a esta máquina.")
|
|
return
|
|
}
|
|
if (!emailRegex.current.test(normalizedEmail)) {
|
|
setError("Informe um e-mail válido (ex.: nome@empresa.com)")
|
|
return
|
|
}
|
|
const normalizedName = collabName.trim()
|
|
if (!normalizedName) {
|
|
setError("Informe o nome completo do colaborador.")
|
|
return
|
|
}
|
|
|
|
setBusy(true)
|
|
setError(null)
|
|
try {
|
|
const collaboratorPayload = {
|
|
email: normalizedEmail,
|
|
name: normalizedName,
|
|
}
|
|
const metadataPayload: Record<string, unknown> = {
|
|
inventory: profile.inventory,
|
|
metrics: profile.metrics,
|
|
collaborator: { email: normalizedEmail, name: normalizedName, role: "collaborator" },
|
|
}
|
|
|
|
const payload = {
|
|
provisioningCode: trimmedCode,
|
|
hostname: profile.hostname,
|
|
os: profile.os,
|
|
macAddresses: profile.macAddresses,
|
|
serialNumbers: profile.serialNumbers,
|
|
metadata: metadataPayload,
|
|
collaborator: collaboratorPayload,
|
|
registeredBy: "desktop-agent",
|
|
}
|
|
|
|
const res = await fetch(`${apiBaseUrl}/api/machines/register`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
})
|
|
if (!res.ok) {
|
|
const text = await res.text()
|
|
throw new Error(`Falha no registro (${res.status}): ${text.slice(0, 300)}`)
|
|
}
|
|
|
|
const data = (await res.json()) as MachineRegisterResponse
|
|
if (!store) throw new Error("Store ausente")
|
|
|
|
await writeToken(store, data.machineToken)
|
|
|
|
const cfg: AgentConfig = {
|
|
machineId: data.machineId,
|
|
tenantId: data.tenantId ?? validatedCompany.tenantId ?? null,
|
|
companySlug: data.companySlug ?? validatedCompany.slug ?? null,
|
|
companyName: validatedCompany.name,
|
|
machineEmail: data.machineEmail ?? null,
|
|
collaboratorEmail: collaboratorPayload.email,
|
|
collaboratorName: collaboratorPayload.name,
|
|
accessRole: "collaborator",
|
|
assignedUserId: data.assignedUserId ?? null,
|
|
assignedUserEmail: data.collaborator?.email ?? collaboratorPayload.email,
|
|
assignedUserName: data.collaborator?.name ?? collaboratorPayload.name,
|
|
apiBaseUrl,
|
|
appUrl,
|
|
createdAt: Date.now(),
|
|
lastSyncedAt: Date.now(),
|
|
expiresAt: data.expiresAt ?? null,
|
|
}
|
|
|
|
await writeConfig(store, cfg)
|
|
setConfig(cfg)
|
|
setToken(data.machineToken)
|
|
setCompanyName(validatedCompany.name)
|
|
|
|
await invoke("start_machine_agent", {
|
|
baseUrl: apiBaseUrl,
|
|
token: data.machineToken,
|
|
status: "online",
|
|
intervalSeconds: 300,
|
|
})
|
|
setStatus("online")
|
|
tokenVerifiedRef.current = true
|
|
|
|
// Abre o sistema imediatamente após registrar (evita ficar com token inválido no fluxo antigo)
|
|
try {
|
|
await fetch(`${apiBaseUrl}/api/machines/sessions`, {
|
|
method: "POST",
|
|
credentials: "include",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ machineToken: data.machineToken, rememberMe: true }),
|
|
})
|
|
} catch {}
|
|
const persona = (cfg.accessRole ?? "collaborator") === "manager" ? "manager" : "collaborator"
|
|
const redirectTarget = persona === "manager" ? "/dashboard" : "/portal/tickets"
|
|
const url = `${resolvedAppUrl}/machines/handshake?token=${encodeURIComponent(data.machineToken)}&redirect=${encodeURIComponent(redirectTarget)}`
|
|
window.location.href = url
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err))
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
const openSystem = useCallback(async () => {
|
|
if (!token) return
|
|
setIsLaunchingSystem(true)
|
|
try {
|
|
// Tenta criar a sessão via API (evita dependência de redirecionamento + cookies em 3xx)
|
|
const res = await fetch(`${apiBaseUrl}/api/machines/sessions`, {
|
|
method: "POST",
|
|
credentials: "include",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ machineToken: token, rememberMe: true }),
|
|
})
|
|
if (res.ok) {
|
|
const payload = await res.clone().json().catch(() => null)
|
|
if (payload && typeof payload === "object" && "machine" in payload) {
|
|
const machineData = (payload as { machine?: MachineStatePayload }).machine
|
|
if (machineData) {
|
|
const currentActive = resolveMachineActive(machineData)
|
|
setIsMachineActive(currentActive)
|
|
if (currentActive) {
|
|
setError(null)
|
|
}
|
|
if (!currentActive) {
|
|
setError("Esta máquina está desativada. Entre em contato com o suporte da Rever para reativar o acesso.")
|
|
setIsLaunchingSystem(false)
|
|
return
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
if (res.status === 423) {
|
|
const payload = await res.clone().json().catch(() => null)
|
|
const message =
|
|
payload && typeof payload === "object" && typeof (payload as { error?: unknown }).error === "string"
|
|
? ((payload as { error?: string }).error ?? "").trim()
|
|
: ""
|
|
setIsMachineActive(false)
|
|
setIsLaunchingSystem(false)
|
|
setError(message.length > 0 ? message : "Esta máquina está desativada. Entre em contato com o suporte da Rever.")
|
|
return
|
|
}
|
|
// Se sessão falhar, tenta identificar token inválido/expirado
|
|
try {
|
|
const hb = await fetch(`${apiBaseUrl}/api/machines/heartbeat`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ machineToken: token }),
|
|
})
|
|
if (!hb.ok) {
|
|
const text = await hb.text()
|
|
const low = text.toLowerCase()
|
|
const invalid =
|
|
low.includes("token de máquina inválido") ||
|
|
low.includes("token de máquina revogado") ||
|
|
low.includes("token de máquina expirado")
|
|
if (invalid) {
|
|
// Força onboarding
|
|
await store?.delete("token"); await store?.delete("config"); await store?.save()
|
|
autoLaunchRef.current = false
|
|
tokenVerifiedRef.current = false
|
|
setToken(null)
|
|
setConfig(null)
|
|
setStatus(null)
|
|
setIsMachineActive(true)
|
|
setError("Sessão expirada. Reprovisione a máquina para continuar.")
|
|
setIsLaunchingSystem(false)
|
|
const p = await invoke<MachineProfile>("collect_machine_profile")
|
|
setProfile(p)
|
|
return
|
|
}
|
|
}
|
|
} catch {
|
|
// ignora e segue para handshake
|
|
}
|
|
}
|
|
// Independente do resultado do POST, seguimos para o handshake em
|
|
// navegação de primeiro plano para garantir gravação de cookies.
|
|
} catch {
|
|
// ignoramos e seguimos para o handshake
|
|
}
|
|
const persona = (config?.accessRole ?? "collaborator") === "manager" ? "manager" : "collaborator"
|
|
// Envia para a página inicial apropriada após autenticar cookies/sessão
|
|
const redirectTarget = persona === "manager" ? "/dashboard" : "/portal/tickets"
|
|
const url = `${resolvedAppUrl}/machines/handshake?token=${encodeURIComponent(token)}&redirect=${encodeURIComponent(redirectTarget)}`
|
|
window.location.href = url
|
|
}, [token, config?.accessRole, resolvedAppUrl, store])
|
|
|
|
async function reprovision() {
|
|
if (!store) return
|
|
await store.delete("token"); await store.delete("config"); await store.save()
|
|
autoLaunchRef.current = false
|
|
setToken(null); setConfig(null); setStatus(null)
|
|
setProvisioningCode("")
|
|
setValidatedCompany(null)
|
|
setCodeStatus(null)
|
|
setCompanyName("")
|
|
setIsLaunchingSystem(false)
|
|
const p = await invoke<MachineProfile>("collect_machine_profile")
|
|
setProfile(p)
|
|
}
|
|
|
|
async function sendInventoryNow() {
|
|
if (!token || !profile) return
|
|
setBusy(true); setError(null)
|
|
try {
|
|
const collaboratorPayload = collabEmail.trim()
|
|
? { email: collabEmail.trim(), name: collabName.trim() || undefined }
|
|
: undefined
|
|
const collaboratorInventory = collaboratorPayload
|
|
? { ...collaboratorPayload, role: "collaborator" as const }
|
|
: undefined
|
|
const inventoryPayload: Record<string, unknown> = { ...profile.inventory }
|
|
if (collaboratorInventory) {
|
|
inventoryPayload.collaborator = collaboratorInventory
|
|
}
|
|
const payload = {
|
|
machineToken: token,
|
|
hostname: profile.hostname,
|
|
os: profile.os,
|
|
metrics: profile.metrics,
|
|
inventory: inventoryPayload,
|
|
}
|
|
const res = await fetch(`${apiBaseUrl}/api/machines/inventory`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
})
|
|
if (!res.ok) {
|
|
const text = await res.text()
|
|
throw new Error(`Falha ao enviar inventário (${res.status}): ${text.slice(0, 200)}`)
|
|
}
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err))
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
async function checkForUpdates(auto = false) {
|
|
try {
|
|
if (!auto) {
|
|
setUpdating(true)
|
|
setUpdateInfo({ tone: "info", message: "Procurando por atualizações..." })
|
|
}
|
|
const { check } = await import("@tauri-apps/plugin-updater")
|
|
type UpdateResult = {
|
|
available?: boolean
|
|
version?: string
|
|
downloadAndInstall?: () => Promise<void>
|
|
}
|
|
const update = (await check()) as UpdateResult | null
|
|
if (update?.available) {
|
|
setUpdateInfo({
|
|
tone: "info",
|
|
message: `Atualização ${update.version} disponível. Baixando e aplicando...`,
|
|
})
|
|
if (typeof update.downloadAndInstall === "function") {
|
|
await update.downloadAndInstall()
|
|
const { relaunch } = await import("@tauri-apps/plugin-process")
|
|
await relaunch()
|
|
}
|
|
} else if (!auto) {
|
|
setUpdateInfo({ tone: "info", message: "Nenhuma atualização disponível no momento." })
|
|
}
|
|
} catch (error) {
|
|
console.error("Falha ao verificar atualizações", error)
|
|
if (!auto) {
|
|
setUpdateInfo({
|
|
tone: "error",
|
|
message: "Falha ao verificar atualizações. Tente novamente mais tarde.",
|
|
})
|
|
}
|
|
} finally {
|
|
if (!auto) setUpdating(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (import.meta.env.DEV) return
|
|
if (autoUpdateRef.current) return
|
|
autoUpdateRef.current = true
|
|
checkForUpdates(true).catch((err: unknown) => {
|
|
console.error("Falha ao executar atualização automática", err)
|
|
})
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!token) return
|
|
if (autoLaunchRef.current) return
|
|
if (!tokenVerifiedRef.current) return
|
|
autoLaunchRef.current = true
|
|
setIsLaunchingSystem(true)
|
|
openSystem()
|
|
}, [token, status, config?.accessRole, openSystem, tokenValidationTick])
|
|
|
|
if (isLaunchingSystem && token) {
|
|
return (
|
|
<div className="min-h-screen grid place-items-center bg-slate-50 p-6">
|
|
<div className="flex flex-col items-center gap-3 rounded-2xl border border-slate-200 bg-white px-8 py-10 shadow-sm">
|
|
<Loader2 className="size-6 animate-spin text-neutral-700" />
|
|
<p className="text-sm font-medium text-neutral-800">Abrindo plataforma da Rever…</p>
|
|
<p className="text-xs text-neutral-500">Aguarde só um instante.</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen grid place-items-center p-6">
|
|
{token && !isMachineActive ? (
|
|
<DeactivationScreen companyName={companyName} />
|
|
) : (
|
|
<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
|
|
src={logoSrc}
|
|
alt="Logotipo Raven"
|
|
width={160}
|
|
height={160}
|
|
className="h-14 w-auto md:h-16"
|
|
onError={() => {
|
|
if (logoFallbackRef.current) return
|
|
logoFallbackRef.current = true
|
|
setLogoSrc(`${appUrl}/raven.png`)
|
|
}}
|
|
/>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<span className="text-xs uppercase tracking-[0.18em] text-neutral-500">Portal do Cliente</span>
|
|
<span className="text-2xl font-semibold text-neutral-900">Agente Desktop</span>
|
|
<StatusBadge status={status} />
|
|
</div>
|
|
</div>
|
|
{error ? <p className="mt-3 rounded-md bg-rose-50 p-2 text-sm text-rose-700">{error}</p> : null}
|
|
{!token ? (
|
|
<div className="mt-4 space-y-3">
|
|
<p className="text-sm text-slate-600">Informe os dados para registrar esta máquina.</p>
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">Código de provisionamento</label>
|
|
<div className="relative">
|
|
<input
|
|
className="w-full rounded-lg border border-slate-300 px-3 py-2 pr-9 text-sm"
|
|
type={showSecret ? "text" : "password"}
|
|
value={provisioningCode}
|
|
onChange={(e) => {
|
|
const value = e.target.value
|
|
setProvisioningCode(value)
|
|
setValidatedCompany(null)
|
|
setCodeStatus(null)
|
|
}}
|
|
/>
|
|
<button
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-600"
|
|
onClick={() => setShowSecret((v) => !v)}
|
|
aria-label="Mostrar/ocultar"
|
|
>
|
|
{showSecret ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
|
|
</button>
|
|
</div>
|
|
{isValidatingCode ? (
|
|
<p className="text-xs text-slate-500">Validando código...</p>
|
|
) : codeStatus ? (
|
|
<p
|
|
className={`text-xs font-medium ${
|
|
codeStatus.tone === "success" ? "text-emerald-600" : "text-rose-600"
|
|
}`}
|
|
>
|
|
{codeStatus.message}
|
|
</p>
|
|
) : (
|
|
<p className="text-xs text-slate-500">
|
|
Informe o código único fornecido pela equipe para vincular esta máquina a uma empresa.
|
|
</p>
|
|
)}
|
|
</div>
|
|
{validatedCompany ? (
|
|
<div className="flex items-start gap-3 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
|
|
<span className="mt-1 inline-flex size-2 rounded-full bg-emerald-500" aria-hidden="true" />
|
|
<div className="space-y-1">
|
|
<span className="block text-sm font-semibold text-emerald-800">{validatedCompany.name}</span>
|
|
<span className="text-xs text-emerald-700/80">
|
|
Código reconhecido. Esta máquina será vinculada automaticamente à empresa informada.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">
|
|
Colaborador (e-mail) <span className="text-rose-500">*</span>
|
|
</label>
|
|
<input
|
|
className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
|
|
type="email"
|
|
placeholder="colaborador@empresa.com"
|
|
value={collabEmail}
|
|
onChange={(e) => setCollabEmail(e.target.value)}
|
|
/>
|
|
{collabEmail && !isEmailValid ? (
|
|
<p className="text-xs text-rose-600">Informe um e-mail válido (ex.: nome@empresa.com)</p>
|
|
) : null}
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label className="text-sm font-medium">
|
|
Nome do colaborador <span className="text-rose-500">*</span>
|
|
</label>
|
|
<input
|
|
className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
|
|
placeholder="Nome completo"
|
|
value={collabName}
|
|
onChange={(e) => setCollabName(e.target.value)}
|
|
/>
|
|
</div>
|
|
{profile ? (
|
|
<div className="mt-2 grid grid-cols-2 gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3 text-xs">
|
|
<div>
|
|
<div className="text-slate-500">Hostname</div>
|
|
<div className="font-medium text-slate-900">{profile.hostname}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-slate-500">Sistema</div>
|
|
<div className="font-medium text-slate-900">{profile.os.name}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-slate-500">CPU</div>
|
|
<div className="font-medium text-slate-900">{pct(profile.metrics.cpuUsagePercent)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-slate-500">Memória</div>
|
|
<div className="font-medium text-slate-900">{bytes(profile.metrics.memoryUsedBytes)} / {bytes(profile.metrics.memoryTotalBytes)}</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
<div className="mt-2 flex gap-2">
|
|
<button disabled={busy || !validatedCompany || !isEmailValid || !collabName.trim() || provisioningCode.trim().length < 32} onClick={register} className="rounded-lg border border-black bg-black px-3 py-2 text-sm font-semibold text-white hover:bg-black/90 disabled:opacity-60">Registrar máquina</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="mt-4">
|
|
<Tabs defaultValue="resumo" className="w-full">
|
|
<TabsList className="h-10">
|
|
<TabsTrigger value="resumo" className="rounded-lg px-3">Resumo</TabsTrigger>
|
|
<TabsTrigger value="inventario" className="rounded-lg px-3">Inventário</TabsTrigger>
|
|
<TabsTrigger value="config" className="rounded-lg px-3">Configurações</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="resumo" className="mt-4">
|
|
{companyName ? (
|
|
<div className="mb-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-neutral-700 shadow-sm">
|
|
<div className="text-sm font-semibold text-neutral-900">{companyName}</div>
|
|
{config?.collaboratorEmail ? (
|
|
<div className="text-xs text-neutral-500">
|
|
Vinculado a {config.collaboratorEmail}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<div className="stat-card">
|
|
<div className="text-xs text-slate-500">CPU</div>
|
|
<div className="text-sm font-semibold text-slate-900">{profile ? pct(profile.metrics.cpuUsagePercent) : "—"}</div>
|
|
</div>
|
|
<div className="stat-card">
|
|
<div className="text-xs text-slate-500">Memória</div>
|
|
<div className="text-sm font-semibold text-slate-900">{profile ? `${bytes(profile.metrics.memoryUsedBytes)} / ${bytes(profile.metrics.memoryTotalBytes)}` : "—"}</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 flex gap-2">
|
|
<button onClick={openSystem} className="btn btn-primary inline-flex items-center gap-2">
|
|
<ExternalLink className="size-4"/> Abrir sistema
|
|
</button>
|
|
<button onClick={reprovision} className="btn btn-outline">Reprovisionar</button>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="inventario" className="mt-4 space-y-3">
|
|
<p className="text-sm text-slate-600">Inventário básico coletado localmente. Envie para sincronizar com o servidor.</p>
|
|
<div className="grid gap-2 sm:grid-cols-2">
|
|
<div className="card">
|
|
<div className="text-xs text-slate-500">Hostname</div>
|
|
<div className="text-sm font-semibold text-slate-900">{profile?.hostname ?? "—"}</div>
|
|
</div>
|
|
<div className="card">
|
|
<div className="text-xs text-slate-500">Sistema</div>
|
|
<div className="text-sm font-semibold text-slate-900">{profile?.os?.name ?? "—"} {profile?.os?.version ?? ""}</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<button disabled={busy} onClick={sendInventoryNow} className={cn("btn btn-primary", busy && "opacity-60")}>Enviar inventário agora</button>
|
|
<button onClick={openSystem} className="btn btn-outline">Ver no sistema</button>
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="config" className="mt-4 space-y-3">
|
|
<div className="grid gap-2">
|
|
<label className="label">
|
|
E-mail do colaborador <span className="text-rose-500">*</span>
|
|
</label>
|
|
<input className="input" placeholder="colaborador@empresa.com" value={collabEmail} onChange={(e)=>setCollabEmail(e.target.value)} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label className="label">Nome do colaborador (opcional)</label>
|
|
<input className="input" placeholder="Nome completo" value={collabName} onChange={(e)=>setCollabName(e.target.value)} />
|
|
</div>
|
|
<div className="grid gap-2">
|
|
<label className="label">Atualizações</label>
|
|
<button
|
|
onClick={() => checkForUpdates(false)}
|
|
disabled={updating}
|
|
className={cn("btn btn-outline inline-flex items-center gap-2", updating && "opacity-60")}
|
|
>
|
|
<RefreshCw className={cn("size-4", updating && "animate-spin")} /> Verificar atualizações
|
|
</button>
|
|
{updateInfo ? (
|
|
<div
|
|
className={cn(
|
|
"rounded-lg border px-3 py-2 text-sm leading-snug",
|
|
updateInfo.tone === "success" && "border-emerald-200 bg-emerald-50 text-emerald-700",
|
|
updateInfo.tone === "error" && "border-rose-200 bg-rose-50 text-rose-700",
|
|
updateInfo.tone === "info" && "border-slate-200 bg-slate-50 text-slate-700"
|
|
)}
|
|
>
|
|
{updateInfo.message}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StatusBadge({ status, className }: { status: string | null; className?: string }) {
|
|
const s = (status ?? "").toLowerCase()
|
|
const label = s === "online" ? "Online" : s === "offline" ? "Offline" : s === "maintenance" ? "Manutenção" : "Sem status"
|
|
const dot = s === "online" ? "bg-emerald-500" : s === "offline" ? "bg-rose-500" : s === "maintenance" ? "bg-amber-500" : "bg-slate-400"
|
|
const ring = s === "online" ? "bg-emerald-400/30" : s === "offline" ? "bg-rose-400/30" : s === "maintenance" ? "bg-amber-400/30" : "bg-slate-300/30"
|
|
const isOnline = s === "online"
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-flex h-8 items-center gap-3 rounded-full border border-slate-200 bg-white/80 px-3 text-sm font-medium text-neutral-600 shadow-sm",
|
|
className
|
|
)}
|
|
>
|
|
<span className="relative inline-flex items-center">
|
|
<span className={cn("size-2 rounded-full", dot)} />
|
|
{isOnline ? <span className={cn("absolute left-1/2 top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full animate-ping [animation-duration:2s]", ring)} /> : null}
|
|
</span>
|
|
{label}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
const root = document.getElementById("root") || (() => { const el = document.createElement("div"); el.id = "root"; document.body.appendChild(el); return el })()
|
|
createRoot(root).render(<App />)
|