ruicesar/subdominio.clube67.com
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: controle granular de DNS real-time da Hostinger e exclusao de subdominios

Browse Source
This commit is contained in:
VPS 4 Builder
2026-05-18 01:38:49 +02:00
parent ef77a36a95
commit 43576ee52d
2 changed files with 615 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+468 -108
View File
@@ -24,6 +24,13 @@ interface Subdomain {
favicon_url?: string;
}
interface DnsRecord {
name: string;
type: string;
ttl: number;
records: Array<{ content: string; is_disabled?: boolean }>;
}
export default function App() {
const [hasKey, setHasKey] = useState<boolean | null>(null);
const [apiKeyInput, setApiKeyInput] = useState('');
@@ -35,15 +42,29 @@ export default function App() {
// Navigation states
const [selectedDomain, setSelectedDomain] = useState<Domain | null>(null);
const [activeTab, setActiveTab] = useState<'subdomains' | 'dns'>('subdomains');
const [subdomains, setSubdomains] = useState<Subdomain[]>([]);
const [loadingSubdomains, setLoadingSubdomains] = useState(false);
const [editingBranding, setEditingBranding] = useState<Subdomain | null>(null);
// Form states
// Real-time DNS states
const [dnsRecords, setDnsRecords] = useState<DnsRecord[]>([]);
const [loadingDns, setLoadingDns] = useState(false);
const [dnsSearchQuery, setDnsSearchQuery] = useState('');
const [dnsFilterType, setDnsFilterType] = useState<string>('ALL');
// Subdomain Form states
const [newSubdomain, setNewSubdomain] = useState('');
const [newValue, setNewValue] = useState('');
const [creating, setCreating] = useState(false);
// Custom DNS Form states
const [dnsFormName, setDnsFormName] = useState('');
const [dnsFormType, setDnsFormType] = useState('A');
const [dnsFormValue, setDnsFormValue] = useState('');
const [dnsFormTtl, setDnsFormTtl] = useState(300);
const [addingDnsRecord, setAddingDnsRecord] = useState(false);
// Branding states
const [brandingForm, setBrandingForm] = useState({
title: '',
@@ -61,9 +82,13 @@ export default function App() {
useEffect(() => {
if (selectedDomain) {
fetchSubdomains(selectedDomain.id);
if (activeTab === 'subdomains') {
fetchSubdomains(selectedDomain.id);
} else {
fetchDnsRecords(selectedDomain.name);
}
}
}, [selectedDomain]);
}, [selectedDomain, activeTab]);
async function fetchConfig() {
try {
@@ -89,11 +114,11 @@ export default function App() {
if (r.ok) {
setHasKey(true);
setApiKeyInput('');
setSuccess('Chave API salva e configurada.');
setSuccess('Chave API Hostinger ativada com sucesso!');
fetchDomains();
} else {
const d = await r.json();
setError(d.error || 'Erro ao salvar chave.');
setError(d.error || 'Erro ao validar a chave API.');
}
} finally { setSaving(false); }
}
@@ -118,7 +143,7 @@ export default function App() {
const d = await r.json();
if (r.ok) {
setDomains(d.domains);
setSuccess('Sincronização concluída com sucesso!');
setSuccess('Domínios sincronizados com sucesso da Hostinger!');
} else {
setError(d.error || 'Erro na sincronização.');
}
@@ -154,7 +179,7 @@ export default function App() {
})
});
if (r.ok) {
setSuccess(`Subdomínio ${newSubdomain}.${selectedDomain.name} criado.`);
setSuccess(`Subdomínio ${newSubdomain}.${selectedDomain.name} criado e publicado na Hostinger!`);
setNewSubdomain('');
setNewValue('');
fetchSubdomains(selectedDomain.id);
@@ -165,6 +190,89 @@ export default function App() {
} finally { setCreating(false); }
}
async function deleteSubdomain(id: number, fullDomain: string) {
if (!confirm(`Tem certeza que deseja excluir o subdomínio ${fullDomain}? Esta ação removerá a entrada DNS na Hostinger e todas as configurações de identidade visual!`)) return;
setLoadingSubdomains(true);
setError('');
setSuccess('');
try {
const r = await fetch(`${API}/subdomains/${id}`, { method: 'DELETE' });
if (r.ok) {
setSuccess(`Subdomínio ${fullDomain} removido com sucesso.`);
if (selectedDomain) fetchSubdomains(selectedDomain.id);
} else {
const d = await r.json();
setError(d.error || 'Erro ao remover subdomínio.');
}
} finally { setLoadingSubdomains(false); }
}
// --- Real-time Hostinger DNS Operations ---
async function fetchDnsRecords(domainName: string) {
setLoadingDns(true);
try {
const r = await fetch(`${API}/domains/${domainName}/dns-records`);
if (r.ok) {
const d = await r.json();
setDnsRecords(d);
} else {
const d = await r.json();
setError(d.error || 'Erro ao buscar registros DNS em tempo real.');
}
} finally { setLoadingDns(false); }
}
async function addDnsRecord(e: React.FormEvent) {
e.preventDefault();
if (!selectedDomain || !dnsFormName || !dnsFormValue) return;
setAddingDnsRecord(true);
setError('');
setSuccess('');
try {
const r = await fetch(`${API}/domains/${selectedDomain.name}/dns-records`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
name: dnsFormName,
type: dnsFormType,
value: dnsFormValue,
ttl: dnsFormTtl
})
});
if (r.ok) {
setSuccess(`Registro DNS (${dnsFormType}) adicionado com sucesso na Hostinger!`);
setDnsFormName('');
setDnsFormValue('');
setDnsFormTtl(300);
fetchDnsRecords(selectedDomain.name);
} else {
const d = await r.json();
setError(d.error || 'Erro ao criar registro DNS.');
}
} finally { setAddingDnsRecord(false); }
}
async function deleteDnsRecord(name: string, type: string) {
if (!confirm(`Deseja remover o registro DNS (${type}) de "${name}" diretamente na Hostinger?`)) return;
setLoadingDns(true);
setError('');
setSuccess('');
try {
const r = await fetch(`${API}/domains/${selectedDomain!.name}/dns-records`, {
method: 'DELETE',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, type })
});
if (r.ok) {
setSuccess(`Registro DNS removido com sucesso da Hostinger.`);
fetchDnsRecords(selectedDomain!.name);
} else {
const d = await r.json();
setError(d.error || 'Erro ao remover registro DNS.');
}
} finally { setLoadingDns(false); }
}
function openBranding(sub: Subdomain) {
setEditingBranding(sub);
setBrandingForm({
@@ -179,6 +287,8 @@ export default function App() {
async function saveBranding() {
if (!editingBranding) return;
setError('');
setSuccess('');
try {
const r = await fetch(`${API}/branding/${editingBranding.id}`, {
method: 'PUT',
@@ -186,35 +296,59 @@ export default function App() {
body: JSON.stringify(brandingForm)
});
if (r.ok) {
setSuccess('Identidade visual atualizada!');
setSuccess('Identidade visual atualizada com sucesso!');
setEditingBranding(null);
if (selectedDomain) fetchSubdomains(selectedDomain.id);
} else {
const d = await r.json();
setError(d.error || 'Erro ao salvar identidade visual.');
}
} catch (e: any) {
setError(e.message);
}
}
// Helper placeholder for DNS values
const getDnsValuePlaceholder = () => {
switch (dnsFormType) {
case 'A': return 'ex: 158.220.109.237';
case 'AAAA': return 'ex: 2001:db8::1';
case 'CNAME': return 'ex: ghs.google.com';
case 'TXT': return 'ex: v=spf1 include:_spf.google.com ~all';
case 'MX': return 'ex: 10 mail.dominio.com';
default: return 'Valor / Destino';
}
};
// Filter and search logic for real-time DNS records
const filteredDnsRecords = dnsRecords.filter(rec => {
const matchesSearch = rec.name.toLowerCase().includes(dnsSearchQuery.toLowerCase()) ||
rec.records.some(r => r.content.toLowerCase().includes(dnsSearchQuery.toLowerCase()));
const matchesType = dnsFilterType === 'ALL' || rec.type === dnsFilterType;
return matchesSearch && matchesType;
});
return (
<div className="min-h-screen bg-[#05080a] text-gray-100 font-sans selection:bg-orange-500/30">
<div className="min-h-screen bg-[#05080a] text-gray-100 font-sans selection:bg-orange-500/30 pb-20">
{/* BACKGROUND DECORATION */}
<div className="fixed inset-0 overflow-hidden pointer-events-none">
<div className="absolute -top-24 -left-24 w-96 h-96 bg-orange-600/10 rounded-full blur-3xl" />
<div className="absolute top-1/2 -right-24 w-64 h-64 bg-blue-600/5 rounded-full blur-3xl" />
<div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
<div className="absolute -top-40 -left-40 w-[30rem] h-[30rem] bg-orange-600/10 rounded-full blur-[80px]" />
<div className="absolute top-1/3 right-0 w-96 h-96 bg-blue-600/5 rounded-full blur-[100px]" />
<div className="absolute bottom-0 left-1/4 w-[25rem] h-[25rem] bg-emerald-600/5 rounded-full blur-[90px]" />
</div>
<div className="max-w-7xl mx-auto px-6 py-10 relative">
<div className="max-w-7xl mx-auto px-6 py-10 relative z-10">
{/* HEADER */}
<header className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
<header className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12 border-b border-gray-900 pb-8">
<div className="flex items-center gap-5">
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center shadow-2xl shadow-orange-500/20 transform hover:rotate-12 transition-transform cursor-pointer">
<span className="font-black text-3xl text-white">S</span>
</div>
<div>
<h1 className="font-black text-3xl uppercase tracking-tighter text-white">Subdominio<span className="text-orange-500">.</span>Manager</h1>
<p className="text-gray-500 text-sm font-bold uppercase tracking-widest">Identidade Visual & DNS</p>
<p className="text-gray-500 text-xs font-bold uppercase tracking-widest">Controle de DNS e Identidade Visual</p>
</div>
</div>
@@ -225,7 +359,7 @@ export default function App() {
disabled={loadingDomains}
className="group flex items-center gap-3 bg-gray-900/50 hover:bg-orange-500 border border-gray-800 hover:border-orange-400 px-6 py-3 rounded-2xl transition-all"
>
<div className={`w-2 h-2 rounded-full ${loadingDomains ? 'bg-orange-400 animate-spin' : 'bg-green-500 group-hover:bg-white'}`} />
<div className={`w-2 h-2 rounded-full ${loadingDomains ? 'bg-orange-400 animate-pulse' : 'bg-green-500 group-hover:bg-white'}`} />
<span className="text-xs font-black uppercase tracking-widest group-hover:text-white">Sincronizar Hostinger</span>
</button>
)}
@@ -238,19 +372,23 @@ export default function App() {
{/* ALERTS */}
{(error || success) && (
<div className="mb-8 animate-in fade-in slide-in-from-top-4 duration-300">
{error && <div className="bg-red-500/10 border border-red-500/20 text-red-400 p-5 rounded-3xl text-sm font-bold">🚨 {error}</div>}
{success && <div className="bg-green-500/10 border border-green-500/20 text-green-400 p-5 rounded-3xl text-sm font-bold">✅ {success}</div>}
{error && <div className="bg-red-500/10 border border-red-500/20 text-red-400 p-5 rounded-3xl text-sm font-bold flex items-center gap-2"><span>🚨</span> {error}</div>}
{success && <div className="bg-green-500/10 border border-green-500/20 text-green-400 p-5 rounded-3xl text-sm font-bold flex items-center gap-2"><span>✅</span> {success}</div>}
</div>
)}
{/* API CONFIGURATION FALLBACK */}
{!hasKey && hasKey !== null && (
<div className="max-w-xl mx-auto bg-gray-900/40 border border-gray-800 rounded-[2.5rem] p-10 backdrop-blur-xl text-center">
<h2 className="text-xl font-black mb-6">Configuração da API</h2>
<p className="text-gray-400 text-sm mb-8">Insira sua chave de API da Hostinger para começar a gerenciar seus domínios e identidades visuais.</p>
<div className="max-w-xl mx-auto bg-gray-900/40 border border-gray-800 rounded-[2.5rem] p-10 backdrop-blur-xl text-center shadow-2xl mt-12">
<div className="w-16 h-16 rounded-full bg-orange-500/10 flex items-center justify-center mx-auto mb-6">
<span className="text-2xl">🔑</span>
</div>
<h2 className="text-2xl font-black mb-4 text-white">Configuração da API Hostinger</h2>
<p className="text-gray-400 text-sm mb-8 leading-relaxed">Insira sua chave de desenvolvedor API da Hostinger para gerenciar seus domínios, rotear subdomínios de Staging/Produção e controlar marcas visuais de forma automatizada.</p>
<div className="space-y-4">
<input
type="password"
placeholder="Token de API Hostinger..."
placeholder="Insira seu Token de API da Hostinger..."
value={apiKeyInput}
onChange={e => setApiKeyInput(e.target.value)}
className="w-full bg-gray-950/50 border border-gray-800 rounded-2xl px-6 py-5 text-sm focus:outline-none focus:border-orange-500 transition-all text-center"
@@ -258,9 +396,9 @@ export default function App() {
<button
onClick={saveKey}
disabled={saving || !apiKeyInput.trim()}
className="w-full bg-white text-black font-black py-5 rounded-2xl text-xs uppercase tracking-[0.2em] hover:bg-orange-500 hover:text-white transition-all disabled:opacity-20"
className="w-full bg-white text-black font-black py-5 rounded-2xl text-xs uppercase tracking-[0.2em] hover:bg-orange-500 hover:text-white transition-all disabled:opacity-20 shadow-xl"
>
{saving ? 'Validando...' : 'Ativar Sistema'}
{saving ? 'Validando credenciais...' : 'Ativar Roteador Central'}
</button>
</div>
</div>
@@ -272,8 +410,8 @@ 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">Selecione um Domínio</h2>
<div className="h-px bg-gray-800 flex-1 ml-6" />
<h2 className="text-xs font-black uppercase tracking-[0.3em] text-gray-500">Seus Domínios Sincronizados</h2>
<div className="h-px bg-gray-900 flex-1 ml-6" />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
@@ -294,14 +432,14 @@ export default function App() {
<div className={`w-10 h-10 rounded-xl mb-6 flex items-center justify-center font-black text-lg ${
selectedDomain?.id === dom.id ? 'bg-white text-orange-500' : 'bg-gray-800 text-gray-400 group-hover:text-orange-500'
}`}>
{dom.name.charAt(0).toUpperCase()}
🌐
</div>
<h3 className={`font-black text-lg leading-tight mb-2 ${selectedDomain?.id === dom.id ? 'text-white' : 'text-gray-200'}`}>
{dom.name}
</h3>
<p className={`text-[10px] font-bold uppercase tracking-widest ${selectedDomain?.id === dom.id ? 'text-orange-100' : 'text-gray-500'}`}>
ID: {dom.hostinger_id || 'LOCAL'}
ID: {dom.hostinger_id || 'EXCLUSIVO'}
</p>
</button>
))}
@@ -310,95 +448,317 @@ export default function App() {
{/* SELECTED DOMAIN VIEW */}
{selectedDomain && (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10 animate-in fade-in slide-in-from-bottom-8 duration-500">
<div className="space-y-8 animate-in fade-in slide-in-from-bottom-8 duration-500">
{/* SUBDOMAINS LIST */}
<div className="lg:col-span-8 space-y-6">
<div className="flex items-center justify-between">
<h2 className="text-xs font-black uppercase tracking-[0.3em] text-gray-500">Subdomínios de {selectedDomain.name}</h2>
<span className="bg-gray-900 border border-gray-800 px-3 py-1 rounded-full text-[10px] font-bold text-gray-400">
{subdomains.length} registros
</span>
{/* DOMAIN INTERFACE TABS */}
<div className="flex flex-col md:flex-row md:items-center justify-between border-b border-gray-900 pb-4 gap-4">
<div className="flex items-center gap-3">
<span className="text-2xl">⚡</span>
<h2 className="text-xl font-black text-white">{selectedDomain.name}</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{subdomains.map((sub) => (
<div key={sub.id} className="bg-gray-900/40 border border-gray-800 rounded-3xl p-6 hover:border-gray-700 transition-all group">
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-3">
{sub.logo_url ? (
<img src={sub.logo_url} className="w-10 h-10 rounded-xl object-cover bg-white" alt="Logo" />
) : (
<div className="w-10 h-10 rounded-xl bg-gray-800 flex items-center justify-center text-xs font-black text-gray-500">
{sub.subdomain.charAt(0).toUpperCase()}
<div className="flex bg-gray-950 p-1.5 rounded-2xl border border-gray-800">
<button
onClick={() => setActiveTab('subdomains')}
className={`flex items-center gap-2 px-6 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all ${
activeTab === 'subdomains'
? 'bg-orange-500 text-white shadow-lg'
: 'text-gray-400 hover:text-white'
}`}
>
🎨 Identidade & Subdomínios
</button>
<button
onClick={() => setActiveTab('dns')}
className={`flex items-center gap-2 px-6 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all ${
activeTab === 'dns'
? 'bg-orange-500 text-white shadow-lg'
: 'text-gray-400 hover:text-white'
}`}
>
☁️ DNS Real-Time (Hostinger)
</button>
</div>
</div>
{/* TAB 1: SUBDOMAINS & BRANDING */}
{activeTab === 'subdomains' && (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
{/* SUBDOMAINS LIST */}
<div className="lg:col-span-8 space-y-6">
<div className="flex items-center justify-between">
<h3 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500">Subdomínios Ativos no Banco</h3>
<span className="bg-gray-900 border border-gray-800 px-3 py-1 rounded-full text-[10px] font-bold text-gray-400">
{subdomains.length} registros salvos
</span>
</div>
{loadingSubdomains ? (
<div className="bg-gray-900/20 border border-gray-800 rounded-3xl p-12 text-center text-gray-500">
<div className="w-8 h-8 rounded-full border-2 border-t-orange-500 border-gray-800 animate-spin mx-auto mb-4" />
Carregando subdomínios...
</div>
) : subdomains.length === 0 ? (
<div className="bg-gray-900/20 border-2 border-dashed border-gray-800 rounded-3xl p-12 text-center text-gray-500">
Nenhum subdomínio configurado com identidade visual. Crie o primeiro ao lado!
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{subdomains.map((sub) => (
<div key={sub.id} className="bg-gray-900/40 border border-gray-800 rounded-3xl p-6 hover:border-gray-700 transition-all group relative overflow-hidden">
<div className="flex items-start justify-between mb-4 relative z-10">
<div className="flex items-center gap-3">
{sub.logo_url ? (
<img src={sub.logo_url} className="w-10 h-10 rounded-xl object-cover bg-white p-0.5 border border-gray-800" alt="Logo" />
) : (
<div className="w-10 h-10 rounded-xl bg-gray-800/80 flex items-center justify-center text-xs font-black text-gray-500 border border-gray-700">
{sub.subdomain.charAt(0).toUpperCase()}
</div>
)}
<div className="max-w-[170px] truncate">
<h4 className="font-black text-sm text-white truncate">{sub.full_domain}</h4>
<p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest truncate">Destino: {sub.value}</p>
</div>
</div>
<div className="flex gap-2">
<button
onClick={() => openBranding(sub)}
title="Identidade Visual"
className="w-8 h-8 rounded-lg bg-gray-800 hover:bg-orange-500 transition-colors flex items-center justify-center text-sm"
>
🎨
</button>
<button
onClick={() => deleteSubdomain(sub.id, sub.full_domain)}
title="Remover Subdomínio"
className="w-8 h-8 rounded-lg bg-gray-800 hover:bg-red-500 hover:text-white transition-colors flex items-center justify-center text-sm"
>
🗑️
</button>
</div>
</div>
)}
<div>
<h4 className="font-black text-sm text-white">{sub.full_domain}</h4>
<p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Aponta para: {sub.value}</p>
<div className="flex gap-2 mt-4 relative z-10">
<div className="h-1.5 flex-1 rounded-full" style={{ backgroundColor: sub.primary_color || '#FF6B00' }} />
<div className="h-1.5 flex-1 rounded-full" style={{ backgroundColor: sub.secondary_color || '#1A1A1A' }} />
</div>
</div>
))}
</div>
)}
</div>
{/* CREATE FORM */}
<div className="lg:col-span-4">
<div className="bg-gray-900/40 border border-gray-800 rounded-[2.5rem] p-8 sticky top-10 backdrop-blur-xl">
<h3 className="text-lg font-black text-white mb-2">Novo Subdomínio</h3>
<p className="text-gray-500 text-xs mb-6">Aponta o DNS na Hostinger e já cria o espaço no banco para marca visual.</p>
<form onSubmit={createSubdomain} className="space-y-6">
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Subdomínio (Prefixo)</label>
<div className="flex items-center bg-gray-950 border border-gray-800 rounded-2xl pr-5 overflow-hidden focus-within:border-orange-500 transition-all">
<input
placeholder="ex: staging"
value={newSubdomain}
onChange={e => setNewSubdomain(e.target.value)}
className="flex-1 bg-transparent px-5 py-4 text-sm focus:outline-none"
/>
<span className="text-xs font-bold text-gray-600">.{selectedDomain.name}</span>
</div>
</div>
<button
onClick={() => openBranding(sub)}
className="w-8 h-8 rounded-lg bg-gray-800 flex items-center justify-center hover:bg-orange-500 transition-colors"
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">IP de Destino (IPv4)</label>
<input
placeholder="ex: 158.220.109.237"
value={newValue}
onChange={e => setNewValue(e.target.value)}
className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500 transition-all"
/>
</div>
<button
type="submit"
disabled={creating || !newSubdomain || !newValue}
className="w-full bg-orange-500 text-white font-black py-5 rounded-2xl text-xs uppercase tracking-widest hover:bg-orange-600 shadow-xl shadow-orange-500/20 transition-all disabled:opacity-20"
>
🎨
{creating ? 'Criando Roteamento...' : 'Publicar e Cadastrar'}
</button>
</div>
<div className="flex gap-2">
<div className="h-1.5 flex-1 rounded-full" style={{ backgroundColor: sub.primary_color || '#FF6B00' }} />
<div className="h-1.5 flex-1 rounded-full" style={{ backgroundColor: sub.secondary_color || '#1A1A1A' }} />
</div>
</form>
</div>
))}
{/* ADD NEW BOX */}
<div className="border-2 border-dashed border-gray-800 rounded-3xl p-6 flex flex-col items-center justify-center text-center group hover:border-orange-500/50 transition-all">
<div className="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center mb-3 group-hover:bg-orange-500 transition-colors">
<span className="font-black text-gray-500 group-hover:text-white">+</span>
</div>
<p className="text-[10px] font-black uppercase tracking-widest text-gray-600">Novo Subdomínio</p>
</div>
</div>
</div>
{/* CREATE FORM */}
<div className="lg:col-span-4">
<div className="bg-gray-900/40 border border-gray-800 rounded-[2.5rem] p-8 sticky top-10 backdrop-blur-xl">
<h2 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500 mb-8">Criar Subdomínio</h2>
<form onSubmit={createSubdomain} className="space-y-6">
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Subdomínio</label>
<div className="flex items-center bg-gray-950 border border-gray-800 rounded-2xl pr-5 overflow-hidden focus-within:border-orange-500 transition-all">
</div>
)}
{/* TAB 2: REAL-TIME HOSTINGER DNS CONTROL */}
{activeTab === 'dns' && (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
{/* DNS RECORDS LIST TABLE */}
<div className="lg:col-span-8 space-y-6">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
<h3 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500">Tabela de DNS em Tempo Real</h3>
<div className="flex items-center gap-2">
<input
placeholder="ex: app"
value={newSubdomain}
onChange={e => setNewSubdomain(e.target.value)}
className="flex-1 bg-transparent px-5 py-4 text-sm focus:outline-none"
type="text"
placeholder="Buscar registros..."
value={dnsSearchQuery}
onChange={e => setDnsSearchQuery(e.target.value)}
className="bg-gray-950 border border-gray-800 rounded-xl px-4 py-2 text-xs focus:outline-none focus:border-orange-500 transition-all"
/>
<span className="text-xs font-bold text-gray-600">.{selectedDomain.name}</span>
</div>
</div>
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Destino (IPv4)</label>
<input
placeholder="0.0.0.0"
value={newValue}
onChange={e => setNewValue(e.target.value)}
className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500 transition-all"
/>
{/* PILL FILTERS */}
<div className="flex flex-wrap gap-2 border-b border-gray-900 pb-4">
{['ALL', 'A', 'CNAME', 'TXT', 'MX', 'NS', 'SRV'].map((type) => (
<button
key={type}
onClick={() => setDnsFilterType(type)}
className={`px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-wider transition-all ${
dnsFilterType === type
? 'bg-orange-500 text-white shadow-md'
: 'bg-gray-900/50 text-gray-500 hover:text-white border border-gray-800/80'
}`}
>
{type}
</button>
))}
</div>
<button
type="submit"
disabled={creating || !newSubdomain || !newValue}
className="w-full bg-orange-500 text-white font-black py-5 rounded-2xl text-xs uppercase tracking-widest hover:bg-orange-600 shadow-xl shadow-orange-500/20 transition-all disabled:opacity-20"
>
{creating ? 'Criando...' : 'Confirmar Registro'}
</button>
</form>
{loadingDns ? (
<div className="bg-gray-900/20 border border-gray-800 rounded-3xl p-12 text-center text-gray-500">
<div className="w-8 h-8 rounded-full border-2 border-t-orange-500 border-gray-800 animate-spin mx-auto mb-4" />
Consultando zona DNS na Hostinger...
</div>
) : filteredDnsRecords.length === 0 ? (
<div className="bg-gray-900/20 border border-gray-800 rounded-3xl p-12 text-center text-gray-500">
Nenhum registro DNS encontrado para os filtros selecionados.
</div>
) : (
<div className="bg-gray-900/30 border border-gray-800 rounded-3xl overflow-hidden shadow-xl backdrop-blur-md">
<div className="overflow-x-auto custom-scrollbar">
<table className="w-full text-left text-xs border-collapse">
<thead>
<tr className="border-b border-gray-800/80 bg-gray-900/60 font-black text-gray-400 uppercase tracking-widest">
<th className="p-4 pl-6">Nome / Host</th>
<th className="p-4">Tipo</th>
<th className="p-4">Conteúdo / Destino</th>
<th className="p-4">TTL</th>
<th className="p-4 text-center pr-6">Ações</th>
</tr>
</thead>
<tbody>
{filteredDnsRecords.map((rec, index) => (
<tr key={index} className="border-b border-gray-800/40 hover:bg-white/5 transition-colors">
<td className="p-4 pl-6 font-bold text-white max-w-[150px] truncate" title={rec.name}>
{rec.name}
</td>
<td className="p-4">
<span className={`px-2 py-1 rounded-md text-[9px] font-black uppercase ${
rec.type === 'A' ? 'bg-orange-500/10 text-orange-400' :
rec.type === 'CNAME' ? 'bg-blue-500/10 text-blue-400' :
rec.type === 'TXT' ? 'bg-emerald-500/10 text-emerald-400' :
'bg-gray-800 text-gray-400'
}`}>
{rec.type}
</span>
</td>
<td className="p-4 text-gray-300 font-mono max-w-[250px] truncate" title={rec.records.map(r=>r.content).join(', ')}>
{rec.records.map(r => r.content).join(', ')}
</td>
<td className="p-4 text-gray-500">
{rec.ttl}s
</td>
<td className="p-4 text-center pr-6">
<button
onClick={() => deleteDnsRecord(rec.name, rec.type)}
className="w-7 h-7 bg-gray-800 hover:bg-red-500/20 hover:text-red-400 rounded-lg transition-all flex items-center justify-center mx-auto text-xs"
title="Remover Registro DNS"
>
🗑️
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
)}
</div>
{/* QUICK ADD DNS RECORD */}
<div className="lg:col-span-4">
<div className="bg-gray-900/40 border border-gray-800 rounded-[2.5rem] p-8 sticky top-10 backdrop-blur-xl">
<h3 className="text-lg font-black text-white mb-2">Novo Apontamento</h3>
<p className="text-gray-500 text-xs mb-6">Adiciona qualquer tipo de registro DNS em tempo real na Hostinger.</p>
<form onSubmit={addDnsRecord} className="space-y-6">
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Tipo de Registro</label>
<select
value={dnsFormType}
onChange={e => setDnsFormType(e.target.value)}
className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500 transition-all text-white cursor-pointer"
>
<option value="A">A (Roteia para IPv4)</option>
<option value="AAAA">AAAA (Roteia para IPv6)</option>
<option value="CNAME">CNAME (Aponta para outro domínio)</option>
<option value="TXT">TXT (Texto / Verificações)</option>
<option value="MX">MX (Servidor de E-mail)</option>
</select>
</div>
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Nome / Host</label>
<div className="flex items-center bg-gray-950 border border-gray-800 rounded-2xl pr-5 overflow-hidden focus-within:border-orange-500 transition-all">
<input
placeholder="ex: staging ou @ (principal)"
value={dnsFormName}
onChange={e => setDnsFormName(e.target.value)}
className="flex-1 bg-transparent px-5 py-4 text-sm focus:outline-none"
/>
<span className="text-xs font-bold text-gray-600">.{selectedDomain.name}</span>
</div>
</div>
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Conteúdo / Destino</label>
<input
placeholder={getDnsValuePlaceholder()}
value={dnsFormValue}
onChange={e => setDnsFormValue(e.target.value)}
className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500 transition-all"
/>
</div>
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">TTL (Segundos)</label>
<input
type="number"
placeholder="300"
value={dnsFormTtl}
onChange={e => setDnsFormTtl(parseInt(e.target.value) || 300)}
className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500 transition-all"
/>
</div>
<button
type="submit"
disabled={addingDnsRecord || !dnsFormName || !dnsFormValue}
className="w-full bg-orange-500 text-white font-black py-5 rounded-2xl text-xs uppercase tracking-widest hover:bg-orange-600 shadow-xl shadow-orange-500/20 transition-all disabled:opacity-20"
>
{addingDnsRecord ? 'Adicionando Registro...' : 'Salvar na Hostinger'}
</button>
</form>
</div>
</div>
</div>
</div>
)}
</div>
)}
@@ -417,7 +777,7 @@ export default function App() {
<button onClick={() => setEditingBranding(null)} className="text-gray-500 hover:text-white transition-colors text-2xl font-black">×</button>
</div>
<div className="p-8 grid grid-cols-1 md:grid-cols-2 gap-8 max-h-[70vh] overflow-y-auto custom-scrollbar">
<div className="p-8 grid grid-cols-1 md:grid-cols-2 gap-8 max-h-[60vh] overflow-y-auto custom-scrollbar">
<div className="space-y-6">
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-600">Título da Página</label>
@@ -428,7 +788,7 @@ export default function App() {
/>
</div>
<div className="space-y-2">
<label className="text-[10px] font-black uppercase tracking-widest text-gray-600">Descrição (Meta)</label>
<label className="text-[10px] font-black uppercase tracking-widest text-gray-600">Descrição (Meta Tag)</label>
<textarea
rows={3}
value={brandingForm.description}
@@ -478,11 +838,11 @@ export default function App() {
{/* PREVIEW */}
<div className="p-4 bg-gray-950 border border-gray-800 rounded-3xl mt-4">
<p className="text-[10px] font-black uppercase tracking-widest text-gray-700 mb-3 text-center">Preview</p>
<div className="flex items-center gap-3 p-3 bg-white/5 rounded-2xl border border-white/5">
<div className="w-8 h-8 rounded-lg" style={{ backgroundColor: brandingForm.primary_color }} />
<div className="w-8 h-8 rounded-lg" style={{ backgroundColor: brandingForm.secondary_color }} />
<span className="text-[10px] font-bold text-gray-400">Paleta de Cores</span>
<p className="text-[10px] font-black uppercase tracking-widest text-gray-700 mb-3 text-center">Visualização Prévia</p>
<div className="flex items-center gap-3 p-3 bg-white/5 rounded-2xl border border-white/5 justify-center">
<div className="w-8 h-8 rounded-lg shadow-md" style={{ backgroundColor: brandingForm.primary_color }} />
<div className="w-8 h-8 rounded-lg shadow-md" style={{ backgroundColor: brandingForm.secondary_color }} />
<span className="text-[10px] font-bold text-gray-400">Paleta Ativa</span>
</div>
</div>
</div>
@@ -509,7 +869,7 @@ export default function App() {
</div>
<style>{`
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 10px; }
`}</style>