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
+118
-9
@@ -42,7 +42,7 @@ export default function App() {
|
|||||||
|
|
||||||
// Navigation states
|
// Navigation states
|
||||||
const [selectedDomain, setSelectedDomain] = useState<Domain | null>(null);
|
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 [subdomains, setSubdomains] = useState<Subdomain[]>([]);
|
||||||
const [loadingSubdomains, setLoadingSubdomains] = useState(false);
|
const [loadingSubdomains, setLoadingSubdomains] = useState(false);
|
||||||
const [editingBranding, setEditingBranding] = useState<Subdomain | null>(null);
|
const [editingBranding, setEditingBranding] = useState<Subdomain | null>(null);
|
||||||
@@ -364,7 +364,7 @@ export default function App() {
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<div className="bg-gray-900/50 border border-gray-800 px-4 py-3 rounded-2xl">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
@@ -410,15 +410,27 @@ export default function App() {
|
|||||||
{/* DOMAIN CARDS GRID */}
|
{/* DOMAIN CARDS GRID */}
|
||||||
<section>
|
<section>
|
||||||
<div className="flex items-center justify-between mb-8">
|
<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" />
|
<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>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||||
{domains.map((dom) => (
|
{domains
|
||||||
<button
|
.filter((dom) => !selectedDomain || selectedDomain.id === dom.id)
|
||||||
key={dom.id}
|
.map((dom) => (
|
||||||
onClick={() => setSelectedDomain(dom)}
|
<button
|
||||||
|
key={dom.id}
|
||||||
|
onClick={() => setSelectedDomain(dom)}
|
||||||
className={`group relative overflow-hidden p-8 rounded-[2rem] border transition-all text-left ${
|
className={`group relative overflow-hidden p-8 rounded-[2rem] border transition-all text-left ${
|
||||||
selectedDomain?.id === dom.id
|
selectedDomain?.id === dom.id
|
||||||
? 'bg-orange-500 border-orange-400 shadow-2xl shadow-orange-500/20'
|
? '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'
|
: 'text-gray-400 hover:text-white'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
🎨 Identidade & Subdomínios
|
🎨 Identidade
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setActiveTab('dns')}
|
onClick={() => setActiveTab('dns')}
|
||||||
@@ -476,7 +488,17 @@ export default function App() {
|
|||||||
: 'text-gray-400 hover:text-white'
|
: '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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -760,6 +782,93 @@ export default function App() {
|
|||||||
</div>
|
</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>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user