From fe920f3db5102000afe28e6c53041c7ee47d3304 Mon Sep 17 00:00:00 2001
From: Shni <niamelyrz@gmail.com>
Date: Wed, 15 Oct 2025 21:33:53 -0500
Subject: [PATCH] feat(dashboard): agregar manejo de errores y alertas en la
 carga de items

---
 .../public/assets/js/dashboard_items.js       | 14 ++++++--
 .../partials/dashboard/dashboard_items.ejs    | 34 +++++++++++++++++++
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/server/public/assets/js/dashboard_items.js b/src/server/public/assets/js/dashboard_items.js
index 095e617..e93a4d4 100644
--- a/src/server/public/assets/js/dashboard_items.js
+++ b/src/server/public/assets/js/dashboard_items.js
@@ -27,12 +27,20 @@
   const list = $('itemsList');
 
   async function fetchItems(){
-    if(!guildId) return;
+    if(!guildId){ showPageAlert('warning','No hay servidor seleccionado. Selecciona un servidor o inicia sesión.'); return; }
     if(list) list.textContent = 'Cargando items...';
     try{
       const res = await fetch('/api/dashboard/' + encodeURIComponent(guildId) + '/items', { headers:{ 'Accept':'application/json' } });
-      if(!res.ok) throw new Error('fetch-failed');
-      const j = await res.json(); if(!j || !j.ok) throw new Error('bad');
+      if(!res.ok){
+        // Show helpful message depending on status
+        if(res.status === 401) { showPageAlert('danger','No autenticado. Inicia sesión y vuelve a intentarlo.'); }
+        else if(res.status === 403) { showPageAlert('danger','No tienes permisos para ver items en este servidor.'); }
+        else { showPageAlert('danger','Error al cargar items (HTTP ' + res.status + ')'); }
+        if(list) list.innerHTML = '<div class="text-red-400">Error cargando items: HTTP ' + res.status + '</div>';
+        try{ const errBody = await res.text(); console.debug('items fetch non-ok body:', errBody); }catch(e){}
+        return;
+      }
+      const j = await res.json(); if(!j || !j.ok) { showPageAlert('danger','Respuesta inválida del servidor al listar items'); if(list) list.innerHTML = '<div class="text-red-400">Respuesta inválida del servidor</div>'; return; }
       cachedItems = j.items || [];
       renderList(cachedItems);
     }catch(err){ if(list) list.innerHTML = '<div class="text-red-400">Error cargando items</div>'; }
diff --git a/src/server/views/partials/dashboard/dashboard_items.ejs b/src/server/views/partials/dashboard/dashboard_items.ejs
index 40ce645..a80d723 100644
--- a/src/server/views/partials/dashboard/dashboard_items.ejs
+++ b/src/server/views/partials/dashboard/dashboard_items.ejs
@@ -7,5 +7,39 @@
   </div>
 
   <div id="pageAlert" class="hidden mb-3"></div>
+  <div id="itemsList" class="space-y-3">
+    <!-- items will be rendered here by /assets/js/dashboard_items.js -->
+  </div>
+
+  <% if (!selectedGuildId) { %>
+    <div id="itemsHint" class="mt-3 text-yellow-300">Selecciona un servidor en la barra lateral o inicia sesión para administrar items.</div>
+  <% } %>
+
+  <!-- Modal / form skeleton (minimal) -->
+  <div id="itemModal" class="hidden fixed inset-0 items-center justify-center bg-black/60">
+    <div class="bg-[#061427] p-4 rounded w-11/12 max-w-3xl">
+      <div class="flex items-center justify-between mb-2">
+        <h3 id="modalTitle" class="text-white text-lg">Crear item</h3>
+        <button id="cancelItemBtn" class="text-white">✕</button>
+      </div>
+      <div id="modalError" class="hidden text-red-400 mb-2"></div>
+      <form id="itemForm">
+        <input id="itemId" type="hidden" />
+        <div class="grid grid-cols-2 gap-2">
+          <label class="text-white/80">Key <input id="fieldKey" class="w-full" /></label>
+          <label class="text-white/80">Name <input id="fieldName" class="w-full" /></label>
+          <label class="text-white/80">Category <input id="fieldCategory" class="w-full" /></label>
+          <label class="text-white/80">Icon <input id="fieldIcon" class="w-full" /></label>
+          <label class="text-white/80">Description <input id="fieldDescription" class="w-full" /></label>
+          <label class="text-white/80">Tags <input id="fieldTags" class="w-full" /></label>
+        </div>
+        <div class="mt-3 flex justify-end gap-2">
+          <button type="button" id="cancelItemBtnBottom" class="px-3 py-1 bg-gray-600 rounded text-white">Cancelar</button>
+          <button type="submit" class="px-3 py-1 bg-indigo-600 rounded text-white">Guardar</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
   <script src="/assets/js/dashboard_items.js" defer></script>
 </div>