admin(machines): add resilient fallback for details page

- Keep Convex useQuery for machines.getById
- Add HTTP fallback via /api/admin/machines/[id]/details if query stays loading (>1.2s)
- Helps when websocket/convex-react doesn’t initialize and avoids permanent skeleton

src/app/api/admin/machines/[id]/details/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server"
+import type { Id } from "@/convex/_generated/dataModel"
+import { api } from "@/convex/_generated/api"
+import { createConvexClient, ConvexConfigurationError } from "@/server/convex-client"
+
+export const dynamic = "force-dynamic"
+
+export async function GET(_req: Request, { params }: { params: { id: string } }) {
+  try {
+    const client = createConvexClient()
+    const id = params.id as Id<"machines">
+    const data = (await client.query(api.machines.getById, { id, includeMetadata: true })) as unknown
+    if (!data) return NextResponse.json({ error: "Not found" }, { status: 404 })
+    return NextResponse.json(data, { status: 200 })
+  } catch (err) {
+    if (err instanceof ConvexConfigurationError) {
+      return NextResponse.json({ error: err.message }, { status: 500 })
+    }
+    console.error("[api] admin/machines/[id]/details error", err)
+    return NextResponse.json({ error: "Internal error" }, { status: 500 })
+  }
+}
+

src/components/admin/machines/admin-machine-details.client.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useMemo } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import { useQuery } from "convex/react"
 import { api } from "@/convex/_generated/api"
 import {
@@ -20,11 +20,37 @@ export function AdminMachineDetailsClient({ tenantId, machineId }: { tenantId: s
     | Record<string, unknown>
     | null
     | undefined
+
+  // Fallback via HTTP in caso de o Convex React demorar/ficar preso em loading
+  const [fallback, setFallback] = useState<Record<string, unknown> | null>(null)
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const shouldLoad = single === undefined && !fallback && Boolean(machineId)
+
+  useEffect(() => {
+    if (!shouldLoad) return
+    timer.current = setTimeout(async () => {
+      try {
+        const res = await fetch(`/api/admin/machines/${machineId}/details`, { credentials: "include" })
+        if (res.ok) {
+          const data = (await res.json()) as Record<string, unknown>
+          setFallback(data)
+        }
+      } catch {
+        // ignore
+      }
+    }, 1200)
+    return () => {
+      if (timer.current) clearTimeout(timer.current)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shouldLoad, machineId])
+
   const machine: MachinesQueryItem | null = useMemo(() => {
-    if (single === undefined || single === null) return single as null
+    const source = single ?? fallback
-    return normalizeMachineItem(single)
+    if (source === undefined || source === null) return source as null
-  }, [single])
+    return normalizeMachineItem(source)
-  const isLoading = single === undefined
+  }, [single, fallback])
+  const isLoading = single === undefined && !fallback
 
   if (isLoading) {
     return (