From bdb92c4135cebe821ba06df08fa95767845e00be Mon Sep 17 00:00:00 2001
From: Jonas Pacheco <jonaspachecoometas@github.com>
Date: Wed, 8 Apr 2026 14:26:32 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20adicionar=20m=C3=B3dulo=20Metaset=20com?=
 =?UTF-8?q?o=20iframe=20interno?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cria página Metaset.tsx com iframe embutido
- Adiciona rota /metaset no App.tsx
- Adiciona item na navbar após Engenharia
- Mantém navegação suave sem sair da aplicação
- Inclui loading state e fallback para erro de iframe
---
 client/src/App.tsx                            |  2 +
 .../src/components/Browser/BrowserFrame.tsx   | 12 ++-
 client/src/pages/Metaset.tsx                  | 77 +++++++++++++++++++
 3 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 client/src/pages/Metaset.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index b1b4d76..0dbf8d3 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -48,6 +48,7 @@ const TechnicalModule = lazy(() => import("@/pages/TechnicalModule"));
 const SuppliersPortal = lazy(() => import("@/pages/SuppliersPortal"));
 const NPSSurvey = lazy(() => import("@/pages/NPSSurvey"));
 const EngineeringHub = lazy(() => import("@/pages/EngineeringHub"));
+const Metaset = lazy(() => import("@/pages/Metaset"));
 const DocTypeBuilder = lazy(() => import("@/pages/DocTypeBuilder"));
 const PageBuilder = lazy(() => import("@/pages/PageBuilder"));
 const DevelopmentModule = lazy(() => import("@/pages/DevelopmentModule"));
@@ -123,6 +124,7 @@ function Router() {
       <ProtectedRoute path="/suppliers" component={SuppliersPortal} />
       <ProtectedRoute path="/nps" component={NPSSurvey} />
       <ProtectedRoute path="/engineering" component={EngineeringHub} />
+      <ProtectedRoute path="/metaset" component={Metaset} />
       <ProtectedRoute path="/development" component={DevelopmentModule} />
       <ProtectedRoute path="/retail" component={ArcadiaRetail} />
       <ProtectedRoute path="/plus" component={() => { const [, nav] = useLocation(); useEffect(() => nav("/soe"), []); return null; }} />
diff --git a/client/src/components/Browser/BrowserFrame.tsx b/client/src/components/Browser/BrowserFrame.tsx
index fbbe621..bc8ad9f 100644
--- a/client/src/components/Browser/BrowserFrame.tsx
+++ b/client/src/components/Browser/BrowserFrame.tsx
@@ -1,6 +1,6 @@
 import { useLocation } from "wouter";
 import React, { useEffect } from "react";
-import { Bot, Settings, MessageCircle, Zap, LayoutDashboard, Compass, Users, Ticket, LogOut, User, Shield, Receipt, Package, Rocket, Beaker, TrendingUp, MapPin, Droplets, Star, Database, Layout, Code, Code2, Store, Layers } from "lucide-react";
+import { Bot, Settings, MessageCircle, Zap, LayoutDashboard, Compass, Users, Ticket, LogOut, User, Shield, Receipt, Package, Rocket, Beaker, TrendingUp, MapPin, Droplets, Star, Database, Layout, Code, Code2, Store, Layers, BarChart3 } from "lucide-react";
 import browserIcon from "@assets/arcadia_branding/arcadia_suite_icon.png";
 import { useAuth } from "@/hooks/use-auth";
 import { useNavigationTracking } from "@/hooks/use-navigation-tracking";
@@ -171,6 +171,16 @@ function CompactNavigationBar() {
           </div>
           <span className="hidden md:inline">Engenharia</span>
         </div>
+        <div 
+          className="flex items-center gap-1 hover:bg-muted px-2 py-1.5 rounded cursor-pointer transition-colors flex-shrink-0"
+          onClick={() => navigateTo("/metaset", "Metaset")}
+          data-testid="bookmark-metaset"
+        >
+          <div className="w-4 h-4 bg-gradient-to-br from-green-500 to-emerald-700 rounded-sm flex items-center justify-center">
+            <BarChart3 className="w-2.5 h-2.5 text-white" />
+          </div>
+          <span className="hidden md:inline text-green-600 font-medium">Metaset</span>
+        </div>
       </div>
       
       <div className="flex items-center gap-2 flex-shrink-0 border-l pl-3 ml-2">
diff --git a/client/src/pages/Metaset.tsx b/client/src/pages/Metaset.tsx
new file mode 100644
index 0000000..9493454
--- /dev/null
+++ b/client/src/pages/Metaset.tsx
@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { Loader2, AlertCircle, ExternalLink } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+
+export default function Metaset() {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  return (
+    <div className="h-[calc(100vh-40px)] w-full flex flex-col bg-background">
+      {/* Header do módulo */}
+      <div className="h-10 border-b flex items-center px-4 justify-between bg-muted/30">
+        <div className="flex items-center gap-2">
+          <span className="font-semibold text-sm">Metaset BI</span>
+        </div>
+        <Button variant="ghost" size="sm" asChild>
+          <a 
+            href="https://bi.onboardbi.com.br/" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="flex items-center gap-1"
+          >
+            <ExternalLink className="w-3 h-3" />
+            Abrir em nova aba
+          </a>
+        </Button>
+      </div>
+
+      {/* Container do iframe */}
+      <div className="flex-1 relative">
+        {isLoading && (
+          <div className="absolute inset-0 flex items-center justify-center bg-background z-10">
+            <div className="flex flex-col items-center gap-2">
+              <Loader2 className="w-8 h-8 animate-spin text-primary" />
+              <span className="text-sm text-muted-foreground">Carregando Metaset...</span>
+            </div>
+          </div>
+        )}
+
+        {hasError ? (
+          <div className="absolute inset-0 flex items-center justify-center p-4">
+            <Alert variant="destructive" className="max-w-md">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>
+                Não foi possível carregar o Metaset. O site pode não permitir embed em iframe.
+                <div className="mt-4">
+                  <Button asChild>
+                    <a 
+                      href="https://bi.onboardbi.com.br/" 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                    >
+                      Abrir Metaset em nova aba
+                    </a>
+                  </Button>
+                </div>
+              </AlertDescription>
+            </Alert>
+          </div>
+        ) : (
+          <iframe
+            src="https://bi.onboardbi.com.br/"
+            className="w-full h-full border-0"
+            onLoad={() => setIsLoading(false)}
+            onError={() => {
+              setIsLoading(false);
+              setHasError(true);
+            }}
+            sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+            title="Metaset BI"
+          />
+        )}
+      </div>
+    </div>
+  );
+}