Changes

2026-02-27 00:41:06 +00:00
parent dc6b44fef9
commit 1cc84fb1f1
10 changed files with 3183 additions and 112 deletions
@@ -1,12 +1,132 @@
-// Update this page (the content is just a fallback if you fail to update the page)
+import { useEffect, useRef, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Upload, Glasses, CheckCircle, XCircle, Loader2, Box } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useModelStore } from '@/stores/useModelStore';
+import { toast } from 'sonner';

 const Index = () => {
+  const navigate = useNavigate();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { model, setModel, xrSupported, setXrSupported } = useModelStore();
+
+  useEffect(() => {
+    if (navigator.xr) {
+      navigator.xr.isSessionSupported('immersive-ar').then(setXrSupported).catch(() => setXrSupported(false));
+    } else {
+      setXrSupported(false);
+    }
+  }, [setXrSupported]);
+
+  const handleFileUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (!file.name.toLowerCase().endsWith('.glb')) {
+      toast.error('Formato inválido. Por favor, selecione um arquivo .GLB');
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setModel({ fileName: file.name, fileSize: file.size, url });
+    toast.success(`Modelo "${file.name}" carregado com sucesso!`);
+  }, [setModel]);
+
+  const handleEnterViewer = () => {
+    if (!model) {
+      toast.error('Importe um modelo GLB primeiro');
+      return;
+    }
+    navigate('/viewer');
+  };
+
  return (
-    <div className="flex min-h-screen items-center justify-center bg-background">
-      <div className="text-center">
-        <h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
-        <p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background grid-industrial p-6">
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".glb"
+        className="hidden"
+        onChange={handleFileUpload}
+      />
+
+      {/* Logo area */}
+      <div className="mb-12 text-center">
+        <div className="mb-4 flex items-center justify-center gap-3">
+          <Box className="h-10 w-10 text-primary" />
+          <h1 className="text-3xl font-bold tracking-tight text-foreground md:text-4xl">
+            TrackkSteel<span className="text-primary">XR</span>
+          </h1>
+        </div>
+        <p className="font-mono text-sm uppercase tracking-widest text-muted-foreground">
+          Inspeção de Qualidade Industrial
+        </p>
      </div>
+
+      {/* Main card */}
+      <div className="w-full max-w-md space-y-4">
+        {/* Import button */}
+        <Button
+          variant="outline"
+          className="h-28 w-full flex-col gap-3 border-dashed border-2 text-muted-foreground hover:border-primary hover:text-primary transition-all"
+          onClick={() => fileInputRef.current?.click()}
+        >
+          <Upload className="h-8 w-8" />
+          <div className="text-center">
+            <p className="text-sm font-semibold">Importar Modelo GLB</p>
+            <p className="text-xs text-muted-foreground">Escala 1:1 — Unidades em mm</p>
+          </div>
+        </Button>
+
+        {/* Model info */}
+        {model && (
+          <div className="rounded-lg border border-primary/30 bg-primary/5 p-4 glow-primary">
+            <div className="flex items-center gap-3">
+              <Box className="h-5 w-5 text-primary" />
+              <div className="min-w-0 flex-1">
+                <p className="truncate font-mono text-sm font-medium text-foreground">{model.fileName}</p>
+                <p className="text-xs text-muted-foreground">
+                  {(model.fileSize / (1024 * 1024)).toFixed(2)} MB
+                </p>
+              </div>
+              <CheckCircle className="h-5 w-5 text-success shrink-0" />
+            </div>
+          </div>
+        )}
+
+        {/* Enter viewer */}
+        <Button
+          className="h-14 w-full gap-3 text-base font-semibold glow-primary"
+          disabled={!model}
+          onClick={handleEnterViewer}
+        >
+          <Glasses className="h-5 w-5" />
+          Visualizar Modelo 3D
+        </Button>
+
+        {/* XR Status */}
+        <div className="flex items-center justify-center gap-2 pt-2">
+          {xrSupported === null ? (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+              <span className="text-xs text-muted-foreground">Verificando suporte WebXR…</span>
+            </>
+          ) : xrSupported ? (
+            <>
+              <CheckCircle className="h-4 w-4 text-success" />
+              <span className="text-xs text-success">WebXR Compatível — Passthrough disponível</span>
+            </>
+          ) : (
+            <>
+              <XCircle className="h-4 w-4 text-destructive" />
+              <span className="text-xs text-destructive">WebXR não disponível neste navegador</span>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <p className="mt-16 text-center font-mono text-xs text-muted-foreground/50">
+        TrackkSteelXR v1.0 — Advance Steel Inspection
+      </p>
    </div>
  );
 };