AP Vendor Manager<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n ::-webkit-scrollbar { width: 6px; height: 6px; }\n ::-webkit-scrollbar-track { background: transparent; }\n ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\n ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\n .hidden { display: none !important; }\n \n .hide-scrollbar::-webkit-scrollbar { display: none; }\n .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n \n .bg-sidebar { background-color: #2b2d42; }\n .bg-active-menu { background-color: #5c4dff; }\n .text-active-menu { color: #ffffff; }\n .bg-code { background-color: #1e2136; }\n \n .urgent-card-border {\n background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #fee2e2 10px, #fee2e2 20px);\n height: 4px;\n width: 100%;\n }\n\n .task-card-border {\n background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #f3e8ff 10px, #f3e8ff 20px);\n height: 4px;\n width: 100%;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-800 font-sans flex flex-col h-screen overflow-hidden selection:bg-indigo-200\">\n\n \n <div id=\"loading-screen\" class=\"fixed inset-0 bg-slate-50\/80 backdrop-blur-sm flex flex-col items-center justify-center z-[100] hidden\">\n <div class=\"animate-spin rounded-full h-12 w-12 border-b-4 border-indigo-600 mb-4\"><\/div>\n <p class=\"text-indigo-900 font-bold\" id=\"loading-text\">Loading…<\/p>\n <\/div>\n\n \n <div id=\"error-msg\" class=\"fixed top-4 left-1\/2 transform -translate-x-1\/2 bg-red-100 border border-red-400 text-red-700 px-6 py-3 rounded-xl shadow-lg z-50 flex items-center gap-3 hidden transition-opacity\">\n <i class=\"fa-solid fa-triangle-exclamation text-xl\"><\/i>\n <span id=\"error-text\" class=\"font-medium\"><\/span>\n <\/div>\n\n <div id=\"success-msg\" class=\"fixed top-4 left-1\/2 transform -translate-x-1\/2 bg-green-100 border border-green-400 text-green-800 px-6 py-3 rounded-xl shadow-lg z-50 flex items-center gap-3 hidden transition-opacity\">\n <i class=\"fa-solid fa-circle-check text-xl\"><\/i>\n <span id=\"success-text\" class=\"font-medium\"><\/span>\n <\/div>\n\n \n <header class=\"w-full bg-sidebar text-slate-300 flex flex-col lg:flex-row items-center shrink-0 shadow-xl z-20\">\n \n <div class=\"p-3 lg:px-6 lg:py-3 flex items-center justify-between gap-3 border-b lg:border-b-0 lg:border-r border-white\/10 shrink-0 w-full lg:w-auto\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-lg\">\n <i class=\"fa-solid fa-file-invoice-dollar\"><\/i>\n <\/div>\n <h1 class=\"text-white font-bold text-lg tracking-wide hidden sm:block\">AP Manager<\/h1>\n <\/div>\n <div class=\"text-xs text-slate-500 font-semibold lg:hidden whitespace-nowrap\">v4.2 – AP Tools<\/div>\n <\/div>\n \n <nav class=\"flex-1 w-full px-4 py-2 overflow-x-auto hide-scrollbar flex items-center gap-2\">\n <button id=\"nav-urgent\" class=\"whitespace-nowrap flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all text-slate-300 hover:bg-white\/5 group border border-transparent hover:border-white\/10\">\n <i class=\"fa-solid fa-fire text-red-400 group-hover:scale-110 transition-transform\"><\/i>\n <span>Urgent Cases<\/span>\n <span id=\"nav-urgent-badge\" class=\"bg-red-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full shadow-sm hidden\">0<\/span>\n <\/button>\n \n <button id=\"nav-cases\" class=\"whitespace-nowrap flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all text-slate-300 hover:bg-white\/5 group border border-transparent hover:border-white\/10\">\n <i class=\"fa-solid fa-ticket-alt text-indigo-400 group-hover:scale-110 transition-transform\"><\/i>\n <span>Open Cases<\/span>\n <span id=\"nav-cases-badge\" class=\"bg-indigo-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full shadow-sm hidden\">0<\/span>\n <\/button>\n \n <button id=\"nav-dashboard\" class=\"whitespace-nowrap flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all text-slate-300 hover:bg-white\/5 group border border-transparent hover:border-white\/10\">\n <i class=\"fa-solid fa-chart-pie text-center group-hover:scale-110 transition-transform\"><\/i>\n <span>General Dashboard<\/span>\n <\/button>\n\n <button id=\"nav-directory\" class=\"whitespace-nowrap flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all text-slate-300 hover:bg-white\/5 group border border-transparent hover:border-white\/10\">\n <i class=\"fa-solid fa-address-book text-center group-hover:scale-110 transition-transform\"><\/i>\n <span>Master Directory<\/span>\n <\/button>\n \n <button id=\"nav-add\" class=\"whitespace-nowrap flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all text-slate-300 hover:bg-white\/5 group border border-transparent hover:border-white\/10\">\n <i class=\"fa-solid fa-file-circle-plus text-center group-hover:scale-110 transition-transform\"><\/i>\n <span>Vendor Entry<\/span>\n <\/button>\n \n <button id=\"nav-settings\" class=\"whitespace-nowrap flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all bg-active-menu text-active-menu shadow-md\">\n <i class=\"fa-solid fa-gear text-center group-hover:scale-110 transition-transform\"><\/i>\n <span>System Settings<\/span>\n <\/button>\n \n <div id=\"bg-sync-indicator\" class=\"ml-auto shrink-0 px-3 py-1.5 bg-indigo-950\/40 rounded-xl border border-indigo-500\/20 text-xs flex items-center gap-2 hidden\">\n <i class=\"fa-solid fa-circle-notch fa-spin text-indigo-400\" id=\"sync-spinner\"><\/i>\n <span id=\"sync-status-text\" class=\"text-slate-400 hidden sm:inline-block\">Saving…<\/span>\n <\/div>\n <\/nav>\n \n <\/header>\n\n \n <main class=\"flex-1 h-full overflow-y-auto relative bg-slate-50\">\n \n \n \n \n <div id=\"view-settings\" class=\"p-8 md:p-12 max-w-5xl mx-auto block space-y-8 pb-24\">\n \n \n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-slate-200\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-2 flex items-center gap-2\">\n <i class=\"fa-solid fa-users text-indigo-600\"><\/i> Personnel Management\n <\/h2>\n <p class=\"text-slate-500 mb-6 text-sm\">\n Enter the names of the people who will be working on the cases. Type one name per line. These names will automatically appear in all dropdowns of the application.\n <\/p>\n <div class=\"space-y-4\">\n <textarea id=\"settings-responsibles\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-4 h-40 focus:ring-2 focus:ring-indigo-500 outline-none font-mono text-sm leading-relaxed transition-shadow\" placeholder=\"Type one name per line... Maria Duvan Jessica...\"><\/textarea>\n <div class=\"flex justify-end\">\n <button id=\"btn-save-responsibles\" class=\"bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-6 py-2.5 rounded-lg transition-colors shadow-md flex items-center gap-2\">\n <i class=\"fa-solid fa-floppy-disk\"><\/i> Save Personnel\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-slate-200\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-2\">Google Sheets Database Link (Optimized)<\/h2>\n <p class=\"text-slate-500 mb-10\">Saves all data to a Google Sheet via Apps Script with robust plain text comparison system and database splitting.<\/p>\n\n <div class=\"space-y-10 relative before:absolute before:inset-0 before:ml-[1.1rem] before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-200 before:to-transparent\">\n \n \n <div class=\"relative flex items-start gap-6\">\n <div class=\"bg-indigo-100 text-indigo-700 w-9 h-9 rounded-full flex items-center justify-center font-bold shrink-0 border-4 border-slate-50 relative z-10 shadow-sm\">1<\/div>\n <div class=\"pt-1.5\">\n <h3 class=\"text-lg font-bold text-slate-800\">Create a Google Sheet and open Apps Script<\/h3>\n <p class=\"text-slate-500 mt-1 text-sm\">Create a new spreadsheet. Go to <strong>Extensions > Apps Script<\/strong> in the top menu.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"relative flex items-start gap-6\">\n <div class=\"bg-indigo-100 text-indigo-700 w-9 h-9 rounded-full flex items-center justify-center font-bold shrink-0 border-4 border-slate-50 relative z-10 shadow-sm\">2<\/div>\n <div class=\"pt-1.5 w-full\">\n <div class=\"flex justify-between items-center mb-2\">\n <h3 class=\"text-lg font-bold text-slate-800\">Paste this self-healing code (Code.gs)<\/h3>\n <button onclick=\"copyScriptCode()\" id=\"btn-copy\" class=\"text-xs font-bold text-indigo-600 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-md transition-colors flex items-center gap-2\">\n <i class=\"fa-regular fa-copy\"><\/i> Copy Code\n <\/button>\n <\/div>\n \n <div class=\"bg-code rounded-xl p-5 shadow-inner overflow-x-auto text-sm font-mono leading-relaxed mt-3\">\n<pre id=\"script-code\" class=\"text-slate-300\">\nfunction getOrCreateSheet(name) {\n var ss = SpreadsheetApp.getActiveSpreadsheet();\n var sheet = ss.getSheetByName(name);\n if(!sheet) {\n sheet = ss.insertSheet(name);\n if (name === 'Logs') {\n sheet.appendRow(['Log ID', 'Timestamp', 'Fecha', 'Vendor\/Ticket ID', 'Nombre', 'Responsable', 'Acci\u00f3n', 'Detalles']);\n } else {\n initHeaders(sheet);\n }\n }\n return sheet;\n}\n\nfunction doPost(e) {\n var data = JSON.parse(e.postData.contents);\n \n if (data.action === 'log') {\n var logSheet = getOrCreateSheet('Logs');\n var l = data.log;\n logSheet.appendRow([l.id, l.timestamp, l.date, l.vendorId, l.vendorName, l.clerk, l.actionType, l.details]);\n return ContentService.createTextOutput(JSON.stringify({success: true})).setMimeType(ContentService.MimeType.JSON);\n }\n\n var isTkt = false;\n if (data.vendor) {\n isTkt = (data.vendor.isTicket === 'Yes' || data.vendor.isTicket === true);\n } else if (data.isTicket) {\n isTkt = (data.isTicket === 'Yes' || data.isTicket === true);\n }\n \n var targetSheetName = isTkt ? 'Tickets' : 'Vendors';\n var sheet = getOrCreateSheet(targetSheetName);\n \n if(data.action === 'add') {\n var v = data.vendor;\n sheet.appendRow([v.id, v.name, v.type, v.category, v.assignedTo, v.priority, v.pastDueAmount || 0, v.pendingAmount || 0, v.criticalDate || '', v.status || 'Pendiente', v.notes || '', v.createdAt, v.lastStatementDate || '', v.lastWorkedDate || '', v.completedDate || '', v.isTicket || 'No', v.parentId || '', v.hasPastDue || 'No']);\n } else if (data.action === 'bulk_add') {\n if (data.vendors && data.vendors.length > 0) {\n var rows = data.vendors.map(function(v) { \n return [v.id, v.name, v.type, v.category, v.assignedTo, v.priority, v.pastDueAmount || 0, v.pendingAmount || 0, v.criticalDate || '', v.status || 'Pendiente', v.notes || '', v.createdAt, v.lastStatementDate || '', v.lastWorkedDate || '', v.completedDate || '', v.isTicket || 'No', v.parentId || '', v.hasPastDue || 'No']; \n });\n sheet.getRange(sheet.getLastRow() + 1, 1, rows.length, rows[0].length).setValues(rows);\n }\n } else if (data.action === 'update') {\n var all = sheet.getDataRange().getValues();\n for(var i=1; i<all.length; i++) {\n if(String(all[i][0]).trim() === String(data.vendor.id).trim()) {\n var v = data.vendor;\n sheet.getRange(i+1, 2, 1, 17).setValues([[v.name, v.type, v.category, v.assignedTo, v.priority, v.pastDueAmount || 0, v.pendingAmount || 0, v.criticalDate || '', v.status || 'Pendiente', v.notes || '', v.createdAt, v.lastStatementDate || '', v.lastWorkedDate || '', v.completedDate || '', v.isTicket || 'No', v.parentId || '', v.hasPastDue || 'No']]);\n break;\n }\n }\n } else if (data.action === 'delete') {\n var all = sheet.getDataRange().getValues();\n for(var i=1; i<all.length; i++) {\n if(String(all[i][0]).trim() === String(data.id).trim()) { sheet.deleteRow(i+1); break; }\n }\n }\n return ContentService.createTextOutput(JSON.stringify({success: true})).setMimeType(ContentService.MimeType.JSON);\n}\n\nfunction getSheetData(name) {\n var ss = SpreadsheetApp.getActiveSpreadsheet();\n var sheet = ss.getSheetByName(name);\n if(!sheet) return [];\n initHeaders(sheet);\n \n var lastRow = sheet.getLastRow();\n var lastColumn = Math.max(sheet.getLastColumn(), 18); \n if (lastRow <= 1) return [];\n\n var data = sheet.getRange(1, 1, lastRow, lastColumn).getValues();\n var headers = data[0];\n \n var result = [];\n var needsIdFix = false;\n var seenIds = {};\n\n for(var r=1; r<data.length; r++) {\n var row = data[r];\n \/\/ Ignorar filas que est\u00e9n completamente en blanco\n if(String(row[1]).trim() === \"\" && String(row[2]).trim() === \"\") continue; \n \n var vId = String(row[0]).trim();\n \/\/ Si la fila no tiene ID, se le asigna uno y se marca para escribirse en el Excel\n if (!vId || vId === 'undefined' || vId === '' || seenIds[vId]) {\n vId = \"ID_\" + new Date().getTime() + \"_\" + r;\n data[r][0] = vId; \n needsIdFix = true;\n }\n seenIds[vId] = true;\n\n var obj = {}; \n headers.forEach(function(h, i) { \n if(h) obj[h] = data[r][i]; \n }); \n result.push(obj);\n }\n\n \/\/ Escribir los IDs sanados de vuelta al Excel de un solo golpe (s\u00faper r\u00e1pido)\n if (needsIdFix) {\n var idValues = [];\n for(var r=1; r<data.length; r++) {\n idValues.push([data[r][0]]);\n }\n sheet.getRange(2, 1, idValues.length, 1).setValues(idValues);\n }\n\n return result;\n}\n\nfunction doGet(e) {\n try {\n var vendors = getSheetData('Vendors');\n var tickets = getSheetData('Tickets');\n var combined = vendors.concat(tickets);\n return ContentService.createTextOutput(JSON.stringify(combined)).setMimeType(ContentService.MimeType.JSON);\n } catch(err) {\n return ContentService.createTextOutput(JSON.stringify({error: err.toString()})).setMimeType(ContentService.MimeType.JSON);\n }\n}\n\nfunction initHeaders(sheet) {\n var expected = ['id', 'name', 'type', 'category', 'assignedTo', 'priority', 'pastDueAmount', 'pendingAmount', 'criticalDate', 'status', 'notes', 'createdAt', 'lastStatementDate', 'lastWorkedDate', 'completedDate', 'isTicket', 'parentId', 'hasPastDue'];\n if(sheet.getLastColumn() === 0) {\n sheet.appendRow(expected);\n return;\n }\n var actual = sheet.getRange(1, 1, 1, Math.max(sheet.getLastColumn(), expected.length)).getValues()[0];\n for(var i=0; i<expected.length; i++) {\n if(actual[i] !== expected[i]) {\n sheet.getRange(1, i+1).setValue(expected[i]);\n }\n }\n}\n<\/pre>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"relative flex items-start gap-6\">\n <div class=\"bg-indigo-100 text-indigo-700 w-9 h-9 rounded-full flex items-center justify-center font-bold shrink-0 border-4 border-slate-50 relative z-10 shadow-sm\">3<\/div>\n <div class=\"pt-1.5 w-full\">\n <h3 class=\"text-lg font-bold text-slate-800 mb-3\">Deploy as Web App and paste URL here:<\/h3>\n <p class=\"text-slate-500 text-sm mb-3\">Click <strong>Deploy > New deployment<\/strong>. Choose Web App, set access to <strong>“Anyone”<\/strong>. Copy the URL and paste it below.<\/p>\n <div class=\"flex gap-3\">\n <input type=\"text\" id=\"input-url\" placeholder=\"https:\/\/script.google.com\/macros\/s\/...\/exec\" class=\"flex-1 border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow text-slate-700\">\n <button id=\"btn-connect\" class=\"bg-[#5c4dff] hover:bg-indigo-600 text-white font-medium px-6 py-2.5 rounded-lg transition-colors shadow-md\">\n Connect\n <\/button>\n <\/div>\n <p id=\"conn-status\" class=\"mt-3 text-sm font-medium hidden\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n \n \n <div id=\"view-dashboard\" class=\"p-6 md:p-8 space-y-6 hidden bg-slate-50\">\n \n <header class=\"flex flex-col md:flex-row justify-between items-start md:items-center bg-white p-6 rounded-2xl shadow-sm border border-slate-200\">\n <div>\n <h1 class=\"text-2xl font-black text-slate-900 tracking-tight\">General Dashboard & KPIs<\/h1>\n <p class=\"text-slate-500 mt-1 text-sm font-medium\">Workload analysis, account distribution, and pending cases<\/p>\n <\/div>\n <div class=\"flex gap-3 mt-4 md:mt-0\">\n <button onclick=\"document.getElementById('nav-settings').click()\" class=\"text-slate-500 hover:text-indigo-600 font-medium px-4 py-2 rounded-lg transition-colors flex items-center gap-2 border border-slate-200 bg-slate-50 hover:bg-indigo-50 text-sm shadow-sm\">\n <i class=\"fa-solid fa-link\"><\/i> <span id=\"db-indicator\" class=\"text-xs font-bold\">Connected<\/span>\n <\/button>\n <\/div>\n <\/header>\n\n \n <div id=\"dash-kpis\" class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n \n <\/div>\n\n \n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n \n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col h-full\">\n <div class=\"px-6 py-5 border-b border-slate-100 bg-slate-50\/50 shrink-0\">\n <h3 class=\"text-base font-extrabold text-slate-800 flex items-center gap-2\"><i class=\"fa-solid fa-users text-indigo-500\"><\/i> Open Cases by Analyst<\/h3>\n <\/div>\n <div id=\"dash-tickets-person\" class=\"p-6 space-y-4 overflow-y-auto flex-1 max-h-80\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col h-full\">\n <div class=\"px-6 py-5 border-b border-slate-100 bg-slate-50\/50 shrink-0\">\n <h3 class=\"text-base font-extrabold text-slate-800 flex items-center gap-2\"><i class=\"fa-solid fa-layer-group text-indigo-500\"><\/i> Pending Cases by Area<\/h3>\n <\/div>\n <div id=\"dash-tickets-category\" class=\"p-6 space-y-4 overflow-y-auto flex-1 max-h-80\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 p-6 md:p-8\">\n <h3 class=\"text-base font-extrabold text-slate-800 mb-6 flex items-center gap-2 pb-4 border-b border-slate-100\"><i class=\"fa-solid fa-address-book text-slate-400\"><\/i> Directory Composition (Vendors by Category)<\/h3>\n <div id=\"dash-categories\" class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-4\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col\">\n <div class=\"px-6 py-5 border-b border-slate-100 bg-slate-50\/50 shrink-0 flex justify-between items-center\">\n <h3 class=\"text-base font-extrabold text-slate-800 flex items-center gap-2\"><i class=\"fa-solid fa-clock text-rose-500\"><\/i> Cases Due Soon (Next 48 hrs) or Overdue<\/h3>\n <span class=\"bg-slate-200 text-slate-600 text-[10px] font-bold px-2 py-1 rounded\">Priority Attention<\/span>\n <\/div>\n <div id=\"dash-expirations\" class=\"p-6 space-y-4 max-h-96 overflow-y-auto\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n \n \n <div id=\"view-urgent\" class=\"hidden h-full flex flex-col bg-slate-100\">\n \n <div class=\"bg-white px-6 md:px-10 py-6 border-b border-slate-200 shrink-0\">\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4\">\n <div>\n <h1 class=\"text-2xl font-black text-slate-900 flex items-center gap-3\">\n <div class=\"bg-red-100 text-red-600 w-10 h-10 rounded-xl flex items-center justify-center shadow-sm\">\n <i class=\"fa-solid fa-fire text-xl\"><\/i>\n <\/div>\n Workspace: Urgent Cases\n <\/h1>\n <p class=\"text-slate-500 mt-2 text-sm max-w-2xl\">Review high priority vendors, special administrative tasks, and accounts marked as Past Due Unmatched.<\/p>\n <\/div>\n <div class=\"flex items-center gap-3\">\n <div class=\"bg-red-50 border border-red-100 px-4 py-3 rounded-xl flex items-center gap-3 shadow-sm\">\n <div class=\"text-red-800 font-bold text-sm\">Total Active:<\/div>\n <div id=\"urgent-total-counter\" class=\"text-2xl font-black text-red-600\">0<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white border-b border-slate-200 px-6 md:px-10 py-4 shrink-0 flex flex-col lg:flex-row gap-4 justify-between items-center shadow-sm overflow-x-auto\">\n <div class=\"flex flex-wrap items-center gap-3 w-full lg:w-auto\">\n <span class=\"text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5\">\n <i class=\"fa-solid fa-filter text-indigo-500\"><\/i> Filter By:\n <\/span>\n \n <select id=\"filter-urgent-assigned\" class=\"bg-slate-50 border border-slate-300 rounded-lg text-xs font-semibold px-3 py-2 text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow cursor-pointer\">\n <option value=\"all\">\ud83d\udc65 All Analysts<\/option>\n <\/select>\n \n <select id=\"filter-urgent-origin\" class=\"bg-slate-50 border border-slate-300 rounded-lg text-xs font-semibold px-3 py-2 text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow cursor-pointer\">\n <option value=\"all\">\ud83c\udff7\ufe0f All Types<\/option>\n <option value=\"ticket\">\ud83c\udf9f\ufe0f Tickets Only<\/option>\n <option value=\"pastdue\">\ud83d\udcb0 Past Due Only<\/option>\n <\/select>\n\n <select id=\"filter-urgent-category\" class=\"bg-slate-50 border border-slate-300 rounded-lg text-xs font-semibold px-3 py-2 text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow cursor-pointer max-w-[160px]\">\n <option value=\"all\">\ud83d\udcc1 All Categories<\/option>\n <\/select>\n\n <select id=\"filter-urgent-priority\" class=\"bg-slate-50 border border-slate-300 rounded-lg text-xs font-semibold px-3 py-2 text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow cursor-pointer\">\n <option value=\"all\">\u26a1 All Priorities<\/option>\n <option value=\"Alta\">\ud83d\udd34 High<\/option>\n <option value=\"Media\">\ud83d\udfe1 Medium<\/option>\n <option value=\"Baja\">\ud83d\udfe2 Low<\/option>\n <\/select>\n\n <button id=\"btn-clear-urgent-filters\" class=\"hidden text-xs font-bold text-red-500 hover:text-red-600 transition-colors flex items-center gap-1 ml-1\">\n <i class=\"fa-solid fa-circle-xmark\"><\/i> Clear Filters\n <\/button>\n <\/div>\n <div class=\"relative w-full lg:w-64 shrink-0 mt-3 lg:mt-0\">\n <input type=\"text\" id=\"search-urgent-input\" placeholder=\"Search ticket or task...\" class=\"w-full pl-9 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none text-xs font-medium\" \/>\n <i class=\"fa-solid fa-search absolute left-3 top-2.5 text-slate-400 text-xs\"><\/i>\n <\/div>\n <\/div>\n\n \n <div class=\"flex-1 overflow-y-auto p-6 md:p-10\">\n <div id=\"urgent-cards-container\" class=\"grid grid-cols-1 gap-4 pb-20 max-w-7xl mx-auto\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n \n \n <div id=\"view-cases\" class=\"hidden h-full flex flex-col bg-slate-100\">\n <div class=\"bg-white px-6 md:px-10 py-6 border-b border-slate-200 shrink-0\">\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4\">\n <div>\n <h1 class=\"text-2xl font-black text-slate-900 flex items-center gap-3\">\n <div class=\"bg-indigo-100 text-indigo-600 w-10 h-10 rounded-xl flex items-center justify-center shadow-sm\">\n <i class=\"fa-solid fa-ticket-alt text-xl\"><\/i>\n <\/div>\n Open Cases & Tickets Inbox\n <\/h1>\n <p class=\"text-slate-500 mt-2 text-sm max-w-2xl\">Operational inbox to manage assignments and issued weekly logs.<\/p>\n <\/div>\n <div class=\"bg-indigo-50 border border-indigo-100 px-4 py-3 rounded-xl flex items-center gap-3 shadow-sm\">\n <div class=\"text-indigo-800 font-bold text-sm\">Active Tickets:<\/div>\n <div id=\"cases-active-counter\" class=\"text-2xl font-black text-indigo-600\">0<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-white border-b border-slate-200 px-6 md:px-10 py-4 shrink-0 flex flex-col lg:flex-row gap-4 justify-between items-center shadow-sm\">\n <div class=\"flex flex-wrap items-center gap-3 w-full lg:w-auto\">\n <span class=\"text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5\">\n <i class=\"fa-solid fa-filter text-indigo-500\"><\/i> Filter Inbox:\n <\/span>\n <select id=\"filter-cases-responsible\" class=\"bg-slate-50 border border-slate-300 rounded-lg text-xs font-semibold px-3 py-2 text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer\">\n <option value=\"all\">\ud83d\udc65 All Analysts<\/option>\n <\/select>\n <select id=\"filter-cases-status\" class=\"bg-slate-50 border border-slate-300 rounded-lg text-xs font-semibold px-3 py-2 text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer\">\n <option value=\"all\">\u23f1\ufe0f All Statuses<\/option>\n <option value=\"Pendiente\">Pending<\/option>\n <option value=\"En Proceso\">In Process<\/option>\n <option value=\"Completado\">Completed<\/option>\n <\/select>\n \n \n <div class=\"flex gap-1 p-1 bg-slate-100 rounded-lg text-xs font-semibold ml-1\">\n <button id=\"toggle-cases-active\" class=\"cases-view-tab px-3 py-1.5 rounded-lg bg-white text-slate-800 shadow-sm transition-all font-bold\">Active Cases<\/button>\n <button id=\"toggle-cases-completed\" class=\"cases-view-tab px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900 transition-all\">Completed<\/button>\n <button id=\"toggle-cases-all\" class=\"cases-view-tab px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900 transition-all\">All<\/button>\n <\/div>\n <\/div>\n <div class=\"relative w-full lg:w-72 mt-3 lg:mt-0\">\n <input type=\"text\" id=\"search-cases-input\" placeholder=\"Search ticket...\" class=\"w-full pl-9 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none text-xs font-medium\" \/>\n <i class=\"fa-solid fa-search absolute left-3 top-2.5 text-slate-400 text-xs\"><\/i>\n <\/div>\n <\/div>\n\n <div class=\"flex-1 overflow-y-auto p-6 md:p-10\">\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden max-w-7xl mx-auto\">\n <div class=\"overflow-x-auto\">\n <table class=\"w-full text-left text-sm whitespace-nowrap\">\n <thead class=\"bg-slate-100 text-slate-500 font-semibold uppercase text-[10px] tracking-wider\">\n <tr>\n <th class=\"px-5 py-3 rounded-tl-lg\">Ticket \/ Origin<\/th>\n <th class=\"px-5 py-3\">Dates & History<\/th>\n <th class=\"px-5 py-3\">Priority<\/th>\n <th class=\"px-5 py-3\">Assigned To<\/th>\n <th class=\"px-5 py-3\">Status<\/th>\n <th class=\"px-5 py-3 text-right\">Options<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"cases-tbody\" class=\"divide-y divide-slate-100\"><\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n \n \n <div id=\"view-directory\" class=\"p-6 md:p-8 space-y-6 hidden\">\n \n <header class=\"flex flex-col md:flex-row justify-between items-start md:items-center bg-white p-6 rounded-2xl shadow-sm border border-slate-200\">\n <div>\n <h1 class=\"text-2xl font-black text-slate-900 tracking-tight\">Vendors and Tasks Directory<\/h1>\n <p class=\"text-slate-500 mt-1 text-sm font-medium\">Master inbox of the permanent catalog for consultation and maintenance<\/p>\n <\/div>\n <div class=\"flex gap-3 mt-4 md:mt-0\">\n <button id=\"btn-export\" class=\"flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-lg font-bold transition-colors shadow-sm\">\n <i class=\"fa-solid fa-file-csv\"><\/i> Export Directory\n <\/button>\n <\/div>\n <\/header>\n\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden\">\n <div class=\"flex overflow-x-auto border-b border-slate-200 bg-slate-50\/50\">\n <button id=\"filter-all\" class=\"filter-tab whitespace-nowrap px-6 py-4 text-sm font-bold border-b-2 border-indigo-600 text-indigo-600 transition-colors\">\n <i class=\"fa-solid fa-layer-group mr-2\"><\/i>All Active\n <\/button>\n <button id=\"filter-vendors\" class=\"filter-tab whitespace-nowrap px-6 py-4 text-sm font-medium text-slate-500 hover:text-slate-800 transition-colors\">\n <i class=\"fa-solid fa-building mr-2\"><\/i>Active Vendors\n <\/button>\n <button id=\"filter-tasks\" class=\"filter-tab whitespace-nowrap px-6 py-4 text-sm font-medium text-slate-500 hover:text-slate-800 transition-colors\">\n <i class=\"fa-solid fa-clipboard-list mr-2\"><\/i>Active Special Tasks\n <\/button>\n <button id=\"filter-completed\" class=\"filter-tab whitespace-nowrap px-6 py-4 text-sm font-medium text-slate-500 hover:text-slate-800 transition-colors\">\n <i class=\"fa-solid fa-check-double text-emerald-500 mr-2\"><\/i>Completed\n <\/button>\n <\/div>\n\n <div class=\"p-5 border-b border-slate-100 flex flex-col sm:flex-row justify-between items-center gap-4 bg-white\">\n <h2 id=\"table-title\" class=\"text-lg font-bold text-slate-800 flex items-center gap-2\"><i class=\"fa-solid fa-list-check text-indigo-500\"><\/i> Database (0)<\/h2>\n <div class=\"relative w-full sm:w-80\">\n <input type=\"text\" id=\"search-input\" placeholder=\"Search...\" class=\"w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none text-sm font-medium shadow-sm\" \/>\n <i class=\"fa-solid fa-search absolute left-3.5 top-2.5 text-slate-400\"><\/i>\n <\/div>\n <\/div>\n <div class=\"overflow-x-auto\">\n <table class=\"w-full text-left text-sm whitespace-nowrap\">\n <thead class=\"bg-slate-100 text-slate-500 font-semibold uppercase text-[10px] tracking-wider\">\n <tr>\n <th class=\"px-5 py-4 rounded-tl-lg\">Name \/ Task<\/th>\n <th class=\"px-5 py-4\">Last Management<\/th>\n <th class=\"px-5 py-4\">Priority \/ Alarms<\/th>\n <th class=\"px-5 py-4\">Responsible \/ Group<\/th>\n <th class=\"px-5 py-4\">Directory Status<\/th>\n <th class=\"px-5 py-4 text-right font-bold text-indigo-600\">Options<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"vendors-tbody\" class=\"divide-y divide-slate-100\"><\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n\n \n \n \n <div id=\"view-add-vendor\" class=\"hidden h-full flex flex-col bg-slate-100\">\n <div class=\"bg-white px-6 md:px-10 py-8 border-b border-slate-200 shrink-0\">\n <h1 class=\"text-2xl font-black text-slate-900 flex items-center gap-3\">\n <div class=\"bg-indigo-100 text-indigo-600 w-10 h-10 rounded-xl flex items-center justify-center shadow-sm\">\n <i class=\"fa-solid fa-file-circle-plus text-xl\"><\/i>\n <\/div>\n Catalog Entry and Upload\n <\/h1>\n <p class=\"text-slate-500 mt-2 text-sm max-w-2xl\">Add new permanent vendors individually, perform bulk uploads, or enter administrative task templates.<\/p>\n <\/div>\n \n <div class=\"flex-1 overflow-y-auto p-6 md:p-10\">\n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-slate-200 max-w-5xl mx-auto\">\n <div class=\"flex border-b border-slate-200 mb-6 gap-2\">\n <button id=\"tab-single\" class=\"pb-3 px-4 text-sm font-bold transition-colors border-b-2 border-indigo-600 text-indigo-600\">Individual Entry<\/button>\n <button id=\"tab-bulk\" class=\"pb-3 px-4 text-sm font-medium transition-colors text-slate-400 hover:text-slate-700\">Bulk Upload<\/button>\n <button id=\"tab-task\" class=\"pb-3 px-4 text-sm font-medium transition-colors text-slate-400 hover:text-slate-700 flex items-center gap-1.5\"><i class=\"fa-solid fa-list-check text-purple-600\"><\/i> New Special Task<\/button>\n <\/div>\n\n \n <form id=\"form-single\" class=\"space-y-5\">\n <div class=\"flex flex-col md:flex-row gap-5\">\n <div class=\"flex-1\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Vendor Name<\/label>\n <input type=\"text\" id=\"new-name\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" required \/>\n <\/div>\n <div class=\"w-full md:w-48\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Type<\/label>\n <select id=\"new-type\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\">\n <option value=\"Moto\">Moto<\/option><option value=\"OEM\">OEM<\/option><option value=\"Non Inventory\">Non Inventory<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"flex flex-col md:flex-row gap-5 items-end\">\n <div class=\"w-full md:w-1\/4\">\n <label class=\"block text-sm font-bold text-indigo-700 mb-1\">\n <i class=\"fa-solid fa-user-plus mr-1\"><\/i>Responsible\n <\/label>\n <select id=\"new-assigned\" class=\"w-full bg-slate-50 border border-indigo-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" required>\n \n <\/select>\n <\/div>\n <div class=\"w-full md:w-1\/4\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Default Priority<\/label>\n <select id=\"new-priority\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\">\n <option value=\"Alta\">\ud83d\udd34 High (Urgent)<\/option><option value=\"Media\" selected>\ud83d\udfe1 Medium<\/option><option value=\"Baja\">\ud83d\udfe2 Low<\/option>\n <\/select>\n <\/div>\n <div class=\"w-full md:w-1\/4\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Last Statement Rev.<\/label>\n <input type=\"date\" id=\"new-statement\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" \/>\n <\/div>\n <div class=\"w-full md:w-1\/4\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Critical Date \/ Due Date<\/label>\n <input type=\"date\" id=\"new-date\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" \/>\n <\/div>\n <\/div>\n\n <div class=\"flex justify-end pt-2\">\n <button type=\"submit\" class=\"w-full md:w-1\/3 bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-xl font-bold shadow-md transition-all hover:shadow-lg flex items-center justify-center gap-2\">\n <i class=\"fa-solid fa-plus\"><\/i> Save Vendor to Directory\n <\/button>\n <\/div>\n <\/form>\n\n \n <div id=\"form-bulk\" class=\"space-y-4 hidden\">\n <div class=\"flex flex-col md:flex-row gap-5\">\n <div class=\"flex-1\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Paste the list (One per line) – <span class=\"text-emerald-600 font-bold text-xs\">Accepts +100 rows at once<\/span><\/label>\n <textarea id=\"bulk-text\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-4 h-44 focus:ring-2 focus:ring-indigo-500 outline-none font-mono text-sm leading-relaxed transition-shadow\" placeholder=\"Vendor 1 Vendor 2...\"><\/textarea>\n <\/div>\n <div class=\"w-full md:w-72 flex flex-col justify-between space-y-3\">\n <div>\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Classification type:<\/label>\n <select id=\"bulk-type\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none mb-3 transition-shadow\">\n <option value=\"Moto\">Moto<\/option><option value=\"OEM\">OEM<\/option><option value=\"Non Inventory\">Non Inventory<\/option>\n <\/select>\n \n <label class=\"block text-sm font-bold text-indigo-700 mb-1\">\n <i class=\"fa-solid fa-user-check mr-1\"><\/i>Assign to responsible:\n <\/label>\n <select id=\"bulk-assigned\" class=\"w-full bg-slate-50 border border-indigo-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none mb-4 transition-shadow\" required>\n \n <\/select>\n <\/div>\n <button id=\"btn-upload-bulk\" class=\"w-full bg-[#2b2d42] hover:bg-slate-800 text-white px-4 py-3 rounded-xl font-bold shadow-md transition-colors flex items-center justify-center gap-2\">\n <i class=\"fa-solid fa-cloud-arrow-up\"><\/i> Upload Bulk List\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <form id=\"form-task\" class=\"space-y-5 hidden\">\n <div class=\"flex flex-col md:flex-row gap-5\">\n <div class=\"flex-1\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Task Title \/ Special Pending<\/label>\n <input type=\"text\" id=\"task-title\" placeholder=\"e.g. VRA review pending parts, Verbal signature checks, etc.\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" required \/>\n <\/div>\n <div class=\"w-full md:w-56\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Task Type<\/label>\n <select id=\"task-type\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\">\n <option value=\"Tarea: Verificaci\u00f3n Verbal\">\ud83d\udcde Verbal Verification<\/option>\n <option value=\"Tarea: Revisi\u00f3n VRA\">\ud83d\udcdd VRA Review<\/option>\n <option value=\"Tarea: Administrativa\">\u2699\ufe0f Admin Task<\/option>\n <option value=\"Tarea: Tr\u00e1mite Especial\">\ud83d\udccc Special Procedure<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"flex flex-col md:flex-row gap-5 items-end\">\n <div class=\"w-full md:w-1\/3\">\n <label class=\"block text-sm font-bold text-indigo-700 mb-1\">\n <i class=\"fa-solid fa-user-plus mr-1\"><\/i>Assigned Responsible\n <\/label>\n <select id=\"task-assigned\" class=\"w-full bg-slate-50 border border-indigo-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" required>\n \n <\/select>\n <\/div>\n <div class=\"w-full md:w-1\/3\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Default Priority<\/label>\n <select id=\"task-priority\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\">\n <option value=\"Alta\">\ud83d\udd34 High (Urgent)<\/option><option value=\"Media\" selected>\ud83d\udfe1 Medium<\/option><option value=\"Baja\">\ud83d\udfe2 Low<\/option>\n <\/select>\n <\/div>\n <div class=\"w-full md:w-1\/3\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Critical Date \/ Limit<\/label>\n <input type=\"date\" id=\"task-date\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" \/>\n <\/div>\n <\/div>\n\n <div class=\"col-span-2\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Task Notes \/ Instructions<\/label>\n <textarea id=\"task-notes\" placeholder=\"Add details, case numbers, necessary signatures, emails or specifications to complete the task...\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-4 h-24 focus:ring-2 focus:ring-indigo-500 outline-none font-sans text-sm leading-relaxed transition-shadow resize-none\"><\/textarea>\n <\/div>\n\n <div class=\"flex justify-end pt-2\">\n <button type=\"submit\" class=\"w-full md:w-1\/3 bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-xl font-bold shadow-md transition-all hover:shadow-lg flex items-center justify-center gap-2\">\n <i class=\"fa-solid fa-list-check\"><\/i> Save Task Template\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n \n <div id=\"edit-modal\" class=\"fixed inset-0 bg-slate-900\/60 backdrop-blur-sm items-center justify-center p-4 z-[200] hidden overflow-y-auto\">\n <div class=\"bg-white rounded-2xl shadow-2xl max-w-2xl w-full border border-slate-200 transform transition-all scale-100 my-auto\">\n <div class=\"p-5 border-b border-slate-100 flex justify-between items-center bg-slate-50 rounded-t-2xl\">\n <h3 class=\"text-xl font-bold text-slate-900\"><i class=\"fa-solid fa-pen-to-square text-indigo-600 mr-2\"><\/i> Edit: <span id=\"edit-vendor-name\" class=\"text-indigo-800\"><\/span><\/h3>\n <button id=\"close-modal\" class=\"text-slate-400 hover:text-red-500 bg-white shadow-sm border border-slate-200 hover:bg-red-50 w-8 h-8 rounded-full flex items-center justify-center transition-colors\"><i class=\"fa-solid fa-times\"><\/i><\/button>\n <\/div>\n <form id=\"form-edit\" class=\"p-6 space-y-4\">\n <input type=\"hidden\" id=\"edit-id\"><input type=\"hidden\" id=\"edit-status\">\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Priority<\/label>\n <select id=\"edit-priority\" class=\"w-full border border-slate-300 rounded-lg p-2.5 outline-none bg-slate-50 focus:ring-2 focus:ring-indigo-500\">\n <option value=\"Alta\">\ud83d\udd34 High (Urgent)<\/option>\n <option value=\"Media\">\ud83d\udfe1 Medium<\/option>\n <option value=\"Baja\">\ud83d\udfe2 Low<\/option>\n <\/select>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Critical Date \/ Due Date<\/label>\n <input type=\"date\" id=\"edit-date\" class=\"w-full border border-slate-300 rounded-lg p-2.5 outline-none bg-slate-50 focus:ring-2 focus:ring-indigo-500\" \/>\n <\/div>\n <div id=\"edit-statement-container\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Last Statement Rev.<\/label>\n <input type=\"date\" id=\"edit-statement\" class=\"w-full border border-slate-300 rounded-lg p-2.5 outline-none bg-slate-50 focus:ring-2 focus:ring-indigo-500\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Last Worked Date<\/label>\n <input type=\"date\" id=\"edit-worked\" class=\"w-full border border-indigo-300 bg-indigo-50 focus:ring-2 focus:ring-indigo-500 rounded-lg p-2.5 outline-none text-indigo-700 font-medium\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-emerald-700 mb-1\"><i class=\"fa-solid fa-check-double mr-1\"><\/i> Completed Date<\/label>\n <input type=\"date\" id=\"edit-completed\" class=\"w-full border border-emerald-300 bg-emerald-50 focus:ring-2 focus:ring-emerald-500 rounded-lg p-2.5 outline-none text-emerald-700 font-medium\" \/>\n <\/div>\n \n <div class=\"col-span-2\">\n <label class=\"block text-sm font-bold text-orange-600 mb-1\"><i class=\"fa-solid fa-user-pen mr-1\"><\/i> Assigned Responsible (Reassign)<\/label>\n <select id=\"edit-assigned\" class=\"w-full border-2 border-orange-200 bg-orange-50 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 rounded-lg p-2.5 outline-none text-slate-800 font-medium\" required>\n \n <\/select>\n <\/div>\n\n \n <div class=\"col-span-2 bg-orange-50 border border-orange-200 rounded-xl p-4 flex items-center gap-3 mt-2 shadow-sm\">\n <input type=\"checkbox\" id=\"edit-pastdue\" class=\"w-5 h-5 text-orange-600 rounded border-orange-300 focus:ring-orange-500 cursor-pointer\">\n <label for=\"edit-pastdue\" class=\"text-sm font-bold text-orange-900 cursor-pointer flex-1\">\n <i class=\"fa-solid fa-file-invoice-dollar mr-1\"><\/i> Mark as “Past Due Unmatched” pending review\n <\/label>\n <\/div>\n \n <div class=\"col-span-2\">\n <label id=\"label-edit-notes\" class=\"block text-sm font-medium text-slate-700 mb-1\">Notes \/ Invoices Involved (Details to work on)<\/label>\n <textarea id=\"edit-notes\" class=\"w-full border border-slate-300 rounded-lg p-3 outline-none bg-slate-50 focus:ring-2 focus:ring-indigo-500 h-24 resize-none leading-relaxed text-sm\"><\/textarea>\n <\/div>\n\n \n <div id=\"edit-history-container\" class=\"col-span-2 hidden mt-4\">\n <h4 class=\"text-sm font-bold text-slate-800 border-b border-slate-200 pb-2 mb-3\"><i class=\"fa-solid fa-clock-rotate-left text-indigo-500 mr-2\"><\/i> Case & Notes History<\/h4>\n <div id=\"edit-history-list\" class=\"space-y-3 max-h-48 overflow-y-auto bg-slate-50 p-3 rounded-lg border border-slate-200 text-xs\">\n \n <\/div>\n <\/div>\n\n <\/div>\n <div class=\"flex justify-end gap-3 mt-6 pt-4 border-t border-slate-100\">\n <button type=\"button\" id=\"btn-cancel-edit\" class=\"px-5 py-2.5 text-slate-600 bg-slate-100 hover:bg-slate-200 border border-slate-200 rounded-lg font-medium transition-colors\">Cancel<\/button>\n <button type=\"submit\" class=\"px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium flex items-center gap-2 shadow-md hover:shadow-lg transition-all\">\n <i class=\"fa-solid fa-floppy-disk\"><\/i> Save Changes\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div id=\"ticket-modal\" class=\"fixed inset-0 bg-slate-900\/60 backdrop-blur-sm items-center justify-center p-4 z-[210] hidden\">\n <div class=\"bg-white rounded-2xl shadow-2xl max-w-lg w-full border border-slate-200 overflow-hidden\">\n <div class=\"p-5 border-b border-slate-100 flex justify-between items-center bg-slate-50\">\n <h3 class=\"text-lg font-bold text-slate-900\">\n <i class=\"fa-solid fa-ticket-alt text-indigo-600 mr-2\"><\/i> Issue New Case \/ Weekly Ticket\n <\/h3>\n <button id=\"close-ticket-modal\" class=\"text-slate-400 hover:text-red-500 bg-white shadow-sm border border-slate-200 hover:bg-red-50 w-8 h-8 rounded-full flex items-center justify-center transition-colors\">\n <i class=\"fa-solid fa-times\"><\/i>\n <\/button>\n <\/div>\n <form id=\"form-ticket\" class=\"p-6 space-y-4\">\n <input type=\"hidden\" id=\"ticket-ref-id\">\n <div>\n <label class=\"block text-xs font-bold text-slate-500 uppercase tracking-wider mb-1\">Origin \/ Directory Reference<\/label>\n <input type=\"text\" id=\"ticket-ref-name\" class=\"w-full bg-slate-100 border border-slate-200 rounded-lg p-2.5 outline-none font-semibold text-slate-800\" readonly>\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-xs font-bold text-slate-500 uppercase tracking-wider mb-1\">Origin Type<\/label>\n <input type=\"text\" id=\"ticket-ref-type\" class=\"w-full bg-slate-100 border border-slate-200 rounded-lg p-2.5 outline-none text-slate-600 text-sm\" readonly>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-slate-500 uppercase tracking-wider mb-1\">Classification \/ Group<\/label>\n <input type=\"text\" id=\"ticket-ref-category\" class=\"w-full bg-slate-100 border border-slate-200 rounded-lg p-2.5 outline-none text-slate-600 text-sm\" readonly>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-xs font-bold text-indigo-700 uppercase tracking-wider mb-1\">Assign Ticket Responsible<\/label>\n <select id=\"ticket-assigned\" class=\"w-full border border-indigo-200 bg-indigo-50\/50 rounded-lg p-2.5 outline-none text-slate-800 font-semibold focus:ring-2 focus:ring-indigo-500\" required>\n \n <\/select>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-slate-500 uppercase tracking-wider mb-1\">Case Priority<\/label>\n <select id=\"ticket-priority\" class=\"w-full border border-slate-300 rounded-lg p-2.5 outline-none bg-slate-50 focus:ring-2 focus:ring-indigo-500\">\n <option value=\"Alta\">\ud83d\udd34 High (Urgent)<\/option>\n <option value=\"Media\" selected>\ud83d\udfe1 Medium<\/option>\n <option value=\"Baja\">\ud83d\udfe2 Low<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-slate-500 uppercase tracking-wider mb-1\">Critical Date for this case<\/label>\n <input type=\"date\" id=\"ticket-date\" class=\"w-full border border-slate-300 rounded-lg p-2.5 outline-none bg-slate-50 focus:ring-2 focus:ring-indigo-500\" \/>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-indigo-700 uppercase tracking-wider mb-1\">Initial Comments \/ Case Instructions<\/label>\n <textarea id=\"ticket-notes\" placeholder=\"Describe specific requirements for this weekly management...\" class=\"w-full border border-indigo-200 rounded-lg p-3 outline-none bg-indigo-50\/10 focus:ring-2 focus:ring-indigo-500 h-24 resize-none leading-relaxed text-sm\"><\/textarea>\n <\/div>\n <div class=\"flex justify-end gap-3 pt-4 border-t border-slate-100\">\n <button type=\"button\" id=\"btn-cancel-ticket\" class=\"px-5 py-2.5 text-slate-600 bg-slate-100 hover:bg-slate-200 border border-slate-200 rounded-lg font-medium transition-colors\">Cancel<\/button>\n <button type=\"submit\" class=\"px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-bold flex items-center gap-2 shadow-md hover:shadow-lg transition-all\">\n <i class=\"fa-solid fa-paper-plane\"><\/i> Issue Work Ticket\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div id=\"confirm-modal\" class=\"fixed inset-0 bg-slate-900\/60 backdrop-blur-sm items-center justify-center p-4 z-[250] hidden\">\n <div class=\"bg-white rounded-xl shadow-2xl max-w-md w-full border border-slate-200 p-6 space-y-4\">\n <div class=\"flex items-center gap-3 text-amber-500\">\n <i class=\"fa-solid fa-triangle-exclamation text-2xl\"><\/i>\n <h3 class=\"text-lg font-bold text-slate-900\">Are you sure?<\/h3>\n <\/div>\n <p id=\"confirm-modal-text\" class=\"text-sm text-slate-600 leading-relaxed\"><\/p>\n <div class=\"flex justify-end gap-3 pt-2\">\n <button type=\"button\" id=\"confirm-btn-cancel\" class=\"px-4 py-2 text-xs font-semibold text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors\">Cancel<\/button>\n <button type=\"button\" id=\"confirm-btn-ok\" class=\"px-4 py-2 text-xs font-bold text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors\">Confirm<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script>\n let allVendors = [];\n let searchTerm = '';\n let tableFilter = 'all'; \n \n const DEFAULT_SHEET_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbwIkJTKuBvpPXYubGnDb36jcdHYkYaTRmnYq8yJbR6BtdjVhw1a99h4rQGqFn4HvvU\/exec';\n let savedSheetUrl = localStorage.getItem('ap_sheet_url') || DEFAULT_SHEET_URL;\n\n const DEFAULT_RESPONSIBLES = [\"Maria\", \"Duvan\", \"Jessica\", \"Deivis\", \"Roberto\", \"Karen\"];\n let responsiblesList = JSON.parse(localStorage.getItem('ap_responsibles')) || DEFAULT_RESPONSIBLES;\n\n let urgentAssignedFilter = 'all';\n let urgentOriginFilter = 'all';\n let urgentCategoryFilter = 'all';\n let urgentPriorityFilter = 'all';\n let urgentSearchTerm = '';\n\n let casesResponsibleFilter = 'all';\n let casesStatusFilter = 'all';\n let casesSearchTerm = '';\n let casesSegmentFilter = 'active'; \/\/ Filter variable for open cases tabs\n\n const navDash = document.getElementById('nav-dashboard');\n const navDir = document.getElementById('nav-directory'); \n const navSet = document.getElementById('nav-settings');\n const navUrgent = document.getElementById('nav-urgent');\n const navCases = document.getElementById('nav-cases');\n const navAdd = document.getElementById('nav-add');\n \n const viewDash = document.getElementById('view-dashboard');\n const viewDir = document.getElementById('view-directory'); \n const viewSet = document.getElementById('view-settings');\n const viewUrgent = document.getElementById('view-urgent');\n const viewCases = document.getElementById('view-cases');\n const viewAdd = document.getElementById('view-add-vendor');\n\n let onConfirmCallback = null;\n const showCustomConfirm = (message, callback) => {\n document.getElementById('confirm-modal-text').innerText = message;\n onConfirmCallback = callback;\n const modal = document.getElementById('confirm-modal');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n };\n\n document.getElementById('confirm-btn-cancel').addEventListener('click', () => {\n document.getElementById('confirm-modal').classList.add('hidden');\n document.getElementById('confirm-modal').classList.remove('flex');\n onConfirmCallback = null;\n });\n\n document.getElementById('confirm-btn-ok').addEventListener('click', () => {\n document.getElementById('confirm-modal').classList.add('hidden');\n document.getElementById('confirm-modal').classList.remove('flex');\n if (onConfirmCallback) onConfirmCallback();\n onConfirmCallback = null;\n });\n\n const resetNavStyles = () => {\n const navs = [navDash, navDir, navSet, navUrgent, navCases, navAdd];\n navs.forEach(nav => {\n nav.classList.remove('bg-active-menu', 'text-active-menu', 'shadow-md', 'border-transparent');\n nav.classList.add('text-slate-300', 'hover:bg-white\/5');\n });\n };\n\n const hideAllViews = () => {\n viewDash.classList.add('hidden');\n viewDir.classList.add('hidden');\n viewSet.classList.add('hidden');\n viewUrgent.classList.add('hidden');\n viewCases.classList.add('hidden');\n viewAdd.classList.add('hidden');\n };\n\n const showSettings = () => {\n hideAllViews(); \n viewSet.classList.remove('hidden');\n resetNavStyles();\n navSet.classList.add('bg-active-menu', 'text-active-menu', 'shadow-md'); navSet.classList.remove('text-slate-300', 'hover:bg-white\/5');\n if(savedSheetUrl) document.getElementById('input-url').value = savedSheetUrl;\n document.getElementById('settings-responsibles').value = responsiblesList.join('\\n');\n };\n\n const showDashboard = () => {\n if(!savedSheetUrl) { showSettings(); return; } \n hideAllViews(); \n viewDash.classList.remove('hidden');\n resetNavStyles();\n navDash.classList.add('bg-active-menu', 'text-active-menu', 'shadow-md'); navDash.classList.remove('text-slate-300', 'hover:bg-white\/5');\n };\n\n const showDirectory = () => {\n if(!savedSheetUrl) { showSettings(); return; } \n hideAllViews(); \n viewDir.classList.remove('hidden');\n resetNavStyles();\n navDir.classList.add('bg-active-menu', 'text-active-menu', 'shadow-md'); navDir.classList.remove('text-slate-300', 'hover:bg-white\/5');\n renderTable();\n };\n\n const showUrgentWorkspace = () => {\n if(!savedSheetUrl) { showSettings(); return; }\n hideAllViews(); \n viewUrgent.classList.remove('hidden');\n resetNavStyles();\n navUrgent.classList.add('bg-active-menu', 'text-active-menu', 'shadow-md'); navUrgent.classList.remove('text-slate-300', 'hover:bg-white\/5');\n renderUrgentWorkspace(); \n };\n\n const showCasesWorkspace = () => {\n if(!savedSheetUrl) { showSettings(); return; }\n hideAllViews(); \n viewCases.classList.remove('hidden');\n resetNavStyles();\n navCases.classList.add('bg-active-menu', 'text-active-menu', 'shadow-md'); navCases.classList.remove('text-slate-300', 'hover:bg-white\/5');\n renderCasesWorkspace();\n };\n\n const showAddVendorWorkspace = () => {\n if(!savedSheetUrl) { showSettings(); return; }\n hideAllViews(); \n viewAdd.classList.remove('hidden');\n resetNavStyles();\n navAdd.classList.add('bg-active-menu', 'text-active-menu', 'shadow-md'); navAdd.classList.remove('text-slate-300', 'hover:bg-white\/5');\n };\n\n navDash.addEventListener('click', showDashboard);\n navDir.addEventListener('click', showDirectory);\n navSet.addEventListener('click', showSettings);\n navUrgent.addEventListener('click', showUrgentWorkspace);\n navCases.addEventListener('click', showCasesWorkspace);\n navAdd.addEventListener('click', showAddVendorWorkspace);\n\n function copyScriptCode() {\n const code = document.getElementById('script-code').innerText;\n const textarea = document.createElement('textarea');\n textarea.value = code;\n textarea.style.position = 'fixed';\n document.body.appendChild(textarea);\n textarea.select();\n try {\n document.execCommand('copy');\n const btn = document.getElementById('btn-copy');\n btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i> Copied!';\n setTimeout(() => btn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i> Copy Code', 2000);\n } catch (err) {\n console.error('Copy fallback failed', err);\n }\n document.body.removeChild(textarea);\n }\n\n document.getElementById('btn-connect').addEventListener('click', async () => {\n const urlInput = document.getElementById('input-url').value.trim();\n const statusLabel = document.getElementById('conn-status');\n \n if(!urlInput.includes(\"script.google.com\/macros\/s\/\")) {\n statusLabel.innerText = \"Error: Invalid Google Script URL.\";\n statusLabel.classList.remove('hidden', 'text-emerald-600'); statusLabel.classList.add('text-red-500');\n return;\n }\n\n localStorage.setItem('ap_sheet_url', urlInput);\n savedSheetUrl = urlInput;\n \n statusLabel.innerHTML = '<i class=\"fa-solid fa-spinner fa-spin\"><\/i> Connecting & Loading Database...';\n statusLabel.classList.remove('hidden', 'text-red-500'); statusLabel.classList.add('text-indigo-600');\n \n await fetchVendors(); \n \n statusLabel.classList.add('hidden');\n showSuccess(\"Database connected successfully.\");\n showDashboard();\n });\n\n \/\/ --- UTILS ---\n const generateId = () => Date.now().toString(36) + Math.random().toString(36).substr(2);\n \n const showError = (msg) => {\n document.getElementById('error-text').innerText = msg;\n const el = document.getElementById('error-msg');\n el.classList.remove('hidden'); setTimeout(() => el.classList.add('hidden'), 5000);\n };\n\n const showSuccess = (msg) => {\n document.getElementById('success-text').innerText = msg;\n const el = document.getElementById('success-msg');\n el.classList.remove('hidden'); setTimeout(() => el.classList.add('hidden'), 4000);\n }\n\n const setLoading = (isLoading, msg = \"Loading...\") => {\n const el = document.getElementById('loading-screen');\n document.getElementById('loading-text').innerText = msg;\n isLoading ? el.classList.remove('hidden') : el.classList.add('hidden');\n };\n\n const setBgSyncLoading = (isSyncing, msg = \"Saving...\") => {\n const indicator = document.getElementById('bg-sync-indicator');\n const statusText = document.getElementById('sync-status-text');\n const spinner = document.getElementById('sync-spinner');\n if (isSyncing) {\n statusText.innerText = msg;\n spinner.className = \"fa-solid fa-circle-notch fa-spin text-indigo-400\";\n indicator.classList.remove('hidden');\n } else {\n statusText.innerText = \"Synced\";\n spinner.className = \"fa-solid fa-check text-emerald-400 animate-bounce\";\n setTimeout(() => {\n if (statusText.innerText === \"Synced\") {\n indicator.classList.add('hidden');\n }\n }, 1500);\n }\n };\n\n const getTodayStr = () => {\n const d = new Date();\n const year = d.getFullYear();\n const month = String(d.getMonth() + 1).padStart(2, '0');\n const day = String(d.getDate()).padStart(2, '0');\n return `${year}-${month}-${day}`;\n };\n\n const sanitizeDate = (dateVal) => {\n if (!dateVal) return '';\n if (typeof dateVal === 'string') {\n if (dateVal.includes('T')) return dateVal.split('T')[0];\n const match = dateVal.match(\/^\\d{4}-\\d{2}-\\d{2}\/);\n if (match) return match[0];\n }\n try {\n const d = new Date(dateVal);\n if (!isNaN(d.getTime())) {\n const year = d.getFullYear();\n const month = String(d.getMonth() + 1).padStart(2, '0');\n const day = String(d.getDate()).padStart(2, '0');\n return `${year}-${month}-${day}`;\n }\n } catch (e) {}\n return '';\n };\n\n const sanitizeTimestamp = (val) => {\n if (!val) return Date.now();\n const num = Number(val);\n if (!isNaN(num) && num > 0) return num;\n const parsed = Date.parse(val);\n if (!isNaN(parsed)) return parsed;\n return Date.now();\n };\n\n const isItemTicket = (v) => v.isTicket === 'Yes' || v.isTicket === true;\n\n const logMovement = async (vendor, actionType, details) => {\n if (!savedSheetUrl) return;\n const logData = {\n action: 'log',\n log: {\n id: generateId(),\n timestamp: new Date().toLocaleString('en-US'),\n date: getTodayStr(),\n vendorId: vendor.id,\n vendorName: vendor.name,\n clerk: vendor.assignedTo || 'Unassigned',\n actionType: actionType,\n details: details\n }\n };\n try {\n fetch(savedSheetUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'text\/plain;charset=utf-8' },\n body: JSON.stringify(logData)\n });\n } catch (e) { console.error(\"Error saving log\", e); }\n };\n\n const populateResponsiblesDropdowns = () => {\n const list = responsiblesList;\n \n const newAssignedSelect = document.getElementById('new-assigned');\n newAssignedSelect.innerHTML = '<option value=\"\" disabled selected>-- Select Responsible --<\/option>';\n list.forEach(name => {\n const opt = document.createElement('option'); opt.value = name; opt.textContent = name;\n newAssignedSelect.appendChild(opt);\n });\n\n const bulkAssignedSelect = document.getElementById('bulk-assigned');\n bulkAssignedSelect.innerHTML = '<option value=\"\" disabled selected>-- Select Responsible --<\/option>';\n list.forEach(name => {\n const opt = document.createElement('option'); opt.value = name; opt.textContent = name;\n bulkAssignedSelect.appendChild(opt);\n });\n\n const taskAssignedSelect = document.getElementById('task-assigned');\n taskAssignedSelect.innerHTML = '<option value=\"\" disabled selected>-- Select Responsible --<\/option>';\n list.forEach(name => {\n const opt = document.createElement('option'); opt.value = name; opt.textContent = name;\n taskAssignedSelect.appendChild(opt);\n });\n\n const editAssignedSelect = document.getElementById('edit-assigned');\n editAssignedSelect.innerHTML = '<option value=\"\" disabled selected>-- Select Responsible --<\/option>';\n list.forEach(name => {\n const opt = document.createElement('option'); opt.value = name; opt.textContent = name;\n editAssignedSelect.appendChild(opt);\n });\n\n const ticketAssignedSelect = document.getElementById('ticket-assigned');\n ticketAssignedSelect.innerHTML = '<option value=\"\" disabled selected>-- Select Responsible --<\/option>';\n list.forEach(name => {\n const opt = document.createElement('option'); opt.value = name; opt.textContent = name;\n ticketAssignedSelect.appendChild(opt);\n });\n\n const casesRespSelect = document.getElementById('filter-cases-responsible');\n casesRespSelect.innerHTML = '<option value=\"all\">\ud83d\udc65 All Analysts<\/option>';\n list.forEach(name => {\n const opt = document.createElement('option'); opt.value = name; opt.textContent = `\ud83d\udc64 ${name}`;\n casesRespSelect.appendChild(opt);\n });\n };\n\n document.getElementById('btn-save-responsibles').addEventListener('click', () => {\n const rawText = document.getElementById('settings-responsibles').value;\n const names = rawText.split('\\n').map(n => n.trim()).filter(n => n !== '');\n \n if (names.length === 0) {\n showError(\"Please enter at least one responsible person.\");\n return;\n }\n\n responsiblesList = names;\n localStorage.setItem('ap_responsibles', JSON.stringify(responsiblesList));\n \n populateResponsiblesDropdowns();\n renderUI();\n showSuccess(\"Personnel updated and applied globally.\");\n });\n\n const getCategoryOnly = (vendorName, type) => {\n if (type.startsWith('Tarea:')) return 'Special Task';\n const firstLetter = vendorName.trim().toUpperCase().charAt(0);\n if (type === 'OEM') return 'OEM';\n if (type === 'Non Inventory') return 'Non Inventory';\n if (type === 'Moto') {\n if (firstLetter >= 'A' && firstLetter <= 'H') return 'Motosport A-H';\n if (firstLetter >= 'I' && firstLetter <= 'R') return 'Motosport I-R';\n if (firstLetter >= 'S' && firstLetter <= 'Z') return 'Motosport S-Z';\n return 'Motosport Others';\n }\n return 'Uncategorized';\n };\n\n \/\/ --- DATABASE OPERATIONS ---\n const fetchVendors = async (silent = false) => {\n if(!savedSheetUrl) return;\n if (!silent) setLoading(true, \"Syncing data...\");\n else setBgSyncLoading(true, \"Updating list...\");\n \n try {\n const response = await fetch(savedSheetUrl);\n let loadedVendors = await response.json();\n \n if(loadedVendors.error) {\n showError(\"Script Error: \" + loadedVendors.error);\n if (!silent) setLoading(false);\n setBgSyncLoading(false);\n return;\n }\n\n let seenIds = new Set();\n \n allVendors = loadedVendors.map(v => {\n v.criticalDate = sanitizeDate(v.criticalDate);\n v.lastStatementDate = sanitizeDate(v.lastStatementDate);\n v.lastWorkedDate = sanitizeDate(v.lastWorkedDate);\n v.completedDate = sanitizeDate(v.completedDate);\n v.createdAt = sanitizeTimestamp(v.createdAt);\n v.hasPastDue = v.hasPastDue || 'No'; \n v.notes = v.notes || ''; \n\n let vId = String(v.id).trim();\n if (!vId || vId === '' || vId === 'undefined' || seenIds.has(vId)) {\n vId = generateId();\n v.id = vId; \n }\n seenIds.add(vId);\n\n return v;\n });\n\n allVendors.sort((a, b) => b.createdAt - a.createdAt);\n renderUI();\n\n if (!silent) setLoading(false);\n else setBgSyncLoading(false);\n } catch (error) {\n if (!silent) setLoading(false);\n setBgSyncLoading(false);\n showError(\"Could not download database. Check URL or Google permissions.\");\n }\n };\n\n const executeActionSilent = async (payload, successMsg) => {\n setBgSyncLoading(true, \"Saving...\");\n try {\n const response = await fetch(savedSheetUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'text\/plain;charset=utf-8' }, \n body: JSON.stringify(payload)\n });\n const resData = await response.json();\n if (resData && resData.success && successMsg) {\n showSuccess(successMsg);\n }\n setBgSyncLoading(false);\n } catch (err) {\n setBgSyncLoading(false);\n showError(\"Background save error. Check internet connection.\");\n }\n };\n\n const executeAction = async (payload, successMsg) => {\n setLoading(true, \"Saving to cloud...\");\n try {\n await fetch(savedSheetUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'text\/plain;charset=utf-8' }, \n body: JSON.stringify(payload)\n });\n showSuccess(successMsg);\n await fetchVendors(true); \n setLoading(false);\n } catch (err) {\n setLoading(false);\n showError(\"Connection error. Check internet connection.\");\n }\n };\n\n const syncToParentVendor = async (ticket, actionName) => {\n if (!ticket.parentId) return;\n const parent = allVendors.find(p => String(p.id).trim() === String(ticket.parentId).trim());\n if (!parent) return;\n\n let isUpdated = false;\n \n if (ticket.lastWorkedDate && ticket.lastWorkedDate !== parent.lastWorkedDate) {\n parent.lastWorkedDate = ticket.lastWorkedDate;\n isUpdated = true;\n }\n if (ticket.lastStatementDate && ticket.lastStatementDate !== parent.lastStatementDate) {\n parent.lastStatementDate = ticket.lastStatementDate;\n isUpdated = true;\n }\n\n if (ticket.notes && ticket.notes.trim() !== '') {\n const newNoteEntry = `[${new Date().toLocaleDateString()} | ${actionName}] - Ticket: ${ticket.name}\\nNote: ${ticket.notes.trim()}`;\n if (!parent.notes || !parent.notes.includes(ticket.notes.trim())) {\n parent.notes = parent.notes ? parent.notes + `\\n\\n${newNoteEntry}` : newNoteEntry;\n isUpdated = true;\n }\n }\n\n if (isUpdated) {\n renderUI();\n await executeActionSilent({ action: 'update', vendor: parent }, \"Vendor profile history synced.\");\n }\n };\n\n const quickUpdateVendor = async (id, propertyMap, successMsg) => {\n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if(!vendor) return;\n \n for (const [key, value] of Object.entries(propertyMap)) {\n vendor[key] = value;\n }\n \n renderUI();\n await executeActionSilent({ action: 'update', vendor: vendor }, successMsg);\n\n if (isItemTicket(vendor) && vendor.parentId) {\n await syncToParentVendor(vendor, \"Quick Status\/Date Change\");\n }\n };\n\n \/\/ --- MAIN RENDER ---\n const renderUI = () => {\n renderDashboardStats();\n renderTable();\n renderUrgentWorkspace();\n renderCasesWorkspace();\n };\n\n const toggleCategory = (id) => {\n const content = document.getElementById(id);\n const icon = document.getElementById('icon-' + id);\n if (content.classList.contains('hidden')) {\n content.classList.remove('hidden');\n icon.classList.remove('fa-chevron-down');\n icon.classList.add('fa-chevron-up');\n } else {\n content.classList.add('hidden');\n icon.classList.remove('fa-chevron-up');\n icon.classList.add('fa-chevron-down');\n }\n };\n\n const renderDashboardStats = () => {\n const masterItems = allVendors.filter(v => !isItemTicket(v));\n const activeTickets = allVendors.filter(v => isItemTicket(v) && v.status !== 'Completado');\n\n const catCounts = {};\n masterItems.forEach(v => {\n const cat = (v.category && v.category.trim() !== '') ? v.category.trim() : 'Uncategorized';\n catCounts[cat] = (catCounts[cat] || 0) + 1;\n });\n\n const tktCatCounts = {};\n activeTickets.forEach(t => {\n const cat = (t.category && t.category.trim() !== '') ? t.category.trim() : 'Uncategorized';\n tktCatCounts[cat] = (tktCatCounts[cat] || 0) + 1;\n });\n\n const tktPersonCounts = {};\n activeTickets.forEach(t => {\n const person = (t.assignedTo && t.assignedTo.trim() !== '') ? t.assignedTo.trim() : 'Unassigned';\n tktPersonCounts[person] = (tktPersonCounts[person] || 0) + 1;\n });\n\n const pastDueVendors = masterItems.filter(v => v.hasPastDue === 'Yes' && v.status !== 'Completado');\n const pastDueCount = pastDueVendors.length;\n\n const urgentesTickets = activeTickets.filter(t => t.priority === 'Alta');\n const urgentesCount = urgentesTickets.length + pastDueCount;\n\n document.getElementById('dash-kpis').innerHTML = `\n <div class=\"bg-white border border-slate-200 border-l-4 border-l-rose-400 rounded-xl p-6 flex items-center justify-between shadow-sm cursor-pointer hover:shadow-md transition-all group\" onclick=\"document.getElementById('nav-urgent').click()\">\n <div>\n <h3 class=\"font-black text-slate-800 text-xl flex items-center gap-2\"><i class=\"fa-solid fa-fire text-rose-500 group-hover:scale-110 transition-transform\"><\/i> Global Urgent Cases<\/h3>\n <p class=\"text-xs text-slate-500 mt-1 font-medium max-w-xs\">Total high priority tickets plus Past Due accounts<\/p>\n <\/div>\n <span class=\"text-5xl font-black text-rose-500\">${urgentesCount}<\/span>\n <\/div>\n \n <div class=\"bg-white border border-slate-200 border-l-4 border-l-amber-400 rounded-xl p-6 flex items-center justify-between shadow-sm cursor-pointer hover:shadow-md transition-all group\" onclick=\"document.getElementById('nav-urgent').click()\">\n <div>\n <h3 class=\"font-black text-slate-800 text-xl flex items-center gap-2\"><i class=\"fa-solid fa-file-invoice-dollar text-amber-500 animate-pulse\"><\/i> Past Due Unmatched<\/h3>\n <p class=\"text-xs text-slate-500 mt-1 font-medium max-w-xs\">Vendors flagged pending priority reconciliation<\/p>\n <\/div>\n <span class=\"text-5xl font-black text-amber-500\">${pastDueCount}<\/span>\n <\/div>\n `;\n\n const personContainer = document.getElementById('dash-tickets-person');\n if(Object.keys(tktPersonCounts).length === 0) {\n personContainer.innerHTML = `<div class=\"text-center py-6 text-slate-400\"><i class=\"fa-solid fa-mug-hot text-2xl mb-2\"><\/i><br>No active cases assigned.<\/div>`;\n } else {\n personContainer.innerHTML = Object.entries(tktPersonCounts).sort((a,b)=>b[1]-a[1]).map(([person, count]) => `\n <div class=\"flex items-center justify-between border-b border-slate-100 pb-3 last:border-0 last:pb-0\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center font-bold text-xs uppercase shadow-inner\">${person.substring(0,2)}<\/div>\n <span class=\"text-sm font-bold text-slate-700\">${person}<\/span>\n <\/div>\n <span class=\"bg-indigo-50 text-indigo-700 font-bold px-3 py-1 rounded-lg text-sm border border-indigo-200 shadow-sm\">${count} Cases<\/span>\n <\/div>\n `).join('');\n }\n\n const tktCatContainer = document.getElementById('dash-tickets-category');\n if(Object.keys(tktCatCounts).length === 0) {\n tktCatContainer.innerHTML = `<div class=\"text-center py-6 text-slate-400\"><i class=\"fa-regular fa-folder-open text-2xl mb-2\"><\/i><br>No pending cases categorized.<\/div>`;\n } else {\n const ticketsByCategory = {};\n activeTickets.forEach(t => {\n const cat = (t.category && t.category.trim() !== '') ? t.category.trim() : 'Uncategorized';\n if(!ticketsByCategory[cat]) ticketsByCategory[cat] = [];\n ticketsByCategory[cat].push(t);\n });\n\n tktCatContainer.innerHTML = Object.entries(ticketsByCategory).sort((a,b)=>b[1].length-a[1].length).map(([cat, tkts], idx) => `\n <div class=\"border border-slate-100 rounded-xl overflow-hidden shadow-sm\">\n <div class=\"bg-slate-50 px-4 py-2.5 border-b border-slate-100 flex justify-between items-center cursor-pointer hover:bg-slate-100 transition-colors\" onclick=\"toggleCategory('cat-group-${idx}')\">\n <span class=\"text-sm font-bold text-slate-700 flex items-center gap-2\"><i class=\"fa-regular fa-folder text-indigo-400\"><\/i> ${cat}<\/span>\n <div class=\"flex items-center gap-3\">\n <span class=\"text-xs font-black text-slate-600 bg-white px-2 py-0.5 rounded-md border border-slate-200\">${tkts.length}<\/span>\n <i id=\"icon-cat-group-${idx}\" class=\"fa-solid fa-chevron-down text-slate-400 text-xs\"><\/i>\n <\/div>\n <\/div>\n <div id=\"cat-group-${idx}\" class=\"hidden p-2 bg-white flex flex-col gap-1 max-h-32 overflow-y-auto\">\n ${tkts.map(t => `\n <div class=\"text-xs text-slate-600 py-1.5 px-2 hover:bg-indigo-50 rounded flex justify-between items-center group cursor-pointer transition-colors\" onclick=\"document.getElementById('nav-cases').click()\" title=\"${t.name}\">\n <span class=\"truncate pr-2 flex-1\"><i class=\"fa-solid fa-ticket-alt text-slate-300 group-hover:text-indigo-400 mr-1.5 transition-colors\"><\/i>${t.name}<\/span>\n <span class=\"text-[9px] font-bold text-slate-400 group-hover:text-indigo-600 whitespace-nowrap bg-slate-100 group-hover:bg-white px-1.5 py-0.5 rounded border border-transparent group-hover:border-indigo-100 transition-colors\">${t.assignedTo ? t.assignedTo.split(' ')[0] : 'NA'}<\/span>\n <\/div>\n `).join('')}\n <\/div>\n <\/div>\n `).join('');\n }\n\n const colorThemes = [\n 'text-blue-600 border-blue-200 bg-blue-50\/30', \n 'text-indigo-600 border-indigo-200 bg-indigo-50\/30', \n 'text-purple-600 border-purple-200 bg-purple-50\/30', \n 'text-teal-600 border-teal-200 bg-teal-50\/30', \n 'text-emerald-600 border-emerald-200 bg-emerald-50\/30', \n 'text-cyan-600 border-cyan-200 bg-cyan-50\/30'\n ];\n let colorIndex = 0;\n \n document.getElementById('dash-categories').innerHTML = Object.entries(catCounts).sort((a,b)=>b[1]-a[1]).map(([cat, count]) => {\n const themeClass = colorThemes[colorIndex % colorThemes.length];\n const textColor = themeClass.split(' ')[0];\n colorIndex++;\n return `\n <div class=\"p-4 rounded-xl border flex flex-col justify-between shadow-sm hover:shadow-md transition-shadow ${themeClass}\">\n <h3 class=\"font-bold text-slate-700 text-xs line-clamp-2\" title=\"${cat}\">${cat}<\/h3>\n <div class=\"mt-4 flex items-end justify-between\">\n <span class=\"text-2xl font-black ${textColor}\">${count}<\/span>\n <span class=\"text-[9px] font-bold text-slate-400 uppercase tracking-wider\">Vendors<\/span>\n <\/div>\n <\/div>\n `;\n }).join('');\n\n \/\/ EXPIRATIONS (Next 48 hrs or overdue)\n const expContainer = document.getElementById('dash-expirations');\n const today = new Date();\n today.setHours(0,0,0,0);\n const in48h = new Date(today);\n in48h.setDate(in48h.getDate() + 2);\n\n let expiringCases = activeTickets.filter(t => {\n if(!t.criticalDate || t.criticalDate === '') return false;\n const d = new Date(t.criticalDate);\n return d <= in48h;\n });\n\n expiringCases.sort((a,b) => new Date(a.criticalDate) - new Date(b.criticalDate));\n\n if (expiringCases.length === 0) {\n expContainer.innerHTML = `<div class=\"text-center py-6 text-slate-400\"><i class=\"fa-regular fa-calendar-check text-2xl mb-2\"><\/i><br>No cases expiring soon.<\/div>`;\n } else {\n expContainer.innerHTML = expiringCases.map(t => {\n const cDate = new Date(t.criticalDate);\n const isOverdue = cDate < today;\n const isToday = cDate.getTime() === today.getTime();\n \n let dateBadge = '';\n let borderClass = '';\n if (isOverdue) {\n dateBadge = `<span class=\"bg-red-100 text-red-700 px-2 py-0.5 rounded text-[10px] font-bold border border-red-200\"><i class=\"fa-solid fa-triangle-exclamation\"><\/i> Overdue<\/span>`;\n borderClass = 'border-l-4 border-l-red-500';\n } else if (isToday) {\n dateBadge = `<span class=\"bg-orange-100 text-orange-700 px-2 py-0.5 rounded text-[10px] font-bold border border-orange-200\"><i class=\"fa-solid fa-clock\"><\/i> Due Today<\/span>`;\n borderClass = 'border-l-4 border-l-orange-400';\n } else {\n dateBadge = `<span class=\"bg-amber-50 text-amber-700 px-2 py-0.5 rounded text-[10px] font-bold border border-amber-200\"><i class=\"fa-regular fa-calendar\"><\/i> Due Tomorrow<\/span>`;\n borderClass = 'border-l-4 border-l-amber-300';\n }\n\n return `\n <div class=\"bg-white border border-slate-200 ${borderClass} rounded-xl p-4 flex flex-col md:flex-row gap-4 justify-between items-start md:items-center shadow-sm\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-2 mb-1\">\n ${dateBadge}\n <span class=\"text-[10px] font-bold text-slate-400 uppercase tracking-wider\">${t.type.replace('Tarea: ', '')}<\/span>\n <\/div>\n <h4 class=\"font-bold text-slate-800 text-sm\"><i class=\"fa-solid fa-ticket-alt text-slate-300 mr-1\"><\/i> ${t.name}<\/h4>\n <div class=\"text-xs text-slate-500 mt-2 bg-slate-50 p-2 rounded border border-slate-100 italic line-clamp-2\">\n <i class=\"fa-solid fa-quote-left text-slate-300 mr-1\"><\/i> ${t.notes || 'No instructions registered.'}\n <\/div>\n <\/div>\n <div class=\"flex flex-col items-end shrink-0 gap-2 border-l border-slate-100 pl-4\">\n <div class=\"text-[10px] font-bold text-slate-400 uppercase tracking-wider text-right\"><i class=\"fa-solid fa-user mr-1\"><\/i> Responsible<\/div>\n <div class=\"flex items-center gap-2\">\n <div class=\"w-6 h-6 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center font-bold text-[10px] uppercase shadow-inner\">${t.assignedTo ? t.assignedTo.substring(0,2) : 'NA'}<\/div>\n <span class=\"text-xs font-bold text-slate-700\">${t.assignedTo || 'Unassigned'}<\/span>\n <\/div>\n <button onclick=\"document.getElementById('nav-cases').click()\" class=\"mt-1 text-[10px] font-bold text-indigo-600 hover:text-indigo-800 transition-colors\">View in Cases →<\/button>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n \n const badgeUrgent = document.getElementById('nav-urgent-badge');\n if(urgentesCount > 0) {\n badgeUrgent.innerText = urgentesCount;\n badgeUrgent.classList.remove('hidden');\n } else {\n badgeUrgent.classList.add('hidden');\n }\n\n const badgeCases = document.getElementById('nav-cases-badge');\n if(activeTickets.length > 0) {\n badgeCases.innerText = activeTickets.length;\n badgeCases.classList.remove('hidden');\n } else {\n badgeCases.classList.add('hidden');\n }\n };\n\n const renderCasesWorkspace = () => {\n const tbody = document.getElementById('cases-tbody');\n let cases = allVendors.filter(v => isItemTicket(v));\n\n \/\/ FILTER TABS (Active vs Completed)\n if (casesSegmentFilter === 'active') {\n cases = cases.filter(c => c.status !== 'Completado');\n } else if (casesSegmentFilter === 'completed') {\n cases = cases.filter(c => c.status === 'Completado');\n }\n\n if (casesResponsibleFilter !== 'all') {\n cases = cases.filter(c => c.assignedTo === casesResponsibleFilter);\n }\n if (casesStatusFilter !== 'all') {\n cases = cases.filter(c => c.status === casesStatusFilter);\n }\n if (casesSearchTerm.trim() !== '') {\n const term = casesSearchTerm.toLowerCase();\n cases = cases.filter(c => \n c.name.toLowerCase().includes(term) || \n (c.notes && c.notes.toLowerCase().includes(term)) ||\n (c.assignedTo && c.assignedTo.toLowerCase().includes(term))\n );\n }\n\n if (cases.length === 0) {\n tbody.innerHTML = `<tr><td colspan=\"6\" class=\"text-center py-12 text-slate-400 bg-slate-50\"><i class=\"fa-solid fa-inbox text-3xl mb-3 opacity-50\"><\/i><br>No weekly tickets require operational work.<\/td><\/tr>`;\n return;\n }\n\n let html = '';\n cases.forEach(c => {\n const isTask = c.category === 'Tarea Especial' || (c.type && c.type.startsWith('Tarea:'));\n const isUrg = c.priority === 'Alta' && c.status !== 'Completado';\n \n let rowClass = 'hover:bg-slate-50 border-l-4 border-l-transparent';\n if (isUrg) {\n rowClass = isTask \n ? 'bg-purple-50\/20 hover:bg-purple-50\/40 border-l-4 border-l-purple-500'\n : 'bg-red-50\/40 hover:bg-red-50\/80 border-l-4 border-l-red-500';\n }\n\n let sBadge = c.status === 'Completado' ? `<button class=\"btn-case-status text-emerald-700 bg-emerald-100 px-3 py-1 rounded-md text-xs font-bold border border-emerald-200\" data-id=\"${c.id}\" data-status=\"${c.status}\"><i class=\"fa-solid fa-check\"><\/i> ${c.status}<\/button>` : \n c.status === 'En Proceso' ? `<button class=\"btn-case-status text-blue-700 bg-blue-100 px-3 py-1 rounded-md text-xs font-bold border border-blue-200\" data-id=\"${c.id}\" data-status=\"${c.status}\"><i class=\"fa-solid fa-spinner fa-spin\"><\/i> ${c.status}<\/button>` : \n `<button class=\"btn-case-status text-slate-600 bg-slate-200 px-3 py-1 rounded-md text-xs font-bold border border-slate-300\" data-id=\"${c.id}\" data-status=\"${c.status}\"><i class=\"fa-solid fa-clock\"><\/i> ${c.status}<\/button>`;\n\n let pBadge = c.priority === 'Alta' ? `<span class=\"text-xs font-bold text-red-700 bg-white border border-red-200 px-2 py-1 rounded shadow-sm\"><i class=\"fa-solid fa-fire\"><\/i> Urgent<\/span>` : \n c.priority === 'Media' ? `<span class=\"text-xs font-semibold text-amber-700 bg-amber-50 px-2 py-1 rounded border border-amber-200\"><i class=\"fa-solid fa-circle text-[8px]\"><\/i> Medium<\/span>` : \n `<span class=\"text-xs font-semibold text-green-700 bg-green-50 px-2 py-1 rounded border border-green-200\"><i class=\"fa-solid fa-arrow-down\"><\/i> Low<\/span>`;\n\n const displayType = isTask ? c.type.replace('Tarea: ', '') : c.type;\n const typeBadgeColor = isTask ? 'bg-purple-100 text-purple-800 border-purple-200' : 'bg-indigo-50 text-indigo-700 border-indigo-100';\n\n html += `\n <tr class=\"transition-colors border-b border-slate-100 ${rowClass}\">\n <td class=\"px-5 py-4\">\n <div class=\"font-bold text-slate-900 flex items-center gap-1.5\">\n ${isTask ? '<i class=\"fa-solid fa-clipboard-list text-purple-500 text-xs\"><\/i>' : '<i class=\"fa-solid fa-ticket-alt text-indigo-500 text-xs\"><\/i>'}\n ${c.name}\n <\/div>\n <div class=\"text-[11px] text-slate-500 mt-1 flex flex-col gap-1 items-start\">\n <span class=\"${typeBadgeColor} px-1.5 py-0.5 rounded w-max font-semibold uppercase tracking-wide border\">${displayType}<\/span>\n <\/div>\n <\/td>\n <td class=\"px-5 py-4\">\n <div class=\"flex flex-col gap-1 min-w-[180px]\">\n ${c.lastWorkedDate ? `<span class=\"text-xs font-medium text-indigo-700 bg-indigo-50 px-2 py-1 rounded w-max border border-indigo-200\"><i class=\"fa-solid fa-business-time text-indigo-400\"><\/i> Wkd: ${c.lastWorkedDate}<\/span>` : `<span class=\"text-[10px] text-slate-400 italic\">Wkd: Unrecorded<\/span>`}\n ${c.status === 'Completado' && c.completedDate ? `<span class=\"text-xs font-bold text-emerald-700 bg-emerald-50 px-2 py-1 rounded w-max border border-emerald-200\"><i class=\"fa-solid fa-check-double text-emerald-500\"><\/i> Cmp: ${c.completedDate}<\/span>` : ''}\n <div class=\"text-[11px] text-slate-500 mt-1 line-clamp-1 italic max-w-sm\" title=\"${c.notes || ''}\">Note: ${c.notes || 'No comments'}<\/div>\n <\/div>\n <\/td>\n <td class=\"px-5 py-4 flex flex-col gap-1.5 items-start\">\n ${pBadge}\n ${c.criticalDate ? `<span class=\"text-[11px] text-slate-500 font-medium\"><i class=\"fa-solid fa-calendar-xmark text-red-400\"><\/i> ${c.criticalDate}<\/span>` : ''}\n <\/td>\n <td class=\"px-5 py-4\">\n <div class=\"text-sm font-bold text-slate-800\">${c.assignedTo || 'Unassigned'}<\/div>\n <div class=\"text-[10px] text-slate-500 uppercase\">${c.category}<\/div>\n <\/td>\n <td class=\"px-5 py-4\">${sBadge}<\/td>\n <td class=\"px-5 py-4 text-right\">\n <button class=\"btn-case-edit text-indigo-600 bg-indigo-50 hover:bg-indigo-600 hover:text-white w-8 h-8 rounded-md transition-colors border border-indigo-100\" data-id=\"${c.id}\" title=\"Work \/ Edit Case\"><i class=\"fa-solid fa-pen\"><\/i><\/button>\n <button class=\"btn-case-delete text-red-500 bg-red-50 hover:bg-red-500 hover:text-white w-8 h-8 rounded-md transition-colors border border-red-100 ml-1\" data-id=\"${c.id}\" title=\"Delete Ticket\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\n <\/td>\n <\/tr>\n `;\n });\n tbody.innerHTML = html;\n attachCasesEvents();\n };\n\n const attachCasesEvents = () => {\n document.querySelectorAll('.btn-case-delete').forEach(btn => btn.addEventListener('click', (e) => {\n const id = e.currentTarget.getAttribute('data-id');\n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n showCustomConfirm('Permanently delete this weekly work ticket?', async () => {\n allVendors = allVendors.filter(v => String(v.id).trim() !== String(id).trim());\n renderUI();\n await executeActionSilent({ action: 'delete', id: id, isTicket: vendor ? vendor.isTicket : 'Yes' }, \"Ticket deleted.\");\n });\n }));\n\n document.querySelectorAll('.btn-case-status').forEach(btn => btn.addEventListener('click', async (e) => {\n const id = e.currentTarget.getAttribute('data-id');\n const curr = e.currentTarget.getAttribute('data-status');\n const statuses = ['Pendiente', 'En Proceso', 'Completado'];\n const nextStatus = statuses[(statuses.indexOf(curr) + 1) % statuses.length];\n \n let updateData = { status: nextStatus };\n if (nextStatus === 'Completado') {\n updateData.completedDate = getTodayStr();\n updateData.lastWorkedDate = getTodayStr();\n } else if (curr === 'Completado') {\n updateData.completedDate = ''; \n }\n \n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if (vendor) logMovement(vendor, \"Status Change\", `Analyst changed ticket status from ${curr} to ${nextStatus}`);\n\n await quickUpdateVendor(id, updateData, `Ticket status updated to ${nextStatus}.`);\n }));\n\n document.querySelectorAll('.btn-case-edit').forEach(btn => btn.addEventListener('click', (e) => {\n openEditModal(e.currentTarget.getAttribute('data-id'));\n }));\n };\n\n document.getElementById('filter-cases-responsible').addEventListener('change', (e) => {\n casesResponsibleFilter = e.target.value;\n renderCasesWorkspace();\n });\n document.getElementById('filter-cases-status').addEventListener('change', (e) => {\n casesStatusFilter = e.target.value;\n renderCasesWorkspace();\n });\n document.getElementById('search-cases-input').addEventListener('input', (e) => {\n casesSearchTerm = e.target.value;\n renderCasesWorkspace();\n });\n\n \/\/ --- URGENT CASES WORKSPACE ---\n const updateUrgentDropdowns = (urgentItems) => {\n const selectAssigned = document.getElementById('filter-urgent-assigned');\n const currentAssigned = selectAssigned.value;\n const responsablesSet = new Set(responsiblesList);\n \n const selectCategory = document.getElementById('filter-urgent-category');\n const currentCategory = selectCategory.value;\n const categoriesSet = new Set();\n\n urgentItems.forEach(v => {\n if (v.assignedTo) responsablesSet.add(v.assignedTo.trim());\n const cat = (v.category && v.category.trim() !== '') ? v.category.trim() : 'Uncategorized';\n categoriesSet.add(cat);\n });\n\n selectAssigned.innerHTML = '<option value=\"all\">\ud83d\udc65 All Analysts<\/option>';\n Array.from(responsablesSet).sort().forEach(resp => {\n const opt = document.createElement('option'); opt.value = resp; opt.textContent = `\ud83d\udc64 ${resp}`;\n selectAssigned.appendChild(opt);\n });\n if (Array.from(responsablesSet).includes(currentAssigned)) {\n selectAssigned.value = currentAssigned;\n } else {\n selectAssigned.value = 'all';\n urgentAssignedFilter = 'all';\n }\n\n selectCategory.innerHTML = '<option value=\"all\">\ud83d\udcc1 All Categories<\/option>';\n Array.from(categoriesSet).sort().forEach(cat => {\n const opt = document.createElement('option'); opt.value = cat; opt.textContent = `\ud83d\udcc1 ${cat}`;\n selectCategory.appendChild(opt);\n });\n if (Array.from(categoriesSet).includes(currentCategory)) {\n selectCategory.value = currentCategory;\n } else {\n selectCategory.value = 'all';\n urgentCategoryFilter = 'all';\n }\n };\n\n const renderUrgentWorkspace = () => {\n const container = document.getElementById('urgent-cards-container');\n \n const originalUrgentItems = allVendors.filter(v => \n v.status !== 'Completado' && (\n (isItemTicket(v) && v.priority === 'Alta') || \n (v.hasPastDue === 'Yes')\n )\n );\n\n updateUrgentDropdowns(originalUrgentItems);\n\n let filteredUrgentItems = originalUrgentItems;\n\n if (urgentAssignedFilter !== 'all') {\n filteredUrgentItems = filteredUrgentItems.filter(v => v.assignedTo === urgentAssignedFilter);\n }\n\n if (urgentOriginFilter !== 'all') {\n if (urgentOriginFilter === 'ticket') {\n filteredUrgentItems = filteredUrgentItems.filter(v => isItemTicket(v));\n } else if (urgentOriginFilter === 'pastdue') {\n filteredUrgentItems = filteredUrgentItems.filter(v => v.hasPastDue === 'Yes');\n }\n }\n\n if (urgentCategoryFilter !== 'all') {\n filteredUrgentItems = filteredUrgentItems.filter(v => {\n const cat = (v.category && v.category.trim() !== '') ? v.category.trim() : 'Uncategorized';\n return cat === urgentCategoryFilter;\n });\n }\n\n if (urgentPriorityFilter !== 'all') {\n filteredUrgentItems = filteredUrgentItems.filter(v => v.priority === urgentPriorityFilter);\n }\n\n if (urgentSearchTerm.trim() !== '') {\n const term = urgentSearchTerm.toLowerCase();\n filteredUrgentItems = filteredUrgentItems.filter(v => \n v.name.toLowerCase().includes(term) || \n (v.notes && v.notes.toLowerCase().includes(term)) ||\n (v.assignedTo && v.assignedTo.toLowerCase().includes(term)) ||\n (v.type && v.type.toLowerCase().includes(term))\n );\n }\n\n const btnClearFilters = document.getElementById('btn-clear-urgent-filters');\n if (urgentAssignedFilter !== 'all' || urgentOriginFilter !== 'all' || urgentCategoryFilter !== 'all' || urgentPriorityFilter !== 'all' || urgentSearchTerm.trim() !== '') {\n btnClearFilters.classList.remove('hidden');\n } else {\n btnClearFilters.classList.add('hidden');\n }\n\n if (originalUrgentItems.length === 0) {\n container.innerHTML = `\n <div class=\"col-span-full flex flex-col items-center justify-center py-20 bg-white rounded-2xl border border-dashed border-slate-300\">\n <div class=\"w-20 h-20 bg-green-100 text-green-500 rounded-full flex items-center justify-center text-4xl mb-4 shadow-inner\">\n <i class=\"fa-solid fa-mug-hot\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-slate-800\">Everything under control<\/h3>\n <p class=\"text-slate-500 mt-2\">No urgent cases pending for work this week.<\/p>\n <\/div>`;\n return;\n }\n\n if (filteredUrgentItems.length === 0) {\n container.innerHTML = `\n <div class=\"col-span-full flex flex-col items-center justify-center py-20 bg-white rounded-2xl border border-dashed border-slate-300\">\n <div class=\"w-16 h-16 bg-slate-100 text-slate-400 rounded-full flex items-center justify-center text-3xl mb-4 shadow-inner\">\n <i class=\"fa-solid fa-filter-circle-xmark\"><\/i>\n <\/div>\n <h3 class=\"text-lg font-bold text-slate-700\">No search results<\/h3>\n <p class=\"text-slate-500 mt-1 text-sm\">Try adjusting selected filters or search text.<\/p>\n <button onclick=\"clearUrgentFilters()\" class=\"mt-4 bg-indigo-600 text-white px-4 py-2 rounded-lg text-xs font-bold hover:bg-indigo-700 transition-colors shadow-sm\">\n Clear Filters\n <\/button>\n <\/div>`;\n return;\n }\n\n let html = '';\n filteredUrgentItems.forEach((v) => {\n const isTask = v.category === 'Tarea Especial' || (v.type && v.type.startsWith('Tarea:'));\n const hasCriticalDate = v.criticalDate && v.criticalDate !== '';\n const todayStr = getTodayStr();\n const isWorkedToday = v.lastWorkedDate === todayStr;\n \n const cDate = hasCriticalDate ? new Date(v.criticalDate) : null;\n const todayZero = new Date(); todayZero.setHours(0,0,0,0);\n let dateBadge = '';\n \n if (cDate) {\n if (cDate < todayZero) dateBadge = `<span class=\"text-red-600 bg-red-50 px-1.5 py-0.5 rounded border border-red-200\"><i class=\"fa-solid fa-triangle-exclamation\"><\/i> Overdue ${v.criticalDate}<\/span>`;\n else if (cDate.getTime() === todayZero.getTime()) dateBadge = `<span class=\"text-orange-600 bg-orange-50 px-1.5 py-0.5 rounded border border-orange-200\"><i class=\"fa-solid fa-clock\"><\/i> Due Today<\/span>`;\n else dateBadge = `<span class=\"text-slate-600\"><i class=\"fa-regular fa-calendar\"><\/i> Due ${v.criticalDate}<\/span>`;\n } else {\n dateBadge = `<span class=\"text-slate-400 italic\">No Due Date<\/span>`;\n }\n\n if (isTask) {\n const displayNotes = v.notes ? v.notes : '<span class=\"text-purple-400 italic\">No instructions registered.<\/span>';\n const cleanType = v.type.replace('Tarea: ', '');\n \n html += `\n <div class=\"bg-white rounded-xl shadow-sm border border-l-4 border-l-purple-400 hover:shadow-md transition-shadow flex flex-col lg:flex-row group ring-1 ring-slate-100\">\n \n <div class=\"p-4 border-b lg:border-b-0 lg:border-r border-slate-100 flex-1 min-w-[280px]\">\n <div class=\"flex items-center gap-1.5 mb-2 flex-wrap\">\n <span class=\"bg-purple-100 text-purple-800 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide border border-purple-200 flex items-center gap-1\">\n <i class=\"fa-solid fa-list-check\"><\/i> ${cleanType}\n <\/span>\n <span class=\"text-[11px] font-bold text-slate-500\"><i class=\"fa-regular fa-user mr-1\"><\/i>${v.assignedTo || 'Unassigned'}<\/span>\n ${v.priority === 'Alta' ? `<span class=\"bg-red-100 text-red-700 px-1.5 py-0.5 rounded text-[10px] font-bold border border-red-200 shadow-sm flex items-center gap-1 ml-auto\"><i class=\"fa-solid fa-fire\"><\/i> Urgent<\/span>` : ''}\n ${v.status === 'En Proceso' ? `<span class=\"text-blue-600 text-[10px] font-bold flex items-center gap-1 ml-auto\"><i class=\"fa-solid fa-spinner fa-spin\"><\/i> In Process<\/span>` : `<span class=\"text-slate-500 text-[10px] font-bold flex items-center gap-1 ml-auto\"><i class=\"fa-solid fa-clock\"><\/i> Pending<\/span>`}\n <\/div>\n <h3 class=\"font-bold text-base text-slate-900 leading-snug mb-2\">${v.name}<\/h3>\n <div class=\"flex items-center gap-4 text-xs font-medium\">\n <div>${dateBadge}<\/div>\n <div class=\"${isWorkedToday ? 'text-emerald-600 font-bold bg-emerald-50 px-1.5 py-0.5 rounded border border-emerald-200' : 'text-slate-500'}\">\n <i class=\"fa-solid fa-business-time mr-1\"><\/i> Wkd: ${v.lastWorkedDate || 'Never'}\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"p-4 flex-1 lg:max-w-[35%] bg-slate-50\/50\">\n <div class=\"text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1\"><i class=\"fa-solid fa-paragraph mr-1\"><\/i> Instructions \/ Notes<\/div>\n <div class=\"text-xs text-slate-700 leading-relaxed line-clamp-3\" title=\"${v.notes}\">${displayNotes}<\/div>\n <\/div>\n\n <div class=\"p-4 bg-white border-t lg:border-t-0 lg:border-l border-slate-100 flex lg:flex-col gap-2 justify-center shrink-0 lg:w-40\">\n <button class=\"action-work w-full bg-purple-900 hover:bg-black text-white px-3 py-2 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-2 shadow-sm\" data-id=\"${v.id}\">\n ${isWorkedToday ? '<i class=\"fa-solid fa-check text-emerald-400\"><\/i> Worked Today' : '<i class=\"fa-solid fa-circle-play text-purple-300\"><\/i> Work'}\n <\/button>\n <div class=\"flex gap-2 w-full\">\n <button class=\"action-edit flex-1 bg-slate-50 hover:bg-slate-200 text-slate-600 border border-slate-200 px-2 py-2 rounded-lg text-xs font-bold transition-colors flex items-center justify-center\" title=\"Edit Details\" data-id=\"${v.id}\">\n <i class=\"fa-solid fa-pen\"><\/i>\n <\/button>\n <button class=\"action-complete flex-1 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200 px-2 py-2 rounded-lg text-xs font-bold transition-colors flex items-center justify-center\" title=\"Mark as Completed\" data-id=\"${v.id}\">\n <i class=\"fa-solid fa-check-double\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n `;\n } else {\n const displayNotes = v.notes ? v.notes : '<span class=\"text-slate-400 italic\">No management notes.<\/span>';\n \n html += `\n <div class=\"bg-white rounded-xl shadow-sm border border-l-4 border-l-red-400 hover:shadow-md transition-shadow flex flex-col lg:flex-row group ring-1 ring-slate-100\">\n \n <div class=\"p-4 border-b lg:border-b-0 lg:border-r border-slate-100 flex-1 min-w-[280px]\">\n <div class=\"flex items-center gap-1.5 mb-2 flex-wrap\">\n <span class=\"bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide border border-indigo-200\">${v.type}<\/span>\n <span class=\"text-[11px] font-bold text-slate-500\"><i class=\"fa-regular fa-user mr-1\"><\/i>${v.assignedTo || 'Unassigned'}<\/span>\n ${v.hasPastDue === 'Yes' ? `<span class=\"bg-orange-100 text-orange-800 px-1.5 py-0.5 rounded text-[10px] font-bold border border-orange-200 shadow-sm flex items-center gap-1 ml-auto animate-pulse\"><i class=\"fa-solid fa-file-invoice-dollar\"><\/i> Past Due<\/span>` : ''}\n ${v.priority === 'Alta' && v.hasPastDue !== 'Yes' ? `<span class=\"bg-red-100 text-red-700 px-1.5 py-0.5 rounded text-[10px] font-bold border border-red-200 shadow-sm flex items-center gap-1 ml-auto\"><i class=\"fa-solid fa-fire\"><\/i> Urgent<\/span>` : ''}\n <\/div>\n <h3 class=\"font-bold text-base text-slate-900 leading-snug mb-2\">${v.name}<\/h3>\n <div class=\"flex items-center gap-4 text-xs font-medium\">\n <div>${dateBadge}<\/div>\n <div class=\"${isWorkedToday ? 'text-emerald-600 font-bold bg-emerald-50 px-1.5 py-0.5 rounded border border-emerald-200' : 'text-slate-500'}\">\n <i class=\"fa-solid fa-business-time mr-1\"><\/i> Wkd: ${v.lastWorkedDate || 'Never'}\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"p-4 flex-1 lg:max-w-[35%] bg-slate-50\/50\">\n <div class=\"text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1\"><i class=\"fa-solid fa-list-check mr-1\"><\/i> Details & Invoices<\/div>\n <div class=\"text-xs text-slate-700 leading-relaxed line-clamp-3\" title=\"${v.notes}\">${displayNotes}<\/div>\n <\/div>\n\n <div class=\"p-4 bg-white border-t lg:border-t-0 lg:border-l border-slate-100 flex lg:flex-col gap-2 justify-center shrink-0 lg:w-40\">\n <button class=\"action-work w-full bg-slate-800 hover:bg-black text-white px-3 py-2 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-2 shadow-sm\" data-id=\"${v.id}\">\n ${isWorkedToday ? '<i class=\"fa-solid fa-check text-emerald-400\"><\/i> Worked Today' : '<i class=\"fa-regular fa-calendar-check\"><\/i> Mark Work'}\n <\/button>\n <div class=\"flex gap-2 w-full\">\n <button class=\"action-edit flex-1 bg-slate-50 hover:bg-slate-200 text-slate-600 border border-slate-200 px-2 py-2 rounded-lg text-xs font-bold transition-colors flex items-center justify-center\" title=\"Edit Details\" data-id=\"${v.id}\">\n <i class=\"fa-solid fa-pen\"><\/i>\n <\/button>\n <button class=\"action-complete flex-1 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200 px-2 py-2 rounded-lg text-xs font-bold transition-colors flex items-center justify-center\" title=\"Mark as Completed\" data-id=\"${v.id}\">\n <i class=\"fa-solid fa-check-double\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n `;\n }\n });\n container.innerHTML = html;\n attachUrgentWorkspaceEvents();\n };\n\n const attachUrgentWorkspaceEvents = () => {\n document.querySelectorAll('.action-work').forEach(btn => btn.addEventListener('click', async (e) => {\n const id = e.currentTarget.getAttribute('data-id');\n const todayStr = getTodayStr();\n \n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if (!vendor) return;\n\n let newStatus = vendor.status;\n if(newStatus === 'Pendiente') newStatus = 'En Proceso';\n\n logMovement(vendor, \"Operational Mgmt\", \"Analyst recorded work\/management today.\");\n await quickUpdateVendor(id, { lastWorkedDate: todayStr, status: newStatus }, \"Work date updated to TODAY.\");\n }));\n\n document.querySelectorAll('.action-complete').forEach(btn => btn.addEventListener('click', async (e) => {\n const id = e.currentTarget.getAttribute('data-id');\n const todayStr = getTodayStr();\n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if (!vendor) return;\n\n const isTask = vendor.category === 'Tarea Especial' || (vendor.type && vendor.type.startsWith('Tarea:'));\n const message = isTask ? 'Are you sure you want to mark this TASK as COMPLETED?' : 'Are you sure you want to mark this urgent vendor as COMPLETED?';\n \n showCustomConfirm(message, async () => {\n logMovement(vendor, \"Closure \/ Completed\", \"Analyst closed and completed the case\/task.\");\n await quickUpdateVendor(id, { status: 'Completado', completedDate: todayStr }, \"Case\/Task closed successfully!\");\n });\n }));\n\n document.querySelectorAll('.action-edit').forEach(btn => btn.addEventListener('click', (e) => {\n openEditModal(e.currentTarget.getAttribute('data-id'));\n }));\n };\n\n const clearUrgentFilters = () => {\n document.getElementById('filter-urgent-assigned').value = 'all';\n document.getElementById('filter-urgent-origin').value = 'all';\n document.getElementById('filter-urgent-category').value = 'all';\n document.getElementById('filter-urgent-priority').value = 'all';\n document.getElementById('search-urgent-input').value = '';\n \n urgentAssignedFilter = 'all';\n urgentOriginFilter = 'all';\n urgentCategoryFilter = 'all';\n urgentPriorityFilter = 'all';\n urgentSearchTerm = '';\n \n renderUrgentWorkspace();\n };\n\n document.getElementById('filter-urgent-assigned').addEventListener('change', (e) => {\n urgentAssignedFilter = e.target.value;\n renderUrgentWorkspace();\n });\n\n document.getElementById('filter-urgent-origin').addEventListener('change', (e) => {\n urgentOriginFilter = e.target.value;\n renderUrgentWorkspace();\n });\n\n document.getElementById('filter-urgent-category').addEventListener('change', (e) => {\n urgentCategoryFilter = e.target.value;\n renderUrgentWorkspace();\n });\n\n document.getElementById('filter-urgent-priority').addEventListener('change', (e) => {\n urgentPriorityFilter = e.target.value;\n renderUrgentWorkspace();\n });\n\n document.getElementById('search-urgent-input').addEventListener('input', (e) => {\n urgentSearchTerm = e.target.value;\n renderUrgentWorkspace();\n });\n\n document.getElementById('btn-clear-urgent-filters').addEventListener('click', clearUrgentFilters);\n\n \/\/ --- DIRECTORY TABLE RENDER ---\n const renderTable = () => {\n const tbody = document.getElementById('vendors-tbody');\n let filtered = allVendors.filter(v => !isItemTicket(v));\n\n filtered = filtered.filter(v => v.name.toLowerCase().includes(searchTerm.toLowerCase()));\n \n if (tableFilter === 'completed') {\n filtered = filtered.filter(v => v.status === 'Completado');\n document.getElementById('table-title').innerHTML = `<i class=\"fa-solid fa-check-double text-emerald-500\"><\/i> Completed Elements in Directory (${filtered.length})`;\n } else if (tableFilter === 'vendors') {\n filtered = filtered.filter(v => v.status !== 'Completado' && v.category !== 'Tarea Especial' && !v.type.startsWith('Tarea:'));\n document.getElementById('table-title').innerHTML = `<i class=\"fa-solid fa-building text-indigo-500\"><\/i> Active Vendors Directory (${filtered.length})`;\n } else if (tableFilter === 'tasks') {\n filtered = filtered.filter(v => v.status !== 'Completado' && (v.category === 'Tarea Especial' || v.type.startsWith('Tarea:')));\n document.getElementById('table-title').innerHTML = `<i class=\"fa-solid fa-clipboard-list text-purple-500\"><\/i> Active Special Tasks (${filtered.length})`;\n } else { \/\/ 'all'\n filtered = filtered.filter(v => v.status !== 'Completado');\n document.getElementById('table-title').innerHTML = `<i class=\"fa-solid fa-layer-group text-indigo-500\"><\/i> All Active in Directory (${filtered.length})`;\n }\n\n if (filtered.length === 0) {\n tbody.innerHTML = `<tr><td colspan=\"6\" class=\"text-center py-12 text-slate-400 bg-slate-50\"><i class=\"fa-solid fa-inbox text-3xl mb-3 opacity-50\"><\/i><br>No information to show in this directory tab.<\/td><\/tr>`;\n return;\n }\n\n let html = '';\n filtered.forEach(v => {\n const isTask = v.category === 'Tarea Especial' || (v.type && v.type.startsWith('Tarea:'));\n const isUrg = v.priority === 'Alta' && v.status !== 'Completado';\n \n let rowClass = 'hover:bg-slate-50 border-l-4 border-l-transparent';\n if (isUrg || v.hasPastDue === 'Yes') {\n rowClass = isTask \n ? 'bg-purple-50\/20 hover:bg-purple-50\/40 border-l-4 border-l-purple-500'\n : 'bg-red-50\/40 hover:bg-red-50\/80 border-l-4 border-l-red-500';\n }\n \n let sBadge = v.status === 'Completado' ? `<button class=\"btn-status text-emerald-700 bg-emerald-100 px-3 py-1 rounded-md text-xs font-bold border border-emerald-200\" data-id=\"${v.id}\" data-status=\"${v.status}\"><i class=\"fa-solid fa-check\"><\/i> ${v.status}<\/button>` : \n v.status === 'En Proceso' ? `<button class=\"btn-status text-blue-700 bg-blue-100 px-3 py-1 rounded-md text-xs font-bold border border-blue-200\" data-id=\"${v.id}\" data-status=\"${v.status}\"><i class=\"fa-solid fa-spinner fa-spin\"><\/i> ${v.status}<\/button>` : \n `<button class=\"btn-status text-slate-600 bg-slate-200 px-3 py-1 rounded-md text-xs font-bold border border-slate-300\" data-id=\"${v.id}\" data-status=\"${v.status}\"><i class=\"fa-solid fa-clock\"><\/i> ${v.status}<\/button>`;\n\n let pBadge = v.priority === 'Alta' ? `<span class=\"text-xs font-bold text-red-700 bg-white border border-red-200 px-2 py-1 rounded shadow-sm\"><i class=\"fa-solid fa-fire\"><\/i> Urgent<\/span>` : \n v.priority === 'Media' ? `<span class=\"text-xs font-semibold text-amber-700 bg-amber-50 px-2 py-1 rounded border border-amber-200\"><i class=\"fa-solid fa-circle text-[8px]\"><\/i> Medium<\/span>` : \n `<span class=\"text-xs font-semibold text-green-700 bg-green-50 px-2 py-1 rounded border border-green-200\"><i class=\"fa-solid fa-arrow-down\"><\/i> Low<\/span>`;\n\n const displayType = isTask ? v.type.replace('Tarea: ', '') : v.type;\n const typeBadgeColor = isTask \n ? 'bg-purple-100 text-purple-800 border-purple-200' \n : 'bg-indigo-50 text-indigo-700 border-indigo-100';\n\n html += `\n <tr class=\"transition-colors border-b border-slate-100 ${rowClass}\">\n <td class=\"px-5 py-4\">\n <div class=\"font-bold text-slate-900 flex items-center gap-1.5\">\n ${isTask ? '<i class=\"fa-solid fa-clipboard-list text-purple-500 text-xs\"><\/i>' : ''}\n ${v.name}\n <\/div>\n <div class=\"text-[11px] text-slate-500 mt-1 flex flex-col gap-1 items-start\">\n <span class=\"${typeBadgeColor} px-1.5 py-0.5 rounded w-max font-semibold uppercase tracking-wide border\">${displayType}<\/span>\n ${v.hasPastDue === 'Yes' ? `<span class=\"bg-orange-100 text-orange-800 border border-orange-200 px-1.5 py-0.5 rounded text-[10px] font-bold shadow-sm mt-1 animate-pulse\"><i class=\"fa-solid fa-triangle-exclamation\"><\/i> Past Due Unmatched<\/span>` : ''}\n <\/div>\n <\/td>\n <td class=\"px-5 py-4\">\n <div class=\"flex flex-col gap-1.5 min-w-[180px]\">\n ${!isTask && v.lastStatementDate ? `<span class=\"text-xs font-medium text-slate-700 bg-slate-100 px-2 py-1 rounded w-max border border-slate-200\"><i class=\"fa-regular fa-file-lines text-slate-400\"><\/i> Stmt: ${v.lastStatementDate}<\/span>` : ''}\n ${v.lastWorkedDate ? `<span class=\"text-xs font-medium text-indigo-700 bg-indigo-50 px-2 py-1 rounded w-max border border-indigo-200\"><i class=\"fa-solid fa-business-time text-indigo-400\"><\/i> Wkd: ${v.lastWorkedDate}<\/span>` : `<span class=\"text-[10px] text-slate-400 italic\">Wkd: Unrecorded<\/span>`}\n ${v.status === 'Completado' && v.completedDate ? `<span class=\"text-xs font-bold text-emerald-700 bg-emerald-50 px-2 py-1 rounded w-max border border-emerald-200\"><i class=\"fa-solid fa-check-double text-emerald-500\"><\/i> Cmp: ${v.completedDate}<\/span>` : ''}\n <\/div>\n <\/td>\n <td class=\"px-5 py-4 flex flex-col gap-1.5 items-start\">\n ${pBadge}\n ${v.criticalDate ? `<span class=\"text-[11px] text-slate-500 font-medium\"><i class=\"fa-solid fa-calendar-xmark text-red-400\"><\/i> ${v.criticalDate}<\/span>` : ''}\n <\/td>\n <td class=\"px-5 py-4\">\n <div class=\"text-sm font-bold text-slate-800\">${v.assignedTo || 'Unassigned'}<\/div>\n <div class=\"text-[10px] text-slate-500 uppercase\">${v.category}<\/div>\n <\/td>\n <td class=\"px-5 py-4\">${sBadge}<\/td>\n <td class=\"px-5 py-4 text-right\">\n <button class=\"btn-ticket text-indigo-600 bg-indigo-50 hover:bg-indigo-600 hover:text-white w-8 h-8 rounded-md transition-colors border border-indigo-100\" data-id=\"${v.id}\" title=\"Issue Work Ticket\"><i class=\"fa-solid fa-ticket-alt text-xs\"><\/i><\/button>\n <button class=\"btn-edit text-indigo-600 bg-indigo-50 hover:bg-indigo-600 hover:text-white w-8 h-8 rounded-md transition-colors border border-indigo-100 ml-1\" data-id=\"${v.id}\" title=\"Edit from Directory\"><i class=\"fa-solid fa-pen\"><\/i><\/button>\n <button class=\"btn-delete text-red-500 bg-red-50 hover:bg-red-500 hover:text-white w-8 h-8 rounded-md transition-colors border border-red-100 ml-1\" data-id=\"${v.id}\" title=\"Delete from Directory\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\n <\/td>\n <\/tr>\n `;\n });\n tbody.innerHTML = html;\n attachTableEvents();\n };\n\n const attachTableEvents = () => {\n document.querySelectorAll('.btn-delete').forEach(btn => btn.addEventListener('click', async (e) => {\n const id = e.currentTarget.getAttribute('data-id');\n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if (!vendor) return;\n\n const isTask = vendor.category === 'Tarea Especial' || (vendor.type && vendor.type.startsWith('Tarea:'));\n const message = isTask ? 'Permanently delete this task from directory?' : 'Permanently delete this vendor from directory?';\n\n showCustomConfirm(message, async () => {\n allVendors = allVendors.filter(v => String(v.id).trim() !== String(id).trim());\n renderUI();\n await executeActionSilent({ action: 'delete', id: id, isTicket: vendor.isTicket }, \"Element deleted from catalog.\");\n });\n }));\n\n document.querySelectorAll('.btn-status').forEach(btn => btn.addEventListener('click', async (e) => {\n const id = e.currentTarget.getAttribute('data-id');\n const curr = e.currentTarget.getAttribute('data-status');\n const statuses = ['Pendiente', 'En Proceso', 'Completado'];\n const nextStatus = statuses[(statuses.indexOf(curr) + 1) % statuses.length];\n \n let updateData = { status: nextStatus };\n if (nextStatus === 'Completado') {\n updateData.completedDate = getTodayStr();\n } else if (curr === 'Completado') {\n updateData.completedDate = ''; \n }\n \n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if (vendor) logMovement(vendor, \"Status Change\", `Analyst changed directory status from ${curr} to ${nextStatus}`);\n\n await quickUpdateVendor(id, updateData, `Status updated to ${nextStatus}.`);\n }));\n\n document.querySelectorAll('.btn-edit').forEach(btn => btn.addEventListener('click', (e) => {\n openEditModal(e.currentTarget.getAttribute('data-id'));\n }));\n\n document.querySelectorAll('.btn-ticket').forEach(btn => btn.addEventListener('click', (e) => {\n openTicketModal(e.currentTarget.getAttribute('data-id'));\n }));\n };\n\n const filterTabs = document.querySelectorAll('.filter-tab');\n filterTabs.forEach(tab => {\n tab.addEventListener('click', (e) => {\n filterTabs.forEach(t => {\n t.classList.remove('border-b-2', 'border-indigo-600', 'text-indigo-600', 'font-bold');\n t.classList.add('text-slate-500', 'font-medium');\n });\n e.currentTarget.classList.remove('text-slate-500', 'font-medium');\n e.currentTarget.classList.add('border-b-2', 'border-indigo-600', 'text-indigo-600', 'font-bold');\n \n if(e.currentTarget.id === 'filter-completed') tableFilter = 'completed';\n else if(e.currentTarget.id === 'filter-vendors') tableFilter = 'vendors';\n else if(e.currentTarget.id === 'filter-tasks') tableFilter = 'tasks';\n else tableFilter = 'all';\n renderTable();\n });\n });\n\n document.querySelectorAll('.cases-view-tab').forEach(tab => {\n tab.addEventListener('click', (e) => {\n document.querySelectorAll('.cases-view-tab').forEach(btn => {\n btn.className = \"cases-view-tab px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900 transition-all\";\n });\n e.currentTarget.className = \"cases-view-tab px-3 py-1.5 rounded-lg bg-white text-slate-800 shadow-sm transition-all font-bold\";\n \n if(e.currentTarget.id === 'toggle-cases-active') casesSegmentFilter = 'active';\n else if(e.currentTarget.id === 'toggle-cases-completed') casesSegmentFilter = 'completed';\n else casesSegmentFilter = 'all';\n \n renderCasesWorkspace();\n });\n });\n\n document.getElementById('search-input').addEventListener('input', (e) => { searchTerm = e.target.value; renderTable(); });\n\n const ts = document.getElementById('tab-single'), tb = document.getElementById('tab-bulk'), tt = document.getElementById('tab-task');\n const fs = document.getElementById('form-single'), fb = document.getElementById('form-bulk'), ft = document.getElementById('form-task');\n \n const resetTabButtons = () => {\n [ts, tb, tt].forEach(b => {\n b.classList.remove('border-b-2', 'border-indigo-600', 'text-indigo-600', 'font-bold');\n b.classList.add('text-slate-400', 'font-medium');\n });\n [fs, fb, ft].forEach(f => f.classList.add('hidden'));\n };\n\n ts.addEventListener('click', () => { resetTabButtons(); ts.classList.add('border-b-2','border-indigo-600','text-indigo-600','font-bold'); ts.classList.remove('text-slate-400'); fs.classList.remove('hidden'); });\n tb.addEventListener('click', () => { resetTabButtons(); tb.classList.add('border-b-2','border-indigo-600','text-indigo-600','font-bold'); tb.classList.remove('text-slate-400'); fb.classList.remove('hidden'); });\n tt.addEventListener('click', () => { resetTabButtons(); tt.classList.add('border-b-2','border-indigo-600','text-indigo-600','font-bold'); tt.classList.remove('text-slate-400'); ft.classList.remove('hidden'); });\n\n document.getElementById('form-single').addEventListener('submit', async (e) => {\n e.preventDefault();\n const name = document.getElementById('new-name').value;\n const type = document.getElementById('new-type').value;\n const category = getCategoryOnly(name, type);\n const assigned = document.getElementById('new-assigned').value;\n\n if (!assigned) {\n showError(\"Please select a valid responsible.\");\n return;\n }\n\n const newVendor = {\n id: generateId(), name: name.trim(), type: type, category: category, assignedTo: assigned,\n status: 'Pendiente', priority: document.getElementById('new-priority').value,\n pastDueAmount: 0, pendingAmount: 0, \n lastStatementDate: sanitizeDate(document.getElementById('new-statement').value) || '', lastWorkedDate: '',\n criticalDate: sanitizeDate(document.getElementById('new-date').value) || '', notes: '', createdAt: Date.now(),\n completedDate: '', isTicket: 'No', parentId: '', hasPastDue: 'No'\n };\n e.target.reset();\n \n allVendors.unshift(newVendor);\n renderUI();\n \n await executeActionSilent({ action: 'add', vendor: newVendor }, \"Vendor registered in database.\");\n });\n\n document.getElementById('btn-upload-bulk').addEventListener('click', async () => {\n const text = document.getElementById('bulk-text').value;\n const type = document.getElementById('bulk-type').value;\n const assigned = document.getElementById('bulk-assigned').value;\n \n if(!assigned) {\n showError(\"Please select a responsible for bulk upload.\");\n return;\n }\n\n const lines = text.split('\\n').filter(n => n.trim() !== '');\n if (lines.length === 0) return;\n\n const newVendors = lines.map(name => {\n const category = getCategoryOnly(name, type);\n return {\n id: generateId(), name: name.trim(), type: type, category: category, assignedTo: assigned,\n status: 'Pendiente', priority: 'Media', pastDueAmount: 0, pendingAmount: 0, lastStatementDate: '', lastWorkedDate: '', criticalDate: '', notes: '', createdAt: Date.now(), completedDate: '', isTicket: 'No', parentId: '', hasPastDue: 'No'\n };\n });\n document.getElementById('bulk-text').value = '';\n ts.click(); \n \n allVendors = [...newVendors, ...allVendors];\n renderUI();\n\n await executeAction({ action: 'bulk_add', vendors: newVendors }, `${lines.length} Vendors processed successfully.`);\n });\n\n document.getElementById('form-task').addEventListener('submit', async (e) => {\n e.preventDefault();\n const title = document.getElementById('task-title').value;\n const type = document.getElementById('task-type').value;\n const assigned = document.getElementById('task-assigned').value;\n const priority = document.getElementById('task-priority').value;\n const date = sanitizeDate(document.getElementById('task-date').value);\n const notes = document.getElementById('task-notes').value;\n\n if(!assigned) {\n showError(\"Please select a person to assign this task.\");\n return;\n }\n\n const newTask = {\n id: generateId(),\n name: title.trim(),\n type: type,\n category: 'Tarea Especial',\n assignedTo: assigned,\n status: 'Pendiente',\n priority: priority,\n pastDueAmount: 0,\n pendingAmount: 0,\n lastStatementDate: '',\n lastWorkedDate: '',\n criticalDate: date || '',\n notes: notes,\n createdAt: Date.now(),\n completedDate: '',\n isTicket: 'No',\n parentId: '',\n hasPastDue: 'No'\n };\n\n e.target.reset();\n ts.click(); \n\n allVendors.unshift(newTask);\n renderUI();\n\n await executeActionSilent({ action: 'add', vendor: newTask }, \"New special task registered successfully.\");\n });\n\n \/\/ --- EDIT MODAL & HISTORY INJECTION ---\n const openEditModal = (id) => {\n const v = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if(!v) return;\n\n const isTask = v.category === 'Tarea Especial' || (v.type && v.type.startsWith('Tarea:'));\n\n document.getElementById('edit-id').value = v.id;\n document.getElementById('edit-status').value = v.status;\n document.getElementById('edit-vendor-name').innerText = v.name;\n document.getElementById('edit-priority').value = v.priority || 'Media';\n document.getElementById('edit-date').value = sanitizeDate(v.criticalDate) || '';\n document.getElementById('edit-statement').value = sanitizeDate(v.lastStatementDate) || '';\n document.getElementById('edit-worked').value = sanitizeDate(v.lastWorkedDate) || '';\n document.getElementById('edit-completed').value = sanitizeDate(v.completedDate) || ''; \n \n document.getElementById('edit-pastdue').checked = (v.hasPastDue === 'Yes');\n \n const editAssigned = document.getElementById('edit-assigned');\n populateResponsiblesDropdowns(); \n \n if (v.assignedTo && !responsiblesList.includes(v.assignedTo)) {\n const tempOpt = document.createElement('option');\n tempOpt.value = v.assignedTo;\n tempOpt.textContent = v.assignedTo + \" (Historic)\";\n editAssigned.appendChild(tempOpt);\n }\n editAssigned.value = v.assignedTo || '';\n \n document.getElementById('edit-notes').value = v.notes || '';\n\n const statementContainer = document.getElementById('edit-statement-container');\n const labelNotes = document.getElementById('label-edit-notes');\n\n if (isTask) {\n statementContainer.classList.add('hidden');\n labelNotes.innerText = \"Task Instructions \/ Detailed Notes\";\n } else {\n statementContainer.classList.remove('hidden');\n labelNotes.innerText = \"Notes \/ Invoices Involved (Details to work on)\";\n }\n\n const historyContainer = document.getElementById('edit-history-container');\n const historyList = document.getElementById('edit-history-list');\n \n if(!isItemTicket(v)) {\n const childTickets = allVendors.filter(t => isItemTicket(t) && String(t.parentId).trim() === String(v.id).trim());\n \n if (childTickets.length > 0) {\n historyContainer.classList.remove('hidden');\n childTickets.sort((a,b) => b.createdAt - a.createdAt);\n \n historyList.innerHTML = childTickets.map(t => {\n const dateStr = new Date(t.createdAt).toLocaleDateString();\n const statColor = t.status === 'Completado' ? 'text-emerald-600' : (t.status === 'En Proceso' ? 'text-blue-600' : 'text-slate-500');\n const isNotesEmpty = !t.notes || t.notes.trim() === '';\n \n return `\n <div class=\"border-b border-slate-200 pb-3 last:border-0 last:pb-0 relative pl-4 before:absolute before:left-0 before:top-2 before:w-1.5 before:h-1.5 before:bg-indigo-300 before:rounded-full\">\n <div class=\"flex justify-between items-start mb-1\">\n <span class=\"font-bold text-slate-700\">Ticket: ${t.type.replace('Tarea: ','')}<\/span>\n <span class=\"text-[10px] font-semibold text-slate-400\">${dateStr}<\/span>\n <\/div>\n <div class=\"flex gap-3 text-[10px] font-bold uppercase tracking-wide mb-1.5\">\n <span class=\"text-indigo-500\"><i class=\"fa-solid fa-user\"><\/i> ${t.assignedTo || 'NA'}<\/span>\n <span class=\"${statColor}\">${t.status}<\/span>\n <\/div>\n <div class=\"text-slate-600 italic leading-snug bg-white p-2 rounded border border-slate-100 ${isNotesEmpty ? 'text-slate-400' : ''}\">\n ${isNotesEmpty ? 'No comments left on this ticket.' : t.notes.replace(\/\\n\/g, '<br>')}\n <\/div>\n <\/div>`;\n }).join('');\n } else {\n historyContainer.classList.add('hidden');\n historyList.innerHTML = '';\n }\n } else {\n historyContainer.classList.add('hidden');\n }\n\n document.getElementById('edit-modal').classList.remove('hidden');\n document.getElementById('edit-modal').classList.add('flex');\n };\n\n const closeEditModal = () => { document.getElementById('edit-modal').classList.add('hidden'); document.getElementById('edit-modal').classList.remove('flex'); };\n document.getElementById('close-modal').addEventListener('click', closeEditModal);\n document.getElementById('btn-cancel-edit').addEventListener('click', closeEditModal);\n\n document.getElementById('form-edit').addEventListener('submit', async (e) => {\n e.preventDefault();\n const id = document.getElementById('edit-id').value;\n if(!id) return;\n \n const originalVendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n const assignedSelection = document.getElementById('edit-assigned').value;\n const pastDueState = document.getElementById('edit-pastdue').checked ? 'Yes' : 'No';\n\n if(!assignedSelection) {\n showError(\"Please select a valid responsible.\");\n return;\n }\n\n const updatedVendor = {\n id: id, \n name: originalVendor ? originalVendor.name : '',\n type: originalVendor ? originalVendor.type : '',\n category: originalVendor ? originalVendor.category : '',\n status: document.getElementById('edit-status').value, \n priority: document.getElementById('edit-priority').value,\n pastDueAmount: originalVendor ? (originalVendor.pastDueAmount || 0) : 0, \n pendingAmount: originalVendor ? (originalVendor.pendingAmount || 0) : 0, \n criticalDate: sanitizeDate(document.getElementById('edit-date').value) || '', \n lastStatementDate: sanitizeDate(document.getElementById('edit-statement').value) || '',\n lastWorkedDate: sanitizeDate(document.getElementById('edit-worked').value) || '', \n completedDate: sanitizeDate(document.getElementById('edit-completed').value) || '', \n assignedTo: assignedSelection, \n notes: document.getElementById('edit-notes').value,\n createdAt: originalVendor ? originalVendor.createdAt : Date.now(),\n isTicket: originalVendor ? (originalVendor.isTicket || 'No') : 'No',\n parentId: originalVendor ? (originalVendor.parentId || '') : '',\n hasPastDue: pastDueState\n };\n\n closeEditModal();\n \n const idx = allVendors.findIndex(v => String(v.id).trim() === String(id).trim());\n if (idx !== -1) {\n allVendors[idx] = updatedVendor;\n renderUI();\n }\n\n logMovement(updatedVendor, \"Edit Details\", \"Analyst updated parameters or notes.\");\n \n if (isItemTicket(updatedVendor) && updatedVendor.parentId) {\n const parent = allVendors.find(p => String(p.id).trim() === String(updatedVendor.parentId).trim());\n if (parent) {\n let parentUpdated = false;\n if(updatedVendor.lastWorkedDate) { parent.lastWorkedDate = updatedVendor.lastWorkedDate; parentUpdated = true; }\n if(updatedVendor.lastStatementDate) { parent.lastStatementDate = updatedVendor.lastStatementDate; parentUpdated = true; }\n \n if (updatedVendor.notes && updatedVendor.notes.trim() !== '') {\n const newNoteEntry = `[${new Date().toLocaleDateString()} | Ticket Edited] - Ticket: ${updatedVendor.name}\\nNote: ${updatedVendor.notes.trim()}`;\n if (!parent.notes || !parent.notes.includes(updatedVendor.notes.trim())) {\n parent.notes = parent.notes ? parent.notes + `\\n\\n${newNoteEntry}` : newNoteEntry;\n parentUpdated = true;\n }\n }\n\n if(parentUpdated) {\n fetch(savedSheetUrl, { method: 'POST', headers: { 'Content-Type': 'text\/plain;charset=utf-8' }, body: JSON.stringify({ action: 'update', vendor: parent }) });\n }\n }\n }\n\n await executeActionSilent({ action: 'update', vendor: updatedVendor }, \"Record updated successfully.\");\n });\n\n \/\/ --- TICKET ISSUANCE SYSTEM ---\n const openTicketModal = (id) => {\n const v = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if(!v) {\n showError(\"Internal Error: Could not load vendor ID.\");\n return;\n }\n\n document.getElementById('ticket-ref-id').value = v.id;\n document.getElementById('ticket-ref-name').value = v.name;\n document.getElementById('ticket-ref-type').value = v.type;\n document.getElementById('ticket-ref-category').value = v.category;\n \n const ticketAssignedSelect = document.getElementById('ticket-assigned');\n populateResponsiblesDropdowns();\n \n if (v.assignedTo && !responsiblesList.includes(v.assignedTo)) {\n const tempOpt = document.createElement('option');\n tempOpt.value = v.assignedTo;\n tempOpt.textContent = v.assignedTo + \" (Historic)\";\n ticketAssignedSelect.appendChild(tempOpt);\n }\n ticketAssignedSelect.value = v.assignedTo || '';\n \n document.getElementById('ticket-priority').value = 'Media';\n document.getElementById('ticket-date').value = '';\n document.getElementById('ticket-notes').value = '';\n\n document.getElementById('ticket-modal').classList.remove('hidden');\n document.getElementById('ticket-modal').classList.add('flex');\n };\n\n const closeTicketModal = () => {\n document.getElementById('ticket-modal').classList.add('hidden');\n document.getElementById('ticket-modal').classList.remove('flex');\n };\n\n document.getElementById('close-ticket-modal').addEventListener('click', closeTicketModal);\n document.getElementById('btn-cancel-ticket').addEventListener('click', closeTicketModal);\n\n document.getElementById('form-ticket').addEventListener('submit', async (e) => {\n e.preventDefault();\n const refId = document.getElementById('ticket-ref-id').value;\n const refVendor = allVendors.find(v => String(v.id).trim() === String(refId).trim());\n if (!refVendor) {\n showError(\"Error: Could not locate the original vendor reference.\");\n return;\n }\n\n const name = document.getElementById('ticket-ref-name').value;\n const type = document.getElementById('ticket-ref-type').value;\n const category = document.getElementById('ticket-ref-category').value;\n const assigned = document.getElementById('ticket-assigned').value;\n const priority = document.getElementById('ticket-priority').value;\n const date = sanitizeDate(document.getElementById('ticket-date').value);\n const notesText = document.getElementById('ticket-notes').value.trim();\n\n if (!assigned) {\n showError(\"Please select a valid responsible.\");\n return;\n }\n\n const newWeeklyTicket = {\n id: generateId(),\n name: name.trim(),\n type: type,\n category: category,\n assignedTo: assigned,\n status: 'Pendiente',\n priority: priority,\n pastDueAmount: 0,\n pendingAmount: 0,\n lastStatementDate: refVendor.lastStatementDate || '',\n lastWorkedDate: '',\n criticalDate: date || '',\n notes: notesText,\n createdAt: Date.now(),\n completedDate: '',\n isTicket: 'Yes',\n parentId: refId,\n hasPastDue: 'No'\n };\n\n closeTicketModal();\n\n allVendors.unshift(newWeeklyTicket);\n renderUI();\n \n showCasesWorkspace();\n\n logMovement(newWeeklyTicket, \"Ticket Issuance\", \"A new weekly work ticket was issued from the directory.\");\n await executeActionSilent({ action: 'add', vendor: newWeeklyTicket }, \"New weekly work ticket successfully issued!\");\n\n if (notesText !== '') {\n const newNoteEntry = `[${new Date().toLocaleDateString()} | New Ticket Issued] - Ticket: ${newWeeklyTicket.name}\\nNote: ${notesText}`;\n if (!refVendor.notes || !refVendor.notes.includes(notesText)) {\n refVendor.notes = refVendor.notes ? refVendor.notes + `\\n\\n${newNoteEntry}` : newNoteEntry;\n fetch(savedSheetUrl, { method: 'POST', headers: { 'Content-Type': 'text\/plain;charset=utf-8' }, body: JSON.stringify({ action: 'update', vendor: refVendor }) });\n }\n }\n });\n\n document.getElementById('btn-export').addEventListener('click', () => {\n const masterItems = allVendors.filter(v => !isItemTicket(v));\n const headers = ['Vendor \/ Task', 'Type', 'Group', 'Default Responsible', 'Priority', 'Last Statement Rev', 'Last Worked Date', 'Completed Date', 'Critical Date', 'Status', 'Past Due Unmatched', 'Notes'];\n const rows = masterItems.map(v => [\n `\"${v.name}\"`, v.type, v.category, `\"${v.assignedTo}\"`, v.priority || 'Media', \n v.lastStatementDate ? `\"${v.lastStatementDate}\"` : '', v.lastWorkedDate ? `\"${v.lastWorkedDate}\"` : '', v.completedDate ? `\"${v.completedDate}\"` : '',\n v.criticalDate ? `\"${v.criticalDate}\"` : '', v.status, v.hasPastDue || 'No', `\"${(v.notes || '').replace(\/\"\/g, '\"\"')}\"`\n ]);\n const csv = \"data:text\/csv;charset=utf-8,\" + headers.join(\",\") + \"\\n\" + rows.map(e => e.join(\",\")).join(\"\\n\");\n const link = document.createElement(\"a\");\n link.setAttribute(\"href\", encodeURI(csv));\n link.setAttribute(\"download\", \"AP_Master_Directory.csv\");\n document.body.appendChild(link); link.click(); document.body.removeChild(link);\n });\n\n \/\/ --- START APP ---\n window.onload = function() {\n populateResponsiblesDropdowns();\n \n if(savedSheetUrl) {\n document.getElementById('input-url').value = savedSheetUrl;\n showDashboard();\n fetchVendors(); \n } else {\n showSettings();\n }\n };\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>AP Vendor Manager Loading… AP Manager v4.2 – AP Tools Urgent Cases 0 Open Cases 0 General Dashboard Master Directory Vendor Entry System Settings Saving… Personnel Management Enter the names of the people who will be working on the cases. Type one name per line. These names will automatically appear in all dropdowns of the…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"normal","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/deamlow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17"}],"version-history":[{"count":2,"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/deamlow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":17,"date":"2026-06-14T21:26:00","date_gmt":"2026-06-14T21:26:00","guid":{"rendered":"https:\/\/deamlow.com\/?page_id=17"},"modified":"2026-06-14T21:29:06","modified_gmt":"2026-06-14T21:29:06","slug":"ap-manager","status":"publish","type":"page","link":"https:\/\/deamlow.com\/?page_id=17","title":{"rendered":"AP Manager"},"content":{"rendered":"\n\n\n\n \n \n AP Vendor Manager<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n ::-webkit-scrollbar { width: 6px; height: 6px; }\n ::-webkit-scrollbar-track { background: transparent; }\n ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\n ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\n .hidden { display: none !important; }\n \n .hide-scrollbar::-webkit-scrollbar { display: none; }\n .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n \n .bg-sidebar { background-color: #2b2d42; }\n .bg-active-menu { background-color: #5c4dff; }\n .text-active-menu { color: #ffffff; }\n .bg-code { background-color: #1e2136; }\n \n .urgent-card-border {\n background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #fee2e2 10px, #fee2e2 20px);\n height: 4px;\n width: 100%;\n }\n\n .task-card-border {\n background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, #f3e8ff 10px, #f3e8ff 20px);\n height: 4px;\n width: 100%;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-800 font-sans flex flex-col h-screen overflow-hidden selection:bg-indigo-200\">\n\n \n <div id=\"loading-screen\" class=\"fixed inset-0 bg-slate-50\/80 backdrop-blur-sm flex flex-col items-center justify-center z-[100] hidden\">\n <div class=\"animate-spin rounded-full h-12 w-12 border-b-4 border-indigo-600 mb-4\"><\/div>\n <p class=\"text-indigo-900 font-bold\" id=\"loading-text\">Loading…<\/p>\n <\/div>\n\n \n <div id=\"error-msg\" class=\"fixed top-4 left-1\/2 transform -translate-x-1\/2 bg-red-100 border border-red-400 text-red-700 px-6 py-3 rounded-xl shadow-lg z-50 flex items-center gap-3 hidden transition-opacity\">\n <i class=\"fa-solid fa-triangle-exclamation text-xl\"><\/i>\n <span id=\"error-text\" class=\"font-medium\"><\/span>\n <\/div>\n\n <div id=\"success-msg\" class=\"fixed top-4 left-1\/2 transform -translate-x-1\/2 bg-green-100 border border-green-400 text-green-800 px-6 py-3 rounded-xl shadow-lg z-50 flex items-center gap-3 hidden transition-opacity\">\n <i class=\"fa-solid fa-circle-check text-xl\"><\/i>\n <span id=\"success-text\" class=\"font-medium\"><\/span>\n <\/div>\n\n \n <header class=\"w-full bg-sidebar text-slate-300 flex flex-col lg:flex-row items-center shrink-0 shadow-xl z-20\">\n \n <div class=\"p-3 lg:px-6 lg:py-3 flex items-center justify-between gap-3 border-b lg:border-b-0 lg:border-r border-white\/10 shrink-0 w-full lg:w-auto\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-lg\">\n <i class=\"fa-solid fa-file-invoice-dollar\"><\/i>\n <\/div>\n <h1 class=\"text-white font-bold text-lg tracking-wide hidden sm:block\">AP Manager<\/h1>\n <\/div>\n <div class=\"text-xs text-slate-500 font-semibold lg:hidden whitespace-nowrap\">v4.2 – AP Tools<\/div>\n <\/div>\n \n <nav class=\"flex-1 w-full px-4 py-2 overflow-x-auto hide-scrollbar flex items-center gap-2\">\n <button id=\"nav-urgent\" class=\"whitespace-nowrap flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all text-slate-300 hover:bg-white\/5 group border border-transparent hover:border-white\/10\">\n <i class=\"fa-solid fa-fire text-red-400 group-hover:scale-110 transition-transform\"><\/i>\n <span>Urgent Cases<\/span>\n <span id=\"nav-urgent-badge\" class=\"bg-red-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full shadow-sm hidden\">0<\/span>\n <\/button>\n \n <button id=\"nav-cases\" class=\"whitespace-nowrap flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all text-slate-300 hover:bg-white\/5 group border border-transparent hover:border-white\/10\">\n <i class=\"fa-solid fa-ticket-alt text-indigo-400 group-hover:scale-110 transition-transform\"><\/i>\n <span>Open Cases<\/span>\n <span id=\"nav-cases-badge\" class=\"bg-indigo-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full shadow-sm hidden\">0<\/span>\n <\/button>\n \n <button id=\"nav-dashboard\" class=\"whitespace-nowrap flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all text-slate-300 hover:bg-white\/5 group border border-transparent hover:border-white\/10\">\n <i class=\"fa-solid fa-chart-pie text-center group-hover:scale-110 transition-transform\"><\/i>\n <span>General Dashboard<\/span>\n <\/button>\n\n <button id=\"nav-directory\" class=\"whitespace-nowrap flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all text-slate-300 hover:bg-white\/5 group border border-transparent hover:border-white\/10\">\n <i class=\"fa-solid fa-address-book text-center group-hover:scale-110 transition-transform\"><\/i>\n <span>Master Directory<\/span>\n <\/button>\n \n <button id=\"nav-add\" class=\"whitespace-nowrap flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all text-slate-300 hover:bg-white\/5 group border border-transparent hover:border-white\/10\">\n <i class=\"fa-solid fa-file-circle-plus text-center group-hover:scale-110 transition-transform\"><\/i>\n <span>Vendor Entry<\/span>\n <\/button>\n \n <button id=\"nav-settings\" class=\"whitespace-nowrap flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-all bg-active-menu text-active-menu shadow-md\">\n <i class=\"fa-solid fa-gear text-center group-hover:scale-110 transition-transform\"><\/i>\n <span>System Settings<\/span>\n <\/button>\n \n <div id=\"bg-sync-indicator\" class=\"ml-auto shrink-0 px-3 py-1.5 bg-indigo-950\/40 rounded-xl border border-indigo-500\/20 text-xs flex items-center gap-2 hidden\">\n <i class=\"fa-solid fa-circle-notch fa-spin text-indigo-400\" id=\"sync-spinner\"><\/i>\n <span id=\"sync-status-text\" class=\"text-slate-400 hidden sm:inline-block\">Saving…<\/span>\n <\/div>\n <\/nav>\n \n <\/header>\n\n \n <main class=\"flex-1 h-full overflow-y-auto relative bg-slate-50\">\n \n \n \n \n <div id=\"view-settings\" class=\"p-8 md:p-12 max-w-5xl mx-auto block space-y-8 pb-24\">\n \n \n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-slate-200\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-2 flex items-center gap-2\">\n <i class=\"fa-solid fa-users text-indigo-600\"><\/i> Personnel Management\n <\/h2>\n <p class=\"text-slate-500 mb-6 text-sm\">\n Enter the names of the people who will be working on the cases. Type one name per line. These names will automatically appear in all dropdowns of the application.\n <\/p>\n <div class=\"space-y-4\">\n <textarea id=\"settings-responsibles\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-4 h-40 focus:ring-2 focus:ring-indigo-500 outline-none font-mono text-sm leading-relaxed transition-shadow\" placeholder=\"Type one name per line... Maria Duvan Jessica...\"><\/textarea>\n <div class=\"flex justify-end\">\n <button id=\"btn-save-responsibles\" class=\"bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-6 py-2.5 rounded-lg transition-colors shadow-md flex items-center gap-2\">\n <i class=\"fa-solid fa-floppy-disk\"><\/i> Save Personnel\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-slate-200\">\n <h2 class=\"text-2xl font-bold text-slate-900 mb-2\">Google Sheets Database Link (Optimized)<\/h2>\n <p class=\"text-slate-500 mb-10\">Saves all data to a Google Sheet via Apps Script with robust plain text comparison system and database splitting.<\/p>\n\n <div class=\"space-y-10 relative before:absolute before:inset-0 before:ml-[1.1rem] before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-200 before:to-transparent\">\n \n \n <div class=\"relative flex items-start gap-6\">\n <div class=\"bg-indigo-100 text-indigo-700 w-9 h-9 rounded-full flex items-center justify-center font-bold shrink-0 border-4 border-slate-50 relative z-10 shadow-sm\">1<\/div>\n <div class=\"pt-1.5\">\n <h3 class=\"text-lg font-bold text-slate-800\">Create a Google Sheet and open Apps Script<\/h3>\n <p class=\"text-slate-500 mt-1 text-sm\">Create a new spreadsheet. Go to <strong>Extensions > Apps Script<\/strong> in the top menu.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"relative flex items-start gap-6\">\n <div class=\"bg-indigo-100 text-indigo-700 w-9 h-9 rounded-full flex items-center justify-center font-bold shrink-0 border-4 border-slate-50 relative z-10 shadow-sm\">2<\/div>\n <div class=\"pt-1.5 w-full\">\n <div class=\"flex justify-between items-center mb-2\">\n <h3 class=\"text-lg font-bold text-slate-800\">Paste this self-healing code (Code.gs)<\/h3>\n <button onclick=\"copyScriptCode()\" id=\"btn-copy\" class=\"text-xs font-bold text-indigo-600 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-md transition-colors flex items-center gap-2\">\n <i class=\"fa-regular fa-copy\"><\/i> Copy Code\n <\/button>\n <\/div>\n \n <div class=\"bg-code rounded-xl p-5 shadow-inner overflow-x-auto text-sm font-mono leading-relaxed mt-3\">\n<pre id=\"script-code\" class=\"text-slate-300\">\nfunction getOrCreateSheet(name) {\n var ss = SpreadsheetApp.getActiveSpreadsheet();\n var sheet = ss.getSheetByName(name);\n if(!sheet) {\n sheet = ss.insertSheet(name);\n if (name === 'Logs') {\n sheet.appendRow(['Log ID', 'Timestamp', 'Fecha', 'Vendor\/Ticket ID', 'Nombre', 'Responsable', 'Acci\u00f3n', 'Detalles']);\n } else {\n initHeaders(sheet);\n }\n }\n return sheet;\n}\n\nfunction doPost(e) {\n var data = JSON.parse(e.postData.contents);\n \n if (data.action === 'log') {\n var logSheet = getOrCreateSheet('Logs');\n var l = data.log;\n logSheet.appendRow([l.id, l.timestamp, l.date, l.vendorId, l.vendorName, l.clerk, l.actionType, l.details]);\n return ContentService.createTextOutput(JSON.stringify({success: true})).setMimeType(ContentService.MimeType.JSON);\n }\n\n var isTkt = false;\n if (data.vendor) {\n isTkt = (data.vendor.isTicket === 'Yes' || data.vendor.isTicket === true);\n } else if (data.isTicket) {\n isTkt = (data.isTicket === 'Yes' || data.isTicket === true);\n }\n \n var targetSheetName = isTkt ? 'Tickets' : 'Vendors';\n var sheet = getOrCreateSheet(targetSheetName);\n \n if(data.action === 'add') {\n var v = data.vendor;\n sheet.appendRow([v.id, v.name, v.type, v.category, v.assignedTo, v.priority, v.pastDueAmount || 0, v.pendingAmount || 0, v.criticalDate || '', v.status || 'Pendiente', v.notes || '', v.createdAt, v.lastStatementDate || '', v.lastWorkedDate || '', v.completedDate || '', v.isTicket || 'No', v.parentId || '', v.hasPastDue || 'No']);\n } else if (data.action === 'bulk_add') {\n if (data.vendors && data.vendors.length > 0) {\n var rows = data.vendors.map(function(v) { \n return [v.id, v.name, v.type, v.category, v.assignedTo, v.priority, v.pastDueAmount || 0, v.pendingAmount || 0, v.criticalDate || '', v.status || 'Pendiente', v.notes || '', v.createdAt, v.lastStatementDate || '', v.lastWorkedDate || '', v.completedDate || '', v.isTicket || 'No', v.parentId || '', v.hasPastDue || 'No']; \n });\n sheet.getRange(sheet.getLastRow() + 1, 1, rows.length, rows[0].length).setValues(rows);\n }\n } else if (data.action === 'update') {\n var all = sheet.getDataRange().getValues();\n for(var i=1; i<all.length; i++) {\n if(String(all[i][0]).trim() === String(data.vendor.id).trim()) {\n var v = data.vendor;\n sheet.getRange(i+1, 2, 1, 17).setValues([[v.name, v.type, v.category, v.assignedTo, v.priority, v.pastDueAmount || 0, v.pendingAmount || 0, v.criticalDate || '', v.status || 'Pendiente', v.notes || '', v.createdAt, v.lastStatementDate || '', v.lastWorkedDate || '', v.completedDate || '', v.isTicket || 'No', v.parentId || '', v.hasPastDue || 'No']]);\n break;\n }\n }\n } else if (data.action === 'delete') {\n var all = sheet.getDataRange().getValues();\n for(var i=1; i<all.length; i++) {\n if(String(all[i][0]).trim() === String(data.id).trim()) { sheet.deleteRow(i+1); break; }\n }\n }\n return ContentService.createTextOutput(JSON.stringify({success: true})).setMimeType(ContentService.MimeType.JSON);\n}\n\nfunction getSheetData(name) {\n var ss = SpreadsheetApp.getActiveSpreadsheet();\n var sheet = ss.getSheetByName(name);\n if(!sheet) return [];\n initHeaders(sheet);\n \n var lastRow = sheet.getLastRow();\n var lastColumn = Math.max(sheet.getLastColumn(), 18); \n if (lastRow <= 1) return [];\n\n var data = sheet.getRange(1, 1, lastRow, lastColumn).getValues();\n var headers = data[0];\n \n var result = [];\n var needsIdFix = false;\n var seenIds = {};\n\n for(var r=1; r<data.length; r++) {\n var row = data[r];\n \/\/ Ignorar filas que est\u00e9n completamente en blanco\n if(String(row[1]).trim() === \"\" && String(row[2]).trim() === \"\") continue; \n \n var vId = String(row[0]).trim();\n \/\/ Si la fila no tiene ID, se le asigna uno y se marca para escribirse en el Excel\n if (!vId || vId === 'undefined' || vId === '' || seenIds[vId]) {\n vId = \"ID_\" + new Date().getTime() + \"_\" + r;\n data[r][0] = vId; \n needsIdFix = true;\n }\n seenIds[vId] = true;\n\n var obj = {}; \n headers.forEach(function(h, i) { \n if(h) obj[h] = data[r][i]; \n }); \n result.push(obj);\n }\n\n \/\/ Escribir los IDs sanados de vuelta al Excel de un solo golpe (s\u00faper r\u00e1pido)\n if (needsIdFix) {\n var idValues = [];\n for(var r=1; r<data.length; r++) {\n idValues.push([data[r][0]]);\n }\n sheet.getRange(2, 1, idValues.length, 1).setValues(idValues);\n }\n\n return result;\n}\n\nfunction doGet(e) {\n try {\n var vendors = getSheetData('Vendors');\n var tickets = getSheetData('Tickets');\n var combined = vendors.concat(tickets);\n return ContentService.createTextOutput(JSON.stringify(combined)).setMimeType(ContentService.MimeType.JSON);\n } catch(err) {\n return ContentService.createTextOutput(JSON.stringify({error: err.toString()})).setMimeType(ContentService.MimeType.JSON);\n }\n}\n\nfunction initHeaders(sheet) {\n var expected = ['id', 'name', 'type', 'category', 'assignedTo', 'priority', 'pastDueAmount', 'pendingAmount', 'criticalDate', 'status', 'notes', 'createdAt', 'lastStatementDate', 'lastWorkedDate', 'completedDate', 'isTicket', 'parentId', 'hasPastDue'];\n if(sheet.getLastColumn() === 0) {\n sheet.appendRow(expected);\n return;\n }\n var actual = sheet.getRange(1, 1, 1, Math.max(sheet.getLastColumn(), expected.length)).getValues()[0];\n for(var i=0; i<expected.length; i++) {\n if(actual[i] !== expected[i]) {\n sheet.getRange(1, i+1).setValue(expected[i]);\n }\n }\n}\n<\/pre>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"relative flex items-start gap-6\">\n <div class=\"bg-indigo-100 text-indigo-700 w-9 h-9 rounded-full flex items-center justify-center font-bold shrink-0 border-4 border-slate-50 relative z-10 shadow-sm\">3<\/div>\n <div class=\"pt-1.5 w-full\">\n <h3 class=\"text-lg font-bold text-slate-800 mb-3\">Deploy as Web App and paste URL here:<\/h3>\n <p class=\"text-slate-500 text-sm mb-3\">Click <strong>Deploy > New deployment<\/strong>. Choose Web App, set access to <strong>“Anyone”<\/strong>. Copy the URL and paste it below.<\/p>\n <div class=\"flex gap-3\">\n <input type=\"text\" id=\"input-url\" placeholder=\"https:\/\/script.google.com\/macros\/s\/...\/exec\" class=\"flex-1 border border-slate-300 rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow text-slate-700\">\n <button id=\"btn-connect\" class=\"bg-[#5c4dff] hover:bg-indigo-600 text-white font-medium px-6 py-2.5 rounded-lg transition-colors shadow-md\">\n Connect\n <\/button>\n <\/div>\n <p id=\"conn-status\" class=\"mt-3 text-sm font-medium hidden\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n \n \n <div id=\"view-dashboard\" class=\"p-6 md:p-8 space-y-6 hidden bg-slate-50\">\n \n <header class=\"flex flex-col md:flex-row justify-between items-start md:items-center bg-white p-6 rounded-2xl shadow-sm border border-slate-200\">\n <div>\n <h1 class=\"text-2xl font-black text-slate-900 tracking-tight\">General Dashboard & KPIs<\/h1>\n <p class=\"text-slate-500 mt-1 text-sm font-medium\">Workload analysis, account distribution, and pending cases<\/p>\n <\/div>\n <div class=\"flex gap-3 mt-4 md:mt-0\">\n <button onclick=\"document.getElementById('nav-settings').click()\" class=\"text-slate-500 hover:text-indigo-600 font-medium px-4 py-2 rounded-lg transition-colors flex items-center gap-2 border border-slate-200 bg-slate-50 hover:bg-indigo-50 text-sm shadow-sm\">\n <i class=\"fa-solid fa-link\"><\/i> <span id=\"db-indicator\" class=\"text-xs font-bold\">Connected<\/span>\n <\/button>\n <\/div>\n <\/header>\n\n \n <div id=\"dash-kpis\" class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n \n <\/div>\n\n \n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n \n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col h-full\">\n <div class=\"px-6 py-5 border-b border-slate-100 bg-slate-50\/50 shrink-0\">\n <h3 class=\"text-base font-extrabold text-slate-800 flex items-center gap-2\"><i class=\"fa-solid fa-users text-indigo-500\"><\/i> Open Cases by Analyst<\/h3>\n <\/div>\n <div id=\"dash-tickets-person\" class=\"p-6 space-y-4 overflow-y-auto flex-1 max-h-80\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col h-full\">\n <div class=\"px-6 py-5 border-b border-slate-100 bg-slate-50\/50 shrink-0\">\n <h3 class=\"text-base font-extrabold text-slate-800 flex items-center gap-2\"><i class=\"fa-solid fa-layer-group text-indigo-500\"><\/i> Pending Cases by Area<\/h3>\n <\/div>\n <div id=\"dash-tickets-category\" class=\"p-6 space-y-4 overflow-y-auto flex-1 max-h-80\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 p-6 md:p-8\">\n <h3 class=\"text-base font-extrabold text-slate-800 mb-6 flex items-center gap-2 pb-4 border-b border-slate-100\"><i class=\"fa-solid fa-address-book text-slate-400\"><\/i> Directory Composition (Vendors by Category)<\/h3>\n <div id=\"dash-categories\" class=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6 gap-4\">\n \n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden flex flex-col\">\n <div class=\"px-6 py-5 border-b border-slate-100 bg-slate-50\/50 shrink-0 flex justify-between items-center\">\n <h3 class=\"text-base font-extrabold text-slate-800 flex items-center gap-2\"><i class=\"fa-solid fa-clock text-rose-500\"><\/i> Cases Due Soon (Next 48 hrs) or Overdue<\/h3>\n <span class=\"bg-slate-200 text-slate-600 text-[10px] font-bold px-2 py-1 rounded\">Priority Attention<\/span>\n <\/div>\n <div id=\"dash-expirations\" class=\"p-6 space-y-4 max-h-96 overflow-y-auto\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n \n \n <div id=\"view-urgent\" class=\"hidden h-full flex flex-col bg-slate-100\">\n \n <div class=\"bg-white px-6 md:px-10 py-6 border-b border-slate-200 shrink-0\">\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4\">\n <div>\n <h1 class=\"text-2xl font-black text-slate-900 flex items-center gap-3\">\n <div class=\"bg-red-100 text-red-600 w-10 h-10 rounded-xl flex items-center justify-center shadow-sm\">\n <i class=\"fa-solid fa-fire text-xl\"><\/i>\n <\/div>\n Workspace: Urgent Cases\n <\/h1>\n <p class=\"text-slate-500 mt-2 text-sm max-w-2xl\">Review high priority vendors, special administrative tasks, and accounts marked as Past Due Unmatched.<\/p>\n <\/div>\n <div class=\"flex items-center gap-3\">\n <div class=\"bg-red-50 border border-red-100 px-4 py-3 rounded-xl flex items-center gap-3 shadow-sm\">\n <div class=\"text-red-800 font-bold text-sm\">Total Active:<\/div>\n <div id=\"urgent-total-counter\" class=\"text-2xl font-black text-red-600\">0<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white border-b border-slate-200 px-6 md:px-10 py-4 shrink-0 flex flex-col lg:flex-row gap-4 justify-between items-center shadow-sm overflow-x-auto\">\n <div class=\"flex flex-wrap items-center gap-3 w-full lg:w-auto\">\n <span class=\"text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5\">\n <i class=\"fa-solid fa-filter text-indigo-500\"><\/i> Filter By:\n <\/span>\n \n <select id=\"filter-urgent-assigned\" class=\"bg-slate-50 border border-slate-300 rounded-lg text-xs font-semibold px-3 py-2 text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow cursor-pointer\">\n <option value=\"all\">\ud83d\udc65 All Analysts<\/option>\n <\/select>\n \n <select id=\"filter-urgent-origin\" class=\"bg-slate-50 border border-slate-300 rounded-lg text-xs font-semibold px-3 py-2 text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow cursor-pointer\">\n <option value=\"all\">\ud83c\udff7\ufe0f All Types<\/option>\n <option value=\"ticket\">\ud83c\udf9f\ufe0f Tickets Only<\/option>\n <option value=\"pastdue\">\ud83d\udcb0 Past Due Only<\/option>\n <\/select>\n\n <select id=\"filter-urgent-category\" class=\"bg-slate-50 border border-slate-300 rounded-lg text-xs font-semibold px-3 py-2 text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow cursor-pointer max-w-[160px]\">\n <option value=\"all\">\ud83d\udcc1 All Categories<\/option>\n <\/select>\n\n <select id=\"filter-urgent-priority\" class=\"bg-slate-50 border border-slate-300 rounded-lg text-xs font-semibold px-3 py-2 text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow cursor-pointer\">\n <option value=\"all\">\u26a1 All Priorities<\/option>\n <option value=\"Alta\">\ud83d\udd34 High<\/option>\n <option value=\"Media\">\ud83d\udfe1 Medium<\/option>\n <option value=\"Baja\">\ud83d\udfe2 Low<\/option>\n <\/select>\n\n <button id=\"btn-clear-urgent-filters\" class=\"hidden text-xs font-bold text-red-500 hover:text-red-600 transition-colors flex items-center gap-1 ml-1\">\n <i class=\"fa-solid fa-circle-xmark\"><\/i> Clear Filters\n <\/button>\n <\/div>\n <div class=\"relative w-full lg:w-64 shrink-0 mt-3 lg:mt-0\">\n <input type=\"text\" id=\"search-urgent-input\" placeholder=\"Search ticket or task...\" class=\"w-full pl-9 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none text-xs font-medium\" \/>\n <i class=\"fa-solid fa-search absolute left-3 top-2.5 text-slate-400 text-xs\"><\/i>\n <\/div>\n <\/div>\n\n \n <div class=\"flex-1 overflow-y-auto p-6 md:p-10\">\n <div id=\"urgent-cards-container\" class=\"grid grid-cols-1 gap-4 pb-20 max-w-7xl mx-auto\">\n \n <\/div>\n <\/div>\n <\/div>\n\n \n \n \n <div id=\"view-cases\" class=\"hidden h-full flex flex-col bg-slate-100\">\n <div class=\"bg-white px-6 md:px-10 py-6 border-b border-slate-200 shrink-0\">\n <div class=\"flex flex-col md:flex-row justify-between items-start md:items-center gap-4\">\n <div>\n <h1 class=\"text-2xl font-black text-slate-900 flex items-center gap-3\">\n <div class=\"bg-indigo-100 text-indigo-600 w-10 h-10 rounded-xl flex items-center justify-center shadow-sm\">\n <i class=\"fa-solid fa-ticket-alt text-xl\"><\/i>\n <\/div>\n Open Cases & Tickets Inbox\n <\/h1>\n <p class=\"text-slate-500 mt-2 text-sm max-w-2xl\">Operational inbox to manage assignments and issued weekly logs.<\/p>\n <\/div>\n <div class=\"bg-indigo-50 border border-indigo-100 px-4 py-3 rounded-xl flex items-center gap-3 shadow-sm\">\n <div class=\"text-indigo-800 font-bold text-sm\">Active Tickets:<\/div>\n <div id=\"cases-active-counter\" class=\"text-2xl font-black text-indigo-600\">0<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-white border-b border-slate-200 px-6 md:px-10 py-4 shrink-0 flex flex-col lg:flex-row gap-4 justify-between items-center shadow-sm\">\n <div class=\"flex flex-wrap items-center gap-3 w-full lg:w-auto\">\n <span class=\"text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5\">\n <i class=\"fa-solid fa-filter text-indigo-500\"><\/i> Filter Inbox:\n <\/span>\n <select id=\"filter-cases-responsible\" class=\"bg-slate-50 border border-slate-300 rounded-lg text-xs font-semibold px-3 py-2 text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer\">\n <option value=\"all\">\ud83d\udc65 All Analysts<\/option>\n <\/select>\n <select id=\"filter-cases-status\" class=\"bg-slate-50 border border-slate-300 rounded-lg text-xs font-semibold px-3 py-2 text-slate-700 focus:ring-2 focus:ring-indigo-500 outline-none cursor-pointer\">\n <option value=\"all\">\u23f1\ufe0f All Statuses<\/option>\n <option value=\"Pendiente\">Pending<\/option>\n <option value=\"En Proceso\">In Process<\/option>\n <option value=\"Completado\">Completed<\/option>\n <\/select>\n \n \n <div class=\"flex gap-1 p-1 bg-slate-100 rounded-lg text-xs font-semibold ml-1\">\n <button id=\"toggle-cases-active\" class=\"cases-view-tab px-3 py-1.5 rounded-lg bg-white text-slate-800 shadow-sm transition-all font-bold\">Active Cases<\/button>\n <button id=\"toggle-cases-completed\" class=\"cases-view-tab px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900 transition-all\">Completed<\/button>\n <button id=\"toggle-cases-all\" class=\"cases-view-tab px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900 transition-all\">All<\/button>\n <\/div>\n <\/div>\n <div class=\"relative w-full lg:w-72 mt-3 lg:mt-0\">\n <input type=\"text\" id=\"search-cases-input\" placeholder=\"Search ticket...\" class=\"w-full pl-9 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none text-xs font-medium\" \/>\n <i class=\"fa-solid fa-search absolute left-3 top-2.5 text-slate-400 text-xs\"><\/i>\n <\/div>\n <\/div>\n\n <div class=\"flex-1 overflow-y-auto p-6 md:p-10\">\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden max-w-7xl mx-auto\">\n <div class=\"overflow-x-auto\">\n <table class=\"w-full text-left text-sm whitespace-nowrap\">\n <thead class=\"bg-slate-100 text-slate-500 font-semibold uppercase text-[10px] tracking-wider\">\n <tr>\n <th class=\"px-5 py-3 rounded-tl-lg\">Ticket \/ Origin<\/th>\n <th class=\"px-5 py-3\">Dates & History<\/th>\n <th class=\"px-5 py-3\">Priority<\/th>\n <th class=\"px-5 py-3\">Assigned To<\/th>\n <th class=\"px-5 py-3\">Status<\/th>\n <th class=\"px-5 py-3 text-right\">Options<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"cases-tbody\" class=\"divide-y divide-slate-100\"><\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n \n \n <div id=\"view-directory\" class=\"p-6 md:p-8 space-y-6 hidden\">\n \n <header class=\"flex flex-col md:flex-row justify-between items-start md:items-center bg-white p-6 rounded-2xl shadow-sm border border-slate-200\">\n <div>\n <h1 class=\"text-2xl font-black text-slate-900 tracking-tight\">Vendors and Tasks Directory<\/h1>\n <p class=\"text-slate-500 mt-1 text-sm font-medium\">Master inbox of the permanent catalog for consultation and maintenance<\/p>\n <\/div>\n <div class=\"flex gap-3 mt-4 md:mt-0\">\n <button id=\"btn-export\" class=\"flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-lg font-bold transition-colors shadow-sm\">\n <i class=\"fa-solid fa-file-csv\"><\/i> Export Directory\n <\/button>\n <\/div>\n <\/header>\n\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden\">\n <div class=\"flex overflow-x-auto border-b border-slate-200 bg-slate-50\/50\">\n <button id=\"filter-all\" class=\"filter-tab whitespace-nowrap px-6 py-4 text-sm font-bold border-b-2 border-indigo-600 text-indigo-600 transition-colors\">\n <i class=\"fa-solid fa-layer-group mr-2\"><\/i>All Active\n <\/button>\n <button id=\"filter-vendors\" class=\"filter-tab whitespace-nowrap px-6 py-4 text-sm font-medium text-slate-500 hover:text-slate-800 transition-colors\">\n <i class=\"fa-solid fa-building mr-2\"><\/i>Active Vendors\n <\/button>\n <button id=\"filter-tasks\" class=\"filter-tab whitespace-nowrap px-6 py-4 text-sm font-medium text-slate-500 hover:text-slate-800 transition-colors\">\n <i class=\"fa-solid fa-clipboard-list mr-2\"><\/i>Active Special Tasks\n <\/button>\n <button id=\"filter-completed\" class=\"filter-tab whitespace-nowrap px-6 py-4 text-sm font-medium text-slate-500 hover:text-slate-800 transition-colors\">\n <i class=\"fa-solid fa-check-double text-emerald-500 mr-2\"><\/i>Completed\n <\/button>\n <\/div>\n\n <div class=\"p-5 border-b border-slate-100 flex flex-col sm:flex-row justify-between items-center gap-4 bg-white\">\n <h2 id=\"table-title\" class=\"text-lg font-bold text-slate-800 flex items-center gap-2\"><i class=\"fa-solid fa-list-check text-indigo-500\"><\/i> Database (0)<\/h2>\n <div class=\"relative w-full sm:w-80\">\n <input type=\"text\" id=\"search-input\" placeholder=\"Search...\" class=\"w-full pl-10 pr-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none text-sm font-medium shadow-sm\" \/>\n <i class=\"fa-solid fa-search absolute left-3.5 top-2.5 text-slate-400\"><\/i>\n <\/div>\n <\/div>\n <div class=\"overflow-x-auto\">\n <table class=\"w-full text-left text-sm whitespace-nowrap\">\n <thead class=\"bg-slate-100 text-slate-500 font-semibold uppercase text-[10px] tracking-wider\">\n <tr>\n <th class=\"px-5 py-4 rounded-tl-lg\">Name \/ Task<\/th>\n <th class=\"px-5 py-4\">Last Management<\/th>\n <th class=\"px-5 py-4\">Priority \/ Alarms<\/th>\n <th class=\"px-5 py-4\">Responsible \/ Group<\/th>\n <th class=\"px-5 py-4\">Directory Status<\/th>\n <th class=\"px-5 py-4 text-right font-bold text-indigo-600\">Options<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"vendors-tbody\" class=\"divide-y divide-slate-100\"><\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n\n \n \n \n <div id=\"view-add-vendor\" class=\"hidden h-full flex flex-col bg-slate-100\">\n <div class=\"bg-white px-6 md:px-10 py-8 border-b border-slate-200 shrink-0\">\n <h1 class=\"text-2xl font-black text-slate-900 flex items-center gap-3\">\n <div class=\"bg-indigo-100 text-indigo-600 w-10 h-10 rounded-xl flex items-center justify-center shadow-sm\">\n <i class=\"fa-solid fa-file-circle-plus text-xl\"><\/i>\n <\/div>\n Catalog Entry and Upload\n <\/h1>\n <p class=\"text-slate-500 mt-2 text-sm max-w-2xl\">Add new permanent vendors individually, perform bulk uploads, or enter administrative task templates.<\/p>\n <\/div>\n \n <div class=\"flex-1 overflow-y-auto p-6 md:p-10\">\n <div class=\"bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-slate-200 max-w-5xl mx-auto\">\n <div class=\"flex border-b border-slate-200 mb-6 gap-2\">\n <button id=\"tab-single\" class=\"pb-3 px-4 text-sm font-bold transition-colors border-b-2 border-indigo-600 text-indigo-600\">Individual Entry<\/button>\n <button id=\"tab-bulk\" class=\"pb-3 px-4 text-sm font-medium transition-colors text-slate-400 hover:text-slate-700\">Bulk Upload<\/button>\n <button id=\"tab-task\" class=\"pb-3 px-4 text-sm font-medium transition-colors text-slate-400 hover:text-slate-700 flex items-center gap-1.5\"><i class=\"fa-solid fa-list-check text-purple-600\"><\/i> New Special Task<\/button>\n <\/div>\n\n \n <form id=\"form-single\" class=\"space-y-5\">\n <div class=\"flex flex-col md:flex-row gap-5\">\n <div class=\"flex-1\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Vendor Name<\/label>\n <input type=\"text\" id=\"new-name\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" required \/>\n <\/div>\n <div class=\"w-full md:w-48\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Type<\/label>\n <select id=\"new-type\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\">\n <option value=\"Moto\">Moto<\/option><option value=\"OEM\">OEM<\/option><option value=\"Non Inventory\">Non Inventory<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"flex flex-col md:flex-row gap-5 items-end\">\n <div class=\"w-full md:w-1\/4\">\n <label class=\"block text-sm font-bold text-indigo-700 mb-1\">\n <i class=\"fa-solid fa-user-plus mr-1\"><\/i>Responsible\n <\/label>\n <select id=\"new-assigned\" class=\"w-full bg-slate-50 border border-indigo-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" required>\n \n <\/select>\n <\/div>\n <div class=\"w-full md:w-1\/4\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Default Priority<\/label>\n <select id=\"new-priority\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\">\n <option value=\"Alta\">\ud83d\udd34 High (Urgent)<\/option><option value=\"Media\" selected>\ud83d\udfe1 Medium<\/option><option value=\"Baja\">\ud83d\udfe2 Low<\/option>\n <\/select>\n <\/div>\n <div class=\"w-full md:w-1\/4\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Last Statement Rev.<\/label>\n <input type=\"date\" id=\"new-statement\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" \/>\n <\/div>\n <div class=\"w-full md:w-1\/4\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Critical Date \/ Due Date<\/label>\n <input type=\"date\" id=\"new-date\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" \/>\n <\/div>\n <\/div>\n\n <div class=\"flex justify-end pt-2\">\n <button type=\"submit\" class=\"w-full md:w-1\/3 bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-xl font-bold shadow-md transition-all hover:shadow-lg flex items-center justify-center gap-2\">\n <i class=\"fa-solid fa-plus\"><\/i> Save Vendor to Directory\n <\/button>\n <\/div>\n <\/form>\n\n \n <div id=\"form-bulk\" class=\"space-y-4 hidden\">\n <div class=\"flex flex-col md:flex-row gap-5\">\n <div class=\"flex-1\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Paste the list (One per line) – <span class=\"text-emerald-600 font-bold text-xs\">Accepts +100 rows at once<\/span><\/label>\n <textarea id=\"bulk-text\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-4 h-44 focus:ring-2 focus:ring-indigo-500 outline-none font-mono text-sm leading-relaxed transition-shadow\" placeholder=\"Vendor 1 Vendor 2...\"><\/textarea>\n <\/div>\n <div class=\"w-full md:w-72 flex flex-col justify-between space-y-3\">\n <div>\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Classification type:<\/label>\n <select id=\"bulk-type\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none mb-3 transition-shadow\">\n <option value=\"Moto\">Moto<\/option><option value=\"OEM\">OEM<\/option><option value=\"Non Inventory\">Non Inventory<\/option>\n <\/select>\n \n <label class=\"block text-sm font-bold text-indigo-700 mb-1\">\n <i class=\"fa-solid fa-user-check mr-1\"><\/i>Assign to responsible:\n <\/label>\n <select id=\"bulk-assigned\" class=\"w-full bg-slate-50 border border-indigo-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none mb-4 transition-shadow\" required>\n \n <\/select>\n <\/div>\n <button id=\"btn-upload-bulk\" class=\"w-full bg-[#2b2d42] hover:bg-slate-800 text-white px-4 py-3 rounded-xl font-bold shadow-md transition-colors flex items-center justify-center gap-2\">\n <i class=\"fa-solid fa-cloud-arrow-up\"><\/i> Upload Bulk List\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <form id=\"form-task\" class=\"space-y-5 hidden\">\n <div class=\"flex flex-col md:flex-row gap-5\">\n <div class=\"flex-1\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Task Title \/ Special Pending<\/label>\n <input type=\"text\" id=\"task-title\" placeholder=\"e.g. VRA review pending parts, Verbal signature checks, etc.\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" required \/>\n <\/div>\n <div class=\"w-full md:w-56\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Task Type<\/label>\n <select id=\"task-type\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\">\n <option value=\"Tarea: Verificaci\u00f3n Verbal\">\ud83d\udcde Verbal Verification<\/option>\n <option value=\"Tarea: Revisi\u00f3n VRA\">\ud83d\udcdd VRA Review<\/option>\n <option value=\"Tarea: Administrativa\">\u2699\ufe0f Admin Task<\/option>\n <option value=\"Tarea: Tr\u00e1mite Especial\">\ud83d\udccc Special Procedure<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"flex flex-col md:flex-row gap-5 items-end\">\n <div class=\"w-full md:w-1\/3\">\n <label class=\"block text-sm font-bold text-indigo-700 mb-1\">\n <i class=\"fa-solid fa-user-plus mr-1\"><\/i>Assigned Responsible\n <\/label>\n <select id=\"task-assigned\" class=\"w-full bg-slate-50 border border-indigo-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" required>\n \n <\/select>\n <\/div>\n <div class=\"w-full md:w-1\/3\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Default Priority<\/label>\n <select id=\"task-priority\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\">\n <option value=\"Alta\">\ud83d\udd34 High (Urgent)<\/option><option value=\"Media\" selected>\ud83d\udfe1 Medium<\/option><option value=\"Baja\">\ud83d\udfe2 Low<\/option>\n <\/select>\n <\/div>\n <div class=\"w-full md:w-1\/3\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Critical Date \/ Limit<\/label>\n <input type=\"date\" id=\"task-date\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-2.5 focus:ring-2 focus:ring-indigo-500 outline-none transition-shadow\" \/>\n <\/div>\n <\/div>\n\n <div class=\"col-span-2\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Task Notes \/ Instructions<\/label>\n <textarea id=\"task-notes\" placeholder=\"Add details, case numbers, necessary signatures, emails or specifications to complete the task...\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg p-4 h-24 focus:ring-2 focus:ring-indigo-500 outline-none font-sans text-sm leading-relaxed transition-shadow resize-none\"><\/textarea>\n <\/div>\n\n <div class=\"flex justify-end pt-2\">\n <button type=\"submit\" class=\"w-full md:w-1\/3 bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-xl font-bold shadow-md transition-all hover:shadow-lg flex items-center justify-center gap-2\">\n <i class=\"fa-solid fa-list-check\"><\/i> Save Task Template\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n \n <div id=\"edit-modal\" class=\"fixed inset-0 bg-slate-900\/60 backdrop-blur-sm items-center justify-center p-4 z-[200] hidden overflow-y-auto\">\n <div class=\"bg-white rounded-2xl shadow-2xl max-w-2xl w-full border border-slate-200 transform transition-all scale-100 my-auto\">\n <div class=\"p-5 border-b border-slate-100 flex justify-between items-center bg-slate-50 rounded-t-2xl\">\n <h3 class=\"text-xl font-bold text-slate-900\"><i class=\"fa-solid fa-pen-to-square text-indigo-600 mr-2\"><\/i> Edit: <span id=\"edit-vendor-name\" class=\"text-indigo-800\"><\/span><\/h3>\n <button id=\"close-modal\" class=\"text-slate-400 hover:text-red-500 bg-white shadow-sm border border-slate-200 hover:bg-red-50 w-8 h-8 rounded-full flex items-center justify-center transition-colors\"><i class=\"fa-solid fa-times\"><\/i><\/button>\n <\/div>\n <form id=\"form-edit\" class=\"p-6 space-y-4\">\n <input type=\"hidden\" id=\"edit-id\"><input type=\"hidden\" id=\"edit-status\">\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Priority<\/label>\n <select id=\"edit-priority\" class=\"w-full border border-slate-300 rounded-lg p-2.5 outline-none bg-slate-50 focus:ring-2 focus:ring-indigo-500\">\n <option value=\"Alta\">\ud83d\udd34 High (Urgent)<\/option>\n <option value=\"Media\">\ud83d\udfe1 Medium<\/option>\n <option value=\"Baja\">\ud83d\udfe2 Low<\/option>\n <\/select>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Critical Date \/ Due Date<\/label>\n <input type=\"date\" id=\"edit-date\" class=\"w-full border border-slate-300 rounded-lg p-2.5 outline-none bg-slate-50 focus:ring-2 focus:ring-indigo-500\" \/>\n <\/div>\n <div id=\"edit-statement-container\">\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Last Statement Rev.<\/label>\n <input type=\"date\" id=\"edit-statement\" class=\"w-full border border-slate-300 rounded-lg p-2.5 outline-none bg-slate-50 focus:ring-2 focus:ring-indigo-500\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-slate-700 mb-1\">Last Worked Date<\/label>\n <input type=\"date\" id=\"edit-worked\" class=\"w-full border border-indigo-300 bg-indigo-50 focus:ring-2 focus:ring-indigo-500 rounded-lg p-2.5 outline-none text-indigo-700 font-medium\" \/>\n <\/div>\n <div>\n <label class=\"block text-sm font-medium text-emerald-700 mb-1\"><i class=\"fa-solid fa-check-double mr-1\"><\/i> Completed Date<\/label>\n <input type=\"date\" id=\"edit-completed\" class=\"w-full border border-emerald-300 bg-emerald-50 focus:ring-2 focus:ring-emerald-500 rounded-lg p-2.5 outline-none text-emerald-700 font-medium\" \/>\n <\/div>\n \n <div class=\"col-span-2\">\n <label class=\"block text-sm font-bold text-orange-600 mb-1\"><i class=\"fa-solid fa-user-pen mr-1\"><\/i> Assigned Responsible (Reassign)<\/label>\n <select id=\"edit-assigned\" class=\"w-full border-2 border-orange-200 bg-orange-50 focus:border-orange-400 focus:ring-2 focus:ring-orange-200 rounded-lg p-2.5 outline-none text-slate-800 font-medium\" required>\n \n <\/select>\n <\/div>\n\n \n <div class=\"col-span-2 bg-orange-50 border border-orange-200 rounded-xl p-4 flex items-center gap-3 mt-2 shadow-sm\">\n <input type=\"checkbox\" id=\"edit-pastdue\" class=\"w-5 h-5 text-orange-600 rounded border-orange-300 focus:ring-orange-500 cursor-pointer\">\n <label for=\"edit-pastdue\" class=\"text-sm font-bold text-orange-900 cursor-pointer flex-1\">\n <i class=\"fa-solid fa-file-invoice-dollar mr-1\"><\/i> Mark as “Past Due Unmatched” pending review\n <\/label>\n <\/div>\n \n <div class=\"col-span-2\">\n <label id=\"label-edit-notes\" class=\"block text-sm font-medium text-slate-700 mb-1\">Notes \/ Invoices Involved (Details to work on)<\/label>\n <textarea id=\"edit-notes\" class=\"w-full border border-slate-300 rounded-lg p-3 outline-none bg-slate-50 focus:ring-2 focus:ring-indigo-500 h-24 resize-none leading-relaxed text-sm\"><\/textarea>\n <\/div>\n\n \n <div id=\"edit-history-container\" class=\"col-span-2 hidden mt-4\">\n <h4 class=\"text-sm font-bold text-slate-800 border-b border-slate-200 pb-2 mb-3\"><i class=\"fa-solid fa-clock-rotate-left text-indigo-500 mr-2\"><\/i> Case & Notes History<\/h4>\n <div id=\"edit-history-list\" class=\"space-y-3 max-h-48 overflow-y-auto bg-slate-50 p-3 rounded-lg border border-slate-200 text-xs\">\n \n <\/div>\n <\/div>\n\n <\/div>\n <div class=\"flex justify-end gap-3 mt-6 pt-4 border-t border-slate-100\">\n <button type=\"button\" id=\"btn-cancel-edit\" class=\"px-5 py-2.5 text-slate-600 bg-slate-100 hover:bg-slate-200 border border-slate-200 rounded-lg font-medium transition-colors\">Cancel<\/button>\n <button type=\"submit\" class=\"px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-medium flex items-center gap-2 shadow-md hover:shadow-lg transition-all\">\n <i class=\"fa-solid fa-floppy-disk\"><\/i> Save Changes\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div id=\"ticket-modal\" class=\"fixed inset-0 bg-slate-900\/60 backdrop-blur-sm items-center justify-center p-4 z-[210] hidden\">\n <div class=\"bg-white rounded-2xl shadow-2xl max-w-lg w-full border border-slate-200 overflow-hidden\">\n <div class=\"p-5 border-b border-slate-100 flex justify-between items-center bg-slate-50\">\n <h3 class=\"text-lg font-bold text-slate-900\">\n <i class=\"fa-solid fa-ticket-alt text-indigo-600 mr-2\"><\/i> Issue New Case \/ Weekly Ticket\n <\/h3>\n <button id=\"close-ticket-modal\" class=\"text-slate-400 hover:text-red-500 bg-white shadow-sm border border-slate-200 hover:bg-red-50 w-8 h-8 rounded-full flex items-center justify-center transition-colors\">\n <i class=\"fa-solid fa-times\"><\/i>\n <\/button>\n <\/div>\n <form id=\"form-ticket\" class=\"p-6 space-y-4\">\n <input type=\"hidden\" id=\"ticket-ref-id\">\n <div>\n <label class=\"block text-xs font-bold text-slate-500 uppercase tracking-wider mb-1\">Origin \/ Directory Reference<\/label>\n <input type=\"text\" id=\"ticket-ref-name\" class=\"w-full bg-slate-100 border border-slate-200 rounded-lg p-2.5 outline-none font-semibold text-slate-800\" readonly>\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-xs font-bold text-slate-500 uppercase tracking-wider mb-1\">Origin Type<\/label>\n <input type=\"text\" id=\"ticket-ref-type\" class=\"w-full bg-slate-100 border border-slate-200 rounded-lg p-2.5 outline-none text-slate-600 text-sm\" readonly>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-slate-500 uppercase tracking-wider mb-1\">Classification \/ Group<\/label>\n <input type=\"text\" id=\"ticket-ref-category\" class=\"w-full bg-slate-100 border border-slate-200 rounded-lg p-2.5 outline-none text-slate-600 text-sm\" readonly>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"block text-xs font-bold text-indigo-700 uppercase tracking-wider mb-1\">Assign Ticket Responsible<\/label>\n <select id=\"ticket-assigned\" class=\"w-full border border-indigo-200 bg-indigo-50\/50 rounded-lg p-2.5 outline-none text-slate-800 font-semibold focus:ring-2 focus:ring-indigo-500\" required>\n \n <\/select>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-slate-500 uppercase tracking-wider mb-1\">Case Priority<\/label>\n <select id=\"ticket-priority\" class=\"w-full border border-slate-300 rounded-lg p-2.5 outline-none bg-slate-50 focus:ring-2 focus:ring-indigo-500\">\n <option value=\"Alta\">\ud83d\udd34 High (Urgent)<\/option>\n <option value=\"Media\" selected>\ud83d\udfe1 Medium<\/option>\n <option value=\"Baja\">\ud83d\udfe2 Low<\/option>\n <\/select>\n <\/div>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-slate-500 uppercase tracking-wider mb-1\">Critical Date for this case<\/label>\n <input type=\"date\" id=\"ticket-date\" class=\"w-full border border-slate-300 rounded-lg p-2.5 outline-none bg-slate-50 focus:ring-2 focus:ring-indigo-500\" \/>\n <\/div>\n <div>\n <label class=\"block text-xs font-bold text-indigo-700 uppercase tracking-wider mb-1\">Initial Comments \/ Case Instructions<\/label>\n <textarea id=\"ticket-notes\" placeholder=\"Describe specific requirements for this weekly management...\" class=\"w-full border border-indigo-200 rounded-lg p-3 outline-none bg-indigo-50\/10 focus:ring-2 focus:ring-indigo-500 h-24 resize-none leading-relaxed text-sm\"><\/textarea>\n <\/div>\n <div class=\"flex justify-end gap-3 pt-4 border-t border-slate-100\">\n <button type=\"button\" id=\"btn-cancel-ticket\" class=\"px-5 py-2.5 text-slate-600 bg-slate-100 hover:bg-slate-200 border border-slate-200 rounded-lg font-medium transition-colors\">Cancel<\/button>\n <button type=\"submit\" class=\"px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-bold flex items-center gap-2 shadow-md hover:shadow-lg transition-all\">\n <i class=\"fa-solid fa-paper-plane\"><\/i> Issue Work Ticket\n <\/button>\n <\/div>\n <\/form>\n <\/div>\n <\/div>\n\n \n <div id=\"confirm-modal\" class=\"fixed inset-0 bg-slate-900\/60 backdrop-blur-sm items-center justify-center p-4 z-[250] hidden\">\n <div class=\"bg-white rounded-xl shadow-2xl max-w-md w-full border border-slate-200 p-6 space-y-4\">\n <div class=\"flex items-center gap-3 text-amber-500\">\n <i class=\"fa-solid fa-triangle-exclamation text-2xl\"><\/i>\n <h3 class=\"text-lg font-bold text-slate-900\">Are you sure?<\/h3>\n <\/div>\n <p id=\"confirm-modal-text\" class=\"text-sm text-slate-600 leading-relaxed\"><\/p>\n <div class=\"flex justify-end gap-3 pt-2\">\n <button type=\"button\" id=\"confirm-btn-cancel\" class=\"px-4 py-2 text-xs font-semibold text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors\">Cancel<\/button>\n <button type=\"button\" id=\"confirm-btn-ok\" class=\"px-4 py-2 text-xs font-bold text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors\">Confirm<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script>\n let allVendors = [];\n let searchTerm = '';\n let tableFilter = 'all'; \n \n const DEFAULT_SHEET_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbwIkJTKuBvpPXYubGnDb36jcdHYkYaTRmnYq8yJbR6BtdjVhw1a99h4rQGqFn4HvvU\/exec';\n let savedSheetUrl = localStorage.getItem('ap_sheet_url') || DEFAULT_SHEET_URL;\n\n const DEFAULT_RESPONSIBLES = [\"Maria\", \"Duvan\", \"Jessica\", \"Deivis\", \"Roberto\", \"Karen\"];\n let responsiblesList = JSON.parse(localStorage.getItem('ap_responsibles')) || DEFAULT_RESPONSIBLES;\n\n let urgentAssignedFilter = 'all';\n let urgentOriginFilter = 'all';\n let urgentCategoryFilter = 'all';\n let urgentPriorityFilter = 'all';\n let urgentSearchTerm = '';\n\n let casesResponsibleFilter = 'all';\n let casesStatusFilter = 'all';\n let casesSearchTerm = '';\n let casesSegmentFilter = 'active'; \/\/ Filter variable for open cases tabs\n\n const navDash = document.getElementById('nav-dashboard');\n const navDir = document.getElementById('nav-directory'); \n const navSet = document.getElementById('nav-settings');\n const navUrgent = document.getElementById('nav-urgent');\n const navCases = document.getElementById('nav-cases');\n const navAdd = document.getElementById('nav-add');\n \n const viewDash = document.getElementById('view-dashboard');\n const viewDir = document.getElementById('view-directory'); \n const viewSet = document.getElementById('view-settings');\n const viewUrgent = document.getElementById('view-urgent');\n const viewCases = document.getElementById('view-cases');\n const viewAdd = document.getElementById('view-add-vendor');\n\n let onConfirmCallback = null;\n const showCustomConfirm = (message, callback) => {\n document.getElementById('confirm-modal-text').innerText = message;\n onConfirmCallback = callback;\n const modal = document.getElementById('confirm-modal');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n };\n\n document.getElementById('confirm-btn-cancel').addEventListener('click', () => {\n document.getElementById('confirm-modal').classList.add('hidden');\n document.getElementById('confirm-modal').classList.remove('flex');\n onConfirmCallback = null;\n });\n\n document.getElementById('confirm-btn-ok').addEventListener('click', () => {\n document.getElementById('confirm-modal').classList.add('hidden');\n document.getElementById('confirm-modal').classList.remove('flex');\n if (onConfirmCallback) onConfirmCallback();\n onConfirmCallback = null;\n });\n\n const resetNavStyles = () => {\n const navs = [navDash, navDir, navSet, navUrgent, navCases, navAdd];\n navs.forEach(nav => {\n nav.classList.remove('bg-active-menu', 'text-active-menu', 'shadow-md', 'border-transparent');\n nav.classList.add('text-slate-300', 'hover:bg-white\/5');\n });\n };\n\n const hideAllViews = () => {\n viewDash.classList.add('hidden');\n viewDir.classList.add('hidden');\n viewSet.classList.add('hidden');\n viewUrgent.classList.add('hidden');\n viewCases.classList.add('hidden');\n viewAdd.classList.add('hidden');\n };\n\n const showSettings = () => {\n hideAllViews(); \n viewSet.classList.remove('hidden');\n resetNavStyles();\n navSet.classList.add('bg-active-menu', 'text-active-menu', 'shadow-md'); navSet.classList.remove('text-slate-300', 'hover:bg-white\/5');\n if(savedSheetUrl) document.getElementById('input-url').value = savedSheetUrl;\n document.getElementById('settings-responsibles').value = responsiblesList.join('\\n');\n };\n\n const showDashboard = () => {\n if(!savedSheetUrl) { showSettings(); return; } \n hideAllViews(); \n viewDash.classList.remove('hidden');\n resetNavStyles();\n navDash.classList.add('bg-active-menu', 'text-active-menu', 'shadow-md'); navDash.classList.remove('text-slate-300', 'hover:bg-white\/5');\n };\n\n const showDirectory = () => {\n if(!savedSheetUrl) { showSettings(); return; } \n hideAllViews(); \n viewDir.classList.remove('hidden');\n resetNavStyles();\n navDir.classList.add('bg-active-menu', 'text-active-menu', 'shadow-md'); navDir.classList.remove('text-slate-300', 'hover:bg-white\/5');\n renderTable();\n };\n\n const showUrgentWorkspace = () => {\n if(!savedSheetUrl) { showSettings(); return; }\n hideAllViews(); \n viewUrgent.classList.remove('hidden');\n resetNavStyles();\n navUrgent.classList.add('bg-active-menu', 'text-active-menu', 'shadow-md'); navUrgent.classList.remove('text-slate-300', 'hover:bg-white\/5');\n renderUrgentWorkspace(); \n };\n\n const showCasesWorkspace = () => {\n if(!savedSheetUrl) { showSettings(); return; }\n hideAllViews(); \n viewCases.classList.remove('hidden');\n resetNavStyles();\n navCases.classList.add('bg-active-menu', 'text-active-menu', 'shadow-md'); navCases.classList.remove('text-slate-300', 'hover:bg-white\/5');\n renderCasesWorkspace();\n };\n\n const showAddVendorWorkspace = () => {\n if(!savedSheetUrl) { showSettings(); return; }\n hideAllViews(); \n viewAdd.classList.remove('hidden');\n resetNavStyles();\n navAdd.classList.add('bg-active-menu', 'text-active-menu', 'shadow-md'); navAdd.classList.remove('text-slate-300', 'hover:bg-white\/5');\n };\n\n navDash.addEventListener('click', showDashboard);\n navDir.addEventListener('click', showDirectory);\n navSet.addEventListener('click', showSettings);\n navUrgent.addEventListener('click', showUrgentWorkspace);\n navCases.addEventListener('click', showCasesWorkspace);\n navAdd.addEventListener('click', showAddVendorWorkspace);\n\n function copyScriptCode() {\n const code = document.getElementById('script-code').innerText;\n const textarea = document.createElement('textarea');\n textarea.value = code;\n textarea.style.position = 'fixed';\n document.body.appendChild(textarea);\n textarea.select();\n try {\n document.execCommand('copy');\n const btn = document.getElementById('btn-copy');\n btn.innerHTML = '<i class=\"fa-solid fa-check\"><\/i> Copied!';\n setTimeout(() => btn.innerHTML = '<i class=\"fa-regular fa-copy\"><\/i> Copy Code', 2000);\n } catch (err) {\n console.error('Copy fallback failed', err);\n }\n document.body.removeChild(textarea);\n }\n\n document.getElementById('btn-connect').addEventListener('click', async () => {\n const urlInput = document.getElementById('input-url').value.trim();\n const statusLabel = document.getElementById('conn-status');\n \n if(!urlInput.includes(\"script.google.com\/macros\/s\/\")) {\n statusLabel.innerText = \"Error: Invalid Google Script URL.\";\n statusLabel.classList.remove('hidden', 'text-emerald-600'); statusLabel.classList.add('text-red-500');\n return;\n }\n\n localStorage.setItem('ap_sheet_url', urlInput);\n savedSheetUrl = urlInput;\n \n statusLabel.innerHTML = '<i class=\"fa-solid fa-spinner fa-spin\"><\/i> Connecting & Loading Database...';\n statusLabel.classList.remove('hidden', 'text-red-500'); statusLabel.classList.add('text-indigo-600');\n \n await fetchVendors(); \n \n statusLabel.classList.add('hidden');\n showSuccess(\"Database connected successfully.\");\n showDashboard();\n });\n\n \/\/ --- UTILS ---\n const generateId = () => Date.now().toString(36) + Math.random().toString(36).substr(2);\n \n const showError = (msg) => {\n document.getElementById('error-text').innerText = msg;\n const el = document.getElementById('error-msg');\n el.classList.remove('hidden'); setTimeout(() => el.classList.add('hidden'), 5000);\n };\n\n const showSuccess = (msg) => {\n document.getElementById('success-text').innerText = msg;\n const el = document.getElementById('success-msg');\n el.classList.remove('hidden'); setTimeout(() => el.classList.add('hidden'), 4000);\n }\n\n const setLoading = (isLoading, msg = \"Loading...\") => {\n const el = document.getElementById('loading-screen');\n document.getElementById('loading-text').innerText = msg;\n isLoading ? el.classList.remove('hidden') : el.classList.add('hidden');\n };\n\n const setBgSyncLoading = (isSyncing, msg = \"Saving...\") => {\n const indicator = document.getElementById('bg-sync-indicator');\n const statusText = document.getElementById('sync-status-text');\n const spinner = document.getElementById('sync-spinner');\n if (isSyncing) {\n statusText.innerText = msg;\n spinner.className = \"fa-solid fa-circle-notch fa-spin text-indigo-400\";\n indicator.classList.remove('hidden');\n } else {\n statusText.innerText = \"Synced\";\n spinner.className = \"fa-solid fa-check text-emerald-400 animate-bounce\";\n setTimeout(() => {\n if (statusText.innerText === \"Synced\") {\n indicator.classList.add('hidden');\n }\n }, 1500);\n }\n };\n\n const getTodayStr = () => {\n const d = new Date();\n const year = d.getFullYear();\n const month = String(d.getMonth() + 1).padStart(2, '0');\n const day = String(d.getDate()).padStart(2, '0');\n return `${year}-${month}-${day}`;\n };\n\n const sanitizeDate = (dateVal) => {\n if (!dateVal) return '';\n if (typeof dateVal === 'string') {\n if (dateVal.includes('T')) return dateVal.split('T')[0];\n const match = dateVal.match(\/^\\d{4}-\\d{2}-\\d{2}\/);\n if (match) return match[0];\n }\n try {\n const d = new Date(dateVal);\n if (!isNaN(d.getTime())) {\n const year = d.getFullYear();\n const month = String(d.getMonth() + 1).padStart(2, '0');\n const day = String(d.getDate()).padStart(2, '0');\n return `${year}-${month}-${day}`;\n }\n } catch (e) {}\n return '';\n };\n\n const sanitizeTimestamp = (val) => {\n if (!val) return Date.now();\n const num = Number(val);\n if (!isNaN(num) && num > 0) return num;\n const parsed = Date.parse(val);\n if (!isNaN(parsed)) return parsed;\n return Date.now();\n };\n\n const isItemTicket = (v) => v.isTicket === 'Yes' || v.isTicket === true;\n\n const logMovement = async (vendor, actionType, details) => {\n if (!savedSheetUrl) return;\n const logData = {\n action: 'log',\n log: {\n id: generateId(),\n timestamp: new Date().toLocaleString('en-US'),\n date: getTodayStr(),\n vendorId: vendor.id,\n vendorName: vendor.name,\n clerk: vendor.assignedTo || 'Unassigned',\n actionType: actionType,\n details: details\n }\n };\n try {\n fetch(savedSheetUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'text\/plain;charset=utf-8' },\n body: JSON.stringify(logData)\n });\n } catch (e) { console.error(\"Error saving log\", e); }\n };\n\n const populateResponsiblesDropdowns = () => {\n const list = responsiblesList;\n \n const newAssignedSelect = document.getElementById('new-assigned');\n newAssignedSelect.innerHTML = '<option value=\"\" disabled selected>-- Select Responsible --<\/option>';\n list.forEach(name => {\n const opt = document.createElement('option'); opt.value = name; opt.textContent = name;\n newAssignedSelect.appendChild(opt);\n });\n\n const bulkAssignedSelect = document.getElementById('bulk-assigned');\n bulkAssignedSelect.innerHTML = '<option value=\"\" disabled selected>-- Select Responsible --<\/option>';\n list.forEach(name => {\n const opt = document.createElement('option'); opt.value = name; opt.textContent = name;\n bulkAssignedSelect.appendChild(opt);\n });\n\n const taskAssignedSelect = document.getElementById('task-assigned');\n taskAssignedSelect.innerHTML = '<option value=\"\" disabled selected>-- Select Responsible --<\/option>';\n list.forEach(name => {\n const opt = document.createElement('option'); opt.value = name; opt.textContent = name;\n taskAssignedSelect.appendChild(opt);\n });\n\n const editAssignedSelect = document.getElementById('edit-assigned');\n editAssignedSelect.innerHTML = '<option value=\"\" disabled selected>-- Select Responsible --<\/option>';\n list.forEach(name => {\n const opt = document.createElement('option'); opt.value = name; opt.textContent = name;\n editAssignedSelect.appendChild(opt);\n });\n\n const ticketAssignedSelect = document.getElementById('ticket-assigned');\n ticketAssignedSelect.innerHTML = '<option value=\"\" disabled selected>-- Select Responsible --<\/option>';\n list.forEach(name => {\n const opt = document.createElement('option'); opt.value = name; opt.textContent = name;\n ticketAssignedSelect.appendChild(opt);\n });\n\n const casesRespSelect = document.getElementById('filter-cases-responsible');\n casesRespSelect.innerHTML = '<option value=\"all\">\ud83d\udc65 All Analysts<\/option>';\n list.forEach(name => {\n const opt = document.createElement('option'); opt.value = name; opt.textContent = `\ud83d\udc64 ${name}`;\n casesRespSelect.appendChild(opt);\n });\n };\n\n document.getElementById('btn-save-responsibles').addEventListener('click', () => {\n const rawText = document.getElementById('settings-responsibles').value;\n const names = rawText.split('\\n').map(n => n.trim()).filter(n => n !== '');\n \n if (names.length === 0) {\n showError(\"Please enter at least one responsible person.\");\n return;\n }\n\n responsiblesList = names;\n localStorage.setItem('ap_responsibles', JSON.stringify(responsiblesList));\n \n populateResponsiblesDropdowns();\n renderUI();\n showSuccess(\"Personnel updated and applied globally.\");\n });\n\n const getCategoryOnly = (vendorName, type) => {\n if (type.startsWith('Tarea:')) return 'Special Task';\n const firstLetter = vendorName.trim().toUpperCase().charAt(0);\n if (type === 'OEM') return 'OEM';\n if (type === 'Non Inventory') return 'Non Inventory';\n if (type === 'Moto') {\n if (firstLetter >= 'A' && firstLetter <= 'H') return 'Motosport A-H';\n if (firstLetter >= 'I' && firstLetter <= 'R') return 'Motosport I-R';\n if (firstLetter >= 'S' && firstLetter <= 'Z') return 'Motosport S-Z';\n return 'Motosport Others';\n }\n return 'Uncategorized';\n };\n\n \/\/ --- DATABASE OPERATIONS ---\n const fetchVendors = async (silent = false) => {\n if(!savedSheetUrl) return;\n if (!silent) setLoading(true, \"Syncing data...\");\n else setBgSyncLoading(true, \"Updating list...\");\n \n try {\n const response = await fetch(savedSheetUrl);\n let loadedVendors = await response.json();\n \n if(loadedVendors.error) {\n showError(\"Script Error: \" + loadedVendors.error);\n if (!silent) setLoading(false);\n setBgSyncLoading(false);\n return;\n }\n\n let seenIds = new Set();\n \n allVendors = loadedVendors.map(v => {\n v.criticalDate = sanitizeDate(v.criticalDate);\n v.lastStatementDate = sanitizeDate(v.lastStatementDate);\n v.lastWorkedDate = sanitizeDate(v.lastWorkedDate);\n v.completedDate = sanitizeDate(v.completedDate);\n v.createdAt = sanitizeTimestamp(v.createdAt);\n v.hasPastDue = v.hasPastDue || 'No'; \n v.notes = v.notes || ''; \n\n let vId = String(v.id).trim();\n if (!vId || vId === '' || vId === 'undefined' || seenIds.has(vId)) {\n vId = generateId();\n v.id = vId; \n }\n seenIds.add(vId);\n\n return v;\n });\n\n allVendors.sort((a, b) => b.createdAt - a.createdAt);\n renderUI();\n\n if (!silent) setLoading(false);\n else setBgSyncLoading(false);\n } catch (error) {\n if (!silent) setLoading(false);\n setBgSyncLoading(false);\n showError(\"Could not download database. Check URL or Google permissions.\");\n }\n };\n\n const executeActionSilent = async (payload, successMsg) => {\n setBgSyncLoading(true, \"Saving...\");\n try {\n const response = await fetch(savedSheetUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'text\/plain;charset=utf-8' }, \n body: JSON.stringify(payload)\n });\n const resData = await response.json();\n if (resData && resData.success && successMsg) {\n showSuccess(successMsg);\n }\n setBgSyncLoading(false);\n } catch (err) {\n setBgSyncLoading(false);\n showError(\"Background save error. Check internet connection.\");\n }\n };\n\n const executeAction = async (payload, successMsg) => {\n setLoading(true, \"Saving to cloud...\");\n try {\n await fetch(savedSheetUrl, {\n method: 'POST',\n headers: { 'Content-Type': 'text\/plain;charset=utf-8' }, \n body: JSON.stringify(payload)\n });\n showSuccess(successMsg);\n await fetchVendors(true); \n setLoading(false);\n } catch (err) {\n setLoading(false);\n showError(\"Connection error. Check internet connection.\");\n }\n };\n\n const syncToParentVendor = async (ticket, actionName) => {\n if (!ticket.parentId) return;\n const parent = allVendors.find(p => String(p.id).trim() === String(ticket.parentId).trim());\n if (!parent) return;\n\n let isUpdated = false;\n \n if (ticket.lastWorkedDate && ticket.lastWorkedDate !== parent.lastWorkedDate) {\n parent.lastWorkedDate = ticket.lastWorkedDate;\n isUpdated = true;\n }\n if (ticket.lastStatementDate && ticket.lastStatementDate !== parent.lastStatementDate) {\n parent.lastStatementDate = ticket.lastStatementDate;\n isUpdated = true;\n }\n\n if (ticket.notes && ticket.notes.trim() !== '') {\n const newNoteEntry = `[${new Date().toLocaleDateString()} | ${actionName}] - Ticket: ${ticket.name}\\nNote: ${ticket.notes.trim()}`;\n if (!parent.notes || !parent.notes.includes(ticket.notes.trim())) {\n parent.notes = parent.notes ? parent.notes + `\\n\\n${newNoteEntry}` : newNoteEntry;\n isUpdated = true;\n }\n }\n\n if (isUpdated) {\n renderUI();\n await executeActionSilent({ action: 'update', vendor: parent }, \"Vendor profile history synced.\");\n }\n };\n\n const quickUpdateVendor = async (id, propertyMap, successMsg) => {\n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if(!vendor) return;\n \n for (const [key, value] of Object.entries(propertyMap)) {\n vendor[key] = value;\n }\n \n renderUI();\n await executeActionSilent({ action: 'update', vendor: vendor }, successMsg);\n\n if (isItemTicket(vendor) && vendor.parentId) {\n await syncToParentVendor(vendor, \"Quick Status\/Date Change\");\n }\n };\n\n \/\/ --- MAIN RENDER ---\n const renderUI = () => {\n renderDashboardStats();\n renderTable();\n renderUrgentWorkspace();\n renderCasesWorkspace();\n };\n\n const toggleCategory = (id) => {\n const content = document.getElementById(id);\n const icon = document.getElementById('icon-' + id);\n if (content.classList.contains('hidden')) {\n content.classList.remove('hidden');\n icon.classList.remove('fa-chevron-down');\n icon.classList.add('fa-chevron-up');\n } else {\n content.classList.add('hidden');\n icon.classList.remove('fa-chevron-up');\n icon.classList.add('fa-chevron-down');\n }\n };\n\n const renderDashboardStats = () => {\n const masterItems = allVendors.filter(v => !isItemTicket(v));\n const activeTickets = allVendors.filter(v => isItemTicket(v) && v.status !== 'Completado');\n\n const catCounts = {};\n masterItems.forEach(v => {\n const cat = (v.category && v.category.trim() !== '') ? v.category.trim() : 'Uncategorized';\n catCounts[cat] = (catCounts[cat] || 0) + 1;\n });\n\n const tktCatCounts = {};\n activeTickets.forEach(t => {\n const cat = (t.category && t.category.trim() !== '') ? t.category.trim() : 'Uncategorized';\n tktCatCounts[cat] = (tktCatCounts[cat] || 0) + 1;\n });\n\n const tktPersonCounts = {};\n activeTickets.forEach(t => {\n const person = (t.assignedTo && t.assignedTo.trim() !== '') ? t.assignedTo.trim() : 'Unassigned';\n tktPersonCounts[person] = (tktPersonCounts[person] || 0) + 1;\n });\n\n const pastDueVendors = masterItems.filter(v => v.hasPastDue === 'Yes' && v.status !== 'Completado');\n const pastDueCount = pastDueVendors.length;\n\n const urgentesTickets = activeTickets.filter(t => t.priority === 'Alta');\n const urgentesCount = urgentesTickets.length + pastDueCount;\n\n document.getElementById('dash-kpis').innerHTML = `\n <div class=\"bg-white border border-slate-200 border-l-4 border-l-rose-400 rounded-xl p-6 flex items-center justify-between shadow-sm cursor-pointer hover:shadow-md transition-all group\" onclick=\"document.getElementById('nav-urgent').click()\">\n <div>\n <h3 class=\"font-black text-slate-800 text-xl flex items-center gap-2\"><i class=\"fa-solid fa-fire text-rose-500 group-hover:scale-110 transition-transform\"><\/i> Global Urgent Cases<\/h3>\n <p class=\"text-xs text-slate-500 mt-1 font-medium max-w-xs\">Total high priority tickets plus Past Due accounts<\/p>\n <\/div>\n <span class=\"text-5xl font-black text-rose-500\">${urgentesCount}<\/span>\n <\/div>\n \n <div class=\"bg-white border border-slate-200 border-l-4 border-l-amber-400 rounded-xl p-6 flex items-center justify-between shadow-sm cursor-pointer hover:shadow-md transition-all group\" onclick=\"document.getElementById('nav-urgent').click()\">\n <div>\n <h3 class=\"font-black text-slate-800 text-xl flex items-center gap-2\"><i class=\"fa-solid fa-file-invoice-dollar text-amber-500 animate-pulse\"><\/i> Past Due Unmatched<\/h3>\n <p class=\"text-xs text-slate-500 mt-1 font-medium max-w-xs\">Vendors flagged pending priority reconciliation<\/p>\n <\/div>\n <span class=\"text-5xl font-black text-amber-500\">${pastDueCount}<\/span>\n <\/div>\n `;\n\n const personContainer = document.getElementById('dash-tickets-person');\n if(Object.keys(tktPersonCounts).length === 0) {\n personContainer.innerHTML = `<div class=\"text-center py-6 text-slate-400\"><i class=\"fa-solid fa-mug-hot text-2xl mb-2\"><\/i><br>No active cases assigned.<\/div>`;\n } else {\n personContainer.innerHTML = Object.entries(tktPersonCounts).sort((a,b)=>b[1]-a[1]).map(([person, count]) => `\n <div class=\"flex items-center justify-between border-b border-slate-100 pb-3 last:border-0 last:pb-0\">\n <div class=\"flex items-center gap-3\">\n <div class=\"w-9 h-9 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center font-bold text-xs uppercase shadow-inner\">${person.substring(0,2)}<\/div>\n <span class=\"text-sm font-bold text-slate-700\">${person}<\/span>\n <\/div>\n <span class=\"bg-indigo-50 text-indigo-700 font-bold px-3 py-1 rounded-lg text-sm border border-indigo-200 shadow-sm\">${count} Cases<\/span>\n <\/div>\n `).join('');\n }\n\n const tktCatContainer = document.getElementById('dash-tickets-category');\n if(Object.keys(tktCatCounts).length === 0) {\n tktCatContainer.innerHTML = `<div class=\"text-center py-6 text-slate-400\"><i class=\"fa-regular fa-folder-open text-2xl mb-2\"><\/i><br>No pending cases categorized.<\/div>`;\n } else {\n const ticketsByCategory = {};\n activeTickets.forEach(t => {\n const cat = (t.category && t.category.trim() !== '') ? t.category.trim() : 'Uncategorized';\n if(!ticketsByCategory[cat]) ticketsByCategory[cat] = [];\n ticketsByCategory[cat].push(t);\n });\n\n tktCatContainer.innerHTML = Object.entries(ticketsByCategory).sort((a,b)=>b[1].length-a[1].length).map(([cat, tkts], idx) => `\n <div class=\"border border-slate-100 rounded-xl overflow-hidden shadow-sm\">\n <div class=\"bg-slate-50 px-4 py-2.5 border-b border-slate-100 flex justify-between items-center cursor-pointer hover:bg-slate-100 transition-colors\" onclick=\"toggleCategory('cat-group-${idx}')\">\n <span class=\"text-sm font-bold text-slate-700 flex items-center gap-2\"><i class=\"fa-regular fa-folder text-indigo-400\"><\/i> ${cat}<\/span>\n <div class=\"flex items-center gap-3\">\n <span class=\"text-xs font-black text-slate-600 bg-white px-2 py-0.5 rounded-md border border-slate-200\">${tkts.length}<\/span>\n <i id=\"icon-cat-group-${idx}\" class=\"fa-solid fa-chevron-down text-slate-400 text-xs\"><\/i>\n <\/div>\n <\/div>\n <div id=\"cat-group-${idx}\" class=\"hidden p-2 bg-white flex flex-col gap-1 max-h-32 overflow-y-auto\">\n ${tkts.map(t => `\n <div class=\"text-xs text-slate-600 py-1.5 px-2 hover:bg-indigo-50 rounded flex justify-between items-center group cursor-pointer transition-colors\" onclick=\"document.getElementById('nav-cases').click()\" title=\"${t.name}\">\n <span class=\"truncate pr-2 flex-1\"><i class=\"fa-solid fa-ticket-alt text-slate-300 group-hover:text-indigo-400 mr-1.5 transition-colors\"><\/i>${t.name}<\/span>\n <span class=\"text-[9px] font-bold text-slate-400 group-hover:text-indigo-600 whitespace-nowrap bg-slate-100 group-hover:bg-white px-1.5 py-0.5 rounded border border-transparent group-hover:border-indigo-100 transition-colors\">${t.assignedTo ? t.assignedTo.split(' ')[0] : 'NA'}<\/span>\n <\/div>\n `).join('')}\n <\/div>\n <\/div>\n `).join('');\n }\n\n const colorThemes = [\n 'text-blue-600 border-blue-200 bg-blue-50\/30', \n 'text-indigo-600 border-indigo-200 bg-indigo-50\/30', \n 'text-purple-600 border-purple-200 bg-purple-50\/30', \n 'text-teal-600 border-teal-200 bg-teal-50\/30', \n 'text-emerald-600 border-emerald-200 bg-emerald-50\/30', \n 'text-cyan-600 border-cyan-200 bg-cyan-50\/30'\n ];\n let colorIndex = 0;\n \n document.getElementById('dash-categories').innerHTML = Object.entries(catCounts).sort((a,b)=>b[1]-a[1]).map(([cat, count]) => {\n const themeClass = colorThemes[colorIndex % colorThemes.length];\n const textColor = themeClass.split(' ')[0];\n colorIndex++;\n return `\n <div class=\"p-4 rounded-xl border flex flex-col justify-between shadow-sm hover:shadow-md transition-shadow ${themeClass}\">\n <h3 class=\"font-bold text-slate-700 text-xs line-clamp-2\" title=\"${cat}\">${cat}<\/h3>\n <div class=\"mt-4 flex items-end justify-between\">\n <span class=\"text-2xl font-black ${textColor}\">${count}<\/span>\n <span class=\"text-[9px] font-bold text-slate-400 uppercase tracking-wider\">Vendors<\/span>\n <\/div>\n <\/div>\n `;\n }).join('');\n\n \/\/ EXPIRATIONS (Next 48 hrs or overdue)\n const expContainer = document.getElementById('dash-expirations');\n const today = new Date();\n today.setHours(0,0,0,0);\n const in48h = new Date(today);\n in48h.setDate(in48h.getDate() + 2);\n\n let expiringCases = activeTickets.filter(t => {\n if(!t.criticalDate || t.criticalDate === '') return false;\n const d = new Date(t.criticalDate);\n return d <= in48h;\n });\n\n expiringCases.sort((a,b) => new Date(a.criticalDate) - new Date(b.criticalDate));\n\n if (expiringCases.length === 0) {\n expContainer.innerHTML = `<div class=\"text-center py-6 text-slate-400\"><i class=\"fa-regular fa-calendar-check text-2xl mb-2\"><\/i><br>No cases expiring soon.<\/div>`;\n } else {\n expContainer.innerHTML = expiringCases.map(t => {\n const cDate = new Date(t.criticalDate);\n const isOverdue = cDate < today;\n const isToday = cDate.getTime() === today.getTime();\n \n let dateBadge = '';\n let borderClass = '';\n if (isOverdue) {\n dateBadge = `<span class=\"bg-red-100 text-red-700 px-2 py-0.5 rounded text-[10px] font-bold border border-red-200\"><i class=\"fa-solid fa-triangle-exclamation\"><\/i> Overdue<\/span>`;\n borderClass = 'border-l-4 border-l-red-500';\n } else if (isToday) {\n dateBadge = `<span class=\"bg-orange-100 text-orange-700 px-2 py-0.5 rounded text-[10px] font-bold border border-orange-200\"><i class=\"fa-solid fa-clock\"><\/i> Due Today<\/span>`;\n borderClass = 'border-l-4 border-l-orange-400';\n } else {\n dateBadge = `<span class=\"bg-amber-50 text-amber-700 px-2 py-0.5 rounded text-[10px] font-bold border border-amber-200\"><i class=\"fa-regular fa-calendar\"><\/i> Due Tomorrow<\/span>`;\n borderClass = 'border-l-4 border-l-amber-300';\n }\n\n return `\n <div class=\"bg-white border border-slate-200 ${borderClass} rounded-xl p-4 flex flex-col md:flex-row gap-4 justify-between items-start md:items-center shadow-sm\">\n <div class=\"flex-1\">\n <div class=\"flex items-center gap-2 mb-1\">\n ${dateBadge}\n <span class=\"text-[10px] font-bold text-slate-400 uppercase tracking-wider\">${t.type.replace('Tarea: ', '')}<\/span>\n <\/div>\n <h4 class=\"font-bold text-slate-800 text-sm\"><i class=\"fa-solid fa-ticket-alt text-slate-300 mr-1\"><\/i> ${t.name}<\/h4>\n <div class=\"text-xs text-slate-500 mt-2 bg-slate-50 p-2 rounded border border-slate-100 italic line-clamp-2\">\n <i class=\"fa-solid fa-quote-left text-slate-300 mr-1\"><\/i> ${t.notes || 'No instructions registered.'}\n <\/div>\n <\/div>\n <div class=\"flex flex-col items-end shrink-0 gap-2 border-l border-slate-100 pl-4\">\n <div class=\"text-[10px] font-bold text-slate-400 uppercase tracking-wider text-right\"><i class=\"fa-solid fa-user mr-1\"><\/i> Responsible<\/div>\n <div class=\"flex items-center gap-2\">\n <div class=\"w-6 h-6 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center font-bold text-[10px] uppercase shadow-inner\">${t.assignedTo ? t.assignedTo.substring(0,2) : 'NA'}<\/div>\n <span class=\"text-xs font-bold text-slate-700\">${t.assignedTo || 'Unassigned'}<\/span>\n <\/div>\n <button onclick=\"document.getElementById('nav-cases').click()\" class=\"mt-1 text-[10px] font-bold text-indigo-600 hover:text-indigo-800 transition-colors\">View in Cases →<\/button>\n <\/div>\n <\/div>\n `;\n }).join('');\n }\n \n const badgeUrgent = document.getElementById('nav-urgent-badge');\n if(urgentesCount > 0) {\n badgeUrgent.innerText = urgentesCount;\n badgeUrgent.classList.remove('hidden');\n } else {\n badgeUrgent.classList.add('hidden');\n }\n\n const badgeCases = document.getElementById('nav-cases-badge');\n if(activeTickets.length > 0) {\n badgeCases.innerText = activeTickets.length;\n badgeCases.classList.remove('hidden');\n } else {\n badgeCases.classList.add('hidden');\n }\n };\n\n const renderCasesWorkspace = () => {\n const tbody = document.getElementById('cases-tbody');\n let cases = allVendors.filter(v => isItemTicket(v));\n\n \/\/ FILTER TABS (Active vs Completed)\n if (casesSegmentFilter === 'active') {\n cases = cases.filter(c => c.status !== 'Completado');\n } else if (casesSegmentFilter === 'completed') {\n cases = cases.filter(c => c.status === 'Completado');\n }\n\n if (casesResponsibleFilter !== 'all') {\n cases = cases.filter(c => c.assignedTo === casesResponsibleFilter);\n }\n if (casesStatusFilter !== 'all') {\n cases = cases.filter(c => c.status === casesStatusFilter);\n }\n if (casesSearchTerm.trim() !== '') {\n const term = casesSearchTerm.toLowerCase();\n cases = cases.filter(c => \n c.name.toLowerCase().includes(term) || \n (c.notes && c.notes.toLowerCase().includes(term)) ||\n (c.assignedTo && c.assignedTo.toLowerCase().includes(term))\n );\n }\n\n if (cases.length === 0) {\n tbody.innerHTML = `<tr><td colspan=\"6\" class=\"text-center py-12 text-slate-400 bg-slate-50\"><i class=\"fa-solid fa-inbox text-3xl mb-3 opacity-50\"><\/i><br>No weekly tickets require operational work.<\/td><\/tr>`;\n return;\n }\n\n let html = '';\n cases.forEach(c => {\n const isTask = c.category === 'Tarea Especial' || (c.type && c.type.startsWith('Tarea:'));\n const isUrg = c.priority === 'Alta' && c.status !== 'Completado';\n \n let rowClass = 'hover:bg-slate-50 border-l-4 border-l-transparent';\n if (isUrg) {\n rowClass = isTask \n ? 'bg-purple-50\/20 hover:bg-purple-50\/40 border-l-4 border-l-purple-500'\n : 'bg-red-50\/40 hover:bg-red-50\/80 border-l-4 border-l-red-500';\n }\n\n let sBadge = c.status === 'Completado' ? `<button class=\"btn-case-status text-emerald-700 bg-emerald-100 px-3 py-1 rounded-md text-xs font-bold border border-emerald-200\" data-id=\"${c.id}\" data-status=\"${c.status}\"><i class=\"fa-solid fa-check\"><\/i> ${c.status}<\/button>` : \n c.status === 'En Proceso' ? `<button class=\"btn-case-status text-blue-700 bg-blue-100 px-3 py-1 rounded-md text-xs font-bold border border-blue-200\" data-id=\"${c.id}\" data-status=\"${c.status}\"><i class=\"fa-solid fa-spinner fa-spin\"><\/i> ${c.status}<\/button>` : \n `<button class=\"btn-case-status text-slate-600 bg-slate-200 px-3 py-1 rounded-md text-xs font-bold border border-slate-300\" data-id=\"${c.id}\" data-status=\"${c.status}\"><i class=\"fa-solid fa-clock\"><\/i> ${c.status}<\/button>`;\n\n let pBadge = c.priority === 'Alta' ? `<span class=\"text-xs font-bold text-red-700 bg-white border border-red-200 px-2 py-1 rounded shadow-sm\"><i class=\"fa-solid fa-fire\"><\/i> Urgent<\/span>` : \n c.priority === 'Media' ? `<span class=\"text-xs font-semibold text-amber-700 bg-amber-50 px-2 py-1 rounded border border-amber-200\"><i class=\"fa-solid fa-circle text-[8px]\"><\/i> Medium<\/span>` : \n `<span class=\"text-xs font-semibold text-green-700 bg-green-50 px-2 py-1 rounded border border-green-200\"><i class=\"fa-solid fa-arrow-down\"><\/i> Low<\/span>`;\n\n const displayType = isTask ? c.type.replace('Tarea: ', '') : c.type;\n const typeBadgeColor = isTask ? 'bg-purple-100 text-purple-800 border-purple-200' : 'bg-indigo-50 text-indigo-700 border-indigo-100';\n\n html += `\n <tr class=\"transition-colors border-b border-slate-100 ${rowClass}\">\n <td class=\"px-5 py-4\">\n <div class=\"font-bold text-slate-900 flex items-center gap-1.5\">\n ${isTask ? '<i class=\"fa-solid fa-clipboard-list text-purple-500 text-xs\"><\/i>' : '<i class=\"fa-solid fa-ticket-alt text-indigo-500 text-xs\"><\/i>'}\n ${c.name}\n <\/div>\n <div class=\"text-[11px] text-slate-500 mt-1 flex flex-col gap-1 items-start\">\n <span class=\"${typeBadgeColor} px-1.5 py-0.5 rounded w-max font-semibold uppercase tracking-wide border\">${displayType}<\/span>\n <\/div>\n <\/td>\n <td class=\"px-5 py-4\">\n <div class=\"flex flex-col gap-1 min-w-[180px]\">\n ${c.lastWorkedDate ? `<span class=\"text-xs font-medium text-indigo-700 bg-indigo-50 px-2 py-1 rounded w-max border border-indigo-200\"><i class=\"fa-solid fa-business-time text-indigo-400\"><\/i> Wkd: ${c.lastWorkedDate}<\/span>` : `<span class=\"text-[10px] text-slate-400 italic\">Wkd: Unrecorded<\/span>`}\n ${c.status === 'Completado' && c.completedDate ? `<span class=\"text-xs font-bold text-emerald-700 bg-emerald-50 px-2 py-1 rounded w-max border border-emerald-200\"><i class=\"fa-solid fa-check-double text-emerald-500\"><\/i> Cmp: ${c.completedDate}<\/span>` : ''}\n <div class=\"text-[11px] text-slate-500 mt-1 line-clamp-1 italic max-w-sm\" title=\"${c.notes || ''}\">Note: ${c.notes || 'No comments'}<\/div>\n <\/div>\n <\/td>\n <td class=\"px-5 py-4 flex flex-col gap-1.5 items-start\">\n ${pBadge}\n ${c.criticalDate ? `<span class=\"text-[11px] text-slate-500 font-medium\"><i class=\"fa-solid fa-calendar-xmark text-red-400\"><\/i> ${c.criticalDate}<\/span>` : ''}\n <\/td>\n <td class=\"px-5 py-4\">\n <div class=\"text-sm font-bold text-slate-800\">${c.assignedTo || 'Unassigned'}<\/div>\n <div class=\"text-[10px] text-slate-500 uppercase\">${c.category}<\/div>\n <\/td>\n <td class=\"px-5 py-4\">${sBadge}<\/td>\n <td class=\"px-5 py-4 text-right\">\n <button class=\"btn-case-edit text-indigo-600 bg-indigo-50 hover:bg-indigo-600 hover:text-white w-8 h-8 rounded-md transition-colors border border-indigo-100\" data-id=\"${c.id}\" title=\"Work \/ Edit Case\"><i class=\"fa-solid fa-pen\"><\/i><\/button>\n <button class=\"btn-case-delete text-red-500 bg-red-50 hover:bg-red-500 hover:text-white w-8 h-8 rounded-md transition-colors border border-red-100 ml-1\" data-id=\"${c.id}\" title=\"Delete Ticket\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\n <\/td>\n <\/tr>\n `;\n });\n tbody.innerHTML = html;\n attachCasesEvents();\n };\n\n const attachCasesEvents = () => {\n document.querySelectorAll('.btn-case-delete').forEach(btn => btn.addEventListener('click', (e) => {\n const id = e.currentTarget.getAttribute('data-id');\n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n showCustomConfirm('Permanently delete this weekly work ticket?', async () => {\n allVendors = allVendors.filter(v => String(v.id).trim() !== String(id).trim());\n renderUI();\n await executeActionSilent({ action: 'delete', id: id, isTicket: vendor ? vendor.isTicket : 'Yes' }, \"Ticket deleted.\");\n });\n }));\n\n document.querySelectorAll('.btn-case-status').forEach(btn => btn.addEventListener('click', async (e) => {\n const id = e.currentTarget.getAttribute('data-id');\n const curr = e.currentTarget.getAttribute('data-status');\n const statuses = ['Pendiente', 'En Proceso', 'Completado'];\n const nextStatus = statuses[(statuses.indexOf(curr) + 1) % statuses.length];\n \n let updateData = { status: nextStatus };\n if (nextStatus === 'Completado') {\n updateData.completedDate = getTodayStr();\n updateData.lastWorkedDate = getTodayStr();\n } else if (curr === 'Completado') {\n updateData.completedDate = ''; \n }\n \n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if (vendor) logMovement(vendor, \"Status Change\", `Analyst changed ticket status from ${curr} to ${nextStatus}`);\n\n await quickUpdateVendor(id, updateData, `Ticket status updated to ${nextStatus}.`);\n }));\n\n document.querySelectorAll('.btn-case-edit').forEach(btn => btn.addEventListener('click', (e) => {\n openEditModal(e.currentTarget.getAttribute('data-id'));\n }));\n };\n\n document.getElementById('filter-cases-responsible').addEventListener('change', (e) => {\n casesResponsibleFilter = e.target.value;\n renderCasesWorkspace();\n });\n document.getElementById('filter-cases-status').addEventListener('change', (e) => {\n casesStatusFilter = e.target.value;\n renderCasesWorkspace();\n });\n document.getElementById('search-cases-input').addEventListener('input', (e) => {\n casesSearchTerm = e.target.value;\n renderCasesWorkspace();\n });\n\n \/\/ --- URGENT CASES WORKSPACE ---\n const updateUrgentDropdowns = (urgentItems) => {\n const selectAssigned = document.getElementById('filter-urgent-assigned');\n const currentAssigned = selectAssigned.value;\n const responsablesSet = new Set(responsiblesList);\n \n const selectCategory = document.getElementById('filter-urgent-category');\n const currentCategory = selectCategory.value;\n const categoriesSet = new Set();\n\n urgentItems.forEach(v => {\n if (v.assignedTo) responsablesSet.add(v.assignedTo.trim());\n const cat = (v.category && v.category.trim() !== '') ? v.category.trim() : 'Uncategorized';\n categoriesSet.add(cat);\n });\n\n selectAssigned.innerHTML = '<option value=\"all\">\ud83d\udc65 All Analysts<\/option>';\n Array.from(responsablesSet).sort().forEach(resp => {\n const opt = document.createElement('option'); opt.value = resp; opt.textContent = `\ud83d\udc64 ${resp}`;\n selectAssigned.appendChild(opt);\n });\n if (Array.from(responsablesSet).includes(currentAssigned)) {\n selectAssigned.value = currentAssigned;\n } else {\n selectAssigned.value = 'all';\n urgentAssignedFilter = 'all';\n }\n\n selectCategory.innerHTML = '<option value=\"all\">\ud83d\udcc1 All Categories<\/option>';\n Array.from(categoriesSet).sort().forEach(cat => {\n const opt = document.createElement('option'); opt.value = cat; opt.textContent = `\ud83d\udcc1 ${cat}`;\n selectCategory.appendChild(opt);\n });\n if (Array.from(categoriesSet).includes(currentCategory)) {\n selectCategory.value = currentCategory;\n } else {\n selectCategory.value = 'all';\n urgentCategoryFilter = 'all';\n }\n };\n\n const renderUrgentWorkspace = () => {\n const container = document.getElementById('urgent-cards-container');\n \n const originalUrgentItems = allVendors.filter(v => \n v.status !== 'Completado' && (\n (isItemTicket(v) && v.priority === 'Alta') || \n (v.hasPastDue === 'Yes')\n )\n );\n\n updateUrgentDropdowns(originalUrgentItems);\n\n let filteredUrgentItems = originalUrgentItems;\n\n if (urgentAssignedFilter !== 'all') {\n filteredUrgentItems = filteredUrgentItems.filter(v => v.assignedTo === urgentAssignedFilter);\n }\n\n if (urgentOriginFilter !== 'all') {\n if (urgentOriginFilter === 'ticket') {\n filteredUrgentItems = filteredUrgentItems.filter(v => isItemTicket(v));\n } else if (urgentOriginFilter === 'pastdue') {\n filteredUrgentItems = filteredUrgentItems.filter(v => v.hasPastDue === 'Yes');\n }\n }\n\n if (urgentCategoryFilter !== 'all') {\n filteredUrgentItems = filteredUrgentItems.filter(v => {\n const cat = (v.category && v.category.trim() !== '') ? v.category.trim() : 'Uncategorized';\n return cat === urgentCategoryFilter;\n });\n }\n\n if (urgentPriorityFilter !== 'all') {\n filteredUrgentItems = filteredUrgentItems.filter(v => v.priority === urgentPriorityFilter);\n }\n\n if (urgentSearchTerm.trim() !== '') {\n const term = urgentSearchTerm.toLowerCase();\n filteredUrgentItems = filteredUrgentItems.filter(v => \n v.name.toLowerCase().includes(term) || \n (v.notes && v.notes.toLowerCase().includes(term)) ||\n (v.assignedTo && v.assignedTo.toLowerCase().includes(term)) ||\n (v.type && v.type.toLowerCase().includes(term))\n );\n }\n\n const btnClearFilters = document.getElementById('btn-clear-urgent-filters');\n if (urgentAssignedFilter !== 'all' || urgentOriginFilter !== 'all' || urgentCategoryFilter !== 'all' || urgentPriorityFilter !== 'all' || urgentSearchTerm.trim() !== '') {\n btnClearFilters.classList.remove('hidden');\n } else {\n btnClearFilters.classList.add('hidden');\n }\n\n if (originalUrgentItems.length === 0) {\n container.innerHTML = `\n <div class=\"col-span-full flex flex-col items-center justify-center py-20 bg-white rounded-2xl border border-dashed border-slate-300\">\n <div class=\"w-20 h-20 bg-green-100 text-green-500 rounded-full flex items-center justify-center text-4xl mb-4 shadow-inner\">\n <i class=\"fa-solid fa-mug-hot\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-slate-800\">Everything under control<\/h3>\n <p class=\"text-slate-500 mt-2\">No urgent cases pending for work this week.<\/p>\n <\/div>`;\n return;\n }\n\n if (filteredUrgentItems.length === 0) {\n container.innerHTML = `\n <div class=\"col-span-full flex flex-col items-center justify-center py-20 bg-white rounded-2xl border border-dashed border-slate-300\">\n <div class=\"w-16 h-16 bg-slate-100 text-slate-400 rounded-full flex items-center justify-center text-3xl mb-4 shadow-inner\">\n <i class=\"fa-solid fa-filter-circle-xmark\"><\/i>\n <\/div>\n <h3 class=\"text-lg font-bold text-slate-700\">No search results<\/h3>\n <p class=\"text-slate-500 mt-1 text-sm\">Try adjusting selected filters or search text.<\/p>\n <button onclick=\"clearUrgentFilters()\" class=\"mt-4 bg-indigo-600 text-white px-4 py-2 rounded-lg text-xs font-bold hover:bg-indigo-700 transition-colors shadow-sm\">\n Clear Filters\n <\/button>\n <\/div>`;\n return;\n }\n\n let html = '';\n filteredUrgentItems.forEach((v) => {\n const isTask = v.category === 'Tarea Especial' || (v.type && v.type.startsWith('Tarea:'));\n const hasCriticalDate = v.criticalDate && v.criticalDate !== '';\n const todayStr = getTodayStr();\n const isWorkedToday = v.lastWorkedDate === todayStr;\n \n const cDate = hasCriticalDate ? new Date(v.criticalDate) : null;\n const todayZero = new Date(); todayZero.setHours(0,0,0,0);\n let dateBadge = '';\n \n if (cDate) {\n if (cDate < todayZero) dateBadge = `<span class=\"text-red-600 bg-red-50 px-1.5 py-0.5 rounded border border-red-200\"><i class=\"fa-solid fa-triangle-exclamation\"><\/i> Overdue ${v.criticalDate}<\/span>`;\n else if (cDate.getTime() === todayZero.getTime()) dateBadge = `<span class=\"text-orange-600 bg-orange-50 px-1.5 py-0.5 rounded border border-orange-200\"><i class=\"fa-solid fa-clock\"><\/i> Due Today<\/span>`;\n else dateBadge = `<span class=\"text-slate-600\"><i class=\"fa-regular fa-calendar\"><\/i> Due ${v.criticalDate}<\/span>`;\n } else {\n dateBadge = `<span class=\"text-slate-400 italic\">No Due Date<\/span>`;\n }\n\n if (isTask) {\n const displayNotes = v.notes ? v.notes : '<span class=\"text-purple-400 italic\">No instructions registered.<\/span>';\n const cleanType = v.type.replace('Tarea: ', '');\n \n html += `\n <div class=\"bg-white rounded-xl shadow-sm border border-l-4 border-l-purple-400 hover:shadow-md transition-shadow flex flex-col lg:flex-row group ring-1 ring-slate-100\">\n \n <div class=\"p-4 border-b lg:border-b-0 lg:border-r border-slate-100 flex-1 min-w-[280px]\">\n <div class=\"flex items-center gap-1.5 mb-2 flex-wrap\">\n <span class=\"bg-purple-100 text-purple-800 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide border border-purple-200 flex items-center gap-1\">\n <i class=\"fa-solid fa-list-check\"><\/i> ${cleanType}\n <\/span>\n <span class=\"text-[11px] font-bold text-slate-500\"><i class=\"fa-regular fa-user mr-1\"><\/i>${v.assignedTo || 'Unassigned'}<\/span>\n ${v.priority === 'Alta' ? `<span class=\"bg-red-100 text-red-700 px-1.5 py-0.5 rounded text-[10px] font-bold border border-red-200 shadow-sm flex items-center gap-1 ml-auto\"><i class=\"fa-solid fa-fire\"><\/i> Urgent<\/span>` : ''}\n ${v.status === 'En Proceso' ? `<span class=\"text-blue-600 text-[10px] font-bold flex items-center gap-1 ml-auto\"><i class=\"fa-solid fa-spinner fa-spin\"><\/i> In Process<\/span>` : `<span class=\"text-slate-500 text-[10px] font-bold flex items-center gap-1 ml-auto\"><i class=\"fa-solid fa-clock\"><\/i> Pending<\/span>`}\n <\/div>\n <h3 class=\"font-bold text-base text-slate-900 leading-snug mb-2\">${v.name}<\/h3>\n <div class=\"flex items-center gap-4 text-xs font-medium\">\n <div>${dateBadge}<\/div>\n <div class=\"${isWorkedToday ? 'text-emerald-600 font-bold bg-emerald-50 px-1.5 py-0.5 rounded border border-emerald-200' : 'text-slate-500'}\">\n <i class=\"fa-solid fa-business-time mr-1\"><\/i> Wkd: ${v.lastWorkedDate || 'Never'}\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"p-4 flex-1 lg:max-w-[35%] bg-slate-50\/50\">\n <div class=\"text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1\"><i class=\"fa-solid fa-paragraph mr-1\"><\/i> Instructions \/ Notes<\/div>\n <div class=\"text-xs text-slate-700 leading-relaxed line-clamp-3\" title=\"${v.notes}\">${displayNotes}<\/div>\n <\/div>\n\n <div class=\"p-4 bg-white border-t lg:border-t-0 lg:border-l border-slate-100 flex lg:flex-col gap-2 justify-center shrink-0 lg:w-40\">\n <button class=\"action-work w-full bg-purple-900 hover:bg-black text-white px-3 py-2 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-2 shadow-sm\" data-id=\"${v.id}\">\n ${isWorkedToday ? '<i class=\"fa-solid fa-check text-emerald-400\"><\/i> Worked Today' : '<i class=\"fa-solid fa-circle-play text-purple-300\"><\/i> Work'}\n <\/button>\n <div class=\"flex gap-2 w-full\">\n <button class=\"action-edit flex-1 bg-slate-50 hover:bg-slate-200 text-slate-600 border border-slate-200 px-2 py-2 rounded-lg text-xs font-bold transition-colors flex items-center justify-center\" title=\"Edit Details\" data-id=\"${v.id}\">\n <i class=\"fa-solid fa-pen\"><\/i>\n <\/button>\n <button class=\"action-complete flex-1 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200 px-2 py-2 rounded-lg text-xs font-bold transition-colors flex items-center justify-center\" title=\"Mark as Completed\" data-id=\"${v.id}\">\n <i class=\"fa-solid fa-check-double\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n `;\n } else {\n const displayNotes = v.notes ? v.notes : '<span class=\"text-slate-400 italic\">No management notes.<\/span>';\n \n html += `\n <div class=\"bg-white rounded-xl shadow-sm border border-l-4 border-l-red-400 hover:shadow-md transition-shadow flex flex-col lg:flex-row group ring-1 ring-slate-100\">\n \n <div class=\"p-4 border-b lg:border-b-0 lg:border-r border-slate-100 flex-1 min-w-[280px]\">\n <div class=\"flex items-center gap-1.5 mb-2 flex-wrap\">\n <span class=\"bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide border border-indigo-200\">${v.type}<\/span>\n <span class=\"text-[11px] font-bold text-slate-500\"><i class=\"fa-regular fa-user mr-1\"><\/i>${v.assignedTo || 'Unassigned'}<\/span>\n ${v.hasPastDue === 'Yes' ? `<span class=\"bg-orange-100 text-orange-800 px-1.5 py-0.5 rounded text-[10px] font-bold border border-orange-200 shadow-sm flex items-center gap-1 ml-auto animate-pulse\"><i class=\"fa-solid fa-file-invoice-dollar\"><\/i> Past Due<\/span>` : ''}\n ${v.priority === 'Alta' && v.hasPastDue !== 'Yes' ? `<span class=\"bg-red-100 text-red-700 px-1.5 py-0.5 rounded text-[10px] font-bold border border-red-200 shadow-sm flex items-center gap-1 ml-auto\"><i class=\"fa-solid fa-fire\"><\/i> Urgent<\/span>` : ''}\n <\/div>\n <h3 class=\"font-bold text-base text-slate-900 leading-snug mb-2\">${v.name}<\/h3>\n <div class=\"flex items-center gap-4 text-xs font-medium\">\n <div>${dateBadge}<\/div>\n <div class=\"${isWorkedToday ? 'text-emerald-600 font-bold bg-emerald-50 px-1.5 py-0.5 rounded border border-emerald-200' : 'text-slate-500'}\">\n <i class=\"fa-solid fa-business-time mr-1\"><\/i> Wkd: ${v.lastWorkedDate || 'Never'}\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"p-4 flex-1 lg:max-w-[35%] bg-slate-50\/50\">\n <div class=\"text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1\"><i class=\"fa-solid fa-list-check mr-1\"><\/i> Details & Invoices<\/div>\n <div class=\"text-xs text-slate-700 leading-relaxed line-clamp-3\" title=\"${v.notes}\">${displayNotes}<\/div>\n <\/div>\n\n <div class=\"p-4 bg-white border-t lg:border-t-0 lg:border-l border-slate-100 flex lg:flex-col gap-2 justify-center shrink-0 lg:w-40\">\n <button class=\"action-work w-full bg-slate-800 hover:bg-black text-white px-3 py-2 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-2 shadow-sm\" data-id=\"${v.id}\">\n ${isWorkedToday ? '<i class=\"fa-solid fa-check text-emerald-400\"><\/i> Worked Today' : '<i class=\"fa-regular fa-calendar-check\"><\/i> Mark Work'}\n <\/button>\n <div class=\"flex gap-2 w-full\">\n <button class=\"action-edit flex-1 bg-slate-50 hover:bg-slate-200 text-slate-600 border border-slate-200 px-2 py-2 rounded-lg text-xs font-bold transition-colors flex items-center justify-center\" title=\"Edit Details\" data-id=\"${v.id}\">\n <i class=\"fa-solid fa-pen\"><\/i>\n <\/button>\n <button class=\"action-complete flex-1 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200 px-2 py-2 rounded-lg text-xs font-bold transition-colors flex items-center justify-center\" title=\"Mark as Completed\" data-id=\"${v.id}\">\n <i class=\"fa-solid fa-check-double\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n `;\n }\n });\n container.innerHTML = html;\n attachUrgentWorkspaceEvents();\n };\n\n const attachUrgentWorkspaceEvents = () => {\n document.querySelectorAll('.action-work').forEach(btn => btn.addEventListener('click', async (e) => {\n const id = e.currentTarget.getAttribute('data-id');\n const todayStr = getTodayStr();\n \n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if (!vendor) return;\n\n let newStatus = vendor.status;\n if(newStatus === 'Pendiente') newStatus = 'En Proceso';\n\n logMovement(vendor, \"Operational Mgmt\", \"Analyst recorded work\/management today.\");\n await quickUpdateVendor(id, { lastWorkedDate: todayStr, status: newStatus }, \"Work date updated to TODAY.\");\n }));\n\n document.querySelectorAll('.action-complete').forEach(btn => btn.addEventListener('click', async (e) => {\n const id = e.currentTarget.getAttribute('data-id');\n const todayStr = getTodayStr();\n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if (!vendor) return;\n\n const isTask = vendor.category === 'Tarea Especial' || (vendor.type && vendor.type.startsWith('Tarea:'));\n const message = isTask ? 'Are you sure you want to mark this TASK as COMPLETED?' : 'Are you sure you want to mark this urgent vendor as COMPLETED?';\n \n showCustomConfirm(message, async () => {\n logMovement(vendor, \"Closure \/ Completed\", \"Analyst closed and completed the case\/task.\");\n await quickUpdateVendor(id, { status: 'Completado', completedDate: todayStr }, \"Case\/Task closed successfully!\");\n });\n }));\n\n document.querySelectorAll('.action-edit').forEach(btn => btn.addEventListener('click', (e) => {\n openEditModal(e.currentTarget.getAttribute('data-id'));\n }));\n };\n\n const clearUrgentFilters = () => {\n document.getElementById('filter-urgent-assigned').value = 'all';\n document.getElementById('filter-urgent-origin').value = 'all';\n document.getElementById('filter-urgent-category').value = 'all';\n document.getElementById('filter-urgent-priority').value = 'all';\n document.getElementById('search-urgent-input').value = '';\n \n urgentAssignedFilter = 'all';\n urgentOriginFilter = 'all';\n urgentCategoryFilter = 'all';\n urgentPriorityFilter = 'all';\n urgentSearchTerm = '';\n \n renderUrgentWorkspace();\n };\n\n document.getElementById('filter-urgent-assigned').addEventListener('change', (e) => {\n urgentAssignedFilter = e.target.value;\n renderUrgentWorkspace();\n });\n\n document.getElementById('filter-urgent-origin').addEventListener('change', (e) => {\n urgentOriginFilter = e.target.value;\n renderUrgentWorkspace();\n });\n\n document.getElementById('filter-urgent-category').addEventListener('change', (e) => {\n urgentCategoryFilter = e.target.value;\n renderUrgentWorkspace();\n });\n\n document.getElementById('filter-urgent-priority').addEventListener('change', (e) => {\n urgentPriorityFilter = e.target.value;\n renderUrgentWorkspace();\n });\n\n document.getElementById('search-urgent-input').addEventListener('input', (e) => {\n urgentSearchTerm = e.target.value;\n renderUrgentWorkspace();\n });\n\n document.getElementById('btn-clear-urgent-filters').addEventListener('click', clearUrgentFilters);\n\n \/\/ --- DIRECTORY TABLE RENDER ---\n const renderTable = () => {\n const tbody = document.getElementById('vendors-tbody');\n let filtered = allVendors.filter(v => !isItemTicket(v));\n\n filtered = filtered.filter(v => v.name.toLowerCase().includes(searchTerm.toLowerCase()));\n \n if (tableFilter === 'completed') {\n filtered = filtered.filter(v => v.status === 'Completado');\n document.getElementById('table-title').innerHTML = `<i class=\"fa-solid fa-check-double text-emerald-500\"><\/i> Completed Elements in Directory (${filtered.length})`;\n } else if (tableFilter === 'vendors') {\n filtered = filtered.filter(v => v.status !== 'Completado' && v.category !== 'Tarea Especial' && !v.type.startsWith('Tarea:'));\n document.getElementById('table-title').innerHTML = `<i class=\"fa-solid fa-building text-indigo-500\"><\/i> Active Vendors Directory (${filtered.length})`;\n } else if (tableFilter === 'tasks') {\n filtered = filtered.filter(v => v.status !== 'Completado' && (v.category === 'Tarea Especial' || v.type.startsWith('Tarea:')));\n document.getElementById('table-title').innerHTML = `<i class=\"fa-solid fa-clipboard-list text-purple-500\"><\/i> Active Special Tasks (${filtered.length})`;\n } else { \/\/ 'all'\n filtered = filtered.filter(v => v.status !== 'Completado');\n document.getElementById('table-title').innerHTML = `<i class=\"fa-solid fa-layer-group text-indigo-500\"><\/i> All Active in Directory (${filtered.length})`;\n }\n\n if (filtered.length === 0) {\n tbody.innerHTML = `<tr><td colspan=\"6\" class=\"text-center py-12 text-slate-400 bg-slate-50\"><i class=\"fa-solid fa-inbox text-3xl mb-3 opacity-50\"><\/i><br>No information to show in this directory tab.<\/td><\/tr>`;\n return;\n }\n\n let html = '';\n filtered.forEach(v => {\n const isTask = v.category === 'Tarea Especial' || (v.type && v.type.startsWith('Tarea:'));\n const isUrg = v.priority === 'Alta' && v.status !== 'Completado';\n \n let rowClass = 'hover:bg-slate-50 border-l-4 border-l-transparent';\n if (isUrg || v.hasPastDue === 'Yes') {\n rowClass = isTask \n ? 'bg-purple-50\/20 hover:bg-purple-50\/40 border-l-4 border-l-purple-500'\n : 'bg-red-50\/40 hover:bg-red-50\/80 border-l-4 border-l-red-500';\n }\n \n let sBadge = v.status === 'Completado' ? `<button class=\"btn-status text-emerald-700 bg-emerald-100 px-3 py-1 rounded-md text-xs font-bold border border-emerald-200\" data-id=\"${v.id}\" data-status=\"${v.status}\"><i class=\"fa-solid fa-check\"><\/i> ${v.status}<\/button>` : \n v.status === 'En Proceso' ? `<button class=\"btn-status text-blue-700 bg-blue-100 px-3 py-1 rounded-md text-xs font-bold border border-blue-200\" data-id=\"${v.id}\" data-status=\"${v.status}\"><i class=\"fa-solid fa-spinner fa-spin\"><\/i> ${v.status}<\/button>` : \n `<button class=\"btn-status text-slate-600 bg-slate-200 px-3 py-1 rounded-md text-xs font-bold border border-slate-300\" data-id=\"${v.id}\" data-status=\"${v.status}\"><i class=\"fa-solid fa-clock\"><\/i> ${v.status}<\/button>`;\n\n let pBadge = v.priority === 'Alta' ? `<span class=\"text-xs font-bold text-red-700 bg-white border border-red-200 px-2 py-1 rounded shadow-sm\"><i class=\"fa-solid fa-fire\"><\/i> Urgent<\/span>` : \n v.priority === 'Media' ? `<span class=\"text-xs font-semibold text-amber-700 bg-amber-50 px-2 py-1 rounded border border-amber-200\"><i class=\"fa-solid fa-circle text-[8px]\"><\/i> Medium<\/span>` : \n `<span class=\"text-xs font-semibold text-green-700 bg-green-50 px-2 py-1 rounded border border-green-200\"><i class=\"fa-solid fa-arrow-down\"><\/i> Low<\/span>`;\n\n const displayType = isTask ? v.type.replace('Tarea: ', '') : v.type;\n const typeBadgeColor = isTask \n ? 'bg-purple-100 text-purple-800 border-purple-200' \n : 'bg-indigo-50 text-indigo-700 border-indigo-100';\n\n html += `\n <tr class=\"transition-colors border-b border-slate-100 ${rowClass}\">\n <td class=\"px-5 py-4\">\n <div class=\"font-bold text-slate-900 flex items-center gap-1.5\">\n ${isTask ? '<i class=\"fa-solid fa-clipboard-list text-purple-500 text-xs\"><\/i>' : ''}\n ${v.name}\n <\/div>\n <div class=\"text-[11px] text-slate-500 mt-1 flex flex-col gap-1 items-start\">\n <span class=\"${typeBadgeColor} px-1.5 py-0.5 rounded w-max font-semibold uppercase tracking-wide border\">${displayType}<\/span>\n ${v.hasPastDue === 'Yes' ? `<span class=\"bg-orange-100 text-orange-800 border border-orange-200 px-1.5 py-0.5 rounded text-[10px] font-bold shadow-sm mt-1 animate-pulse\"><i class=\"fa-solid fa-triangle-exclamation\"><\/i> Past Due Unmatched<\/span>` : ''}\n <\/div>\n <\/td>\n <td class=\"px-5 py-4\">\n <div class=\"flex flex-col gap-1.5 min-w-[180px]\">\n ${!isTask && v.lastStatementDate ? `<span class=\"text-xs font-medium text-slate-700 bg-slate-100 px-2 py-1 rounded w-max border border-slate-200\"><i class=\"fa-regular fa-file-lines text-slate-400\"><\/i> Stmt: ${v.lastStatementDate}<\/span>` : ''}\n ${v.lastWorkedDate ? `<span class=\"text-xs font-medium text-indigo-700 bg-indigo-50 px-2 py-1 rounded w-max border border-indigo-200\"><i class=\"fa-solid fa-business-time text-indigo-400\"><\/i> Wkd: ${v.lastWorkedDate}<\/span>` : `<span class=\"text-[10px] text-slate-400 italic\">Wkd: Unrecorded<\/span>`}\n ${v.status === 'Completado' && v.completedDate ? `<span class=\"text-xs font-bold text-emerald-700 bg-emerald-50 px-2 py-1 rounded w-max border border-emerald-200\"><i class=\"fa-solid fa-check-double text-emerald-500\"><\/i> Cmp: ${v.completedDate}<\/span>` : ''}\n <\/div>\n <\/td>\n <td class=\"px-5 py-4 flex flex-col gap-1.5 items-start\">\n ${pBadge}\n ${v.criticalDate ? `<span class=\"text-[11px] text-slate-500 font-medium\"><i class=\"fa-solid fa-calendar-xmark text-red-400\"><\/i> ${v.criticalDate}<\/span>` : ''}\n <\/td>\n <td class=\"px-5 py-4\">\n <div class=\"text-sm font-bold text-slate-800\">${v.assignedTo || 'Unassigned'}<\/div>\n <div class=\"text-[10px] text-slate-500 uppercase\">${v.category}<\/div>\n <\/td>\n <td class=\"px-5 py-4\">${sBadge}<\/td>\n <td class=\"px-5 py-4 text-right\">\n <button class=\"btn-ticket text-indigo-600 bg-indigo-50 hover:bg-indigo-600 hover:text-white w-8 h-8 rounded-md transition-colors border border-indigo-100\" data-id=\"${v.id}\" title=\"Issue Work Ticket\"><i class=\"fa-solid fa-ticket-alt text-xs\"><\/i><\/button>\n <button class=\"btn-edit text-indigo-600 bg-indigo-50 hover:bg-indigo-600 hover:text-white w-8 h-8 rounded-md transition-colors border border-indigo-100 ml-1\" data-id=\"${v.id}\" title=\"Edit from Directory\"><i class=\"fa-solid fa-pen\"><\/i><\/button>\n <button class=\"btn-delete text-red-500 bg-red-50 hover:bg-red-500 hover:text-white w-8 h-8 rounded-md transition-colors border border-red-100 ml-1\" data-id=\"${v.id}\" title=\"Delete from Directory\"><i class=\"fa-solid fa-trash\"><\/i><\/button>\n <\/td>\n <\/tr>\n `;\n });\n tbody.innerHTML = html;\n attachTableEvents();\n };\n\n const attachTableEvents = () => {\n document.querySelectorAll('.btn-delete').forEach(btn => btn.addEventListener('click', async (e) => {\n const id = e.currentTarget.getAttribute('data-id');\n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if (!vendor) return;\n\n const isTask = vendor.category === 'Tarea Especial' || (vendor.type && vendor.type.startsWith('Tarea:'));\n const message = isTask ? 'Permanently delete this task from directory?' : 'Permanently delete this vendor from directory?';\n\n showCustomConfirm(message, async () => {\n allVendors = allVendors.filter(v => String(v.id).trim() !== String(id).trim());\n renderUI();\n await executeActionSilent({ action: 'delete', id: id, isTicket: vendor.isTicket }, \"Element deleted from catalog.\");\n });\n }));\n\n document.querySelectorAll('.btn-status').forEach(btn => btn.addEventListener('click', async (e) => {\n const id = e.currentTarget.getAttribute('data-id');\n const curr = e.currentTarget.getAttribute('data-status');\n const statuses = ['Pendiente', 'En Proceso', 'Completado'];\n const nextStatus = statuses[(statuses.indexOf(curr) + 1) % statuses.length];\n \n let updateData = { status: nextStatus };\n if (nextStatus === 'Completado') {\n updateData.completedDate = getTodayStr();\n } else if (curr === 'Completado') {\n updateData.completedDate = ''; \n }\n \n const vendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if (vendor) logMovement(vendor, \"Status Change\", `Analyst changed directory status from ${curr} to ${nextStatus}`);\n\n await quickUpdateVendor(id, updateData, `Status updated to ${nextStatus}.`);\n }));\n\n document.querySelectorAll('.btn-edit').forEach(btn => btn.addEventListener('click', (e) => {\n openEditModal(e.currentTarget.getAttribute('data-id'));\n }));\n\n document.querySelectorAll('.btn-ticket').forEach(btn => btn.addEventListener('click', (e) => {\n openTicketModal(e.currentTarget.getAttribute('data-id'));\n }));\n };\n\n const filterTabs = document.querySelectorAll('.filter-tab');\n filterTabs.forEach(tab => {\n tab.addEventListener('click', (e) => {\n filterTabs.forEach(t => {\n t.classList.remove('border-b-2', 'border-indigo-600', 'text-indigo-600', 'font-bold');\n t.classList.add('text-slate-500', 'font-medium');\n });\n e.currentTarget.classList.remove('text-slate-500', 'font-medium');\n e.currentTarget.classList.add('border-b-2', 'border-indigo-600', 'text-indigo-600', 'font-bold');\n \n if(e.currentTarget.id === 'filter-completed') tableFilter = 'completed';\n else if(e.currentTarget.id === 'filter-vendors') tableFilter = 'vendors';\n else if(e.currentTarget.id === 'filter-tasks') tableFilter = 'tasks';\n else tableFilter = 'all';\n renderTable();\n });\n });\n\n document.querySelectorAll('.cases-view-tab').forEach(tab => {\n tab.addEventListener('click', (e) => {\n document.querySelectorAll('.cases-view-tab').forEach(btn => {\n btn.className = \"cases-view-tab px-3 py-1.5 rounded-lg text-slate-600 hover:text-slate-900 transition-all\";\n });\n e.currentTarget.className = \"cases-view-tab px-3 py-1.5 rounded-lg bg-white text-slate-800 shadow-sm transition-all font-bold\";\n \n if(e.currentTarget.id === 'toggle-cases-active') casesSegmentFilter = 'active';\n else if(e.currentTarget.id === 'toggle-cases-completed') casesSegmentFilter = 'completed';\n else casesSegmentFilter = 'all';\n \n renderCasesWorkspace();\n });\n });\n\n document.getElementById('search-input').addEventListener('input', (e) => { searchTerm = e.target.value; renderTable(); });\n\n const ts = document.getElementById('tab-single'), tb = document.getElementById('tab-bulk'), tt = document.getElementById('tab-task');\n const fs = document.getElementById('form-single'), fb = document.getElementById('form-bulk'), ft = document.getElementById('form-task');\n \n const resetTabButtons = () => {\n [ts, tb, tt].forEach(b => {\n b.classList.remove('border-b-2', 'border-indigo-600', 'text-indigo-600', 'font-bold');\n b.classList.add('text-slate-400', 'font-medium');\n });\n [fs, fb, ft].forEach(f => f.classList.add('hidden'));\n };\n\n ts.addEventListener('click', () => { resetTabButtons(); ts.classList.add('border-b-2','border-indigo-600','text-indigo-600','font-bold'); ts.classList.remove('text-slate-400'); fs.classList.remove('hidden'); });\n tb.addEventListener('click', () => { resetTabButtons(); tb.classList.add('border-b-2','border-indigo-600','text-indigo-600','font-bold'); tb.classList.remove('text-slate-400'); fb.classList.remove('hidden'); });\n tt.addEventListener('click', () => { resetTabButtons(); tt.classList.add('border-b-2','border-indigo-600','text-indigo-600','font-bold'); tt.classList.remove('text-slate-400'); ft.classList.remove('hidden'); });\n\n document.getElementById('form-single').addEventListener('submit', async (e) => {\n e.preventDefault();\n const name = document.getElementById('new-name').value;\n const type = document.getElementById('new-type').value;\n const category = getCategoryOnly(name, type);\n const assigned = document.getElementById('new-assigned').value;\n\n if (!assigned) {\n showError(\"Please select a valid responsible.\");\n return;\n }\n\n const newVendor = {\n id: generateId(), name: name.trim(), type: type, category: category, assignedTo: assigned,\n status: 'Pendiente', priority: document.getElementById('new-priority').value,\n pastDueAmount: 0, pendingAmount: 0, \n lastStatementDate: sanitizeDate(document.getElementById('new-statement').value) || '', lastWorkedDate: '',\n criticalDate: sanitizeDate(document.getElementById('new-date').value) || '', notes: '', createdAt: Date.now(),\n completedDate: '', isTicket: 'No', parentId: '', hasPastDue: 'No'\n };\n e.target.reset();\n \n allVendors.unshift(newVendor);\n renderUI();\n \n await executeActionSilent({ action: 'add', vendor: newVendor }, \"Vendor registered in database.\");\n });\n\n document.getElementById('btn-upload-bulk').addEventListener('click', async () => {\n const text = document.getElementById('bulk-text').value;\n const type = document.getElementById('bulk-type').value;\n const assigned = document.getElementById('bulk-assigned').value;\n \n if(!assigned) {\n showError(\"Please select a responsible for bulk upload.\");\n return;\n }\n\n const lines = text.split('\\n').filter(n => n.trim() !== '');\n if (lines.length === 0) return;\n\n const newVendors = lines.map(name => {\n const category = getCategoryOnly(name, type);\n return {\n id: generateId(), name: name.trim(), type: type, category: category, assignedTo: assigned,\n status: 'Pendiente', priority: 'Media', pastDueAmount: 0, pendingAmount: 0, lastStatementDate: '', lastWorkedDate: '', criticalDate: '', notes: '', createdAt: Date.now(), completedDate: '', isTicket: 'No', parentId: '', hasPastDue: 'No'\n };\n });\n document.getElementById('bulk-text').value = '';\n ts.click(); \n \n allVendors = [...newVendors, ...allVendors];\n renderUI();\n\n await executeAction({ action: 'bulk_add', vendors: newVendors }, `${lines.length} Vendors processed successfully.`);\n });\n\n document.getElementById('form-task').addEventListener('submit', async (e) => {\n e.preventDefault();\n const title = document.getElementById('task-title').value;\n const type = document.getElementById('task-type').value;\n const assigned = document.getElementById('task-assigned').value;\n const priority = document.getElementById('task-priority').value;\n const date = sanitizeDate(document.getElementById('task-date').value);\n const notes = document.getElementById('task-notes').value;\n\n if(!assigned) {\n showError(\"Please select a person to assign this task.\");\n return;\n }\n\n const newTask = {\n id: generateId(),\n name: title.trim(),\n type: type,\n category: 'Tarea Especial',\n assignedTo: assigned,\n status: 'Pendiente',\n priority: priority,\n pastDueAmount: 0,\n pendingAmount: 0,\n lastStatementDate: '',\n lastWorkedDate: '',\n criticalDate: date || '',\n notes: notes,\n createdAt: Date.now(),\n completedDate: '',\n isTicket: 'No',\n parentId: '',\n hasPastDue: 'No'\n };\n\n e.target.reset();\n ts.click(); \n\n allVendors.unshift(newTask);\n renderUI();\n\n await executeActionSilent({ action: 'add', vendor: newTask }, \"New special task registered successfully.\");\n });\n\n \/\/ --- EDIT MODAL & HISTORY INJECTION ---\n const openEditModal = (id) => {\n const v = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if(!v) return;\n\n const isTask = v.category === 'Tarea Especial' || (v.type && v.type.startsWith('Tarea:'));\n\n document.getElementById('edit-id').value = v.id;\n document.getElementById('edit-status').value = v.status;\n document.getElementById('edit-vendor-name').innerText = v.name;\n document.getElementById('edit-priority').value = v.priority || 'Media';\n document.getElementById('edit-date').value = sanitizeDate(v.criticalDate) || '';\n document.getElementById('edit-statement').value = sanitizeDate(v.lastStatementDate) || '';\n document.getElementById('edit-worked').value = sanitizeDate(v.lastWorkedDate) || '';\n document.getElementById('edit-completed').value = sanitizeDate(v.completedDate) || ''; \n \n document.getElementById('edit-pastdue').checked = (v.hasPastDue === 'Yes');\n \n const editAssigned = document.getElementById('edit-assigned');\n populateResponsiblesDropdowns(); \n \n if (v.assignedTo && !responsiblesList.includes(v.assignedTo)) {\n const tempOpt = document.createElement('option');\n tempOpt.value = v.assignedTo;\n tempOpt.textContent = v.assignedTo + \" (Historic)\";\n editAssigned.appendChild(tempOpt);\n }\n editAssigned.value = v.assignedTo || '';\n \n document.getElementById('edit-notes').value = v.notes || '';\n\n const statementContainer = document.getElementById('edit-statement-container');\n const labelNotes = document.getElementById('label-edit-notes');\n\n if (isTask) {\n statementContainer.classList.add('hidden');\n labelNotes.innerText = \"Task Instructions \/ Detailed Notes\";\n } else {\n statementContainer.classList.remove('hidden');\n labelNotes.innerText = \"Notes \/ Invoices Involved (Details to work on)\";\n }\n\n const historyContainer = document.getElementById('edit-history-container');\n const historyList = document.getElementById('edit-history-list');\n \n if(!isItemTicket(v)) {\n const childTickets = allVendors.filter(t => isItemTicket(t) && String(t.parentId).trim() === String(v.id).trim());\n \n if (childTickets.length > 0) {\n historyContainer.classList.remove('hidden');\n childTickets.sort((a,b) => b.createdAt - a.createdAt);\n \n historyList.innerHTML = childTickets.map(t => {\n const dateStr = new Date(t.createdAt).toLocaleDateString();\n const statColor = t.status === 'Completado' ? 'text-emerald-600' : (t.status === 'En Proceso' ? 'text-blue-600' : 'text-slate-500');\n const isNotesEmpty = !t.notes || t.notes.trim() === '';\n \n return `\n <div class=\"border-b border-slate-200 pb-3 last:border-0 last:pb-0 relative pl-4 before:absolute before:left-0 before:top-2 before:w-1.5 before:h-1.5 before:bg-indigo-300 before:rounded-full\">\n <div class=\"flex justify-between items-start mb-1\">\n <span class=\"font-bold text-slate-700\">Ticket: ${t.type.replace('Tarea: ','')}<\/span>\n <span class=\"text-[10px] font-semibold text-slate-400\">${dateStr}<\/span>\n <\/div>\n <div class=\"flex gap-3 text-[10px] font-bold uppercase tracking-wide mb-1.5\">\n <span class=\"text-indigo-500\"><i class=\"fa-solid fa-user\"><\/i> ${t.assignedTo || 'NA'}<\/span>\n <span class=\"${statColor}\">${t.status}<\/span>\n <\/div>\n <div class=\"text-slate-600 italic leading-snug bg-white p-2 rounded border border-slate-100 ${isNotesEmpty ? 'text-slate-400' : ''}\">\n ${isNotesEmpty ? 'No comments left on this ticket.' : t.notes.replace(\/\\n\/g, '<br>')}\n <\/div>\n <\/div>`;\n }).join('');\n } else {\n historyContainer.classList.add('hidden');\n historyList.innerHTML = '';\n }\n } else {\n historyContainer.classList.add('hidden');\n }\n\n document.getElementById('edit-modal').classList.remove('hidden');\n document.getElementById('edit-modal').classList.add('flex');\n };\n\n const closeEditModal = () => { document.getElementById('edit-modal').classList.add('hidden'); document.getElementById('edit-modal').classList.remove('flex'); };\n document.getElementById('close-modal').addEventListener('click', closeEditModal);\n document.getElementById('btn-cancel-edit').addEventListener('click', closeEditModal);\n\n document.getElementById('form-edit').addEventListener('submit', async (e) => {\n e.preventDefault();\n const id = document.getElementById('edit-id').value;\n if(!id) return;\n \n const originalVendor = allVendors.find(v => String(v.id).trim() === String(id).trim());\n const assignedSelection = document.getElementById('edit-assigned').value;\n const pastDueState = document.getElementById('edit-pastdue').checked ? 'Yes' : 'No';\n\n if(!assignedSelection) {\n showError(\"Please select a valid responsible.\");\n return;\n }\n\n const updatedVendor = {\n id: id, \n name: originalVendor ? originalVendor.name : '',\n type: originalVendor ? originalVendor.type : '',\n category: originalVendor ? originalVendor.category : '',\n status: document.getElementById('edit-status').value, \n priority: document.getElementById('edit-priority').value,\n pastDueAmount: originalVendor ? (originalVendor.pastDueAmount || 0) : 0, \n pendingAmount: originalVendor ? (originalVendor.pendingAmount || 0) : 0, \n criticalDate: sanitizeDate(document.getElementById('edit-date').value) || '', \n lastStatementDate: sanitizeDate(document.getElementById('edit-statement').value) || '',\n lastWorkedDate: sanitizeDate(document.getElementById('edit-worked').value) || '', \n completedDate: sanitizeDate(document.getElementById('edit-completed').value) || '', \n assignedTo: assignedSelection, \n notes: document.getElementById('edit-notes').value,\n createdAt: originalVendor ? originalVendor.createdAt : Date.now(),\n isTicket: originalVendor ? (originalVendor.isTicket || 'No') : 'No',\n parentId: originalVendor ? (originalVendor.parentId || '') : '',\n hasPastDue: pastDueState\n };\n\n closeEditModal();\n \n const idx = allVendors.findIndex(v => String(v.id).trim() === String(id).trim());\n if (idx !== -1) {\n allVendors[idx] = updatedVendor;\n renderUI();\n }\n\n logMovement(updatedVendor, \"Edit Details\", \"Analyst updated parameters or notes.\");\n \n if (isItemTicket(updatedVendor) && updatedVendor.parentId) {\n const parent = allVendors.find(p => String(p.id).trim() === String(updatedVendor.parentId).trim());\n if (parent) {\n let parentUpdated = false;\n if(updatedVendor.lastWorkedDate) { parent.lastWorkedDate = updatedVendor.lastWorkedDate; parentUpdated = true; }\n if(updatedVendor.lastStatementDate) { parent.lastStatementDate = updatedVendor.lastStatementDate; parentUpdated = true; }\n \n if (updatedVendor.notes && updatedVendor.notes.trim() !== '') {\n const newNoteEntry = `[${new Date().toLocaleDateString()} | Ticket Edited] - Ticket: ${updatedVendor.name}\\nNote: ${updatedVendor.notes.trim()}`;\n if (!parent.notes || !parent.notes.includes(updatedVendor.notes.trim())) {\n parent.notes = parent.notes ? parent.notes + `\\n\\n${newNoteEntry}` : newNoteEntry;\n parentUpdated = true;\n }\n }\n\n if(parentUpdated) {\n fetch(savedSheetUrl, { method: 'POST', headers: { 'Content-Type': 'text\/plain;charset=utf-8' }, body: JSON.stringify({ action: 'update', vendor: parent }) });\n }\n }\n }\n\n await executeActionSilent({ action: 'update', vendor: updatedVendor }, \"Record updated successfully.\");\n });\n\n \/\/ --- TICKET ISSUANCE SYSTEM ---\n const openTicketModal = (id) => {\n const v = allVendors.find(v => String(v.id).trim() === String(id).trim());\n if(!v) {\n showError(\"Internal Error: Could not load vendor ID.\");\n return;\n }\n\n document.getElementById('ticket-ref-id').value = v.id;\n document.getElementById('ticket-ref-name').value = v.name;\n document.getElementById('ticket-ref-type').value = v.type;\n document.getElementById('ticket-ref-category').value = v.category;\n \n const ticketAssignedSelect = document.getElementById('ticket-assigned');\n populateResponsiblesDropdowns();\n \n if (v.assignedTo && !responsiblesList.includes(v.assignedTo)) {\n const tempOpt = document.createElement('option');\n tempOpt.value = v.assignedTo;\n tempOpt.textContent = v.assignedTo + \" (Historic)\";\n ticketAssignedSelect.appendChild(tempOpt);\n }\n ticketAssignedSelect.value = v.assignedTo || '';\n \n document.getElementById('ticket-priority').value = 'Media';\n document.getElementById('ticket-date').value = '';\n document.getElementById('ticket-notes').value = '';\n\n document.getElementById('ticket-modal').classList.remove('hidden');\n document.getElementById('ticket-modal').classList.add('flex');\n };\n\n const closeTicketModal = () => {\n document.getElementById('ticket-modal').classList.add('hidden');\n document.getElementById('ticket-modal').classList.remove('flex');\n };\n\n document.getElementById('close-ticket-modal').addEventListener('click', closeTicketModal);\n document.getElementById('btn-cancel-ticket').addEventListener('click', closeTicketModal);\n\n document.getElementById('form-ticket').addEventListener('submit', async (e) => {\n e.preventDefault();\n const refId = document.getElementById('ticket-ref-id').value;\n const refVendor = allVendors.find(v => String(v.id).trim() === String(refId).trim());\n if (!refVendor) {\n showError(\"Error: Could not locate the original vendor reference.\");\n return;\n }\n\n const name = document.getElementById('ticket-ref-name').value;\n const type = document.getElementById('ticket-ref-type').value;\n const category = document.getElementById('ticket-ref-category').value;\n const assigned = document.getElementById('ticket-assigned').value;\n const priority = document.getElementById('ticket-priority').value;\n const date = sanitizeDate(document.getElementById('ticket-date').value);\n const notesText = document.getElementById('ticket-notes').value.trim();\n\n if (!assigned) {\n showError(\"Please select a valid responsible.\");\n return;\n }\n\n const newWeeklyTicket = {\n id: generateId(),\n name: name.trim(),\n type: type,\n category: category,\n assignedTo: assigned,\n status: 'Pendiente',\n priority: priority,\n pastDueAmount: 0,\n pendingAmount: 0,\n lastStatementDate: refVendor.lastStatementDate || '',\n lastWorkedDate: '',\n criticalDate: date || '',\n notes: notesText,\n createdAt: Date.now(),\n completedDate: '',\n isTicket: 'Yes',\n parentId: refId,\n hasPastDue: 'No'\n };\n\n closeTicketModal();\n\n allVendors.unshift(newWeeklyTicket);\n renderUI();\n \n showCasesWorkspace();\n\n logMovement(newWeeklyTicket, \"Ticket Issuance\", \"A new weekly work ticket was issued from the directory.\");\n await executeActionSilent({ action: 'add', vendor: newWeeklyTicket }, \"New weekly work ticket successfully issued!\");\n\n if (notesText !== '') {\n const newNoteEntry = `[${new Date().toLocaleDateString()} | New Ticket Issued] - Ticket: ${newWeeklyTicket.name}\\nNote: ${notesText}`;\n if (!refVendor.notes || !refVendor.notes.includes(notesText)) {\n refVendor.notes = refVendor.notes ? refVendor.notes + `\\n\\n${newNoteEntry}` : newNoteEntry;\n fetch(savedSheetUrl, { method: 'POST', headers: { 'Content-Type': 'text\/plain;charset=utf-8' }, body: JSON.stringify({ action: 'update', vendor: refVendor }) });\n }\n }\n });\n\n document.getElementById('btn-export').addEventListener('click', () => {\n const masterItems = allVendors.filter(v => !isItemTicket(v));\n const headers = ['Vendor \/ Task', 'Type', 'Group', 'Default Responsible', 'Priority', 'Last Statement Rev', 'Last Worked Date', 'Completed Date', 'Critical Date', 'Status', 'Past Due Unmatched', 'Notes'];\n const rows = masterItems.map(v => [\n `\"${v.name}\"`, v.type, v.category, `\"${v.assignedTo}\"`, v.priority || 'Media', \n v.lastStatementDate ? `\"${v.lastStatementDate}\"` : '', v.lastWorkedDate ? `\"${v.lastWorkedDate}\"` : '', v.completedDate ? `\"${v.completedDate}\"` : '',\n v.criticalDate ? `\"${v.criticalDate}\"` : '', v.status, v.hasPastDue || 'No', `\"${(v.notes || '').replace(\/\"\/g, '\"\"')}\"`\n ]);\n const csv = \"data:text\/csv;charset=utf-8,\" + headers.join(\",\") + \"\\n\" + rows.map(e => e.join(\",\")).join(\"\\n\");\n const link = document.createElement(\"a\");\n link.setAttribute(\"href\", encodeURI(csv));\n link.setAttribute(\"download\", \"AP_Master_Directory.csv\");\n document.body.appendChild(link); link.click(); document.body.removeChild(link);\n });\n\n \/\/ --- START APP ---\n window.onload = function() {\n populateResponsiblesDropdowns();\n \n if(savedSheetUrl) {\n document.getElementById('input-url').value = savedSheetUrl;\n showDashboard();\n fetchVendors(); \n } else {\n showSettings();\n }\n };\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>AP Vendor Manager Loading… AP Manager v4.2 – AP Tools Urgent Cases 0 Open Cases 0 General Dashboard Master Directory Vendor Entry System Settings Saving… Personnel Management Enter the names of the people who will be working on the cases. Type one name per line. These names will automatically appear in all dropdowns of the…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"normal","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/deamlow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17"}],"version-history":[{"count":2,"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":19,"href":"https:\/\/deamlow.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions\/19"}],"wp:attachment":[{"href":"https:\/\/deamlow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}