Marketing/4ventures-client-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tema claro blanco, logo 4Ventures y menú original

Browse Source 
Fondo blanco en la app; menú con labels/iconos originales; logo en sidebar y login.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
4Ventures
2026-09-24 09:53:36 +02:00
parent 6d1602bd68
commit 068faa3d25
33 changed files with 642 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/ClientManagement.tsx
View File

@@ -149,11 +149,11 @@ Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`
};
return (
<div className="bg-[#111827] border border-gray-800 rounded-xl overflow-hidden shadow-xl">
<div className="bg-white border border-gray-200 rounded-xl overflow-hidden shadow-xl">
{/* Table Header with Action Button */}
<div className="p-5 border-b border-gray-800 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div className="p-5 border-b border-gray-200 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h3 className="text-base font-bold text-white flex items-center gap-2">
<h3 className="text-base font-bold text-gray-900 flex items-center gap-2">
<Building2 className="w-4 h-4 text-brand-400" />
Cartera de Clientes Activos ({tenants.length})
</h3>
@@ -178,8 +178,8 @@ Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`
{/* Tenants Table */}
<div className="overflow-x-auto">
<table className="w-full text-left text-sm text-gray-300">
<thead className="bg-gray-900/50 text-xs uppercase text-gray-400 border-b border-gray-800">
<table className="w-full text-left text-sm text-gray-600">
<thead className="bg-gray-900/50 text-xs uppercase text-gray-400 border-b border-gray-200">
<tr>
<th className="px-5 py-3">Nombre del Cliente</th>
<th className="px-5 py-3">Tenant Slug</th>
@@ -190,8 +190,8 @@ Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`
</thead>
<tbody className="divide-y divide-gray-800/60">
{tenants.map((t) => (
<tr key={t.id} className="hover:bg-gray-800/30 transition-colors">
<td className="px-5 py-3.5 font-semibold text-white flex items-center gap-2">
<tr key={t.id} className="hover:bg-gray-50/30 transition-colors">
<td className="px-5 py-3.5 font-semibold text-gray-900 flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-emerald-400" />
{t.name}
</td>
@@ -219,21 +219,21 @@ Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`
{/* Modal: Onboard New Client */}
{isOpen && (
<div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
<div className="bg-[#0D121F] border border-gray-800 rounded-2xl w-full max-w-lg overflow-hidden shadow-2xl relative animate-in fade-in zoom-in duration-200">
<div className="bg-white border border-gray-200 rounded-2xl w-full max-w-lg overflow-hidden shadow-2xl relative animate-in fade-in zoom-in duration-200">
{/* Modal Header */}
<div className="p-6 border-b border-gray-800 flex items-center justify-between">
<div className="p-6 border-b border-gray-200 flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-xl bg-brand-500/10 border border-brand-500/20 flex items-center justify-center text-brand-400">
<Building2 className="w-5 h-5" />
</div>
<div>
<h3 className="text-lg font-bold text-white">Alta de Nuevo Cliente</h3>
<h3 className="text-lg font-bold text-gray-900">Alta de Nuevo Cliente</h3>
<p className="text-xs text-gray-400">Crea el portal corporativo y activa sus credenciales de acceso</p>
</div>
</div>
<button
onClick={() => setIsOpen(false)}
className="text-gray-400 hover:text-white p-1 rounded-lg hover:bg-gray-800/60 transition-colors"
className="text-gray-400 hover:text-gray-900 p-1 rounded-lg hover:bg-gray-100 transition-colors"
>
<X className="w-5 h-5" />
</button>
@@ -254,18 +254,18 @@ Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`
</div>
</div>
<div className="bg-gray-900/80 rounded-xl p-4 border border-gray-800 space-y-2.5 font-mono text-xs">
<div className="flex justify-between border-b border-gray-800 pb-2">
<div className="bg-gray-50 rounded-xl p-4 border border-gray-200 space-y-2.5 font-mono text-xs">
<div className="flex justify-between border-b border-gray-200 pb-2">
<span className="text-gray-400">Empresa:</span>
<span className="text-white font-semibold">{createdClient.company}</span>
<span className="text-gray-900 font-semibold">{createdClient.company}</span>
</div>
<div className="flex justify-between border-b border-gray-800 pb-2">
<div className="flex justify-between border-b border-gray-200 pb-2">
<span className="text-gray-400">URL Acceso:</span>
<span className="text-brand-400">https://app.4ventures.es/login</span>
</div>
<div className="flex justify-between border-b border-gray-800 pb-2">
<div className="flex justify-between border-b border-gray-200 pb-2">
<span className="text-gray-400">Email:</span>
<span className="text-white">{createdClient.email}</span>
<span className="text-gray-900">{createdClient.email}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-400">Contraseña:</span>
@@ -290,7 +290,7 @@ Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`
setCreatedClient(null);
generateRandomPassword();
}}
className="py-2.5 px-4 rounded-xl bg-gray-800 hover:bg-gray-700 text-gray-200 text-xs font-semibold transition-all cursor-pointer"
className="py-2.5 px-4 rounded-xl bg-gray-100 hover:bg-gray-700 text-gray-800 text-xs font-semibold transition-all cursor-pointer"
>
Crear Otro
</button>
@@ -306,7 +306,7 @@ Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`
)}
<div>
<label className="block text-xs font-medium text-gray-300 mb-1">
<label className="block text-xs font-medium text-gray-600 mb-1">
Nombre Comercial de la Empresa / Cliente
</label>
<div className="relative">
@@ -317,14 +317,14 @@ Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`
placeholder="Ej: Clínica Dental Sonrisas"
value={companyName}
onChange={(e) => handleNameChange(e.target.value)}
className="w-full pl-9 pr-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-brand-500"
className="w-full pl-9 pr-3 py-2 bg-gray-900 border border-gray-200 rounded-lg text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-brand-500"
/>
</div>
</div>
<div>
<div className="flex justify-between items-center mb-1">
<label className="text-xs font-medium text-gray-300">
<label className="text-xs font-medium text-gray-600">
Slug del Tenant (identificador para subdominio y URL)
</label>
<button
@@ -344,12 +344,12 @@ Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`
setAutoSlug(false);
setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''));
}}
className="w-full px-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-sm font-mono text-brand-400 placeholder-gray-500 focus:outline-none focus:border-brand-500"
className="w-full px-3 py-2 bg-gray-900 border border-gray-200 rounded-lg text-sm font-mono text-brand-400 placeholder-gray-500 focus:outline-none focus:border-brand-500"
/>
</div>
<div>
<label className="block text-xs font-medium text-gray-300 mb-1">
<label className="block text-xs font-medium text-gray-600 mb-1">
Correo Electrónico de Acceso
</label>
<div className="relative">
@@ -360,14 +360,14 @@ Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`
placeholder="director@cliente.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full pl-9 pr-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-sm text-white placeholder-gray-500 focus:outline-none focus:border-brand-500"
className="w-full pl-9 pr-3 py-2 bg-gray-900 border border-gray-200 rounded-lg text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-brand-500"
/>
</div>
</div>
<div>
<div className="flex justify-between items-center mb-1">
<label className="text-xs font-medium text-gray-300">
<label className="text-xs font-medium text-gray-600">
Contraseña Inicial
</label>
<button
@@ -385,19 +385,19 @@ Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`
required
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full pl-9 pr-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-sm font-mono text-white placeholder-gray-500 focus:outline-none focus:border-brand-500"
className="w-full pl-9 pr-3 py-2 bg-gray-900 border border-gray-200 rounded-lg text-sm font-mono text-gray-900 placeholder-gray-500 focus:outline-none focus:border-brand-500"
/>
</div>
</div>
<div>
<label className="block text-xs font-medium text-gray-300 mb-1">
<label className="block text-xs font-medium text-gray-600 mb-1">
Rol de Acceso
</label>
<select
value={role}
onChange={(e: any) => setRole(e.target.value)}
className="w-full px-3 py-2 bg-gray-900 border border-gray-800 rounded-lg text-sm text-white focus:outline-none focus:border-brand-500"
className="w-full px-3 py-2 bg-gray-900 border border-gray-200 rounded-lg text-sm text-gray-900 focus:outline-none focus:border-brand-500"
>
<option value="client">Cliente (Acceso exclusivo a su portal y métricas)</option>
<option value="team">Equipo Agencia (Acceso a toda la cartera)</option>
@@ -405,11 +405,11 @@ Este portal cuenta con aislamiento de datos cifrado y métricas en tiempo real.`
</select>
</div>
<div className="pt-3 flex items-center justify-end gap-3 border-t border-gray-800">
<div className="pt-3 flex items-center justify-end gap-3 border-t border-gray-200">
<button
type="button"
onClick={() => setIsOpen(false)}
className="px-4 py-2 rounded-lg text-xs font-semibold text-gray-400 hover:text-white hover:bg-gray-800 transition-all cursor-pointer"
className="px-4 py-2 rounded-lg text-xs font-semibold text-gray-400 hover:text-gray-900 hover:bg-gray-50 transition-all cursor-pointer"
>
Cancelar
</button>