204 lines
14 KiB
TypeScript
204 lines
14 KiB
TypeScript
import { getEntity, updateEntity } from '@/app/actions/entity';
|
|
import { Building, Image as ImageIcon, Link as LinkIcon, Share2, Tv, RadioTower, Facebook, Instagram, Twitter, Youtube, Send, Mail, Globe, MapPin, Phone, MessageSquare } from 'lucide-react';
|
|
import { createSessionClient } from '@/lib/appwrite.server';
|
|
import { APPWRITE_ALMEIRA_CONFIG } from '@/lib/appwrite';
|
|
import EntityLogoField from '@/components/dashboard/EntityLogoField';
|
|
|
|
export default async function EntityPage() {
|
|
let entity: any = null;
|
|
let cities: any[] = [];
|
|
|
|
try {
|
|
entity = await getEntity();
|
|
|
|
const sessionClient = await createSessionClient();
|
|
if (sessionClient) {
|
|
const citiesRes = await sessionClient.databases.listDocuments(
|
|
APPWRITE_ALMEIRA_CONFIG.databaseId,
|
|
'cities',
|
|
[]
|
|
);
|
|
cities = citiesRes.documents;
|
|
}
|
|
} catch (e) {
|
|
console.error("No se pudo cargar la información de la entidad o ciudades:", e);
|
|
}
|
|
|
|
async function updateEntityClient(formData: FormData) {
|
|
'use server';
|
|
await updateEntity(formData);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-5xl mx-auto space-y-6 animate-fade-in pb-12">
|
|
<div className="flex items-center gap-4 bg-slate-900 border border-slate-800 p-6 rounded-2xl shadow-xl shadow-cyan-500/5">
|
|
<div className="p-3 bg-blue-500/10 rounded-xl text-blue-400">
|
|
<Building size={32} />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-3xl font-black font-outfit uppercase tracking-tighter text-white">
|
|
Perfil de Entidad
|
|
</h1>
|
|
<p className="text-sm font-medium text-slate-400 font-bold uppercase tracking-wider">Identidad Corporativa, Contacto y Canales</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form action={updateEntityClient} className="bg-slate-900 border border-slate-800 p-8 rounded-2xl shadow-2xl space-y-8">
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
{/* Identidad de Marca */}
|
|
<div className="space-y-6">
|
|
<h3 className="text-lg font-bold text-white flex items-center gap-2 border-b border-slate-800 pb-2"><ImageIcon size={18} className="text-cyan-400" /> Identidad Visual</h3>
|
|
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Razón Social / Nombre Entidad *</label>
|
|
<input
|
|
type="text"
|
|
name="razon_social"
|
|
defaultValue={entity?.razon_social || ''}
|
|
required
|
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-white focus:border-cyan-500 transition-all font-medium"
|
|
/>
|
|
</div>
|
|
|
|
<EntityLogoField initialUrl={entity?.logotipo || ''} />
|
|
|
|
<div className="flex items-center gap-3 bg-slate-950 p-4 border border-slate-800 rounded-xl">
|
|
<input type="checkbox" name="mostrar_texto_logo" value="true" defaultChecked={entity?.mostrar_texto_logo === true} id="mostrar_texto_logo" className="w-5 h-5 accent-cyan-500 cursor-pointer" />
|
|
<label htmlFor="mostrar_texto_logo" className="text-sm font-bold text-slate-300 cursor-pointer select-none">
|
|
Mostrar Nombre junto al Logo en la barra de navegación web
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contacto Físico */}
|
|
<div className="space-y-6">
|
|
<h3 className="text-lg font-bold text-white flex items-center gap-2 border-b border-slate-800 pb-2"><MapPin size={18} className="text-green-400" /> Contacto Oficial</h3>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Ciudad</label>
|
|
<select
|
|
name="ciudad"
|
|
defaultValue={entity?.ciudad || ''}
|
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white focus:border-cyan-500 transition-all"
|
|
>
|
|
<option value="">Seleccionar Ciudad...</option>
|
|
{cities.map(city => (
|
|
<option key={city.$id} value={city.descripcion}>{city.descripcion}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Dirección Física</label>
|
|
<input type="text" name="direccion" defaultValue={entity?.direccion || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white focus:border-cyan-500 transition-all" />
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Teléfono</label>
|
|
<input type="text" name="numero_contacto" defaultValue={entity?.numero_contacto || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white focus:border-cyan-500 transition-all" />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">WhatsApp</label>
|
|
<input type="text" name="numero_whatsapp" defaultValue={entity?.numero_whatsapp || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-white focus:border-cyan-500 transition-all" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email y Sitio Web en líneas separadas como solicitó el usuario */}
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Email Corporativo</label>
|
|
<div className="relative group">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-600 group-focus-within:text-cyan-500 transition-colors">
|
|
<Mail size={18} />
|
|
</div>
|
|
<input type="email" name="email" defaultValue={entity?.email || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-10 pr-4 py-3 text-white focus:border-cyan-500 transition-all font-medium" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Sitio Web URL</label>
|
|
<div className="relative group">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-600 group-focus-within:text-cyan-500 transition-colors">
|
|
<Globe size={18} />
|
|
</div>
|
|
<input type="url" name="sitio_web" defaultValue={entity?.sitio_web || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl pl-10 pr-4 py-3 text-white focus:border-cyan-500 transition-all font-medium" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Configuración de Streaming */}
|
|
<div className="space-y-6 pt-4 border-t border-slate-800">
|
|
<h3 className="text-lg font-bold text-white flex items-center gap-2 border-b border-slate-800 pb-2"><Tv size={18} className="text-rose-400" /> Canales en Vivo (Streaming)</h3>
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2 text-cyan-400">URL Streaming TV</label>
|
|
<input
|
|
type="text"
|
|
name="tv_url"
|
|
defaultValue={entity?.tv_url || ''}
|
|
placeholder="https://www.youtube.com/embed/..."
|
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-white focus:border-cyan-500 transition-all font-mono text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2 text-rose-400">URL Streaming Radio (Audio Stream)</label>
|
|
<input
|
|
type="text"
|
|
name="radio_url"
|
|
defaultValue={entity?.radio_url || ''}
|
|
placeholder="https://stream.server.com:8000/live"
|
|
className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-white focus:border-rose-500 transition-all font-mono text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Redes Sociales con Iconos */}
|
|
<div className="space-y-6 pt-4 border-t border-slate-800">
|
|
<h3 className="text-lg font-bold text-white flex items-center gap-2 border-b border-slate-800 pb-2"><Share2 size={18} className="text-purple-400" /> Vínculos Sociales</h3>
|
|
<div className="grid md:grid-cols-5 gap-4">
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase flex items-center gap-2 mb-2 text-blue-500">
|
|
<Facebook size={12} /> Facebook
|
|
</label>
|
|
<input type="url" name="facebook_url" defaultValue={entity?.facebook_url || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white focus:border-blue-500 text-sm transition-all" placeholder="https://..." />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase flex items-center gap-2 mb-2 text-pink-500">
|
|
<Instagram size={12} /> Instagram
|
|
</label>
|
|
<input type="url" name="instagram_url" defaultValue={entity?.instagram_url || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white focus:border-pink-500 text-sm transition-all" placeholder="https://..." />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase flex items-center gap-2 mb-2 text-slate-200">
|
|
<Twitter size={12} /> X (Twitter)
|
|
</label>
|
|
<input type="url" name="x_url" defaultValue={entity?.x_url || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white focus:border-slate-500 text-sm transition-all" placeholder="https://..." />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase flex items-center gap-2 mb-2 text-red-500">
|
|
<Youtube size={12} /> YouTube
|
|
</label>
|
|
<input type="url" name="youtube_url" defaultValue={entity?.youtube_url || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white focus:border-red-500 text-sm transition-all" placeholder="https://..." />
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-black tracking-widest text-slate-500 uppercase flex items-center gap-2 mb-2 text-cyan-500">
|
|
<Send size={12} /> Telegram
|
|
</label>
|
|
<input type="url" name="telegram_url" defaultValue={entity?.telegram_url || ''} className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-white focus:border-cyan-500 text-sm transition-all" placeholder="https://..." />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-6 border-t border-slate-800">
|
|
<button type="submit" className="w-full md:w-auto relative flex items-center gap-2 justify-center group overflow-hidden bg-slate-800 text-white font-black uppercase tracking-widest py-3 px-12 rounded-xl transition-all border border-blue-500/50 hover:border-blue-400 ml-auto shadow-[0_0_20px_rgba(59,130,246,0.3)]">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-indigo-500 opacity-90 group-hover:opacity-100 transition-opacity"></div>
|
|
<Building size={18} className="relative z-10" />
|
|
<span className="relative z-10 text-sm">Guardar</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|