feat(ui): display clean version, hide unselected domains on selection with back navigation, and add aid explanation tab
This commit is contained in:
VPS 4 Builder
+115
-6
@@ -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,12 +410,24 @@ 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) => (
|
||||
{domains
|
||||
.filter((dom) => !selectedDomain || selectedDomain.id === dom.id)
|
||||
.map((dom) => (
|
||||
<button
|
||||
key={dom.id}
|
||||
onClick={() => setSelectedDomain(dom)}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user