From 011f35ee8b9a42b7ffad17efe5c15ebaef998dfd Mon Sep 17 00:00:00 2001
From: VPS 4 Builder <deploy@clube67.com>
Date: Mon, 18 May 2026 01:57:23 +0200
Subject: [PATCH] feat(ui): display clean version, hide unselected domains on
 selection with back navigation, and add aid explanation tab

---
 frontend/src/App.tsx | 127 ++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 118 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7467c7f..66b4660 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -42,7 +42,7 @@ export default function App() {
 
   // Navigation states
   const [selectedDomain, setSelectedDomain] = useState<Domain | null>(null);
-  const [activeTab, setActiveTab] = useState<'subdomains' | 'dns'>('subdomains');
+  const [activeTab, setActiveTab] = useState<'subdomains' | 'dns' | 'help'>('subdomains');
   const [subdomains, setSubdomains] = useState<Subdomain[]>([]);
   const [loadingSubdomains, setLoadingSubdomains] = useState(false);
   const [editingBranding, setEditingBranding] = useState<Subdomain | null>(null);
@@ -364,7 +364,7 @@ export default function App() {
               </button>
             )}
             <div className="bg-gray-900/50 border border-gray-800 px-4 py-3 rounded-2xl">
-              <span className="text-[10px] font-black text-gray-500 uppercase tracking-widest">v{APP_VERSION}</span>
+              <span className="text-[10px] font-black text-gray-500 uppercase tracking-widest">{APP_VERSION.toLowerCase()}</span>
             </div>
           </div>
         </header>
@@ -410,15 +410,27 @@ export default function App() {
             {/* DOMAIN CARDS GRID */}
             <section>
               <div className="flex items-center justify-between mb-8">
-                <h2 className="text-xs font-black uppercase tracking-[0.3em] text-gray-500">Seus Domínios Sincronizados</h2>
+                <h2 className="text-xs font-black uppercase tracking-[0.3em] text-gray-500">
+                  {selectedDomain ? 'Domínio Selecionado' : 'Seus Domínios Sincronizados'}
+                </h2>
                 <div className="h-px bg-gray-900 flex-1 ml-6" />
+                {selectedDomain && (
+                  <button
+                    onClick={() => setSelectedDomain(null)}
+                    className="ml-6 px-4 py-2.5 bg-gray-950 hover:bg-orange-500/10 border border-gray-800 hover:border-orange-500/30 text-[10px] font-black uppercase tracking-widest text-gray-400 hover:text-orange-500 rounded-xl transition-all flex items-center gap-2"
+                  >
+                    <span>⬅</span> Voltar para a Lista
+                  </button>
+                )}
               </div>
               
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-                {domains.map((dom) => (
-                  <button
-                    key={dom.id}
-                    onClick={() => setSelectedDomain(dom)}
+                {domains
+                  .filter((dom) => !selectedDomain || selectedDomain.id === dom.id)
+                  .map((dom) => (
+                    <button
+                      key={dom.id}
+                      onClick={() => setSelectedDomain(dom)}
                     className={`group relative overflow-hidden p-8 rounded-[2rem] border transition-all text-left ${
                       selectedDomain?.id === dom.id 
                         ? 'bg-orange-500 border-orange-400 shadow-2xl shadow-orange-500/20' 
@@ -466,7 +478,7 @@ export default function App() {
                           : 'text-gray-400 hover:text-white'
                       }`}
                     >
-                      🎨 Identidade & Subdomínios
+                      🎨 Identidade
                     </button>
                     <button
                       onClick={() => setActiveTab('dns')}
@@ -476,7 +488,17 @@ export default function App() {
                           : 'text-gray-400 hover:text-white'
                       }`}
                     >
-                      ☁️ DNS Real-Time (Hostinger)
+                      ☁️ DNS Real-Time
+                    </button>
+                    <button
+                      onClick={() => setActiveTab('help')}
+                      className={`flex items-center gap-2 px-6 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all ${
+                        activeTab === 'help' 
+                          ? 'bg-orange-500 text-white shadow-lg' 
+                          : 'text-gray-400 hover:text-white'
+                      }`}
+                    >
+                      📖 Central de Ajuda
                     </button>
                   </div>
                 </div>
@@ -760,6 +782,93 @@ export default function App() {
                   </div>
                 )}
 
+                {/* TAB 3: HELP & USER GUIDE */}
+                {activeTab === 'help' && (
+                  <div className="bg-gray-900/20 border border-gray-800 rounded-[2.5rem] p-10 backdrop-blur-xl space-y-10 animate-in fade-in slide-in-from-bottom-8 duration-500">
+                    <div>
+                      <h3 className="text-2xl font-black text-white mb-2">📖 Central de Ajuda & Guia do Administrador</h3>
+                      <p className="text-gray-400 text-sm leading-relaxed">
+                        Entenda o funcionamento de cada módulo e descubra como o **Subdominio.Manager** integra o banco de dados PostgreSQL com a API Real-Time de DNS da Hostinger.
+                      </p>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                      {/* CARD 1: IDENTIDADE & SUBDOMÍNIOS */}
+                      <div className="bg-gray-950/60 border border-gray-900 rounded-[2rem] p-8 space-y-6 hover:border-orange-500/20 transition-all group">
+                        <div className="w-12 h-12 rounded-2xl bg-orange-500/10 flex items-center justify-center text-xl font-bold group-hover:scale-110 transition-transform">
+                          🎨
+                        </div>
+                        <div>
+                          <h4 className="text-lg font-black text-white mb-3">🎨 Identidade & Subdomínios</h4>
+                          <p className="text-gray-400 text-sm leading-relaxed mb-4">
+                            Este módulo gerencia a persistência local da sua rede Clube67 e as marcas visuais dos seus subdomínios (multitenancy).
+                          </p>
+                          <ul className="space-y-3 text-xs font-bold text-gray-400">
+                            <li className="flex items-center gap-2">
+                              <span className="text-orange-500">✔</span> Banco PostgreSQL Local (Sync permanente)
+                            </li>
+                            <li className="flex items-center gap-2">
+                              <span className="text-orange-500">✔</span> Cores da marca (Primária & Secundária)
+                            </li>
+                            <li className="flex items-center gap-2">
+                              <span className="text-orange-500">✔</span> Logo, Título, Descrição e Favicon integrados
+                            </li>
+                            <li className="flex items-center gap-2">
+                              <span className="text-orange-500">✔</span> Auto-criação automática de entrada DNS na Hostinger
+                            </li>
+                            <li className="flex items-center gap-2">
+                              <span className="text-orange-500">✔</span> **Exclusão Sincronizada:** Exclui do banco e remove a DNS na API
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+
+                      {/* CARD 2: DNS REAL-TIME */}
+                      <div className="bg-gray-950/60 border border-gray-900 rounded-[2rem] p-8 space-y-6 hover:border-orange-500/20 transition-all group">
+                        <div className="w-12 h-12 rounded-2xl bg-orange-500/10 flex items-center justify-center text-xl font-bold group-hover:scale-110 transition-transform">
+                          ☁️
+                        </div>
+                        <div>
+                          <h4 className="text-lg font-black text-white mb-3">☁️ DNS Real-Time (Hostinger)</h4>
+                          <p className="text-gray-400 text-sm leading-relaxed mb-4">
+                            Um console completo conectado diretamente à API oficial da Hostinger para gerenciar a zona DNS de forma instantânea.
+                          </p>
+                          <ul className="space-y-3 text-xs font-bold text-gray-400">
+                            <li className="flex items-center gap-2">
+                              <span className="text-orange-500">✔</span> Listagem de registros da zona Hostinger em tempo real
+                            </li>
+                            <li className="flex items-center gap-2">
+                              <span className="text-orange-500">✔</span> Busca inteligente por nome de host ou conteúdo
+                            </li>
+                            <li className="flex items-center gap-2">
+                              <span className="text-orange-500">✔</span> Filtro rápido (ALL, A, CNAME, TXT, MX, NS)
+                            </li>
+                            <li className="flex items-center gap-2">
+                              <span className="text-orange-500">✔</span> Criação instantânea de qualquer tipo de registro
+                            </li>
+                            <li className="flex items-center gap-2">
+                              <span className="text-orange-500">✔</span> Remoção limpa na Hostinger com clique único
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* DICA DE FLUXO DE TRABALHO */}
+                    <div className="bg-orange-500/5 border border-orange-500/10 p-6 rounded-3xl flex flex-col md:flex-row items-center gap-4 text-left">
+                      <div className="w-10 h-10 rounded-2xl bg-orange-500/10 flex items-center justify-center text-lg shrink-0">
+                        💡
+                      </div>
+                      <div>
+                        <h5 className="text-xs font-black text-white uppercase tracking-wider mb-1">Dica de Fluxo para Novos Subdomínios</h5>
+                        <p className="text-gray-400 text-xs leading-relaxed">
+                          Para criar um novo tenant cliente com identidade visual, use sempre a aba **🎨 Identidade**. O sistema criará a marca no banco PostgreSQL e publicará o apontamento DNS correspondente de uma só vez. Use a aba **☁️ DNS Real-Time** apenas para gerenciar configurações globais de rede e servidores de e-mail (MX, TXT).
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
               </div>
             )}
           </div>