From a99355f76ea131094c1480e30f439172a1d80017 Mon Sep 17 00:00:00 2001
From: "Carlos (Almeira)" <carlos@almeira.com.co>
Date: Sun, 29 Mar 2026 01:41:29 -0500
Subject: [PATCH] feat(entity): habilitar MediaGridSelector para elegir y subir
 logotipo corporativo

---
 src/app/dashboard/entity/page.tsx            | 16 +-------
 src/components/dashboard/EntityLogoField.tsx | 41 ++++++++++++++++++++
 2 files changed, 43 insertions(+), 14 deletions(-)
 create mode 100644 src/components/dashboard/EntityLogoField.tsx

diff --git a/src/app/dashboard/entity/page.tsx b/src/app/dashboard/entity/page.tsx
index 3f95670..91e8526 100644
--- a/src/app/dashboard/entity/page.tsx
+++ b/src/app/dashboard/entity/page.tsx
@@ -2,6 +2,7 @@ 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;
@@ -59,20 +60,7 @@ export default async function EntityPage() {
                             />
                         </div>
 
-                        <div>
-                            <label className="text-[10px] font-black tracking-widest text-slate-500 uppercase block mb-2">Logotipo Corporativo</label>
-                            {entity?.logotipo && (
-                                <div className="mb-3 p-3 bg-slate-950 rounded-xl inline-block border border-slate-800">
-                                    <img src={entity.logotipo} alt="Logo actual" className="h-16 object-contain" />
-                                </div>
-                            )}
-                            <input 
-                                type="file" 
-                                name="logotipo" 
-                                accept="image/*"
-                                className="w-full bg-slate-950/50 border border-slate-800 rounded-xl file:mr-4 file:py-3 file:px-4 file:rounded-l-xl file:border-0 file:text-[10px] file:font-black file:uppercase file:bg-cyan-500/10 file:text-cyan-400 hover:file:bg-cyan-500/20 text-slate-300 text-sm transition-all" 
-                            />
-                        </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" />
diff --git a/src/components/dashboard/EntityLogoField.tsx b/src/components/dashboard/EntityLogoField.tsx
new file mode 100644
index 0000000..a52d335
--- /dev/null
+++ b/src/components/dashboard/EntityLogoField.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import { useState } from 'react';
+import { MediaGridSelector } from './MediaGridSelector';
+
+export default function EntityLogoField({ 
+    initialUrl = '', 
+    initialId = '' 
+}: { 
+    initialUrl?: string, 
+    initialId?: string 
+}) {
+    // Si la entidad viene con url vieja, guardamos la url final. Si se escoge nueva, guardamos la url o el id según convenga.
+    // MediaGridSelector espera el ID del documento para hacer el preview.
+    const [mediaId, setMediaId] = useState(initialId);
+    const [finalUrl, setFinalUrl] = useState(initialUrl);
+
+    return (
+        <div>
+            <MediaGridSelector
+                value={mediaId}
+                onChange={(id, url) => {
+                    setMediaId(id);
+                    setFinalUrl(url || '');
+                }}
+                label="Logotipo Corporativo"
+            />
+            {/* Si no hay mediaId activo pero sí URL antigua (legacy), la mostramos */}
+            {!mediaId && finalUrl && (
+                <div className="mt-4 mb-2 p-3 bg-slate-950 rounded-xl inline-block border border-slate-800">
+                    <p className="text-[10px] text-slate-500 mb-2 uppercase tracking-widest font-bold">Logo Heredado</p>
+                    <img src={finalUrl} alt="Logo actual" className="h-16 object-contain" />
+                </div>
+            )}
+            
+            {/* Enviamos el string del ID o de la URL para que entity.ts la guarde. 
+                Adaptaremos entity.ts para que si 'logotipo' es texto puro, lo guarde tal cual. */}
+            <input type="hidden" name="logotipo" value={finalUrl || ''} />
+        </div>
+    );
+}