From 2672584ae17d2fa1c702f8dc8d7c781822c3c5da Mon Sep 17 00:00:00 2001
From: PouyaKhajavi <pouyakhajavidev@newhorizon.com>
Date: Sun, 9 Aug 2026 10:20:18 +0330
Subject: [PATCH] feat(frontend): add modal dialog to inspect full run error
 logs

---
 frontend/src/App.jsx | 36 +++++++++++++++++++++++++++++++++---
 1 file changed, 33 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c0d72cf..4b3f594 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -24,6 +24,7 @@ function App() {
   const [ads, setAds] = useState([]);
   const [logs, setLogs] = useState([]);
   const [health, setHealth] = useState({ database: 'loading', redis: 'loading' });
+  const [errorLogModalContent, setErrorLogModalContent] = useState(null);
   
   // Loading states
   const [loadingCrawlers, setLoadingCrawlers] = useState(true);
@@ -637,9 +638,13 @@ function App() {
                           <td className={`px-5 py-4 border-b border-white/5 font-en ${run.ads_flagged_count > 0 ? 'text-purple-400 font-bold' : ''}`}>
                             {run.ads_flagged_count}
                           </td>
-                          <td className="px-5 py-4 border-b border-white/5 max-w-[180px] overflow-hidden text-ellipsis whitespace-nowrap" title={run.error_log}>
-                            {run.error_log || '-'}
-                          </td>
+                          <td 
+                             className={`px-5 py-4 border-b border-white/5 max-w-[180px] overflow-hidden text-ellipsis whitespace-nowrap ${run.error_log ? 'cursor-pointer hover:text-purple-400 transition-colors underline decoration-dotted' : ''}`} 
+                             title={run.error_log || ''}
+                             onClick={() => run.error_log && setErrorLogModalContent(run.error_log)}
+                           >
+                             {run.error_log || '-'}
+                           </td>
                         </tr>
                       ))}
                     </tbody>
@@ -813,6 +818,31 @@ function App() {
         </div>
       </div>
 
+       {/* Error Log Modal */}
+       {errorLogModalContent && (
+         <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 transition-opacity duration-200">
+           <div className="bg-slate-900 border border-white/5 rounded-2xl w-[600px] max-w-[95%] max-h-[90vh] shadow-[0_20px_50px_rgba(0,0,0,0.6)] flex flex-col scale-100 transition-transform duration-200">
+             <div className="flex items-center justify-between p-5 border-b border-white/5">
+               <h3 className="text-base font-bold text-white">جزئیات خطا و لاگ اجرا</h3>
+               <button className="bg-transparent border-none text-gray-400 cursor-pointer flex items-center hover:text-white" onClick={() => setErrorLogModalContent(null)}>
+                 <X className="w-5 h-5" />
+               </button>
+             </div>
+             <div className="p-6 overflow-y-auto flex flex-col gap-4">
+               <div className="bg-black/30 border border-white/5 p-4 rounded-xl text-right">
+                 <span className="text-xs text-gray-400 font-medium block mb-2">متن کامل خطا / پیام سیستم:</span>
+                 <pre className="bg-black/50 border border-white/5 p-4 rounded-lg text-xs font-mono text-rose-300 whitespace-pre-wrap break-all direction-ltr text-left overflow-y-auto max-h-[50vh]">
+                   {errorLogModalContent}
+                 </pre>
+               </div>
+             </div>
+             <div className="flex justify-end p-5 border-t border-white/5">
+               <button className="inline-flex items-center justify-center border border-white/5 rounded-lg px-5 py-2.5 text-sm font-medium cursor-pointer transition-all duration-200 bg-white/5 text-white hover:bg-white/10" onClick={() => setErrorLogModalContent(null)}>بستن</button>
+             </div>
+           </div>
+         </div>
+       )}
+
     </div>
   );
 }