feat(F-103): completed feature

project/apps/admin/src/app/(dashboard)/categories/page.tsx

@@ -65,6 +65,8 @@ interface FormState {
   isParent: boolean;
   emoji: string;
   color: string;
+  bgColor: string;
+  textColor: string;
   seoTitle: string;
   seoTitleManual: boolean;
   seoDescription: string;
@@ -80,12 +82,31 @@ const EMPTY_FORM: FormState = {
   isParent: false,
   emoji: '',
   color: '',
+  bgColor: '',
+  textColor: '',
   seoTitle: '',
   seoTitleManual: false,
   seoDescription: '',
   seoDescManual: false,
 };
 
+const EMOJI_OPTIONS = [
+  '🥬', '🥕', '🍎', '🥑', '🍞', '🧀', '🥛', '🍯', '🌾', '🥜',
+  '🍵', '☕', '🍫', '🧴', '🧼', '🌿', '🌱', '🌸', '🐝', '🐇',
+  '🧺', '♻️', '🏺', '🍶', '🥣', '🧊', '🍇', '🐔', '🐟', '🍊',
+];
+
+const CARD_PRESETS: Array<{ bg: string; text: string; label: string }> = [
+  { bg: '#F1F8E9', text: '#2D6A4F', label: 'Verde' },
+  { bg: '#FFF8E1', text: '#B07D2B', label: 'Miel' },
+  { bg: '#FDECEA', text: '#B4533A', label: 'Terracota' },
+  { bg: '#E8F0FE', text: '#345995', label: 'Azul' },
+  { bg: '#F3E8FD', text: '#7C4DA0', label: 'Lila' },
+  { bg: '#FFF0F5', text: '#C2497D', label: 'Rosa' },
+  { bg: '#E0F7F4', text: '#0F766E', label: 'Turquesa' },
+  { bg: '#F5F5F4', text: '#44403C', label: 'Neutro' },
+];
+
 export default function CategoriesPage() {
   const [tree, setTree] = useState<Category[]>([]);
   const [loading, setLoading] = useState(true);
@@ -95,6 +116,7 @@ export default function CategoriesPage() {
 
   const [form, setForm] = useState<FormState>(EMPTY_FORM);
   const [saving, setSaving] = useState(false);
+  const [generating, setGenerating] = useState(false);
   const [msg, setMsg] = useState('');
 
   const load = useCallback(async () => {
@@ -150,6 +172,8 @@ export default function CategoriesPage() {
       isParent: cat.isParent ?? false,
       emoji: cat.emoji ?? '',
       color: cat.color ?? '',
+      bgColor: cat.bgColor ?? '',
+      textColor: cat.textColor ?? '',
       seoTitle: (cat as any).seoTitle ?? '',
       seoTitleManual: true,
       seoDescription: (cat as any).seoDescription ?? '',
@@ -169,7 +193,7 @@ export default function CategoriesPage() {
   };
 
   const handleSave = async () => {
-    setSaving(true); setMsg('');
+    setSaving(true); setMsg(''); setGenerating(false);
     try {
       const payload = {
         name: form.name,
@@ -179,15 +203,32 @@ export default function CategoriesPage() {
         isParent: form.isParent,
         emoji: form.emoji || undefined,
         color: form.color || undefined,
+        bgColor: form.bgColor || undefined,
+        textColor: form.textColor || undefined,
         seoTitle: form.seoTitle || undefined,
         seoDescription: form.seoDescription || undefined,
       };
+      let saved: Category;
       if (editing) {
-        await categoriesApi.update(editing.id, payload);
-        setMsg('Categoría actualizada');
+        saved = await categoriesApi.update(editing.id, payload);
       } else {
-        await categoriesApi.create(payload);
-        setMsg('Categoría creada');
+        saved = await categoriesApi.create(payload);
+      }
+      // Si faltan la descripción o los campos SEO, se generan con IA tras guardar.
+      const needsAi = !form.description.trim() || !form.seoTitle.trim() || !form.seoDescription.trim();
+      if (needsAi && saved?.id) {
+        setGenerating(true);
+        setMsg('✨ Guardado. Generando descripción y SEO con IA… esto puede tardar unos segundos.');
+        try {
+          await categoriesApi.generateSeo(saved.id);
+          setMsg(`${editing ? 'Categoría actualizada' : 'Categoría creada'} — contenido generado con IA ✨`);
+        } catch (aiError) {
+          setMsg(`Guardada, pero la generación con IA falló: ${aiError instanceof Error ? aiError.message : 'error'}`);
+        } finally {
+          setGenerating(false);
+        }
+      } else {
+        setMsg(editing ? 'Categoría actualizada' : 'Categoría creada');
       }
       setShowForm(false);
       load();
@@ -221,7 +262,16 @@ export default function CategoriesPage() {
       </div>
 
       {msg && (
-        <div className={`p-4 rounded-xl text-sm ${msg.startsWith('Error') ? 'bg-red-50 text-red-700' : 'bg-green-50 text-green-700'}`}>{msg}</div>
+        <div className={`p-4 rounded-xl text-sm flex items-center gap-3 ${
+          msg.startsWith('Error') || msg.startsWith('Guardada, pero')
+            ? 'bg-red-50 text-red-700'
+            : generating ? 'bg-blue-50 text-blue-700' : 'bg-green-50 text-green-700'
+        }`}>
+          {generating && (
+            <span className="inline-block h-4 w-4 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin shrink-0" />
+          )}
+          {msg}
+        </div>
       )}
 
       {showForm && (
@@ -293,37 +343,92 @@ export default function CategoriesPage() {
               value={form.description}
               onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
               rows={2}
-              placeholder="Descripción opcional de la categoría"
+              placeholder="Descripción opcional de la categoría (si la dejas vacía se genera con IA)"
               className="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm resize-none focus:ring-2 focus:ring-[#2D6A4F] outline-none"
             />
+            <p className="text-xs text-gray-400 mt-1">✨ Si queda vacía, se generará automáticamente con IA al guardar.</p>
           </div>
 
           {/* Emoji y color de la tarjeta */}
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">Emoji</label>
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-2 mb-2">
                 <input
                   value={form.emoji}
                   onChange={(e) => setForm((f) => ({ ...f, emoji: e.target.value }))}
                   maxLength={10}
                   placeholder="🥜"
-                  className="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm text-2xl text-center focus:ring-2 focus:ring-[#2D6A4F] outline-none"
+                  className="w-24 px-4 py-2.5 border border-gray-300 rounded-xl text-sm text-2xl text-center focus:ring-2 focus:ring-[#2D6A4F] outline-none"
                 />
-                {form.emoji && <span className="text-3xl">{form.emoji}</span>}
+                {form.emoji && (
+                  <button type="button" onClick={() => setForm((f) => ({ ...f, emoji: '' }))}
+                    className="text-xs text-gray-400 hover:text-red-500">Quitar</button>
+                )}
+              </div>
+              <div className="grid grid-cols-10 gap-1 border border-gray-200 rounded-xl p-2 max-h-28 overflow-y-auto">
+                {EMOJI_OPTIONS.map((emoji) => (
+                  <button key={emoji} type="button" onClick={() => setForm((f) => ({ ...f, emoji }))}
+                    className={`text-xl p-1 rounded-lg transition-colors ${
+                      form.emoji === emoji ? 'bg-[#2D6A4F]/10 ring-1 ring-[#2D6A4F]' : 'hover:bg-gray-100'
+                    }`}>
+                    {emoji}
+                  </button>
+                ))}
               </div>
               <p className="text-xs text-gray-400 mt-1">Emoji identificativo que aparecerá en las tarjetas de categoría.</p>
             </div>
             <div>
               <label className="block text-sm font-medium text-gray-700 mb-1">Color de tarjeta</label>
-              <input
-                value={form.color}
-                onChange={(e) => setForm((f) => ({ ...f, color: e.target.value }))}
-                maxLength={200}
-                placeholder="bg-[#70ad47]/10 text-[#70ad47]  ó  from-[#70ad47] to-[#40916C]"
-                className="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm font-mono focus:ring-2 focus:ring-[#2D6A4F] outline-none"
-              />
-              <p className="text-xs text-gray-400 mt-1">Clase Tailwind para el color de la tarjeta (fondo o gradiente).</p>
+              <div className="border border-gray-200 rounded-xl p-3 space-y-3">
+                <div className="flex flex-wrap gap-1.5">
+                  {CARD_PRESETS.map((preset) => (
+                    <button key={preset.label} type="button" title={preset.label}
+                      onClick={() => setForm((f) => ({ ...f, bgColor: preset.bg, textColor: preset.text }))}
+                      className={`w-8 h-8 rounded-lg border-2 transition-transform hover:scale-110 flex items-center justify-center text-[10px] font-bold ${
+                        form.bgColor === preset.bg && form.textColor === preset.text ? 'border-[#2D6A4F] scale-110' : 'border-gray-200'
+                      }`}
+                      style={{ backgroundColor: preset.bg, color: preset.text }}>
+                      Aa
+                    </button>
+                  ))}
+                </div>
+                <div className="grid grid-cols-2 gap-3">
+                  <div>
+                    <label className="block text-xs text-gray-500 mb-1">Fondo (bg)</label>
+                    <div className="flex items-center gap-2">
+                      <input type="color" value={form.bgColor || '#F1F8E9'}
+                        onChange={(e) => setForm((f) => ({ ...f, bgColor: e.target.value }))}
+                        className="w-10 h-10 rounded-lg border border-gray-200 cursor-pointer p-0.5" />
+                      <input value={form.bgColor}
+                        onChange={(e) => setForm((f) => ({ ...f, bgColor: e.target.value }))}
+                        placeholder="#F1F8E9" maxLength={20}
+                        className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs font-mono focus:ring-2 focus:ring-[#2D6A4F] outline-none" />
+                    </div>
+                  </div>
+                  <div>
+                    <label className="block text-xs text-gray-500 mb-1">Texto</label>
+                    <div className="flex items-center gap-2">
+                      <input type="color" value={form.textColor || '#2D6A4F'}
+                        onChange={(e) => setForm((f) => ({ ...f, textColor: e.target.value }))}
+                        className="w-10 h-10 rounded-lg border border-gray-200 cursor-pointer p-0.5" />
+                      <input value={form.textColor}
+                        onChange={(e) => setForm((f) => ({ ...f, textColor: e.target.value }))}
+                        placeholder="#2D6A4F" maxLength={20}
+                        className="w-full px-2 py-1.5 border border-gray-300 rounded-lg text-xs font-mono focus:ring-2 focus:ring-[#2D6A4F] outline-none" />
+                    </div>
+                  </div>
+                </div>
+                {(form.bgColor || form.textColor) && (
+                  <div className="rounded-lg px-3 py-2 text-sm font-medium flex items-center justify-between"
+                    style={{ backgroundColor: form.bgColor || '#F1F8E9', color: form.textColor || '#2D6A4F' }}>
+                    <span>{form.emoji || '🌿'} {form.name || 'Vista previa'}</span>
+                    <button type="button" onClick={() => setForm((f) => ({ ...f, bgColor: '', textColor: '' }))}
+                      className="text-xs opacity-60 hover:opacity-100">Quitar color</button>
+                  </div>
+                )}
+              </div>
+              <p className="text-xs text-gray-400 mt-1">Colores de fondo y texto para las tarjetas de la categoría en la tienda.</p>
             </div>
           </div>
 
@@ -368,10 +473,10 @@ export default function CategoriesPage() {
           <div className="flex gap-3">
             <button
               onClick={handleSave}
-              disabled={saving || !form.name || !form.slug}
+              disabled={saving || generating || !form.name || !form.slug}
               className="px-5 py-2.5 bg-[#2D6A4F] hover:bg-[#1B4332] disabled:opacity-50 text-white text-sm font-semibold rounded-xl"
             >
-              {saving ? 'Guardando...' : 'Guardar'}
+              {generating ? '✨ Generando con IA...' : saving ? 'Guardando...' : 'Guardar'}
             </button>
             <button
               onClick={() => setShowForm(false)}

project/apps/admin/src/app/(dashboard)/logs/page.tsx

@@ -12,10 +12,13 @@ export default function ServerLogsPage() {
       <div>
         <h1 className="text-2xl font-bold text-gray-900">Logs del servidor</h1>
         <p className="text-sm text-gray-500 mt-0.5">
-          Stream en tiempo real via SSE. Las líneas erróneas se resaltan en rojo.
+          Stream en tiempo real via SSE. Las líneas erróneas se resaltan en rojo. Máximo 200 líneas.
         </p>
       </div>
-      <ServerLogViewer backendUrl={backendUrl} />
+      {/* Altura acotada al viewport: el visor ocupa solo la parte visible y el resto hace scroll interno. */}
+      <div className="h-[calc(100vh-220px)] min-h-[320px]">
+        <ServerLogViewer backendUrl={backendUrl} />
+      </div>
     </div>
   );
 }

project/apps/admin/src/app/(dashboard)/settings/page.tsx

@@ -149,7 +149,14 @@ export default function SettingsPage() {
                   {field('aiApiKey', 'API key', { type: 'password', placeholder: form?.aiApiKeyConfigured ? 'API key configurada (escribe para reemplazar)' : 'sk-...' })}
                   {field('aiSeoTitlePrompt', 'Prompt para Título SEO', { rows: 4, hint: 'Usa {{name}}, {{description}} y {{brand}} como variables.' })}
                   {field('aiSeoDescriptionPrompt', 'Prompt para Descripción SEO (Google)', { rows: 5, hint: 'Usa {{name}}, {{description}} y {{brand}} como variables.' })}
-                  {field('aiProductDescriptionPrompt', 'Prompt para Descripción del producto', { rows: 5, hint: 'Se usa solo cuando la descripción normal está vacía. Variables: {{name}}, {{description}} y {{brand}}.' })}
+                  {field('aiProductDescriptionPrompt', 'Prompt para Descripción del producto', { rows: 5, hint: 'Se usa solo cuando la descripción normal está vacía. Debe pedir HTML (párrafos y listas) para que se renderice bonito en la tienda. Variables: {{name}}, {{description}} y {{brand}}.' })}
+                  <div className="pt-2 border-t border-gray-100">
+                    <h3 className="text-sm font-semibold text-gray-800 mb-1">Categorías</h3>
+                    <p className="text-xs text-gray-400 mb-4">Se usan cuando la descripción o los campos SEO de una categoría están vacíos. Variables: {'{{name}}'} y {'{{description}}'}.</p>
+                  </div>
+                  {field('aiCategoryDescriptionPrompt', 'Prompt para Descripción de categoría', { rows: 4, hint: 'Variables: {{name}} y {{description}}.' })}
+                  {field('aiCategorySeoTitlePrompt', 'Prompt para Título SEO de categoría', { rows: 4, hint: 'Variables: {{name}} y {{description}}.' })}
+                  {field('aiCategorySeoDescriptionPrompt', 'Prompt para Descripción SEO de categoría', { rows: 5, hint: 'Variables: {{name}} y {{description}}.' })}
                 </div>
               </>
             )}