import { BrowserFrame } from "@/components/Browser/BrowserFrame"; import { useState } from "react"; import { useLocation } from "wouter"; import { useQuery } from "@tanstack/react-query"; import { Input } from "@/components/ui/input"; import { Card, CardContent } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Lock, Search, ShoppingCart, GraduationCap, Store, FileText, Calculator, BarChart3, MessageSquare, Users, Bot, Compass, Wrench, Package, ClipboardCheck, Building, Beaker, Code, Layers, Settings, Star, ArrowRight, Database, Server, Terminal, Layout, Blocks, ThumbsUp, UserCircle, Shield, Zap, Globe, Briefcase, PenTool, HardDrive, Workflow, } from "lucide-react"; interface AppItem { id: string; name: string; description: string; icon: React.ReactNode; route: string; category: string; status: "active" | "coming_soon" | "beta"; featured?: boolean; color: string; subscriptionCode?: string; // marketplace module code — if set, requires active subscription } const apps: AppItem[] = [ // Negócios { id: "marketplace", name: "Marketplace", description: "Loja de módulos e extensões do Arcádia Suite", icon: , route: "/marketplace", category: "negocios", status: "active", featured: true, color: "from-purple-500 to-pink-500", }, { id: "retail", name: "Arcádia Retail", description: "PDV, vendas e gestão de lojas", icon: , route: "/retail", category: "negocios", status: "active", featured: true, color: "from-orange-500 to-red-500", }, { id: "erp", name: "Arcádia ERP", description: "Gestão empresarial completa integrada ao ERPNext", icon: , route: "/erp", category: "negocios", status: "active", featured: true, color: "from-blue-500 to-cyan-500", }, { id: "crm", name: "CRM", description: "Gestão de relacionamento com clientes", icon: , route: "/crm", category: "negocios", status: "active", color: "from-green-500 to-emerald-500", }, // Finanças { id: "fisco", name: "Arcádia Fisco", description: "Emissão de NF-e, NFC-e e gestão fiscal", icon: , route: "/fisco", category: "financas", status: "active", featured: true, color: "from-indigo-500 to-violet-500", }, { id: "financeiro", name: "Financeiro", description: "Contas a pagar, receber e fluxo de caixa", icon: , route: "/financeiro", category: "financas", status: "active", color: "from-emerald-500 to-teal-500", }, { id: "contabil", name: "Contábil", description: "Lançamentos e relatórios contábeis", icon: , route: "/contabil", category: "financas", status: "active", color: "from-slate-500 to-zinc-500", }, // Inteligência { id: "insights", name: "Arcádia Insights", description: "Business Intelligence e dashboards", icon: , route: "/insights", category: "inteligencia", status: "active", featured: true, color: "from-cyan-500 to-blue-500", }, { id: "agent", name: "Manus AI", description: "Agente autônomo com inteligência artificial", icon: , route: "/agent", category: "inteligencia", status: "active", color: "from-violet-500 to-purple-500", }, { id: "scientist", name: "Scientist", description: "Auto-programação e análise de dados com IA", icon: , route: "/scientist", category: "inteligencia", status: "active", color: "from-pink-500 to-rose-500", }, { id: "knowledge", name: "Knowledge Graph", description: "Base de conhecimento semântica", icon: , route: "/knowledge", category: "inteligencia", status: "active", color: "from-amber-500 to-orange-500", }, // Comunicação { id: "xos", name: "XOS", description: "Experience Operating System - Marketing, Vendas e Atendimento", icon: , route: "/xos", category: "comunicacao", status: "active", featured: true, color: "from-blue-600 to-indigo-600", }, { id: "whatsapp", name: "WhatsApp", description: "Central de atendimento via WhatsApp", icon: , route: "/whatsapp", category: "comunicacao", status: "active", color: "from-green-500 to-emerald-500", }, { id: "chat", name: "Chat Interno", description: "Comunicação entre equipes", icon: , route: "/chat", category: "comunicacao", status: "active", color: "from-blue-500 to-indigo-500", }, // Educação { id: "lms", name: "Arcádia LMS", description: "Cursos e treinamentos online", icon: , route: "/lms", category: "educacao", status: "active", featured: true, color: "from-indigo-500 to-purple-500", }, // Operações { id: "quality", name: "Qualidade ISO", description: "Gestão da qualidade e ISO 17025", icon: , route: "/quality", category: "operacoes", status: "active", color: "from-teal-500 to-cyan-500", }, { id: "field-ops", name: "Operações de Campo", description: "Gestão de equipes em campo", icon: , route: "/field-ops", category: "operacoes", status: "active", color: "from-lime-500 to-green-500", }, { id: "production", name: "Produção", description: "Gestão de produção e manufatura", icon: , route: "/production", category: "operacoes", status: "active", color: "from-gray-500 to-slate-500", }, { id: "suppliers", name: "Portal Fornecedores", description: "Gestão de fornecedores e homologação", icon: , route: "/suppliers", category: "operacoes", status: "active", color: "from-amber-500 to-yellow-500", }, // Desenvolvimento { id: "ide", name: "IDE", description: "Ambiente de desenvolvimento integrado", icon: , route: "/ide", category: "desenvolvimento", status: "active", color: "from-slate-600 to-gray-600", }, { id: "development", name: "Dev Module", description: "Ferramentas de desenvolvimento", icon: , route: "/development", category: "desenvolvimento", status: "active", color: "from-zinc-600 to-neutral-600", }, // Consultoria { id: "compass", name: "Process Compass", description: "Mapeamento e otimização de processos", icon: , route: "/compass", category: "consultoria", status: "active", color: "from-rose-500 to-pink-500", }, { id: "support", name: "Suporte", description: "Central de suporte e tickets", icon: , route: "/support", category: "consultoria", status: "active", color: "from-sky-500 to-blue-500", }, // Administração { id: "migration", name: "Migração XOS", description: "Importação de dados de sistemas legados", icon: , route: "/migration", category: "administracao", status: "active", featured: true, color: "from-cyan-600 to-teal-600", }, { id: "plus", name: "Arcádia Plus", description: "ERP completo em Laravel com NF-e, PDV e integrações", icon: , route: "/plus", category: "negocios", status: "active", featured: true, color: "from-violet-600 to-purple-600", }, { id: "super-admin", name: "Super Admin", description: "Painel administrativo master", icon: , route: "/super-admin", category: "administracao", status: "active", color: "from-red-600 to-rose-600", }, // APIs e Integrações { id: "api-hub", name: "API Hub", description: "Central de APIs e documentação", icon: , route: "/api-hub", category: "desenvolvimento", status: "active", color: "from-blue-600 to-indigo-600", }, { id: "central-apis", name: "Central APIs", description: "Gerenciamento de endpoints e integrações", icon: , route: "/central-apis", category: "desenvolvimento", status: "active", color: "from-teal-600 to-cyan-600", }, { id: "api-tester", name: "API Tester", description: "Testador de APIs com requisições HTTP", icon: , route: "/api-tester", category: "desenvolvimento", status: "active", color: "from-green-600 to-emerald-600", }, // Ferramentas de Desenvolvimento { id: "doctype-builder", name: "DocType Builder", description: "Construtor visual de tipos de documento", icon: , route: "/doctype-builder", category: "desenvolvimento", status: "active", color: "from-orange-600 to-amber-600", }, { id: "page-builder", name: "Page Builder", description: "Construtor visual de páginas e formulários", icon: , route: "/page-builder", category: "desenvolvimento", status: "active", color: "from-pink-600 to-rose-600", }, { id: "engineering", name: "Engineering Hub", description: "Hub de engenharia e projetos técnicos", icon: , route: "/engineering", category: "desenvolvimento", status: "active", color: "from-indigo-600 to-blue-600", }, // Mais Módulos de Negócios { id: "valuation", name: "Valuation", description: "Avaliação e valorização de ativos", icon: , route: "/valuation", category: "financas", status: "active", color: "from-yellow-600 to-amber-600", }, { id: "commercial-env", name: "Ambiente Comercial", description: "Gestão do ambiente comercial", icon: , route: "/commercial-env", category: "negocios", status: "active", color: "from-lime-600 to-green-600", }, // Mais Operações { id: "technical", name: "Assistência Técnica", description: "Ordens de serviço e manutenção", icon: , route: "/technical", category: "operacoes", status: "active", color: "from-slate-600 to-gray-600", }, // Mais Inteligência { id: "automations", name: "Automações", description: "Workflows e automações de processos", icon: , route: "/automations", category: "inteligencia", status: "active", color: "from-purple-600 to-violet-600", }, { id: "canvas", name: "Canvas", description: "Quadros visuais e brainstorming", icon: , route: "/canvas", category: "inteligencia", status: "active", color: "from-rose-600 to-pink-600", }, // Mais Comunicação { id: "communities", name: "Comunidades", description: "Gestão de comunidades e grupos", icon: , route: "/communities", category: "comunicacao", status: "active", color: "from-indigo-600 to-purple-600", }, { id: "nps", name: "Pesquisa NPS", description: "Net Promoter Score e satisfação", icon: , route: "/nps", category: "comunicacao", status: "active", color: "from-emerald-600 to-teal-600", }, { id: "people", name: "Pessoas", description: "Gestão unificada de contatos e stakeholders", icon: , route: "/people", category: "negocios", status: "active", color: "from-blue-600 to-cyan-600", }, ]; const categories = [ { id: "todos", label: "Todos os Apps", icon: }, { id: "negocios", label: "Negócios", icon: }, { id: "financas", label: "Finanças", icon: }, { id: "inteligencia", label: "Inteligência", icon: }, { id: "comunicacao", label: "Comunicação", icon: }, { id: "educacao", label: "Educação", icon: }, { id: "operacoes", label: "Operações", icon: }, { id: "desenvolvimento", label: "Desenvolvimento", icon: }, { id: "consultoria", label: "Consultoria", icon: }, { id: "administracao", label: "Administração", icon: }, ]; export default function AppCenter() { const [, setLocation] = useLocation(); const [searchTerm, setSearchTerm] = useState(""); const [activeCategory, setActiveCategory] = useState("todos"); const { data: myAppsData } = useQuery<{ subscribedCodes: string[] }>({ queryKey: ["/api/marketplace/my-apps"], staleTime: 60_000, }); const subscribedCodes = new Set(myAppsData?.subscribedCodes || []); const isLocked = (app: AppItem) => !!app.subscriptionCode && subscribedCodes.size > 0 && !subscribedCodes.has(app.subscriptionCode); const handleAppClick = (app: AppItem) => { if (isLocked(app)) { setLocation("/marketplace"); } else { setLocation(app.route); } }; const filteredApps = apps.filter(app => { const matchesSearch = app.name.toLowerCase().includes(searchTerm.toLowerCase()) || app.description.toLowerCase().includes(searchTerm.toLowerCase()); const matchesCategory = activeCategory === "todos" || app.category === activeCategory; return matchesSearch && matchesCategory; }); const featuredApps = apps.filter(app => app.featured); return (
{/* Header */}

Central de Apps

Todos os aplicativos do Arcádia Suite em um só lugar

{/* Search */}
setSearchTerm(e.target.value)} className="pl-12 py-6 text-lg bg-white/10 border-white/20 text-white placeholder:text-slate-400 rounded-xl" data-testid="input-search-apps" />
{/* Featured Apps */} {!searchTerm && activeCategory === "todos" && (

Apps em Destaque

{featuredApps.map(app => ( handleAppClick(app)} data-testid={`featured-app-${app.id}`} >
{app.icon}

{app.name}

))}
)} {/* Categories */} {categories.map(cat => ( {cat.icon} {cat.label} ))}
{filteredApps.map(app => { const locked = isLocked(app); return ( handleAppClick(app)} data-testid={`app-card-${app.id}`} >
{app.icon} {locked && (
)}

{app.name}

{locked && ( Não contratado )} {!locked && app.status === "beta" && ( Beta )} {!locked && app.status === "coming_soon" && ( Em breve )}

{app.description}

{locked ? ( Ver no Marketplace ) : ( Abrir )}
); })}
{filteredApps.length === 0 && (

Nenhum app encontrado

Tente buscar por outro termo

)}
{/* Stats */}

{apps.length}

Apps Disponíveis

{categories.length - 1}

Categorias

{apps.filter(a => a.status === "active").length}

Apps Ativos

); }