SOP Management System - Complete<\/title>\r\n <style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n :root {\r\n --primary: #3b82f6; --success: #10b981; --warning: #f59e0b;\r\n --danger: #ef4444; --dark: #1e293b; --gray: #64748b;\r\n --light-gray: #f1f5f9; --white: #ffffff; --border: #e2e8f0;\r\n --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n --bg-start: #667eea;\r\n --bg-end: #764ba2;\r\n }\r\n \r\n body.theme-blue { --primary: #3b82f6; --bg-start: #667eea; --bg-end: #764ba2; }\r\n body.theme-green { --primary: #10b981; --bg-start: #10b981; --bg-end: #059669; }\r\n body.theme-purple { --primary: #8b5cf6; --bg-start: #8b5cf6; --bg-end: #7c3aed; }\r\n body.theme-red { --primary: #ef4444; --bg-start: #ef4444; --bg-end: #dc2626; }\r\n body.theme-orange { --primary: #f59e0b; --bg-start: #f59e0b; --bg-end: #d97706; }\r\n \r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);\r\n min-height: 100vh; color: var(--dark);\r\n }\r\n .header {\r\n background: var(--white); box-shadow: var(--shadow);\r\n padding: 15px 0; position: sticky; top: 0; z-index: 100;\r\n }\r\n .header-content {\r\n max-width: 1400px; margin: 0 auto; padding: 0 20px;\r\n display: flex; justify-content: space-between; align-items: center;\r\n flex-wrap: wrap; gap: 15px;\r\n }\r\n .logo { display: flex; align-items: center; gap: 12px; }\r\n .logo h1 {\r\n font-size: 1.6rem;\r\n background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n }\r\n .current-date { padding: 8px 15px; background: var(--light-gray);\r\n border-radius: 8px; font-weight: 600; font-size: 0.9rem;\r\n }\r\n .header-actions { display: flex; gap: 10px; flex-wrap: wrap; }\r\n .btn {\r\n padding: 8px 16px; border: none; border-radius: 8px;\r\n cursor: pointer; font-size: 0.9rem; font-weight: 600;\r\n transition: all 0.3s; display: inline-flex;\r\n align-items: center; gap: 6px; box-shadow: var(--shadow);\r\n }\r\n .btn:hover { transform: translateY(-2px); }\r\n .btn-primary { background: var(--primary); color: white; }\r\n .btn-success { background: var(--success); color: white; }\r\n .btn-secondary { background: var(--gray); color: white; }\r\n .btn-danger { background: var(--danger); color: white; }\r\n .btn-warning { background: var(--warning); color: white; }\r\n .btn-sm { padding: 5px 10px; font-size: 0.85rem; }\r\n .container { max-width: 1400px; margin: 20px auto; padding: 0 20px; }\r\n .dashboard { display: grid; grid-template-columns: 250px 1fr; gap: 20px; }\r\n .sidebar {\r\n background: var(--white); border-radius: 12px; padding: 20px;\r\n height: fit-content; position: sticky; top: 90px; box-shadow: var(--shadow);\r\n }\r\n .sidebar h3 {\r\n margin-bottom: 15px; font-size: 1.1rem;\r\n display: flex; justify-content: space-between; align-items: center;\r\n }\r\n .category-list { list-style: none; }\r\n .category-item {\r\n padding: 10px 15px; margin-bottom: 8px; border-radius: 8px;\r\n cursor: pointer; transition: all 0.3s;\r\n display: flex; justify-content: space-between; align-items: center;\r\n }\r\n .category-item:hover { background: var(--light-gray); }\r\n .category-item.active { background: var(--primary); color: white; }\r\n .category-count {\r\n background: var(--light-gray); padding: 2px 8px;\r\n border-radius: 12px; font-size: 0.85rem; font-weight: 600;\r\n }\r\n .category-item.active .category-count {\r\n background: rgba(255, 255, 255, 0.3); color: white;\r\n }\r\n .main-content {\r\n background: var(--white); border-radius: 12px;\r\n padding: 25px; box-shadow: var(--shadow);\r\n }\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\r\n gap: 15px; margin-bottom: 25px;\r\n }\r\n .stat-card {\r\n background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);\r\n color: white; padding: 20px; border-radius: 12px;\r\n box-shadow: var(--shadow); cursor: pointer; transition: all 0.3s;\r\n }\r\n .stat-card:hover { transform: translateY(-3px); }\r\n .stat-card h3 { font-size: 2rem; margin-bottom: 5px; }\r\n .stat-card p { opacity: 0.9; font-size: 0.9rem; }\r\n .search-bar { margin-bottom: 25px; }\r\n .search-bar input {\r\n width: 100%; padding: 12px 15px; border: 2px solid var(--border);\r\n border-radius: 8px; font-size: 1rem;\r\n }\r\n .sop-list { display: grid; gap: 15px; }\r\n .sop-card {\r\n border: 2px solid var(--border); border-radius: 12px;\r\n padding: 20px; transition: all 0.3s; position: relative;\r\n }\r\n .sop-card:hover {\r\n border-color: var(--primary); box-shadow: var(--shadow);\r\n transform: translateY(-2px);\r\n }\r\n .sop-card.overdue { border-color: var(--danger); background: #fee2e2; }\r\n .sop-card.due-soon { border-color: var(--warning); background: #fef3c7; }\r\n .due-badge {\r\n position: absolute; top: 15px; right: 15px;\r\n padding: 5px 12px; border-radius: 15px;\r\n font-size: 0.85rem; font-weight: 600;\r\n }\r\n .due-badge.overdue { background: var(--danger); color: white; }\r\n .due-badge.due-soon { background: var(--warning); color: white; }\r\n .due-badge.on-track { background: var(--success); color: white; }\r\n .sop-title { font-size: 1.2rem; margin-bottom: 8px; }\r\n .sop-meta {\r\n display: flex; gap: 15px; color: var(--gray);\r\n font-size: 0.9rem; margin: 10px 0; flex-wrap: wrap;\r\n }\r\n .sop-progress {\r\n width: 100%; height: 8px; background: var(--light-gray);\r\n border-radius: 10px; overflow: hidden; margin: 10px 0;\r\n }\r\n .sop-progress-bar {\r\n height: 100%; background: var(--success); transition: width 0.3s;\r\n }\r\n .sop-actions { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; }\r\n .modal {\r\n display: none; position: fixed; top: 0; left: 0;\r\n width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);\r\n z-index: 1000; align-items: center; justify-content: center;\r\n padding: 20px; overflow-y: auto;\r\n }\r\n .modal.active { display: flex; }\r\n .modal-content {\r\n background: white; padding: 30px; border-radius: 12px;\r\n max-width: 900px; width: 100%; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);\r\n max-height: 90vh; overflow-y: auto;\r\n }\r\n .modal-header {\r\n display: flex; justify-content: space-between;\r\n align-items: center; margin-bottom: 20px;\r\n }\r\n .close-btn {\r\n background: none; border: none; font-size: 1.5rem;\r\n cursor: pointer; color: var(--gray);\r\n }\r\n .form-grid {\r\n display: grid; grid-template-columns: 1fr 1fr;\r\n gap: 20px; margin-bottom: 25px;\r\n }\r\n .form-group { margin-bottom: 15px; }\r\n .form-group.full-width { grid-column: 1 \/ -1; }\r\n .form-group label {\r\n display: block; margin-bottom: 8px;\r\n font-weight: 600; color: var(--dark);\r\n }\r\n .form-group input, .form-group select, .form-group textarea {\r\n width: 100%; padding: 10px 12px; border: 2px solid var(--border);\r\n border-radius: 8px; font-size: 1rem; font-family: inherit;\r\n }\r\n .form-group input:focus, .form-group select:focus, .form-group textarea:focus {\r\n outline: none; border-color: var(--primary);\r\n }\r\n .form-group textarea { min-height: 80px; resize: vertical; }\r\n .layout-selection {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 15px; margin-top: 20px;\r\n }\r\n .layout-card {\r\n border: 3px solid var(--border); border-radius: 12px;\r\n padding: 15px; cursor: pointer; transition: all 0.3s; text-align: center;\r\n }\r\n .layout-card:hover {\r\n border-color: var(--primary); transform: translateY(-3px);\r\n }\r\n .layout-icon { font-size: 2.5rem; margin-bottom: 10px; }\r\n .steps-section { margin-top: 30px; }\r\n .section-header {\r\n display: flex; justify-content: space-between;\r\n align-items: center; margin-bottom: 15px;\r\n }\r\n .steps-container { display: grid; gap: 12px; }\r\n .step-card {\r\n background: var(--light-gray); border: 2px solid var(--border);\r\n border-radius: 12px; padding: 15px; position: relative;\r\n }\r\n .step-card.completed { background: #d1fae5; border-color: var(--success); }\r\n .step-header {\r\n display: flex; align-items: center; gap: 12px; margin-bottom: 12px;\r\n }\r\n .step-number {\r\n background: var(--primary); color: white;\r\n width: 32px; height: 32px; border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-weight: 700; font-size: 1rem; flex-shrink: 0;\r\n }\r\n .step-card.completed .step-number { background: var(--success); }\r\n .step-actions {\r\n display: flex; gap: 8px; justify-content: flex-end;\r\n margin-top: 12px; flex-wrap: wrap;\r\n }\r\n .step-content {\r\n display: grid; grid-template-columns: 2fr 1fr 1fr;\r\n gap: 12px; align-items: start;\r\n }\r\n .checklist-item {\r\n display: flex; align-items: center; gap: 12px;\r\n padding: 12px; background: white;\r\n border: 2px solid var(--border); border-radius: 8px;\r\n }\r\n .flow-step {\r\n position: relative; padding-left: 50px;\r\n }\r\n .flow-step::before {\r\n content: ''; position: absolute;\r\n left: 17px; top: 40px; bottom: -10px; width: 2px;\r\n background: var(--primary);\r\n }\r\n .flow-step:last-child::before { display: none; }\r\n .flow-arrow {\r\n position: absolute; left: 10px; top: 10px;\r\n width: 20px; height: 20px; background: var(--primary);\r\n color: white; border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 0.8rem;\r\n }\r\n .decision-node {\r\n background: #fef3c7; border: 2px solid #fbbf24;\r\n border-radius: 8px; padding: 15px; margin: 10px 0;\r\n }\r\n .decision-option {\r\n margin-left: 30px; margin-top: 10px;\r\n padding-left: 15px; border-left: 3px solid var(--primary);\r\n }\r\n .troubleshoot-problem {\r\n background: #fee2e2; border: 2px solid var(--danger);\r\n border-radius: 8px; padding: 15px; margin-bottom: 15px;\r\n }\r\n .troubleshoot-solution {\r\n background: #d1fae5; border: 2px solid var(--success);\r\n border-radius: 8px; padding: 15px;\r\n margin-left: 30px; margin-top: 10px;\r\n }\r\n .task-config-card {\r\n background: var(--light-gray); border: 2px solid var(--border);\r\n border-radius: 12px; padding: 15px;\r\n }\r\n .task-icon-input {\r\n font-size: 2rem; width: 60px; height: 60px;\r\n text-align: center; border: 2px solid var(--border); border-radius: 8px;\r\n }\r\n .spreadsheet-table {\r\n width: 100%; border-collapse: separate; border-spacing: 0;\r\n }\r\n .spreadsheet-table th {\r\n background: var(--primary); color: white;\r\n padding: 12px 8px; text-align: center; font-weight: 600;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n }\r\n .spreadsheet-table td {\r\n padding: 12px 8px; text-align: center; border: 1px solid var(--border);\r\n }\r\n .spreadsheet-table td:first-child {\r\n text-align: left; padding-left: 15px; font-weight: 600;\r\n }\r\n .task-cell { min-height: 50px; cursor: pointer; }\r\n .task-cell.completed { background: #d1fae5 !important; }\r\n .task-checkbox {\r\n width: 24px; height: 24px; cursor: pointer; transform: scale(1.2);\r\n }\r\n .task-checkbox:disabled {\r\n cursor: not-allowed; opacity: 0.5;\r\n }\r\n .lock-btn {\r\n background: var(--gray); color: white;\r\n border: none; padding: 4px 8px; border-radius: 4px;\r\n cursor: pointer; font-size: 0.8rem;\r\n transition: all 0.3s;\r\n }\r\n .lock-btn.locked {\r\n background: var(--danger);\r\n }\r\n .lock-btn:hover {\r\n transform: scale(1.05);\r\n }\r\n .empty-state {\r\n text-align: center; padding: 50px 20px; color: var(--gray);\r\n }\r\n .empty-state-icon { font-size: 3.5rem; margin-bottom: 15px; opacity: 0.5; }\r\n .toast {\r\n position: fixed; bottom: 30px; right: 30px;\r\n background: var(--success); color: white;\r\n padding: 15px 25px; border-radius: 8px;\r\n box-shadow: 0 10px 15px rgba(0,0,0,0.2);\r\n display: none; z-index: 1001;\r\n }\r\n .toast.show { display: block; animation: slideIn 0.3s ease; }\r\n @keyframes slideIn {\r\n from { transform: translateX(400px); opacity: 0; }\r\n to { transform: translateX(0); opacity: 1; }\r\n }\r\n .alerts-list { display: grid; gap: 12px; margin-top: 15px; }\r\n .alert-item {\r\n padding: 15px; border-radius: 8px; border: 2px solid;\r\n display: flex; justify-content: space-between; align-items: center;\r\n }\r\n .alert-item.overdue { border-color: var(--danger); background: #fee2e2; }\r\n .alert-item.due-soon { border-color: var(--warning); background: #fef3c7; }\r\n @media (max-width: 1024px) {\r\n .dashboard { grid-template-columns: 1fr; }\r\n .sidebar { position: static; }\r\n .form-grid, .step-content { grid-template-columns: 1fr; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"header\">\r\n <div class=\"header-content\">\r\n <div class=\"logo\">\r\n <span style=\"font-size: 2rem;\">\ud83d\udccb<\/span>\r\n <h1>SOP Manager Pro<\/h1>\r\n <\/div>\r\n <div class=\"current-date\">\r\n <span>\ud83d\udcc5<\/span>\r\n <span id=\"currentDate\"><\/span>\r\n <\/div>\r\n <div class=\"header-actions\">\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"showSettingsModal()\">\u2699\ufe0f Settings<\/button>\r\n <button class=\"btn btn-primary\" onclick=\"showLayoutModal()\">\u2795 New SOP<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"showDashboard()\">\ud83c\udfe0 Dashboard<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"container\">\r\n <div id=\"dashboardView\" class=\"dashboard\">\r\n <div class=\"sidebar\">\r\n <h3>\r\n \ud83d\udcc2 Categories\r\n <button class=\"btn btn-sm btn-primary\" onclick=\"showAddCategoryModal()\">\u2795<\/button>\r\n <\/h3>\r\n <ul class=\"category-list\" id=\"categoryList\"><\/ul>\r\n <\/div>\r\n\r\n <div class=\"main-content\">\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-card\">\r\n <h3 id=\"totalSOPs\">0<\/h3>\r\n <p>Total SOPs<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3 id=\"totalItems\">0<\/h3>\r\n <p>Total Items<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3 id=\"completedItems\">0<\/h3>\r\n <p>Completed<\/p>\r\n <\/div>\r\n <div class=\"stat-card\" onclick=\"showAlertsModal()\">\r\n <h3 id=\"alertsCount\">0<\/h3>\r\n <p>\u26a0\ufe0f Date Alerts<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"search-bar\">\r\n <input type=\"text\" id=\"searchInput\" placeholder=\"\ud83d\udd0d Search SOPs...\" oninput=\"renderSOPList()\">\r\n <\/div>\r\n\r\n <div class=\"sop-list\" id=\"sopList\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"editorView\" style=\"display:none;\" class=\"main-content\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid var(--border); flex-wrap: wrap; gap: 15px;\">\r\n <h2 id=\"editorTitle\">Create New SOP<\/h2>\r\n <div style=\"display: flex; gap: 10px;\">\r\n <button class=\"btn btn-secondary\" onclick=\"showDashboard()\">Cancel<\/button>\r\n <button class=\"btn btn-success\" onclick=\"saveSOP()\">\ud83d\udcbe Save<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-grid\">\r\n <div class=\"form-group full-width\">\r\n <label>SOP Title *<\/label>\r\n <input type=\"text\" id=\"sopTitle\" placeholder=\"e.g., Weekly Kitchen Checklist\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>Category *<\/label>\r\n <select id=\"sopCategory\" required>\r\n <option value=\"\">Select Category<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>Start Date (Optional)<\/label>\r\n <input type=\"date\" id=\"sopStartDate\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>End Date (Optional)<\/label>\r\n <input type=\"date\" id=\"sopEndDate\">\r\n <\/div>\r\n\r\n <div class=\"form-group full-width\">\r\n <label>Purpose\/Objective<\/label>\r\n <textarea id=\"sopPurpose\" placeholder=\"Describe the purpose...\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"form-group full-width\">\r\n <label>Selected Layout<\/label>\r\n <input type=\"text\" id=\"sopLayout\" readonly style=\"background: var(--light-gray);\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"editorContent\"><\/div>\r\n <\/div>\r\n\r\n <div id=\"executeView\" style=\"display:none;\" class=\"main-content\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid var(--border); flex-wrap: wrap; gap: 15px;\">\r\n <div>\r\n <h2 id=\"executeTitle\">SOP Title<\/h2>\r\n <div style=\"display: flex; gap: 15px; color: var(--gray); font-size: 0.9rem; margin-top: 8px; flex-wrap: wrap;\">\r\n <span id=\"executeCategory\"><\/span>\r\n <span id=\"executeDates\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div style=\"display: flex; gap: 10px;\">\r\n <button class=\"btn btn-secondary\" onclick=\"showDashboard()\">\u2190 Back<\/button>\r\n <button class=\"btn btn-warning\" onclick=\"resetSOP()\">\ud83d\udd04 Reset SOP<\/button>\r\n <button class=\"btn btn-primary\" onclick=\"editCurrentSOP()\">\u270f\ufe0f Edit<\/button>\r\n <button class=\"btn btn-success\" onclick=\"saveProgress()\">\ud83d\udcbe Save<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div style=\"margin-bottom: 25px; padding: 20px; background: var(--light-gray); border-radius: 12px;\">\r\n <h3 style=\"margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;\">\r\n <span>\ud83d\udcca Overall Progress<\/span>\r\n <span id=\"progressText\">0\/0 (0%)<\/span>\r\n <\/h3>\r\n <div style=\"width: 100%; height: 30px; background: white; border-radius: 15px; overflow: hidden;\">\r\n <div id=\"progressBar\" style=\"height: 100%; background: linear-gradient(90deg, #10b981, #059669); width: 0%; transition: width 0.5s; display: flex; align-items: center; justify-content: flex-end; padding-right: 15px; color: white; font-weight: 700;\">\r\n <span id=\"progressPercent\">0%<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"executeContent\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"layoutModal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h3>\ud83c\udfa8 Choose SOP Layout<\/h3>\r\n <button class=\"close-btn\" onclick=\"closeLayoutModal()\">\u00d7<\/button>\r\n <\/div>\r\n <div class=\"layout-selection\">\r\n <div class=\"layout-card\" onclick=\"selectLayout('spreadsheet')\">\r\n <div class=\"layout-icon\">\ud83d\udcca<\/div>\r\n <h4>Spreadsheet Tracker<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">Task grid with persons\/days<\/p>\r\n <\/div>\r\n <div class=\"layout-card\" onclick=\"selectLayout('standard')\">\r\n <div class=\"layout-icon\">\ud83d\udccb<\/div>\r\n <h4>Standard Process<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">Step-by-step with details<\/p>\r\n <\/div>\r\n <div class=\"layout-card\" onclick=\"selectLayout('checklist')\">\r\n <div class=\"layout-icon\">\u2705<\/div>\r\n <h4>Checklist<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">Simple checkbox tasks<\/p>\r\n <\/div>\r\n <div class=\"layout-card\" onclick=\"selectLayout('flow')\">\r\n <div class=\"layout-icon\">\ud83d\udd04<\/div>\r\n <h4>Process Flow<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">Sequential workflow<\/p>\r\n <\/div>\r\n <div class=\"layout-card\" onclick=\"selectLayout('decision')\">\r\n <div class=\"layout-icon\">\ud83c\udf33<\/div>\r\n <h4>Decision Tree<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">If-then scenarios<\/p>\r\n <\/div>\r\n <div class=\"layout-card\" onclick=\"selectLayout('troubleshoot')\">\r\n <div class=\"layout-icon\">\ud83d\udd27<\/div>\r\n <h4>Troubleshooting<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">Problem-solution<\/p>\r\n <\/div>\r\n <div class=\"layout-card\" onclick=\"selectLayout('quick')\">\r\n <div class=\"layout-icon\">\u26a1<\/div>\r\n <h4>Quick Guide<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">Fast minimal docs<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"addCategoryModal\">\r\n <div class=\"modal-content\" style=\"max-width: 500px;\">\r\n <div class=\"modal-header\">\r\n <h3>\u2795 Add Category<\/h3>\r\n <button class=\"close-btn\" onclick=\"closeAddCategoryModal()\">\u00d7<\/button>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Category Name *<\/label>\r\n <input type=\"text\" id=\"newCategoryName\" placeholder=\"e.g., Kitchen Operations\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Icon (Emoji)<\/label>\r\n <input type=\"text\" id=\"newCategoryIcon\" placeholder=\"e.g., \ud83c\udf73\" maxlength=\"2\">\r\n <\/div>\r\n <div style=\"display: flex; gap: 10px; margin-top: 20px;\">\r\n <button class=\"btn btn-secondary\" onclick=\"closeAddCategoryModal()\" style=\"flex: 1;\">Cancel<\/button>\r\n <button class=\"btn btn-primary\" onclick=\"addCategory()\" style=\"flex: 1;\">Add<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"alertsModal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h3>\ud83d\udcc5 Date Alerts<\/h3>\r\n <button class=\"close-btn\" onclick=\"closeAlertsModal()\">\u00d7<\/button>\r\n <\/div>\r\n <div class=\"alerts-list\" id=\"alertsList\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"deleteModal\">\r\n <div class=\"modal-content\" style=\"max-width: 500px;\">\r\n <div class=\"modal-header\">\r\n <h3>\u26a0\ufe0f Confirm Delete<\/h3>\r\n <button class=\"close-btn\" onclick=\"closeDeleteModal()\">\u00d7<\/button>\r\n <\/div>\r\n <p>Are you sure you want to delete this SOP?<\/p>\r\n <div style=\"display: flex; gap: 10px; margin-top: 20px;\">\r\n <button class=\"btn btn-secondary\" onclick=\"closeDeleteModal()\" style=\"flex: 1;\">Cancel<\/button>\r\n <button class=\"btn btn-danger\" onclick=\"confirmDelete()\" style=\"flex: 1;\">Delete<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"settingsModal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h3>\u2699\ufe0f Settings<\/h3>\r\n <button class=\"close-btn\" onclick=\"closeSettingsModal()\">\u00d7<\/button>\r\n <\/div>\r\n <div style=\"display: grid; gap: 25px;\">\r\n <div style=\"border: 2px solid var(--border); border-radius: 12px; padding: 20px;\">\r\n <h4 style=\"margin-bottom: 15px;\">\ud83d\udcc1 Data Management<\/h4>\r\n <div style=\"display: flex; gap: 10px;\">\r\n <button class=\"btn btn-success\" onclick=\"exportData()\">\ud83d\udce4 Export<\/button>\r\n <button class=\"btn btn-primary\" onclick=\"importData()\">\ud83d\udce5 Import<\/button>\r\n <\/div>\r\n <\/div>\r\n <div style=\"border: 2px solid var(--border); border-radius: 12px; padding: 20px;\">\r\n <h4 style=\"margin-bottom: 15px;\">\ud83c\udfa8 Theme<\/h4>\r\n <div style=\"display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;\" id=\"themeSelector\"><\/div>\r\n <\/div>\r\n <div style=\"border: 2px solid var(--border); border-radius: 12px; padding: 20px;\">\r\n <h4 style=\"margin-bottom: 15px;\">\ud83d\udcc2 Categories<\/h4>\r\n <div id=\"categoryManagerList\"><\/div>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"closeSettingsModal(); showAddCategoryModal();\" style=\"margin-top: 10px;\">\u2795 Add<\/button>\r\n <\/div>\r\n <div style=\"border: 2px solid var(--border); border-radius: 12px; padding: 20px;\">\r\n <h4 style=\"margin-bottom: 15px;\">\ud83d\udd14 Alert Settings<\/h4>\r\n <div class=\"form-group\">\r\n <label>Alert Days Before Due Date<\/label>\r\n <input type=\"number\" id=\"alertDaysBefore\" min=\"1\" max=\"30\" value=\"3\" style=\"width: 100px; padding: 8px; border: 2px solid var(--border); border-radius: 6px;\">\r\n <p style=\"color: var(--gray); font-size: 0.85rem; margin-top: 5px;\">Tasks will show in alerts this many days before due date (default: 3 days)<\/p>\r\n <\/div>\r\n <div class=\"form-group\" style=\"margin-top: 15px;\">\r\n <label style=\"display: flex; align-items: center; gap: 10px; cursor: pointer;\">\r\n <input type=\"checkbox\" id=\"showOverdueAlerts\" checked style=\"width: 20px; height: 20px; cursor: pointer;\">\r\n <span>Show Overdue Tasks in Alerts<\/span>\r\n <\/label>\r\n <p style=\"color: var(--gray); font-size: 0.85rem; margin-top: 5px; margin-left: 30px;\">If unchecked, overdue tasks will not appear in alert modal<\/p>\r\n <\/div>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"saveAlertSettings()\" style=\"margin-top: 15px;\">\ud83d\udcbe Save Alert Settings<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"editCategoryModal\">\r\n <div class=\"modal-content\" style=\"max-width: 500px;\">\r\n <div class=\"modal-header\">\r\n <h3>\u270f\ufe0f Edit Category<\/h3>\r\n <button class=\"close-btn\" onclick=\"closeEditCategoryModal()\">\u00d7<\/button>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Name *<\/label>\r\n <input type=\"text\" id=\"editCategoryName\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Icon<\/label>\r\n <input type=\"text\" id=\"editCategoryIcon\" maxlength=\"2\">\r\n <\/div>\r\n <div style=\"display: flex; gap: 10px; margin-top: 20px;\">\r\n <button class=\"btn btn-secondary\" onclick=\"closeEditCategoryModal()\" style=\"flex: 1;\">Cancel<\/button>\r\n <button class=\"btn btn-primary\" onclick=\"saveEditCategory()\" style=\"flex: 1;\">Save<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <input type=\"file\" id=\"importFileInput\" accept=\".json\" style=\"display: none;\">\r\n <div class=\"toast\" id=\"toast\"><span id=\"toastMessage\"><\/span><\/div>\r\n\r\n <script>\r\n let sops = [];\r\n let categories = [];\r\n let currentSOPId = null;\r\n let currentExecuteSOPId = null;\r\n let stepCounter = 0;\r\n let taskCounter = 0;\r\n let personCounter = 0;\r\n let deleteTarget = null;\r\n let editCategoryId = null;\r\n let currentCategory = 'all';\r\n let selectedLayout = 'standard';\r\n let lockedItems = {};\r\n let currentTheme = 'blue';\r\n let alertDaysBefore = 3;\r\n let showOverdueAlerts = true; \/\/ Store locked status: {sopId: {itemKey: true\/false}}\r\n\r\n document.addEventListener('DOMContentLoaded', function() {\r\n loadData();\r\n updateCurrentDate();\r\n checkMonthlyReset();\r\n renderDashboard();\r\n document.getElementById('importFileInput').addEventListener('change', handleImport);\r\n setInterval(updateCurrentDate, 60000);\r\n \/\/ Check for monthly reset every hour\r\n setInterval(checkMonthlyReset, 3600000);\r\n });\r\n\r\n function checkMonthlyReset() {\r\n const lastReset = localStorage.getItem('lastMonthlyReset');\r\n const now = new Date();\r\n const currentMonth = now.getFullYear() + '-' + (now.getMonth() + 1);\r\n \r\n if (lastReset !== currentMonth) {\r\n \/\/ Reset all SOPs\r\n sops.forEach(sop => {\r\n if (sop.layout === 'spreadsheet') {\r\n sop.persons.forEach(person => {\r\n sop.tasks.forEach(task => {\r\n sop.gridData[person][task.name] = false;\r\n });\r\n });\r\n } else if (sop.steps) {\r\n sop.steps.forEach(step => {\r\n step.completed = false;\r\n });\r\n }\r\n });\r\n \r\n saveSOPs();\r\n localStorage.setItem('lastMonthlyReset', currentMonth);\r\n \r\n if (lastReset) { \/\/ Only show message if not first time\r\n showToast('\ud83d\udd04 Monthly reset completed!');\r\n }\r\n }\r\n }\r\n\r\n function resetSOP() {\r\n if (!currentExecuteSOPId) return;\r\n \r\n if (!confirm('Are you sure you want to reset all progress for this SOP?')) {\r\n return;\r\n }\r\n \r\n const idx = sops.findIndex(s => s.id === currentExecuteSOPId);\r\n if (idx === -1) return;\r\n \r\n const sop = sops[idx];\r\n \r\n \/\/ Reset all tasks\/steps\r\n if (sop.layout === 'spreadsheet') {\r\n sop.persons.forEach(person => {\r\n sop.tasks.forEach(task => {\r\n sop.gridData[person][task.name] = false;\r\n });\r\n });\r\n } else if (sop.steps) {\r\n sop.steps.forEach(step => {\r\n step.completed = false;\r\n });\r\n }\r\n \r\n \/\/ Clear all locks for this SOP\r\n if (lockedItems[currentExecuteSOPId]) {\r\n delete lockedItems[currentExecuteSOPId];\r\n saveLockedItems();\r\n }\r\n \r\n sop.modifiedDate = new Date().toISOString();\r\n saveSOPs();\r\n \r\n \/\/ Re-render\r\n executeSOP(currentExecuteSOPId);\r\n showToast('\u2705 SOP Reset!');\r\n }\r\n\r\n function toggleLock(sopId, itemKey) {\r\n if (!lockedItems[sopId]) {\r\n lockedItems[sopId] = {};\r\n }\r\n \r\n lockedItems[sopId][itemKey] = !lockedItems[sopId][itemKey];\r\n saveLockedItems();\r\n \r\n \/\/ Update UI\r\n executeSOP(sopId);\r\n }\r\n\r\n function isLocked(sopId, itemKey) {\r\n return lockedItems[sopId] && lockedItems[sopId][itemKey];\r\n }\r\n\r\n function saveLockedItems() {\r\n localStorage.setItem('lockedItems', JSON.stringify(lockedItems));\r\n }\r\n\r\n function loadLockedItems() {\r\n const saved = localStorage.getItem('lockedItems');\r\n if (saved) {\r\n lockedItems = JSON.parse(saved);\r\n }\r\n }\r\n\r\n function updateCurrentDate() {\r\n const now = new Date();\r\n const opts = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };\r\n document.getElementById('currentDate').textContent = now.toLocaleDateString('en-US', opts);\r\n }\r\n\r\n function loadData() {\r\n const saved = localStorage.getItem('sops_complete_final');\r\n const savedCats = localStorage.getItem('categories_complete_final');\r\n const savedTheme = localStorage.getItem('theme');\r\n const savedAlertDays = localStorage.getItem('alertDaysBefore');\r\n const savedShowOverdue = localStorage.getItem('showOverdueAlerts');\r\n \r\n if (saved) sops = JSON.parse(saved);\r\n if (savedCats) {\r\n categories = JSON.parse(savedCats);\r\n } else {\r\n categories = [\r\n { id: 'kitchen', name: 'Kitchen', icon: '\ud83c\udf73' },\r\n { id: 'office', name: 'Office', icon: '\ud83d\udcbc' },\r\n { id: 'cleaning', name: 'Cleaning', icon: '\ud83e\uddf9' },\r\n { id: 'maintenance', name: 'Maintenance', icon: '\ud83d\udd27' }\r\n ];\r\n saveCategories();\r\n }\r\n if (savedTheme) {\r\n currentTheme = savedTheme;\r\n document.body.className = 'theme-' + currentTheme;\r\n } else {\r\n document.body.className = 'theme-blue';\r\n }\r\n if (savedAlertDays) {\r\n alertDaysBefore = parseInt(savedAlertDays);\r\n }\r\n if (savedShowOverdue !== null) {\r\n showOverdueAlerts = savedShowOverdue === 'true';\r\n }\r\n loadLockedItems();\r\n }\r\n\r\n function saveSOPs() { localStorage.setItem('sops_complete_final', JSON.stringify(sops)); }\r\n function saveCategories() { localStorage.setItem('categories_complete_final', JSON.stringify(categories)); }\r\n\r\n function getDaysRemaining(endDate) {\r\n if (!endDate) return null;\r\n const today = new Date(); today.setHours(0,0,0,0);\r\n const end = new Date(endDate); end.setHours(0,0,0,0);\r\n return Math.ceil((end - today) \/ (1000 * 60 * 60 * 24));\r\n }\r\n\r\n function getDateStatus(endDate) {\r\n const days = getDaysRemaining(endDate);\r\n if (days === null) return null;\r\n if (days < 0) return { status: 'overdue', text: `Overdue by ${Math.abs(days)} days`, class: 'overdue' };\r\n if (days === 0) return { status: 'due-today', text: 'Due Today!', class: 'overdue' };\r\n if (days <= alertDaysBefore) return { status: 'due-soon', text: `${days} day${days > 1 ? 's' : ''} left`, class: 'due-soon' };\r\n return { status: 'on-track', text: `${days} days left`, class: 'on-track' };\r\n }\r\n\r\n function showLayoutModal() { document.getElementById('layoutModal').classList.add('active'); }\r\n function closeLayoutModal() { document.getElementById('layoutModal').classList.remove('active'); }\r\n\r\n function selectLayout(layout) {\r\n selectedLayout = layout;\r\n closeLayoutModal();\r\n showNewSOPForm(layout);\r\n }\r\n\r\n function showNewSOPForm(layout) {\r\n currentSOPId = null;\r\n stepCounter = 0; taskCounter = 0; personCounter = 0;\r\n selectedLayout = layout;\r\n\r\n document.getElementById('editorTitle').textContent = 'Create New SOP';\r\n document.getElementById('dashboardView').style.display = 'none';\r\n document.getElementById('executeView').style.display = 'none';\r\n document.getElementById('editorView').style.display = 'block';\r\n\r\n document.getElementById('sopTitle').value = '';\r\n document.getElementById('sopCategory').value = '';\r\n document.getElementById('sopStartDate').value = '';\r\n document.getElementById('sopEndDate').value = '';\r\n document.getElementById('sopPurpose').value = '';\r\n\r\n const layoutNames = {\r\n 'spreadsheet': '\ud83d\udcca Spreadsheet Tracker',\r\n 'standard': '\ud83d\udccb Standard Process',\r\n 'checklist': '\u2705 Checklist',\r\n 'flow': '\ud83d\udd04 Process Flow',\r\n 'decision': '\ud83c\udf33 Decision Tree',\r\n 'troubleshoot': '\ud83d\udd27 Troubleshooting',\r\n 'quick': '\u26a1 Quick Guide'\r\n };\r\n document.getElementById('sopLayout').value = layoutNames[layout];\r\n\r\n updateCategoryDropdown();\r\n loadEditor(layout);\r\n }\r\n\r\n function loadEditor(layout) {\r\n const container = document.getElementById('editorContent');\r\n if (layout === 'spreadsheet') {\r\n container.innerHTML = `\r\n <div class=\"steps-section\">\r\n <div class=\"section-header\">\r\n <h3>\ud83d\udcdd Configure Tasks<\/h3>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"addTask()\">\u2795 Add<\/button>\r\n <\/div>\r\n <div class=\"steps-container\" id=\"tasksContainer\"><\/div>\r\n <\/div>\r\n <div class=\"steps-section\">\r\n <div class=\"section-header\">\r\n <h3>\ud83d\udc65 Persons\/Days<\/h3>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"addPerson()\">\u2795 Add<\/button>\r\n <\/div>\r\n <div class=\"steps-container\" id=\"personsContainer\"><\/div>\r\n <\/div>\r\n `;\r\n addTask();\r\n addPerson();\r\n } else {\r\n container.innerHTML = `\r\n <div class=\"steps-section\">\r\n <div class=\"section-header\">\r\n <h3>\ud83d\udcdd Steps<\/h3>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"addStep()\">\u2795 Add<\/button>\r\n <\/div>\r\n <div class=\"steps-container\" id=\"stepsContainer\"><\/div>\r\n <\/div>\r\n `;\r\n addStep();\r\n }\r\n }\r\n\r\n function addTask() {\r\n taskCounter++;\r\n const container = document.getElementById('tasksContainer');\r\n const div = document.createElement('div');\r\n div.className = 'task-config-card';\r\n div.dataset.task = taskCounter;\r\n div.innerHTML = `\r\n <div style=\"display: flex; gap: 12px; align-items: center;\">\r\n <input type=\"text\" class=\"task-icon-input\" placeholder=\"\ud83d\udcdd\" maxlength=\"2\" value=\"\ud83d\udcdd\">\r\n <input type=\"text\" class=\"task-name\" placeholder=\"Task Name\" style=\"flex: 1; padding: 10px; border: 2px solid var(--border); border-radius: 8px; font-weight: 600;\">\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"this.parentElement.parentElement.remove()\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n `;\r\n container.appendChild(div);\r\n }\r\n\r\n function addPerson() {\r\n personCounter++;\r\n const container = document.getElementById('personsContainer');\r\n const div = document.createElement('div');\r\n div.className = 'task-config-card';\r\n div.dataset.person = personCounter;\r\n div.innerHTML = `\r\n <div style=\"display: flex; gap: 12px; align-items: center;\">\r\n <input type=\"text\" class=\"person-name\" placeholder=\"Person\/Day Name (e.g., Monday, John)\" style=\"flex: 1; padding: 10px; border: 2px solid var(--border); border-radius: 8px; font-weight: 600;\">\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"this.parentElement.parentElement.remove()\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n `;\r\n container.appendChild(div);\r\n }\r\n\r\n function addStep() {\r\n stepCounter++;\r\n const container = document.getElementById('stepsContainer');\r\n \r\n let html = '';\r\n switch(selectedLayout) {\r\n case 'standard':\r\n html = `\r\n <div class=\"step-card\" data-step=\"${stepCounter}\">\r\n <div class=\"step-header\">\r\n <div class=\"step-number\">${stepCounter}<\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <div class=\"form-group\">\r\n <label>Step Description *<\/label>\r\n <textarea class=\"step-description\" placeholder=\"Describe the step...\" style=\"width: 100%;\"><\/textarea>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Responsible Person<\/label>\r\n <input type=\"text\" class=\"step-responsible\" placeholder=\"e.g., Manager\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Estimated Time<\/label>\r\n <input type=\"text\" class=\"step-time\" placeholder=\"e.g., 15 mins\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Tools\/Resources<\/label>\r\n <input type=\"text\" class=\"step-tools\" placeholder=\"Required tools...\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Notes\/Warnings<\/label>\r\n <input type=\"text\" class=\"step-notes\" placeholder=\"Important notes...\">\r\n <\/div>\r\n <div class=\"step-actions\">\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"moveStepUp(${stepCounter})\">\u2b06\ufe0f<\/button>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"moveStepDown(${stepCounter})\">\u2b07\ufe0f<\/button>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"removeStep(${stepCounter})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n break;\r\n case 'checklist':\r\n html = `\r\n <div class=\"step-card checklist-item\" data-step=\"${stepCounter}\" style=\"display: block; padding: 15px;\">\r\n <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 10px;\">\r\n <div class=\"step-number\">${stepCounter}<\/div>\r\n <input type=\"text\" class=\"step-description\" placeholder=\"Checklist item...\" style=\"flex: 1; border: 2px solid var(--border); background: white; font-size: 1rem; padding: 8px; border-radius: 6px;\">\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"removeStep(${stepCounter})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-left: 44px;\">\r\n <div>\r\n <label style=\"font-size: 0.85rem; color: var(--gray); margin-bottom: 5px; display: block;\">Assigned to<\/label>\r\n <input type=\"text\" class=\"step-responsible\" placeholder=\"Person name...\" style=\"width: 100%; border: 2px solid var(--border); background: white; font-size: 0.9rem; padding: 8px; border-radius: 6px;\">\r\n <\/div>\r\n <div>\r\n <label style=\"font-size: 0.85rem; color: var(--gray); margin-bottom: 5px; display: block;\">\ud83d\udcc5 Due Date (Optional)<\/label>\r\n <input type=\"date\" class=\"step-due-date\" style=\"width: 100%; border: 2px solid var(--border); background: white; padding: 8px; border-radius: 6px;\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n break;\r\n case 'flow':\r\n html = `\r\n <div class=\"step-card flow-step\" data-step=\"${stepCounter}\">\r\n <div class=\"flow-arrow\">\u2192<\/div>\r\n <div class=\"form-group\">\r\n <label>Step ${stepCounter}<\/label>\r\n <input type=\"text\" class=\"step-description\" placeholder=\"Process step...\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Owner<\/label>\r\n <input type=\"text\" class=\"step-responsible\" placeholder=\"Person responsible...\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Duration<\/label>\r\n <input type=\"text\" class=\"step-time\" placeholder=\"Time required...\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\ud83d\udcc5 Date\/Recurrence Type<\/label>\r\n <select class=\"step-recurrence-type\" onchange=\"toggleFlowDateFields(this)\">\r\n <option value=\"\">No Date<\/option>\r\n <option value=\"single\">Single Date<\/option>\r\n <option value=\"weekly\">Weekly (e.g., Every Monday)<\/option>\r\n <option value=\"monthly\">Monthly (e.g., Every Month 15th)<\/option>\r\n <option value=\"daily\">Daily<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"flow-date-fields\" style=\"display: none;\">\r\n <div class=\"single-date-field\" style=\"display: none;\">\r\n <label>Due Date<\/label>\r\n <input type=\"date\" class=\"step-due-date\">\r\n <\/div>\r\n <div class=\"weekly-field\" style=\"display: none;\">\r\n <label>Day of Week<\/label>\r\n <select class=\"step-weekly-day\">\r\n <option value=\"1\">Monday<\/option>\r\n <option value=\"2\">Tuesday<\/option>\r\n <option value=\"3\">Wednesday<\/option>\r\n <option value=\"4\">Thursday<\/option>\r\n <option value=\"5\">Friday<\/option>\r\n <option value=\"6\">Saturday<\/option>\r\n <option value=\"0\">Sunday<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"monthly-field\" style=\"display: none;\">\r\n <label>Day of Month (1-31)<\/label>\r\n <input type=\"number\" class=\"step-monthly-day\" min=\"1\" max=\"31\" placeholder=\"e.g., 15\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-actions\">\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"moveStepUp(${stepCounter})\">\u2b06\ufe0f<\/button>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"moveStepDown(${stepCounter})\">\u2b07\ufe0f<\/button>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"removeStep(${stepCounter})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n break;\r\n case 'decision':\r\n html = `\r\n <div class=\"step-card decision-node\" data-step=\"${stepCounter}\">\r\n <div class=\"form-group\">\r\n <label>\ud83d\udd37 Decision Point ${stepCounter}<\/label>\r\n <input type=\"text\" class=\"step-description\" placeholder=\"What decision needs to be made?\">\r\n <\/div>\r\n <div class=\"decision-option\">\r\n <div class=\"form-group\">\r\n <label>\u2705 If YES:<\/label>\r\n <input type=\"text\" class=\"step-yes\" placeholder=\"Action if yes...\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"decision-option\">\r\n <div class=\"form-group\">\r\n <label>\u274c If NO:<\/label>\r\n <input type=\"text\" class=\"step-no\" placeholder=\"Action if no...\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-actions\">\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"removeStep(${stepCounter})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n break;\r\n case 'troubleshoot':\r\n html = `\r\n <div class=\"step-card\" data-step=\"${stepCounter}\">\r\n <div class=\"troubleshoot-problem\">\r\n <label><strong>\u2757 Problem ${stepCounter}<\/strong><\/label>\r\n <input type=\"text\" class=\"step-description\" placeholder=\"Describe the problem...\" style=\"width: 100%; margin-top: 10px; padding: 10px; border: 2px solid var(--border); border-radius: 6px;\">\r\n <\/div>\r\n <div class=\"troubleshoot-solution\">\r\n <label><strong>\u2705 Solution<\/strong><\/label>\r\n <textarea class=\"step-solution\" placeholder=\"How to resolve...\" style=\"width: 100%; margin-top: 10px; padding: 10px; border: 2px solid var(--border); border-radius: 6px; min-height: 70px;\"><\/textarea>\r\n <\/div>\r\n <div class=\"form-group\" style=\"margin-top: 12px;\">\r\n <label>Responsible Person<\/label>\r\n <input type=\"text\" class=\"step-responsible\" placeholder=\"Who handles this?\">\r\n <\/div>\r\n <div class=\"step-actions\">\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"removeStep(${stepCounter})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n break;\r\n case 'quick':\r\n html = `\r\n <div class=\"step-card\" data-step=\"${stepCounter}\" style=\"padding: 12px;\">\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <div class=\"step-number\" style=\"width: 30px; height: 30px; font-size: 0.9rem;\">${stepCounter}<\/div>\r\n <input type=\"text\" class=\"step-description\" placeholder=\"Quick instruction...\" style=\"flex: 1; border: 2px solid var(--border); padding: 10px; border-radius: 8px;\">\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"removeStep(${stepCounter})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n break;\r\n }\r\n \r\n container.insertAdjacentHTML('beforeend', html);\r\n }\r\n\r\n function removeStep(num) {\r\n const step = document.querySelector(`[data-step=\"${num}\"]`);\r\n if (step) {\r\n step.remove();\r\n renumberSteps();\r\n }\r\n }\r\n\r\n function moveStepUp(num) {\r\n const step = document.querySelector(`[data-step=\"${num}\"]`);\r\n const prev = step.previousElementSibling;\r\n if (prev) {\r\n step.parentNode.insertBefore(step, prev);\r\n renumberSteps();\r\n }\r\n }\r\n\r\n function moveStepDown(num) {\r\n const step = document.querySelector(`[data-step=\"${num}\"]`);\r\n const next = step.nextElementSibling;\r\n if (next) {\r\n step.parentNode.insertBefore(next, step);\r\n renumberSteps();\r\n }\r\n }\r\n\r\n function getRecurringStepStatus(step) {\r\n if (!step.recurrenceType) return null;\r\n \r\n const today = new Date();\r\n today.setHours(0, 0, 0, 0);\r\n \r\n if (step.recurrenceType === 'daily') {\r\n return { text: '\ud83d\udd04 Daily', color: 'var(--primary)', isToday: true, daysRemaining: 0 };\r\n }\r\n \r\n if (step.recurrenceType === 'weekly' && step.weeklyDay !== null) {\r\n const todayDay = today.getDay();\r\n const targetDay = parseInt(step.weeklyDay);\r\n const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\r\n \r\n \/\/ Calculate days until target day\r\n let daysUntil = targetDay - todayDay;\r\n if (daysUntil < 0) daysUntil += 7; \/\/ Next week\r\n \r\n if (daysUntil === 0) {\r\n return { text: `\ud83d\udcc5 Today (${dayNames[targetDay]})`, color: 'var(--danger)', isToday: true, daysRemaining: 0 };\r\n } else if (daysUntil <= alertDaysBefore) {\r\n return { text: `\ud83d\udcc5 ${dayNames[targetDay]} (${daysUntil} day${daysUntil > 1 ? 's' : ''})`, color: 'var(--warning)', isToday: false, daysRemaining: daysUntil };\r\n } else {\r\n return { text: `\ud83d\udcc5 Every ${dayNames[targetDay]}`, color: 'var(--success)', isToday: false, daysRemaining: daysUntil };\r\n }\r\n }\r\n \r\n if (step.recurrenceType === 'monthly' && step.monthlyDay) {\r\n const todayDate = today.getDate();\r\n const targetDate = parseInt(step.monthlyDay);\r\n \r\n \/\/ Calculate days until target date\r\n let daysUntil = targetDate - todayDate;\r\n \r\n \/\/ If target date already passed this month, calculate for next month\r\n if (daysUntil < 0) {\r\n const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, targetDate);\r\n daysUntil = Math.ceil((nextMonth - today) \/ (1000 * 60 * 60 * 24));\r\n }\r\n \r\n if (daysUntil === 0) {\r\n return { text: `\ud83d\udcc6 Today (${targetDate}th)`, color: 'var(--danger)', isToday: true, daysRemaining: 0 };\r\n } else if (daysUntil <= alertDaysBefore) {\r\n return { text: `\ud83d\udcc6 ${targetDate}th (${daysUntil} day${daysUntil > 1 ? 's' : ''})`, color: 'var(--warning)', isToday: false, daysRemaining: daysUntil };\r\n } else {\r\n return { text: `\ud83d\udcc6 Every Month ${targetDate}th`, color: 'var(--success)', isToday: false, daysRemaining: daysUntil };\r\n }\r\n }\r\n \r\n if (step.recurrenceType === 'single' && step.dueDate) {\r\n const dueStatus = getDateStatus(step.dueDate);\r\n const days = getDaysRemaining(step.dueDate);\r\n if (dueStatus) {\r\n const dueStr = new Date(step.dueDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric'});\r\n let color = 'var(--success)';\r\n if (dueStatus.class === 'overdue') color = 'var(--danger)';\r\n else if (dueStatus.class === 'due-soon') color = 'var(--warning)';\r\n return { text: `\ud83d\udcc5 ${dueStr} - ${dueStatus.text}`, color: color, isToday: dueStatus.class === 'overdue', daysRemaining: days };\r\n }\r\n }\r\n \r\n return null;\r\n }\r\n\r\n function toggleFlowDateFields(select) {\r\n const parent = select.closest('.step-card');\r\n const fieldsContainer = parent.querySelector('.flow-date-fields');\r\n const singleField = parent.querySelector('.single-date-field');\r\n const weeklyField = parent.querySelector('.weekly-field');\r\n const monthlyField = parent.querySelector('.monthly-field');\r\n \r\n \/\/ Hide all first\r\n fieldsContainer.style.display = 'none';\r\n singleField.style.display = 'none';\r\n weeklyField.style.display = 'none';\r\n monthlyField.style.display = 'none';\r\n \r\n const value = select.value;\r\n if (value) {\r\n fieldsContainer.style.display = 'block';\r\n if (value === 'single') singleField.style.display = 'block';\r\n else if (value === 'weekly') weeklyField.style.display = 'block';\r\n else if (value === 'monthly') monthlyField.style.display = 'block';\r\n }\r\n }\r\n\r\n function renumberSteps() {\r\n const steps = document.querySelectorAll('[data-step]');\r\n steps.forEach((step, idx) => {\r\n const num = step.querySelector('.step-number');\r\n if (num) num.textContent = idx + 1;\r\n step.dataset.step = idx + 1;\r\n });\r\n stepCounter = steps.length;\r\n }\r\n\r\n function saveSOP() {\r\n const title = document.getElementById('sopTitle').value.trim();\r\n const category = document.getElementById('sopCategory').value;\r\n if (!title || !category) {\r\n showToast('\u26a0\ufe0f Please fill required fields!', 'warning');\r\n return;\r\n }\r\n\r\n let sopData = {\r\n id: currentSOPId || Date.now(),\r\n title, category,\r\n startDate: document.getElementById('sopStartDate').value || null,\r\n endDate: document.getElementById('sopEndDate').value || null,\r\n purpose: document.getElementById('sopPurpose').value.trim(),\r\n layout: selectedLayout,\r\n createdDate: currentSOPId ? sops.find(s => s.id === currentSOPId).createdDate : new Date().toISOString(),\r\n modifiedDate: new Date().toISOString()\r\n };\r\n\r\n if (selectedLayout === 'spreadsheet') {\r\n const taskCards = document.querySelectorAll('[data-task]');\r\n const tasks = [];\r\n taskCards.forEach(card => {\r\n const name = card.querySelector('.task-name').value.trim();\r\n if (!name) return;\r\n tasks.push({\r\n icon: card.querySelector('.task-icon-input').value.trim() || '\ud83d\udcdd',\r\n name: name\r\n });\r\n });\r\n\r\n const personCards = document.querySelectorAll('[data-person]');\r\n const persons = [];\r\n personCards.forEach(card => {\r\n const name = card.querySelector('.person-name').value.trim();\r\n if (name) persons.push(name);\r\n });\r\n\r\n if (tasks.length === 0 || persons.length === 0) {\r\n showToast('\u26a0\ufe0f Add at least one task and person!', 'warning');\r\n return;\r\n }\r\n\r\n const gridData = {};\r\n persons.forEach(person => {\r\n gridData[person] = {};\r\n tasks.forEach(task => {\r\n gridData[person][task.name] = false;\r\n });\r\n });\r\n\r\n sopData.tasks = tasks;\r\n sopData.persons = persons;\r\n sopData.gridData = gridData;\r\n } else {\r\n const stepCards = document.querySelectorAll('[data-step]');\r\n const steps = [];\r\n stepCards.forEach(card => {\r\n const desc = card.querySelector('.step-description').value.trim();\r\n if (!desc) return;\r\n \r\n const stepData = {\r\n description: desc,\r\n responsible: card.querySelector('.step-responsible')?.value.trim() || '',\r\n time: card.querySelector('.step-time')?.value.trim() || '',\r\n tools: card.querySelector('.step-tools')?.value.trim() || '',\r\n notes: card.querySelector('.step-notes')?.value.trim() || '',\r\n solution: card.querySelector('.step-solution')?.value.trim() || '',\r\n yes: card.querySelector('.step-yes')?.value.trim() || '',\r\n no: card.querySelector('.step-no')?.value.trim() || '',\r\n dueDate: card.querySelector('.step-due-date')?.value || null,\r\n recurrenceType: card.querySelector('.step-recurrence-type')?.value || null,\r\n weeklyDay: card.querySelector('.step-weekly-day')?.value || null,\r\n monthlyDay: card.querySelector('.step-monthly-day')?.value || null,\r\n completed: false\r\n };\r\n steps.push(stepData);\r\n });\r\n\r\n if (steps.length === 0) {\r\n showToast('\u26a0\ufe0f Add at least one step!', 'warning');\r\n return;\r\n }\r\n\r\n sopData.steps = steps;\r\n }\r\n\r\n if (currentSOPId) {\r\n const idx = sops.findIndex(s => s.id === currentSOPId);\r\n sops[idx] = sopData;\r\n showToast('\u2705 SOP Updated!');\r\n } else {\r\n sops.push(sopData);\r\n showToast('\u2705 SOP Created!');\r\n }\r\n\r\n saveSOPs();\r\n showDashboard();\r\n }\r\n\r\n function executeSOP(id) {\r\n const sop = sops.find(s => s.id === id);\r\n if (!sop) return;\r\n\r\n currentExecuteSOPId = id;\r\n document.getElementById('dashboardView').style.display = 'none';\r\n document.getElementById('editorView').style.display = 'none';\r\n document.getElementById('executeView').style.display = 'block';\r\n\r\n const cat = categories.find(c => c.id === sop.category);\r\n document.getElementById('executeTitle').textContent = sop.title;\r\n document.getElementById('executeCategory').textContent = `\ud83d\udcc2 ${cat ? cat.icon + ' ' + cat.name : sop.category}`;\r\n\r\n let dateText = '';\r\n if (sop.startDate && sop.endDate) {\r\n const start = new Date(sop.startDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric'});\r\n const end = new Date(sop.endDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric'});\r\n const status = getDateStatus(sop.endDate);\r\n dateText = `\ud83d\udcc5 ${start} \u2192 ${end}`;\r\n if (status) dateText += ` <span style=\"color: ${status.class === 'overdue' ? 'var(--danger)' : status.class === 'due-soon' ? 'var(--warning)' : 'var(--success)'};\">(${status.text})<\/span>`;\r\n } else if (sop.endDate) {\r\n const end = new Date(sop.endDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric'});\r\n const status = getDateStatus(sop.endDate);\r\n dateText = `\ud83d\udcc5 Due: ${end}`;\r\n if (status) dateText += ` <span style=\"color: ${status.class === 'overdue' ? 'var(--danger)' : status.class === 'due-soon' ? 'var(--warning)' : 'var(--success)'};\">(${status.text})<\/span>`;\r\n }\r\n document.getElementById('executeDates').innerHTML = dateText;\r\n\r\n if (sop.layout === 'spreadsheet') {\r\n renderSpreadsheet(sop);\r\n } else {\r\n renderSteps(sop);\r\n }\r\n updateProgress(sop);\r\n }\r\n\r\n function renderSpreadsheet(sop) {\r\n const container = document.getElementById('executeContent');\r\n let html = '<div style=\"overflow-x: auto;\"><table class=\"spreadsheet-table\"><thead><tr><th>Person\/Day<\/th>';\r\n sop.tasks.forEach(t => {\r\n html += `<th><div style=\"text-align: center;\"><div style=\"font-size: 1.5rem;\">${t.icon}<\/div><div style=\"font-size: 0.85rem; margin-top: 5px;\">${t.name}<\/div><\/div><\/th>`;\r\n });\r\n html += '<th style=\"min-width: 80px;\">Lock<\/th><\/tr><\/thead><tbody>';\r\n\r\n sop.persons.forEach(person => {\r\n html += `<tr><td>${person}<\/td>`;\r\n sop.tasks.forEach(task => {\r\n const itemKey = `${person}::${task.name}`;\r\n const locked = isLocked(sop.id, itemKey);\r\n const checked = sop.gridData[person][task.name] ? 'checked' : '';\r\n const bgClass = checked ? 'completed' : '';\r\n const disabled = locked ? 'disabled' : '';\r\n html += `<td class=\"task-cell ${bgClass}\"><input type=\"checkbox\" class=\"task-checkbox\" ${checked} ${disabled} onchange=\"toggleGrid('${person}', '${task.name}')\"><\/td>`;\r\n });\r\n \r\n \/\/ Add lock button for this row\r\n const rowKey = person;\r\n const rowLocked = isLocked(sop.id, rowKey);\r\n html += `<td><button class=\"lock-btn ${rowLocked ? 'locked' : ''}\" onclick=\"toggleRowLock('${person}')\">${rowLocked ? '\ud83d\udd12' : '\ud83d\udd13'}<\/button><\/td>`;\r\n \r\n html += '<\/tr>';\r\n });\r\n\r\n html += '<\/tbody><\/table><\/div>';\r\n container.innerHTML = html;\r\n }\r\n\r\n function toggleRowLock(person) {\r\n if (!currentExecuteSOPId) return;\r\n const sop = sops.find(s => s.id === currentExecuteSOPId);\r\n if (!sop) return;\r\n \r\n const rowKey = person;\r\n \r\n \/\/ Toggle row lock\r\n if (!lockedItems[currentExecuteSOPId]) {\r\n lockedItems[currentExecuteSOPId] = {};\r\n }\r\n \r\n const isCurrentlyLocked = lockedItems[currentExecuteSOPId][rowKey];\r\n lockedItems[currentExecuteSOPId][rowKey] = !isCurrentlyLocked;\r\n \r\n \/\/ Lock\/unlock all items in this row\r\n sop.tasks.forEach(task => {\r\n const itemKey = `${person}::${task.name}`;\r\n lockedItems[currentExecuteSOPId][itemKey] = !isCurrentlyLocked;\r\n });\r\n \r\n saveLockedItems();\r\n renderSpreadsheet(sop);\r\n }\r\n\r\n function toggleGrid(person, taskName) {\r\n const sop = sops.find(s => s.id === currentExecuteSOPId);\r\n if (!sop) return;\r\n \r\n const itemKey = `${person}::${taskName}`;\r\n if (isLocked(currentExecuteSOPId, itemKey)) {\r\n showToast('\u26a0\ufe0f This item is locked!', 'warning');\r\n return;\r\n }\r\n \r\n sop.gridData[person][taskName] = !sop.gridData[person][taskName];\r\n renderSpreadsheet(sop);\r\n updateProgress(sop);\r\n }\r\n\r\n function renderSteps(sop) {\r\n const container = document.getElementById('executeContent');\r\n let html = '<div style=\"display: grid; gap: 12px;\">';\r\n \r\n sop.steps.forEach((step, idx) => {\r\n const itemKey = `step::${idx}`;\r\n const locked = isLocked(currentExecuteSOPId, itemKey);\r\n const checked = step.completed ? 'checked' : '';\r\n const bgClass = step.completed ? 'completed' : '';\r\n const disabled = locked ? 'disabled' : '';\r\n const num = idx + 1;\r\n \r\n if (sop.layout === 'decision') {\r\n html += `\r\n <div class=\"step-card decision-node ${bgClass}\">\r\n <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 12px; justify-content: space-between;\">\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <input type=\"checkbox\" class=\"task-checkbox\" ${checked} ${disabled} onchange=\"toggleStep(${idx})\">\r\n <strong>\ud83d\udd37 Decision ${num}:<\/strong>\r\n <\/div>\r\n <button class=\"lock-btn ${locked ? 'locked' : ''}\" onclick=\"toggleStepLock(${idx})\">${locked ? '\ud83d\udd12 Locked' : '\ud83d\udd13 Unlocked'}<\/button>\r\n <\/div>\r\n <p style=\"margin: 8px 0;\">${step.description}<\/p>\r\n <div class=\"decision-option\">\r\n <p style=\"color: var(--success); margin: 5px 0;\"><strong>\u2705 If YES:<\/strong> ${step.yes}<\/p>\r\n <\/div>\r\n <div class=\"decision-option\">\r\n <p style=\"color: var(--danger); margin: 5px 0;\"><strong>\u274c If NO:<\/strong> ${step.no}<\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n } else if (sop.layout === 'troubleshoot') {\r\n html += `\r\n <div class=\"step-card ${bgClass}\">\r\n <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 12px; justify-content: space-between;\">\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <input type=\"checkbox\" class=\"task-checkbox\" ${checked} ${disabled} onchange=\"toggleStep(${idx})\">\r\n <strong style=\"color: var(--danger);\">\u2757 Problem ${num}<\/strong>\r\n <\/div>\r\n <button class=\"lock-btn ${locked ? 'locked' : ''}\" onclick=\"toggleStepLock(${idx})\">${locked ? '\ud83d\udd12 Locked' : '\ud83d\udd13 Unlocked'}<\/button>\r\n <\/div>\r\n <div class=\"troubleshoot-problem\">\r\n <p>${step.description}<\/p>\r\n <\/div>\r\n <div class=\"troubleshoot-solution\">\r\n <strong>\u2705 Solution:<\/strong>\r\n <p style=\"margin-top: 5px;\">${step.solution}<\/p>\r\n <\/div>\r\n ${step.responsible ? `<p style=\"color: var(--gray); margin-top: 10px;\">\ud83d\udc64 ${step.responsible}<\/p>` : ''}\r\n <\/div>\r\n `;\r\n } else {\r\n \/\/ Calculate due date or recurring status - only show on uncompleted steps\r\n let dueDateBadge = '';\r\n if (!step.completed) {\r\n const recurringStatus = getRecurringStepStatus(step);\r\n if (recurringStatus) {\r\n dueDateBadge = `<span style=\"background: ${recurringStatus.color}; color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.85rem; margin-left: 10px;\">${recurringStatus.text}<\/span>`;\r\n }\r\n }\r\n \r\n html += `\r\n <div class=\"step-card ${bgClass}\">\r\n <div class=\"step-header\">\r\n <input type=\"checkbox\" class=\"task-checkbox\" ${checked} ${disabled} onchange=\"toggleStep(${idx})\">\r\n <div class=\"step-number\">${num}<\/div>\r\n <div style=\"flex: 1;\">\r\n <div style=\"display: flex; align-items: center; flex-wrap: wrap;\">\r\n <p style=\"font-weight: 600; margin-bottom: 8px;\">${step.description}<\/p>\r\n ${dueDateBadge}\r\n <\/div>\r\n <div style=\"display: flex; gap: 15px; flex-wrap: wrap; color: var(--gray); font-size: 0.9rem;\">\r\n ${step.responsible ? `<span>\ud83d\udc64 ${step.responsible}<\/span>` : ''}\r\n ${step.time ? `<span>\u23f1\ufe0f ${step.time}<\/span>` : ''}\r\n ${step.tools ? `<span>\ud83d\udd27 ${step.tools}<\/span>` : ''}\r\n <\/div>\r\n ${step.notes ? `<p style=\"color: var(--warning); margin-top: 8px; font-size: 0.9rem;\">\u26a0\ufe0f ${step.notes}<\/p>` : ''}\r\n <\/div>\r\n <button class=\"lock-btn ${locked ? 'locked' : ''}\" onclick=\"toggleStepLock(${idx})\" style=\"margin-left: 10px;\">${locked ? '\ud83d\udd12' : '\ud83d\udd13'}<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n });\r\n \r\n html += '<\/div>';\r\n container.innerHTML = html;\r\n }\r\n\r\n function toggleStepLock(idx) {\r\n if (!currentExecuteSOPId) return;\r\n const itemKey = `step::${idx}`;\r\n toggleLock(currentExecuteSOPId, itemKey);\r\n }\r\n\r\n function toggleStep(idx) {\r\n const sop = sops.find(s => s.id === currentExecuteSOPId);\r\n if (!sop) return;\r\n \r\n const itemKey = `step::${idx}`;\r\n if (isLocked(currentExecuteSOPId, itemKey)) {\r\n showToast('\u26a0\ufe0f This step is locked!', 'warning');\r\n return;\r\n }\r\n \r\n sop.steps[idx].completed = !sop.steps[idx].completed;\r\n renderSteps(sop);\r\n updateProgress(sop);\r\n }\r\n\r\n function updateProgress(sop) {\r\n let total = 0, completed = 0;\r\n if (sop.layout === 'spreadsheet') {\r\n sop.persons.forEach(p => {\r\n sop.tasks.forEach(t => {\r\n total++;\r\n if (sop.gridData[p][t.name]) completed++;\r\n });\r\n });\r\n } else {\r\n total = sop.steps.length;\r\n completed = sop.steps.filter(s => s.completed).length;\r\n }\r\n\r\n const pct = total > 0 ? Math.round((completed \/ total) * 100) : 0;\r\n document.getElementById('progressText').textContent = `${completed}\/${total} (${pct}%)`;\r\n document.getElementById('progressBar').style.width = pct + '%';\r\n document.getElementById('progressPercent').textContent = pct + '%';\r\n }\r\n\r\n function saveProgress() {\r\n if (!currentExecuteSOPId) return;\r\n const idx = sops.findIndex(s => s.id === currentExecuteSOPId);\r\n if (idx !== -1) {\r\n sops[idx].modifiedDate = new Date().toISOString();\r\n saveSOPs();\r\n showToast('\u2705 Progress Saved!');\r\n }\r\n }\r\n\r\n function editCurrentSOP() {\r\n if (currentExecuteSOPId) editSOP(currentExecuteSOPId);\r\n }\r\n\r\n function editSOP(id) {\r\n const sop = sops.find(s => s.id === id);\r\n if (!sop) return;\r\n\r\n selectedLayout = sop.layout;\r\n showNewSOPForm(sop.layout);\r\n \r\n \/\/ Set currentSOPId AFTER showNewSOPForm (which sets it to null)\r\n currentSOPId = id;\r\n\r\n document.getElementById('editorTitle').textContent = 'Edit SOP';\r\n document.getElementById('sopTitle').value = sop.title;\r\n document.getElementById('sopCategory').value = sop.category;\r\n document.getElementById('sopStartDate').value = sop.startDate || '';\r\n document.getElementById('sopEndDate').value = sop.endDate || '';\r\n document.getElementById('sopPurpose').value = sop.purpose || '';\r\n\r\n if (sop.layout === 'spreadsheet') {\r\n const tasksContainer = document.getElementById('tasksContainer');\r\n tasksContainer.innerHTML = '';\r\n taskCounter = 0;\r\n sop.tasks.forEach(task => {\r\n addTask();\r\n const last = document.querySelector('[data-task]:last-child');\r\n last.querySelector('.task-icon-input').value = task.icon;\r\n last.querySelector('.task-name').value = task.name;\r\n });\r\n\r\n const personsContainer = document.getElementById('personsContainer');\r\n personsContainer.innerHTML = '';\r\n personCounter = 0;\r\n sop.persons.forEach(person => {\r\n addPerson();\r\n const last = document.querySelector('[data-person]:last-child');\r\n last.querySelector('.person-name').value = person;\r\n });\r\n } else {\r\n const stepsContainer = document.getElementById('stepsContainer');\r\n stepsContainer.innerHTML = '';\r\n stepCounter = 0;\r\n sop.steps.forEach(step => {\r\n addStep();\r\n const last = document.querySelector('[data-step]:last-child');\r\n last.querySelector('.step-description').value = step.description;\r\n \r\n const resp = last.querySelector('.step-responsible');\r\n if (resp) resp.value = step.responsible || '';\r\n \r\n const time = last.querySelector('.step-time');\r\n if (time) time.value = step.time || '';\r\n \r\n const tools = last.querySelector('.step-tools');\r\n if (tools) tools.value = step.tools || '';\r\n \r\n const notes = last.querySelector('.step-notes');\r\n if (notes) notes.value = step.notes || '';\r\n \r\n const solution = last.querySelector('.step-solution');\r\n if (solution) solution.value = step.solution || '';\r\n \r\n const yes = last.querySelector('.step-yes');\r\n if (yes) yes.value = step.yes || '';\r\n \r\n const no = last.querySelector('.step-no');\r\n if (no) no.value = step.no || '';\r\n \r\n const dueDate = last.querySelector('.step-due-date');\r\n if (dueDate) dueDate.value = step.dueDate || '';\r\n \r\n const recurrenceType = last.querySelector('.step-recurrence-type');\r\n if (recurrenceType) {\r\n recurrenceType.value = step.recurrenceType || '';\r\n \/\/ Trigger the toggle function to show correct fields\r\n if (step.recurrenceType) {\r\n toggleFlowDateFields(recurrenceType);\r\n }\r\n }\r\n \r\n const weeklyDay = last.querySelector('.step-weekly-day');\r\n if (weeklyDay && step.weeklyDay !== null) weeklyDay.value = step.weeklyDay;\r\n \r\n const monthlyDay = last.querySelector('.step-monthly-day');\r\n if (monthlyDay && step.monthlyDay) monthlyDay.value = step.monthlyDay;\r\n });\r\n }\r\n }\r\n\r\n function showAddCategoryModal() {\r\n document.getElementById('newCategoryName').value = '';\r\n document.getElementById('newCategoryIcon').value = '';\r\n document.getElementById('addCategoryModal').classList.add('active');\r\n }\r\n\r\n function closeAddCategoryModal() {\r\n document.getElementById('addCategoryModal').classList.remove('active');\r\n }\r\n\r\n function addCategory() {\r\n const name = document.getElementById('newCategoryName').value.trim();\r\n const icon = document.getElementById('newCategoryIcon').value.trim() || '\ud83d\udcc1';\r\n if (!name) {\r\n showToast('\u26a0\ufe0f Enter category name!', 'warning');\r\n return;\r\n }\r\n\r\n const id = name.toLowerCase().replace(\/\\s+\/g, '_');\r\n if (categories.find(c => c.id === id)) {\r\n showToast('\u26a0\ufe0f Category exists!', 'warning');\r\n return;\r\n }\r\n\r\n categories.push({ id, name, icon });\r\n saveCategories();\r\n closeAddCategoryModal();\r\n renderCategoryList();\r\n updateCategoryDropdown();\r\n showToast('\u2705 Category added!');\r\n }\r\n\r\n function selectCategory(cat) {\r\n currentCategory = cat;\r\n renderCategoryList();\r\n renderSOPList();\r\n }\r\n\r\n function updateCategoryDropdown() {\r\n const sel = document.getElementById('sopCategory');\r\n const curr = sel.value;\r\n sel.innerHTML = '<option value=\"\">Select Category<\/option>';\r\n categories.forEach(c => {\r\n sel.innerHTML += `<option value=\"${c.id}\">${c.icon} ${c.name}<\/option>`;\r\n });\r\n if (curr) sel.value = curr;\r\n }\r\n\r\n function showDashboard() {\r\n document.getElementById('dashboardView').style.display = 'grid';\r\n document.getElementById('editorView').style.display = 'none';\r\n document.getElementById('executeView').style.display = 'none';\r\n currentExecuteSOPId = null;\r\n renderDashboard();\r\n }\r\n\r\n function renderDashboard() {\r\n updateStats();\r\n renderCategoryList();\r\n renderSOPList();\r\n }\r\n\r\n function updateStats() {\r\n let total = 0, completed = 0, alerts = 0;\r\n\r\n sops.forEach(sop => {\r\n if (sop.layout === 'spreadsheet') {\r\n sop.persons.forEach(p => {\r\n sop.tasks.forEach(t => {\r\n total++;\r\n if (sop.gridData[p][t.name]) completed++;\r\n });\r\n });\r\n } else if (sop.steps) {\r\n total += sop.steps.length;\r\n completed += sop.steps.filter(s => s.completed).length;\r\n }\r\n\r\n \/\/ SOP-level alerts\r\n if (sop.endDate) {\r\n const days = getDaysRemaining(sop.endDate);\r\n if (days !== null && ((days >= 0 && days <= alertDaysBefore) || (showOverdueAlerts && days < 0))) {\r\n alerts++;\r\n }\r\n }\r\n \r\n \/\/ Step-level alerts\r\n if (sop.steps) {\r\n sop.steps.forEach(step => {\r\n if (!step.completed) {\r\n \/\/ Single date alerts\r\n if (step.dueDate && !step.recurrenceType) {\r\n const days = getDaysRemaining(step.dueDate);\r\n if (days !== null && ((days >= 0 && days <= alertDaysBefore) || (showOverdueAlerts && days < 0))) {\r\n alerts++;\r\n }\r\n }\r\n \/\/ Recurring alerts - count if within alert window\r\n const recurringStatus = getRecurringStepStatus(step);\r\n if (recurringStatus && recurringStatus.daysRemaining !== null && recurringStatus.daysRemaining <= alertDaysBefore) {\r\n alerts++;\r\n }\r\n }\r\n });\r\n }\r\n });\r\n\r\n document.getElementById('totalSOPs').textContent = sops.length;\r\n document.getElementById('totalItems').textContent = total;\r\n document.getElementById('completedItems').textContent = completed;\r\n document.getElementById('alertsCount').textContent = alerts;\r\n }\r\n\r\n function renderCategoryList() {\r\n const list = document.getElementById('categoryList');\r\n const allCount = sops.length;\r\n const counts = {};\r\n categories.forEach(c => {\r\n counts[c.id] = sops.filter(s => s.category === c.id).length;\r\n });\r\n\r\n let html = `\r\n <li class=\"category-item ${currentCategory === 'all' ? 'active' : ''}\" onclick=\"selectCategory('all')\">\r\n <span>\ud83d\udccb All SOPs<\/span>\r\n <span class=\"category-count\">${allCount}<\/span>\r\n <\/li>\r\n `;\r\n categories.forEach(c => {\r\n html += `\r\n <li class=\"category-item ${currentCategory === c.id ? 'active' : ''}\" onclick=\"selectCategory('${c.id}')\">\r\n <span>${c.icon} ${c.name}<\/span>\r\n <span class=\"category-count\">${counts[c.id] || 0}<\/span>\r\n <\/li>\r\n `;\r\n });\r\n list.innerHTML = html;\r\n }\r\n\r\n function renderSOPList() {\r\n const search = document.getElementById('searchInput').value.toLowerCase();\r\n let filtered = sops;\r\n if (currentCategory !== 'all') filtered = filtered.filter(s => s.category === currentCategory);\r\n if (search) filtered = filtered.filter(s => s.title.toLowerCase().includes(search));\r\n\r\n const list = document.getElementById('sopList');\r\n if (filtered.length === 0) {\r\n list.innerHTML = '<div class=\"empty-state\"><div class=\"empty-state-icon\">\ud83d\udd0d<\/div><h3>No SOPs Found<\/h3><\/div>';\r\n return;\r\n }\r\n\r\n const icons = { 'spreadsheet': '\ud83d\udcca', 'standard': '\ud83d\udccb', 'checklist': '\u2705', 'flow': '\ud83d\udd04', 'decision': '\ud83c\udf33', 'troubleshoot': '\ud83d\udd27', 'quick': '\u26a1' };\r\n const html = filtered.map(sop => {\r\n const cat = categories.find(c => c.id === sop.category);\r\n let total = 0, completed = 0;\r\n if (sop.layout === 'spreadsheet') {\r\n sop.persons.forEach(p => {\r\n sop.tasks.forEach(t => {\r\n total++;\r\n if (sop.gridData[p][t.name]) completed++;\r\n });\r\n });\r\n } else if (sop.steps) {\r\n total = sop.steps.length;\r\n completed = sop.steps.filter(s => s.completed).length;\r\n }\r\n const pct = total > 0 ? Math.round((completed \/ total) * 100) : 0;\r\n\r\n let badge = '';\r\n let cardClass = '';\r\n if (sop.endDate) {\r\n const status = getDateStatus(sop.endDate);\r\n if (status && (status.class === 'overdue' || status.class === 'due-soon')) {\r\n badge = `<div class=\"due-badge ${status.class}\">${status.text}<\/div>`;\r\n cardClass = status.class;\r\n }\r\n }\r\n\r\n let dateInfo = '';\r\n if (sop.startDate && sop.endDate) {\r\n const start = new Date(sop.startDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric'});\r\n const end = new Date(sop.endDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric'});\r\n dateInfo = `<span>\ud83d\udcc5 ${start} \u2192 ${end}<\/span>`;\r\n } else if (sop.endDate) {\r\n const end = new Date(sop.endDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric'});\r\n dateInfo = `<span>\ud83d\udcc5 Due: ${end}<\/span>`;\r\n }\r\n\r\n return `\r\n <div class=\"sop-card ${cardClass}\">\r\n ${badge}\r\n <h3 class=\"sop-title\">${sop.title}<\/h3>\r\n <div class=\"sop-meta\">\r\n <span>\ud83d\udcc2 ${cat ? cat.icon + ' ' + cat.name : sop.category}<\/span>\r\n ${dateInfo}\r\n <span>${icons[sop.layout] || '\ud83d\udccb'} ${sop.layout}<\/span>\r\n <span>\ud83d\udcdd ${total} items<\/span>\r\n <\/div>\r\n <div class=\"sop-progress\">\r\n <div class=\"sop-progress-bar\" style=\"width: ${pct}%\"><\/div>\r\n <\/div>\r\n <div style=\"color: var(--gray); font-size: 0.9rem; margin-top: 5px;\">${completed}\/${total} (${pct}%)<\/div>\r\n <div class=\"sop-actions\">\r\n <button class=\"btn btn-success btn-sm\" onclick=\"executeSOP(${sop.id})\">\u25b6\ufe0f View<\/button>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"editSOP(${sop.id})\">\u270f\ufe0f Edit<\/button>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"deleteSOP(${sop.id})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n list.innerHTML = html;\r\n }\r\n\r\n function showAlertsModal() {\r\n const alerts = [];\r\n \r\n sops.forEach(sop => {\r\n \/\/ SOP-level due date\r\n if (sop.endDate) {\r\n const days = getDaysRemaining(sop.endDate);\r\n \/\/ Check if within alert window and respect overdue setting\r\n if (days !== null && ((days >= 0 && days <= alertDaysBefore) || (showOverdueAlerts && days < 0))) {\r\n const cat = categories.find(c => c.id === sop.category);\r\n const status = getDateStatus(sop.endDate);\r\n alerts.push({\r\n id: sop.id,\r\n title: sop.title,\r\n subtitle: 'SOP Due Date',\r\n category: cat ? `${cat.icon} ${cat.name}` : sop.category,\r\n endDate: new Date(sop.endDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric'}),\r\n status: status,\r\n days: days\r\n });\r\n }\r\n }\r\n \r\n \/\/ Step-level due dates and recurring tasks\r\n if (sop.steps) {\r\n sop.steps.forEach((step, idx) => {\r\n if (!step.completed) {\r\n \/\/ Single due date\r\n if (step.dueDate && !step.recurrenceType) {\r\n const days = getDaysRemaining(step.dueDate);\r\n \/\/ Use alertDaysBefore setting and respect overdue setting\r\n if (days !== null && ((days >= 0 && days <= alertDaysBefore) || (showOverdueAlerts && days < 0))) {\r\n const cat = categories.find(c => c.id === sop.category);\r\n const status = getDateStatus(step.dueDate);\r\n alerts.push({\r\n id: sop.id,\r\n title: sop.title,\r\n subtitle: `Step ${idx + 1}: ${step.description.substring(0, 40)}${step.description.length > 40 ? '...' : ''}`,\r\n category: cat ? `${cat.icon} ${cat.name}` : sop.category,\r\n endDate: new Date(step.dueDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric'}),\r\n status: status,\r\n days: days\r\n });\r\n }\r\n }\r\n \r\n \/\/ Recurring tasks - show if within alert window\r\n const recurringStatus = getRecurringStepStatus(step);\r\n if (recurringStatus && recurringStatus.daysRemaining !== null && recurringStatus.daysRemaining <= alertDaysBefore) {\r\n const cat = categories.find(c => c.id === sop.category);\r\n let statusText = 'Due Soon';\r\n let statusClass = 'due-soon';\r\n \r\n if (recurringStatus.daysRemaining === 0) {\r\n statusText = 'Due Today';\r\n statusClass = 'overdue';\r\n } else if (recurringStatus.daysRemaining === 1) {\r\n statusText = 'Due Tomorrow';\r\n statusClass = 'due-soon';\r\n } else {\r\n statusText = `${recurringStatus.daysRemaining} days left`;\r\n statusClass = 'due-soon';\r\n }\r\n \r\n alerts.push({\r\n id: sop.id,\r\n title: sop.title,\r\n subtitle: `Step ${idx + 1}: ${step.description.substring(0, 40)}${step.description.length > 40 ? '...' : ''}`,\r\n category: cat ? `${cat.icon} ${cat.name}` : sop.category,\r\n endDate: recurringStatus.text,\r\n status: { text: statusText, class: statusClass },\r\n days: recurringStatus.daysRemaining\r\n });\r\n }\r\n }\r\n });\r\n }\r\n });\r\n\r\n alerts.sort((a, b) => a.days - b.days);\r\n\r\n const list = document.getElementById('alertsList');\r\n if (alerts.length === 0) {\r\n list.innerHTML = '<div class=\"empty-state\"><div style=\"font-size: 3rem; margin-bottom: 15px;\">\u2705<\/div><h3>No Alerts<\/h3><p>All tasks on track!<\/p><\/div>';\r\n } else {\r\n list.innerHTML = alerts.map(a => `\r\n <div class=\"alert-item ${a.status.class}\">\r\n <div>\r\n <h4>${a.title}<\/h4>\r\n <p style=\"font-size: 0.9rem; color: var(--dark); margin: 3px 0;\">${a.subtitle}<\/p>\r\n <p style=\"font-size: 0.85rem;\">\ud83d\udcc2 ${a.category} | \ud83d\udcc5 Due: ${a.endDate}<\/p>\r\n <\/div>\r\n <div style=\"text-align: right;\">\r\n <strong style=\"color: ${a.status.class === 'overdue' ? 'var(--danger)' : 'var(--warning)'};\">${a.status.text}<\/strong><br>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"closeAlertsModal(); executeSOP(${a.id})\" style=\"margin-top: 8px;\">View<\/button>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n document.getElementById('alertsModal').classList.add('active');\r\n }\r\n\r\n function closeAlertsModal() {\r\n document.getElementById('alertsModal').classList.remove('active');\r\n }\r\n\r\n function deleteSOP(id) {\r\n deleteTarget = id;\r\n document.getElementById('deleteModal').classList.add('active');\r\n }\r\n\r\n function closeDeleteModal() {\r\n document.getElementById('deleteModal').classList.remove('active');\r\n deleteTarget = null;\r\n }\r\n\r\n function confirmDelete() {\r\n if (!deleteTarget) return;\r\n sops = sops.filter(s => s.id !== deleteTarget);\r\n saveSOPs();\r\n closeDeleteModal();\r\n showToast('\u2705 Deleted!');\r\n renderDashboard();\r\n }\r\n\r\n function exportData() {\r\n const data = { version: '5.0', exportDate: new Date().toISOString(), sops, categories };\r\n const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application\/json' });\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `SOP_Backup_${new Date().toISOString().split('T')[0]}.json`;\r\n a.click();\r\n URL.revokeObjectURL(url);\r\n showToast('\u2705 Exported!');\r\n }\r\n\r\n function importData() {\r\n document.getElementById('importFileInput').click();\r\n }\r\n\r\n function handleImport(e) {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = function(ev) {\r\n try {\r\n const data = JSON.parse(ev.target.result);\r\n if (!data.sops || !data.categories) {\r\n showToast('\u26a0\ufe0f Invalid file!', 'warning');\r\n return;\r\n }\r\n if (confirm('Replace all data?')) {\r\n sops = data.sops;\r\n categories = data.categories;\r\n saveSOPs();\r\n saveCategories();\r\n renderDashboard();\r\n showToast('\u2705 Imported!');\r\n }\r\n } catch (err) {\r\n showToast('\u26a0\ufe0f Error reading file!', 'warning');\r\n }\r\n };\r\n reader.readAsText(file);\r\n e.target.value = '';\r\n }\r\n\r\n function showSettingsModal() {\r\n renderThemeSelector();\r\n renderCategoryManager();\r\n \/\/ Load alert settings\r\n document.getElementById('alertDaysBefore').value = alertDaysBefore;\r\n document.getElementById('showOverdueAlerts').checked = showOverdueAlerts;\r\n document.getElementById('settingsModal').classList.add('active');\r\n }\r\n\r\n function closeSettingsModal() {\r\n document.getElementById('settingsModal').classList.remove('active');\r\n }\r\n\r\n function renderThemeSelector() {\r\n const themes = [\r\n {id: 'blue', start: '#667eea', end: '#764ba2'},\r\n {id: 'green', start: '#10b981', end: '#059669'},\r\n {id: 'purple', start: '#8b5cf6', end: '#7c3aed'},\r\n {id: 'red', start: '#ef4444', end: '#dc2626'},\r\n {id: 'orange', start: '#f59e0b', end: '#d97706'}\r\n ];\r\n \r\n const html = themes.map(t => `\r\n <div onclick=\"changeTheme('${t.id}')\" style=\"cursor: pointer; text-align: center; padding: 8px; border: 3px solid ${currentTheme === t.id ? 'var(--primary)' : 'var(--border)'}; border-radius: 8px;\">\r\n <div style=\"height: 30px; background: linear-gradient(135deg, ${t.start}, ${t.end}); border-radius: 4px; margin-bottom: 5px;\"><\/div>\r\n <span style=\"font-size: 0.8rem; text-transform: capitalize;\">${t.id}<\/span>\r\n <\/div>\r\n `).join('');\r\n \r\n document.getElementById('themeSelector').innerHTML = html;\r\n }\r\n\r\n function changeTheme(theme) {\r\n currentTheme = theme;\r\n document.body.className = 'theme-' + theme;\r\n localStorage.setItem('theme', theme);\r\n renderThemeSelector();\r\n showToast('\u2705 Theme changed!');\r\n }\r\n\r\n function renderCategoryManager() {\r\n const html = categories.map(cat => {\r\n const count = sops.filter(s => s.category === cat.id).length;\r\n return `\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; padding: 10px; border: 2px solid var(--border); border-radius: 8px; margin-bottom: 8px;\">\r\n <div><span style=\"font-size: 1.2rem;\">${cat.icon}<\/span> <strong>${cat.name}<\/strong> <span style=\"color: var(--gray);\">(${count})<\/span><\/div>\r\n <div style=\"display: flex; gap: 5px;\">\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"editCategory('${cat.id}')\">\u270f\ufe0f<\/button>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"deleteCategory('${cat.id}')\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n document.getElementById('categoryManagerList').innerHTML = html || '<p style=\"color: var(--gray); text-align: center;\">No categories<\/p>';\r\n }\r\n\r\n function editCategory(id) {\r\n const cat = categories.find(c => c.id === id);\r\n if (!cat) return;\r\n editCategoryId = id;\r\n document.getElementById('editCategoryName').value = cat.name;\r\n document.getElementById('editCategoryIcon').value = cat.icon;\r\n closeSettingsModal();\r\n document.getElementById('editCategoryModal').classList.add('active');\r\n }\r\n\r\n function closeEditCategoryModal() {\r\n document.getElementById('editCategoryModal').classList.remove('active');\r\n editCategoryId = null;\r\n }\r\n\r\n function saveEditCategory() {\r\n const name = document.getElementById('editCategoryName').value.trim();\r\n const icon = document.getElementById('editCategoryIcon').value.trim();\r\n if (!name) {\r\n showToast('\u26a0\ufe0f Enter name!', 'warning');\r\n return;\r\n }\r\n const idx = categories.findIndex(c => c.id === editCategoryId);\r\n if (idx !== -1) {\r\n categories[idx].name = name;\r\n categories[idx].icon = icon || categories[idx].icon;\r\n saveCategories();\r\n closeEditCategoryModal();\r\n renderDashboard();\r\n showToast('\u2705 Category updated!');\r\n }\r\n }\r\n\r\n function deleteCategory(id) {\r\n const count = sops.filter(s => s.category === id).length;\r\n if (count > 0) {\r\n showToast(`\u26a0\ufe0f Cannot delete! ${count} SOPs use this.`, 'warning');\r\n return;\r\n }\r\n if (!confirm('Delete this category?')) return;\r\n categories = categories.filter(c => c.id !== id);\r\n saveCategories();\r\n renderCategoryManager();\r\n renderDashboard();\r\n showToast('\u2705 Deleted!');\r\n }\r\n\r\n function saveAlertSettings() {\r\n const days = parseInt(document.getElementById('alertDaysBefore').value);\r\n const showOverdue = document.getElementById('showOverdueAlerts').checked;\r\n \r\n if (days < 1 || days > 30) {\r\n showToast('\u26a0\ufe0f Days must be between 1 and 30!', 'warning');\r\n return;\r\n }\r\n \r\n alertDaysBefore = days;\r\n showOverdueAlerts = showOverdue;\r\n \r\n localStorage.setItem('alertDaysBefore', days);\r\n localStorage.setItem('showOverdueAlerts', showOverdue);\r\n \r\n showToast('\u2705 Alert settings saved!');\r\n }\r\n\r\n function showToast(msg, type = 'success') {\r\n const toast = document.getElementById('toast');\r\n document.getElementById('toastMessage').textContent = msg;\r\n toast.style.background = type === 'warning' ? 'var(--warning)' : 'var(--success)';\r\n toast.classList.add('show');\r\n setTimeout(() => toast.classList.remove('show'), 3000);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SOP Management System – Complete \ud83d\udccb SOP Manager Pro \ud83d\udcc5 \u2699\ufe0f Settings \u2795 New SOP \ud83c\udfe0 Dashboard \ud83d\udcc2 Categories \u2795 0 Total SOPs 0 Total Items 0 Completed 0 \u26a0\ufe0f Date Alerts Create New SOP Cancel \ud83d\udcbe Save SOP Title * Category * Select Category Start Date (Optional) End Date (Optional) Purpose\/Objective Selected Layout SOP […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2696","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/comments?post=2696"}],"version-history":[{"count":55,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2696\/revisions"}],"predecessor-version":[{"id":3162,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2696\/revisions\/3162"}],"wp:attachment":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/media?parent=2696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n SOP Management System - Complete<\/title>\r\n <style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n :root {\r\n --primary: #3b82f6; --success: #10b981; --warning: #f59e0b;\r\n --danger: #ef4444; --dark: #1e293b; --gray: #64748b;\r\n --light-gray: #f1f5f9; --white: #ffffff; --border: #e2e8f0;\r\n --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\r\n --bg-start: #667eea;\r\n --bg-end: #764ba2;\r\n }\r\n \r\n body.theme-blue { --primary: #3b82f6; --bg-start: #667eea; --bg-end: #764ba2; }\r\n body.theme-green { --primary: #10b981; --bg-start: #10b981; --bg-end: #059669; }\r\n body.theme-purple { --primary: #8b5cf6; --bg-start: #8b5cf6; --bg-end: #7c3aed; }\r\n body.theme-red { --primary: #ef4444; --bg-start: #ef4444; --bg-end: #dc2626; }\r\n body.theme-orange { --primary: #f59e0b; --bg-start: #f59e0b; --bg-end: #d97706; }\r\n \r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);\r\n min-height: 100vh; color: var(--dark);\r\n }\r\n .header {\r\n background: var(--white); box-shadow: var(--shadow);\r\n padding: 15px 0; position: sticky; top: 0; z-index: 100;\r\n }\r\n .header-content {\r\n max-width: 1400px; margin: 0 auto; padding: 0 20px;\r\n display: flex; justify-content: space-between; align-items: center;\r\n flex-wrap: wrap; gap: 15px;\r\n }\r\n .logo { display: flex; align-items: center; gap: 12px; }\r\n .logo h1 {\r\n font-size: 1.6rem;\r\n background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n }\r\n .current-date { padding: 8px 15px; background: var(--light-gray);\r\n border-radius: 8px; font-weight: 600; font-size: 0.9rem;\r\n }\r\n .header-actions { display: flex; gap: 10px; flex-wrap: wrap; }\r\n .btn {\r\n padding: 8px 16px; border: none; border-radius: 8px;\r\n cursor: pointer; font-size: 0.9rem; font-weight: 600;\r\n transition: all 0.3s; display: inline-flex;\r\n align-items: center; gap: 6px; box-shadow: var(--shadow);\r\n }\r\n .btn:hover { transform: translateY(-2px); }\r\n .btn-primary { background: var(--primary); color: white; }\r\n .btn-success { background: var(--success); color: white; }\r\n .btn-secondary { background: var(--gray); color: white; }\r\n .btn-danger { background: var(--danger); color: white; }\r\n .btn-warning { background: var(--warning); color: white; }\r\n .btn-sm { padding: 5px 10px; font-size: 0.85rem; }\r\n .container { max-width: 1400px; margin: 20px auto; padding: 0 20px; }\r\n .dashboard { display: grid; grid-template-columns: 250px 1fr; gap: 20px; }\r\n .sidebar {\r\n background: var(--white); border-radius: 12px; padding: 20px;\r\n height: fit-content; position: sticky; top: 90px; box-shadow: var(--shadow);\r\n }\r\n .sidebar h3 {\r\n margin-bottom: 15px; font-size: 1.1rem;\r\n display: flex; justify-content: space-between; align-items: center;\r\n }\r\n .category-list { list-style: none; }\r\n .category-item {\r\n padding: 10px 15px; margin-bottom: 8px; border-radius: 8px;\r\n cursor: pointer; transition: all 0.3s;\r\n display: flex; justify-content: space-between; align-items: center;\r\n }\r\n .category-item:hover { background: var(--light-gray); }\r\n .category-item.active { background: var(--primary); color: white; }\r\n .category-count {\r\n background: var(--light-gray); padding: 2px 8px;\r\n border-radius: 12px; font-size: 0.85rem; font-weight: 600;\r\n }\r\n .category-item.active .category-count {\r\n background: rgba(255, 255, 255, 0.3); color: white;\r\n }\r\n .main-content {\r\n background: var(--white); border-radius: 12px;\r\n padding: 25px; box-shadow: var(--shadow);\r\n }\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\r\n gap: 15px; margin-bottom: 25px;\r\n }\r\n .stat-card {\r\n background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);\r\n color: white; padding: 20px; border-radius: 12px;\r\n box-shadow: var(--shadow); cursor: pointer; transition: all 0.3s;\r\n }\r\n .stat-card:hover { transform: translateY(-3px); }\r\n .stat-card h3 { font-size: 2rem; margin-bottom: 5px; }\r\n .stat-card p { opacity: 0.9; font-size: 0.9rem; }\r\n .search-bar { margin-bottom: 25px; }\r\n .search-bar input {\r\n width: 100%; padding: 12px 15px; border: 2px solid var(--border);\r\n border-radius: 8px; font-size: 1rem;\r\n }\r\n .sop-list { display: grid; gap: 15px; }\r\n .sop-card {\r\n border: 2px solid var(--border); border-radius: 12px;\r\n padding: 20px; transition: all 0.3s; position: relative;\r\n }\r\n .sop-card:hover {\r\n border-color: var(--primary); box-shadow: var(--shadow);\r\n transform: translateY(-2px);\r\n }\r\n .sop-card.overdue { border-color: var(--danger); background: #fee2e2; }\r\n .sop-card.due-soon { border-color: var(--warning); background: #fef3c7; }\r\n .due-badge {\r\n position: absolute; top: 15px; right: 15px;\r\n padding: 5px 12px; border-radius: 15px;\r\n font-size: 0.85rem; font-weight: 600;\r\n }\r\n .due-badge.overdue { background: var(--danger); color: white; }\r\n .due-badge.due-soon { background: var(--warning); color: white; }\r\n .due-badge.on-track { background: var(--success); color: white; }\r\n .sop-title { font-size: 1.2rem; margin-bottom: 8px; }\r\n .sop-meta {\r\n display: flex; gap: 15px; color: var(--gray);\r\n font-size: 0.9rem; margin: 10px 0; flex-wrap: wrap;\r\n }\r\n .sop-progress {\r\n width: 100%; height: 8px; background: var(--light-gray);\r\n border-radius: 10px; overflow: hidden; margin: 10px 0;\r\n }\r\n .sop-progress-bar {\r\n height: 100%; background: var(--success); transition: width 0.3s;\r\n }\r\n .sop-actions { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; }\r\n .modal {\r\n display: none; position: fixed; top: 0; left: 0;\r\n width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);\r\n z-index: 1000; align-items: center; justify-content: center;\r\n padding: 20px; overflow-y: auto;\r\n }\r\n .modal.active { display: flex; }\r\n .modal-content {\r\n background: white; padding: 30px; border-radius: 12px;\r\n max-width: 900px; width: 100%; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);\r\n max-height: 90vh; overflow-y: auto;\r\n }\r\n .modal-header {\r\n display: flex; justify-content: space-between;\r\n align-items: center; margin-bottom: 20px;\r\n }\r\n .close-btn {\r\n background: none; border: none; font-size: 1.5rem;\r\n cursor: pointer; color: var(--gray);\r\n }\r\n .form-grid {\r\n display: grid; grid-template-columns: 1fr 1fr;\r\n gap: 20px; margin-bottom: 25px;\r\n }\r\n .form-group { margin-bottom: 15px; }\r\n .form-group.full-width { grid-column: 1 \/ -1; }\r\n .form-group label {\r\n display: block; margin-bottom: 8px;\r\n font-weight: 600; color: var(--dark);\r\n }\r\n .form-group input, .form-group select, .form-group textarea {\r\n width: 100%; padding: 10px 12px; border: 2px solid var(--border);\r\n border-radius: 8px; font-size: 1rem; font-family: inherit;\r\n }\r\n .form-group input:focus, .form-group select:focus, .form-group textarea:focus {\r\n outline: none; border-color: var(--primary);\r\n }\r\n .form-group textarea { min-height: 80px; resize: vertical; }\r\n .layout-selection {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 15px; margin-top: 20px;\r\n }\r\n .layout-card {\r\n border: 3px solid var(--border); border-radius: 12px;\r\n padding: 15px; cursor: pointer; transition: all 0.3s; text-align: center;\r\n }\r\n .layout-card:hover {\r\n border-color: var(--primary); transform: translateY(-3px);\r\n }\r\n .layout-icon { font-size: 2.5rem; margin-bottom: 10px; }\r\n .steps-section { margin-top: 30px; }\r\n .section-header {\r\n display: flex; justify-content: space-between;\r\n align-items: center; margin-bottom: 15px;\r\n }\r\n .steps-container { display: grid; gap: 12px; }\r\n .step-card {\r\n background: var(--light-gray); border: 2px solid var(--border);\r\n border-radius: 12px; padding: 15px; position: relative;\r\n }\r\n .step-card.completed { background: #d1fae5; border-color: var(--success); }\r\n .step-header {\r\n display: flex; align-items: center; gap: 12px; margin-bottom: 12px;\r\n }\r\n .step-number {\r\n background: var(--primary); color: white;\r\n width: 32px; height: 32px; border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-weight: 700; font-size: 1rem; flex-shrink: 0;\r\n }\r\n .step-card.completed .step-number { background: var(--success); }\r\n .step-actions {\r\n display: flex; gap: 8px; justify-content: flex-end;\r\n margin-top: 12px; flex-wrap: wrap;\r\n }\r\n .step-content {\r\n display: grid; grid-template-columns: 2fr 1fr 1fr;\r\n gap: 12px; align-items: start;\r\n }\r\n .checklist-item {\r\n display: flex; align-items: center; gap: 12px;\r\n padding: 12px; background: white;\r\n border: 2px solid var(--border); border-radius: 8px;\r\n }\r\n .flow-step {\r\n position: relative; padding-left: 50px;\r\n }\r\n .flow-step::before {\r\n content: ''; position: absolute;\r\n left: 17px; top: 40px; bottom: -10px; width: 2px;\r\n background: var(--primary);\r\n }\r\n .flow-step:last-child::before { display: none; }\r\n .flow-arrow {\r\n position: absolute; left: 10px; top: 10px;\r\n width: 20px; height: 20px; background: var(--primary);\r\n color: white; border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 0.8rem;\r\n }\r\n .decision-node {\r\n background: #fef3c7; border: 2px solid #fbbf24;\r\n border-radius: 8px; padding: 15px; margin: 10px 0;\r\n }\r\n .decision-option {\r\n margin-left: 30px; margin-top: 10px;\r\n padding-left: 15px; border-left: 3px solid var(--primary);\r\n }\r\n .troubleshoot-problem {\r\n background: #fee2e2; border: 2px solid var(--danger);\r\n border-radius: 8px; padding: 15px; margin-bottom: 15px;\r\n }\r\n .troubleshoot-solution {\r\n background: #d1fae5; border: 2px solid var(--success);\r\n border-radius: 8px; padding: 15px;\r\n margin-left: 30px; margin-top: 10px;\r\n }\r\n .task-config-card {\r\n background: var(--light-gray); border: 2px solid var(--border);\r\n border-radius: 12px; padding: 15px;\r\n }\r\n .task-icon-input {\r\n font-size: 2rem; width: 60px; height: 60px;\r\n text-align: center; border: 2px solid var(--border); border-radius: 8px;\r\n }\r\n .spreadsheet-table {\r\n width: 100%; border-collapse: separate; border-spacing: 0;\r\n }\r\n .spreadsheet-table th {\r\n background: var(--primary); color: white;\r\n padding: 12px 8px; text-align: center; font-weight: 600;\r\n border: 1px solid rgba(255,255,255,0.1);\r\n }\r\n .spreadsheet-table td {\r\n padding: 12px 8px; text-align: center; border: 1px solid var(--border);\r\n }\r\n .spreadsheet-table td:first-child {\r\n text-align: left; padding-left: 15px; font-weight: 600;\r\n }\r\n .task-cell { min-height: 50px; cursor: pointer; }\r\n .task-cell.completed { background: #d1fae5 !important; }\r\n .task-checkbox {\r\n width: 24px; height: 24px; cursor: pointer; transform: scale(1.2);\r\n }\r\n .task-checkbox:disabled {\r\n cursor: not-allowed; opacity: 0.5;\r\n }\r\n .lock-btn {\r\n background: var(--gray); color: white;\r\n border: none; padding: 4px 8px; border-radius: 4px;\r\n cursor: pointer; font-size: 0.8rem;\r\n transition: all 0.3s;\r\n }\r\n .lock-btn.locked {\r\n background: var(--danger);\r\n }\r\n .lock-btn:hover {\r\n transform: scale(1.05);\r\n }\r\n .empty-state {\r\n text-align: center; padding: 50px 20px; color: var(--gray);\r\n }\r\n .empty-state-icon { font-size: 3.5rem; margin-bottom: 15px; opacity: 0.5; }\r\n .toast {\r\n position: fixed; bottom: 30px; right: 30px;\r\n background: var(--success); color: white;\r\n padding: 15px 25px; border-radius: 8px;\r\n box-shadow: 0 10px 15px rgba(0,0,0,0.2);\r\n display: none; z-index: 1001;\r\n }\r\n .toast.show { display: block; animation: slideIn 0.3s ease; }\r\n @keyframes slideIn {\r\n from { transform: translateX(400px); opacity: 0; }\r\n to { transform: translateX(0); opacity: 1; }\r\n }\r\n .alerts-list { display: grid; gap: 12px; margin-top: 15px; }\r\n .alert-item {\r\n padding: 15px; border-radius: 8px; border: 2px solid;\r\n display: flex; justify-content: space-between; align-items: center;\r\n }\r\n .alert-item.overdue { border-color: var(--danger); background: #fee2e2; }\r\n .alert-item.due-soon { border-color: var(--warning); background: #fef3c7; }\r\n @media (max-width: 1024px) {\r\n .dashboard { grid-template-columns: 1fr; }\r\n .sidebar { position: static; }\r\n .form-grid, .step-content { grid-template-columns: 1fr; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"header\">\r\n <div class=\"header-content\">\r\n <div class=\"logo\">\r\n <span style=\"font-size: 2rem;\">\ud83d\udccb<\/span>\r\n <h1>SOP Manager Pro<\/h1>\r\n <\/div>\r\n <div class=\"current-date\">\r\n <span>\ud83d\udcc5<\/span>\r\n <span id=\"currentDate\"><\/span>\r\n <\/div>\r\n <div class=\"header-actions\">\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"showSettingsModal()\">\u2699\ufe0f Settings<\/button>\r\n <button class=\"btn btn-primary\" onclick=\"showLayoutModal()\">\u2795 New SOP<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"showDashboard()\">\ud83c\udfe0 Dashboard<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"container\">\r\n <div id=\"dashboardView\" class=\"dashboard\">\r\n <div class=\"sidebar\">\r\n <h3>\r\n \ud83d\udcc2 Categories\r\n <button class=\"btn btn-sm btn-primary\" onclick=\"showAddCategoryModal()\">\u2795<\/button>\r\n <\/h3>\r\n <ul class=\"category-list\" id=\"categoryList\"><\/ul>\r\n <\/div>\r\n\r\n <div class=\"main-content\">\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-card\">\r\n <h3 id=\"totalSOPs\">0<\/h3>\r\n <p>Total SOPs<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3 id=\"totalItems\">0<\/h3>\r\n <p>Total Items<\/p>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <h3 id=\"completedItems\">0<\/h3>\r\n <p>Completed<\/p>\r\n <\/div>\r\n <div class=\"stat-card\" onclick=\"showAlertsModal()\">\r\n <h3 id=\"alertsCount\">0<\/h3>\r\n <p>\u26a0\ufe0f Date Alerts<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"search-bar\">\r\n <input type=\"text\" id=\"searchInput\" placeholder=\"\ud83d\udd0d Search SOPs...\" oninput=\"renderSOPList()\">\r\n <\/div>\r\n\r\n <div class=\"sop-list\" id=\"sopList\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"editorView\" style=\"display:none;\" class=\"main-content\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid var(--border); flex-wrap: wrap; gap: 15px;\">\r\n <h2 id=\"editorTitle\">Create New SOP<\/h2>\r\n <div style=\"display: flex; gap: 10px;\">\r\n <button class=\"btn btn-secondary\" onclick=\"showDashboard()\">Cancel<\/button>\r\n <button class=\"btn btn-success\" onclick=\"saveSOP()\">\ud83d\udcbe Save<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-grid\">\r\n <div class=\"form-group full-width\">\r\n <label>SOP Title *<\/label>\r\n <input type=\"text\" id=\"sopTitle\" placeholder=\"e.g., Weekly Kitchen Checklist\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>Category *<\/label>\r\n <select id=\"sopCategory\" required>\r\n <option value=\"\">Select Category<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>Start Date (Optional)<\/label>\r\n <input type=\"date\" id=\"sopStartDate\">\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label>End Date (Optional)<\/label>\r\n <input type=\"date\" id=\"sopEndDate\">\r\n <\/div>\r\n\r\n <div class=\"form-group full-width\">\r\n <label>Purpose\/Objective<\/label>\r\n <textarea id=\"sopPurpose\" placeholder=\"Describe the purpose...\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"form-group full-width\">\r\n <label>Selected Layout<\/label>\r\n <input type=\"text\" id=\"sopLayout\" readonly style=\"background: var(--light-gray);\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"editorContent\"><\/div>\r\n <\/div>\r\n\r\n <div id=\"executeView\" style=\"display:none;\" class=\"main-content\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 2px solid var(--border); flex-wrap: wrap; gap: 15px;\">\r\n <div>\r\n <h2 id=\"executeTitle\">SOP Title<\/h2>\r\n <div style=\"display: flex; gap: 15px; color: var(--gray); font-size: 0.9rem; margin-top: 8px; flex-wrap: wrap;\">\r\n <span id=\"executeCategory\"><\/span>\r\n <span id=\"executeDates\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div style=\"display: flex; gap: 10px;\">\r\n <button class=\"btn btn-secondary\" onclick=\"showDashboard()\">\u2190 Back<\/button>\r\n <button class=\"btn btn-warning\" onclick=\"resetSOP()\">\ud83d\udd04 Reset SOP<\/button>\r\n <button class=\"btn btn-primary\" onclick=\"editCurrentSOP()\">\u270f\ufe0f Edit<\/button>\r\n <button class=\"btn btn-success\" onclick=\"saveProgress()\">\ud83d\udcbe Save<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div style=\"margin-bottom: 25px; padding: 20px; background: var(--light-gray); border-radius: 12px;\">\r\n <h3 style=\"margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;\">\r\n <span>\ud83d\udcca Overall Progress<\/span>\r\n <span id=\"progressText\">0\/0 (0%)<\/span>\r\n <\/h3>\r\n <div style=\"width: 100%; height: 30px; background: white; border-radius: 15px; overflow: hidden;\">\r\n <div id=\"progressBar\" style=\"height: 100%; background: linear-gradient(90deg, #10b981, #059669); width: 0%; transition: width 0.5s; display: flex; align-items: center; justify-content: flex-end; padding-right: 15px; color: white; font-weight: 700;\">\r\n <span id=\"progressPercent\">0%<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"executeContent\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"layoutModal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h3>\ud83c\udfa8 Choose SOP Layout<\/h3>\r\n <button class=\"close-btn\" onclick=\"closeLayoutModal()\">\u00d7<\/button>\r\n <\/div>\r\n <div class=\"layout-selection\">\r\n <div class=\"layout-card\" onclick=\"selectLayout('spreadsheet')\">\r\n <div class=\"layout-icon\">\ud83d\udcca<\/div>\r\n <h4>Spreadsheet Tracker<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">Task grid with persons\/days<\/p>\r\n <\/div>\r\n <div class=\"layout-card\" onclick=\"selectLayout('standard')\">\r\n <div class=\"layout-icon\">\ud83d\udccb<\/div>\r\n <h4>Standard Process<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">Step-by-step with details<\/p>\r\n <\/div>\r\n <div class=\"layout-card\" onclick=\"selectLayout('checklist')\">\r\n <div class=\"layout-icon\">\u2705<\/div>\r\n <h4>Checklist<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">Simple checkbox tasks<\/p>\r\n <\/div>\r\n <div class=\"layout-card\" onclick=\"selectLayout('flow')\">\r\n <div class=\"layout-icon\">\ud83d\udd04<\/div>\r\n <h4>Process Flow<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">Sequential workflow<\/p>\r\n <\/div>\r\n <div class=\"layout-card\" onclick=\"selectLayout('decision')\">\r\n <div class=\"layout-icon\">\ud83c\udf33<\/div>\r\n <h4>Decision Tree<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">If-then scenarios<\/p>\r\n <\/div>\r\n <div class=\"layout-card\" onclick=\"selectLayout('troubleshoot')\">\r\n <div class=\"layout-icon\">\ud83d\udd27<\/div>\r\n <h4>Troubleshooting<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">Problem-solution<\/p>\r\n <\/div>\r\n <div class=\"layout-card\" onclick=\"selectLayout('quick')\">\r\n <div class=\"layout-icon\">\u26a1<\/div>\r\n <h4>Quick Guide<\/h4>\r\n <p style=\"color: var(--gray); font-size: 0.85rem;\">Fast minimal docs<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"addCategoryModal\">\r\n <div class=\"modal-content\" style=\"max-width: 500px;\">\r\n <div class=\"modal-header\">\r\n <h3>\u2795 Add Category<\/h3>\r\n <button class=\"close-btn\" onclick=\"closeAddCategoryModal()\">\u00d7<\/button>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Category Name *<\/label>\r\n <input type=\"text\" id=\"newCategoryName\" placeholder=\"e.g., Kitchen Operations\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Icon (Emoji)<\/label>\r\n <input type=\"text\" id=\"newCategoryIcon\" placeholder=\"e.g., \ud83c\udf73\" maxlength=\"2\">\r\n <\/div>\r\n <div style=\"display: flex; gap: 10px; margin-top: 20px;\">\r\n <button class=\"btn btn-secondary\" onclick=\"closeAddCategoryModal()\" style=\"flex: 1;\">Cancel<\/button>\r\n <button class=\"btn btn-primary\" onclick=\"addCategory()\" style=\"flex: 1;\">Add<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"alertsModal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h3>\ud83d\udcc5 Date Alerts<\/h3>\r\n <button class=\"close-btn\" onclick=\"closeAlertsModal()\">\u00d7<\/button>\r\n <\/div>\r\n <div class=\"alerts-list\" id=\"alertsList\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"deleteModal\">\r\n <div class=\"modal-content\" style=\"max-width: 500px;\">\r\n <div class=\"modal-header\">\r\n <h3>\u26a0\ufe0f Confirm Delete<\/h3>\r\n <button class=\"close-btn\" onclick=\"closeDeleteModal()\">\u00d7<\/button>\r\n <\/div>\r\n <p>Are you sure you want to delete this SOP?<\/p>\r\n <div style=\"display: flex; gap: 10px; margin-top: 20px;\">\r\n <button class=\"btn btn-secondary\" onclick=\"closeDeleteModal()\" style=\"flex: 1;\">Cancel<\/button>\r\n <button class=\"btn btn-danger\" onclick=\"confirmDelete()\" style=\"flex: 1;\">Delete<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"settingsModal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h3>\u2699\ufe0f Settings<\/h3>\r\n <button class=\"close-btn\" onclick=\"closeSettingsModal()\">\u00d7<\/button>\r\n <\/div>\r\n <div style=\"display: grid; gap: 25px;\">\r\n <div style=\"border: 2px solid var(--border); border-radius: 12px; padding: 20px;\">\r\n <h4 style=\"margin-bottom: 15px;\">\ud83d\udcc1 Data Management<\/h4>\r\n <div style=\"display: flex; gap: 10px;\">\r\n <button class=\"btn btn-success\" onclick=\"exportData()\">\ud83d\udce4 Export<\/button>\r\n <button class=\"btn btn-primary\" onclick=\"importData()\">\ud83d\udce5 Import<\/button>\r\n <\/div>\r\n <\/div>\r\n <div style=\"border: 2px solid var(--border); border-radius: 12px; padding: 20px;\">\r\n <h4 style=\"margin-bottom: 15px;\">\ud83c\udfa8 Theme<\/h4>\r\n <div style=\"display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;\" id=\"themeSelector\"><\/div>\r\n <\/div>\r\n <div style=\"border: 2px solid var(--border); border-radius: 12px; padding: 20px;\">\r\n <h4 style=\"margin-bottom: 15px;\">\ud83d\udcc2 Categories<\/h4>\r\n <div id=\"categoryManagerList\"><\/div>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"closeSettingsModal(); showAddCategoryModal();\" style=\"margin-top: 10px;\">\u2795 Add<\/button>\r\n <\/div>\r\n <div style=\"border: 2px solid var(--border); border-radius: 12px; padding: 20px;\">\r\n <h4 style=\"margin-bottom: 15px;\">\ud83d\udd14 Alert Settings<\/h4>\r\n <div class=\"form-group\">\r\n <label>Alert Days Before Due Date<\/label>\r\n <input type=\"number\" id=\"alertDaysBefore\" min=\"1\" max=\"30\" value=\"3\" style=\"width: 100px; padding: 8px; border: 2px solid var(--border); border-radius: 6px;\">\r\n <p style=\"color: var(--gray); font-size: 0.85rem; margin-top: 5px;\">Tasks will show in alerts this many days before due date (default: 3 days)<\/p>\r\n <\/div>\r\n <div class=\"form-group\" style=\"margin-top: 15px;\">\r\n <label style=\"display: flex; align-items: center; gap: 10px; cursor: pointer;\">\r\n <input type=\"checkbox\" id=\"showOverdueAlerts\" checked style=\"width: 20px; height: 20px; cursor: pointer;\">\r\n <span>Show Overdue Tasks in Alerts<\/span>\r\n <\/label>\r\n <p style=\"color: var(--gray); font-size: 0.85rem; margin-top: 5px; margin-left: 30px;\">If unchecked, overdue tasks will not appear in alert modal<\/p>\r\n <\/div>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"saveAlertSettings()\" style=\"margin-top: 15px;\">\ud83d\udcbe Save Alert Settings<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"editCategoryModal\">\r\n <div class=\"modal-content\" style=\"max-width: 500px;\">\r\n <div class=\"modal-header\">\r\n <h3>\u270f\ufe0f Edit Category<\/h3>\r\n <button class=\"close-btn\" onclick=\"closeEditCategoryModal()\">\u00d7<\/button>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Name *<\/label>\r\n <input type=\"text\" id=\"editCategoryName\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Icon<\/label>\r\n <input type=\"text\" id=\"editCategoryIcon\" maxlength=\"2\">\r\n <\/div>\r\n <div style=\"display: flex; gap: 10px; margin-top: 20px;\">\r\n <button class=\"btn btn-secondary\" onclick=\"closeEditCategoryModal()\" style=\"flex: 1;\">Cancel<\/button>\r\n <button class=\"btn btn-primary\" onclick=\"saveEditCategory()\" style=\"flex: 1;\">Save<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <input type=\"file\" id=\"importFileInput\" accept=\".json\" style=\"display: none;\">\r\n <div class=\"toast\" id=\"toast\"><span id=\"toastMessage\"><\/span><\/div>\r\n\r\n <script>\r\n let sops = [];\r\n let categories = [];\r\n let currentSOPId = null;\r\n let currentExecuteSOPId = null;\r\n let stepCounter = 0;\r\n let taskCounter = 0;\r\n let personCounter = 0;\r\n let deleteTarget = null;\r\n let editCategoryId = null;\r\n let currentCategory = 'all';\r\n let selectedLayout = 'standard';\r\n let lockedItems = {};\r\n let currentTheme = 'blue';\r\n let alertDaysBefore = 3;\r\n let showOverdueAlerts = true; \/\/ Store locked status: {sopId: {itemKey: true\/false}}\r\n\r\n document.addEventListener('DOMContentLoaded', function() {\r\n loadData();\r\n updateCurrentDate();\r\n checkMonthlyReset();\r\n renderDashboard();\r\n document.getElementById('importFileInput').addEventListener('change', handleImport);\r\n setInterval(updateCurrentDate, 60000);\r\n \/\/ Check for monthly reset every hour\r\n setInterval(checkMonthlyReset, 3600000);\r\n });\r\n\r\n function checkMonthlyReset() {\r\n const lastReset = localStorage.getItem('lastMonthlyReset');\r\n const now = new Date();\r\n const currentMonth = now.getFullYear() + '-' + (now.getMonth() + 1);\r\n \r\n if (lastReset !== currentMonth) {\r\n \/\/ Reset all SOPs\r\n sops.forEach(sop => {\r\n if (sop.layout === 'spreadsheet') {\r\n sop.persons.forEach(person => {\r\n sop.tasks.forEach(task => {\r\n sop.gridData[person][task.name] = false;\r\n });\r\n });\r\n } else if (sop.steps) {\r\n sop.steps.forEach(step => {\r\n step.completed = false;\r\n });\r\n }\r\n });\r\n \r\n saveSOPs();\r\n localStorage.setItem('lastMonthlyReset', currentMonth);\r\n \r\n if (lastReset) { \/\/ Only show message if not first time\r\n showToast('\ud83d\udd04 Monthly reset completed!');\r\n }\r\n }\r\n }\r\n\r\n function resetSOP() {\r\n if (!currentExecuteSOPId) return;\r\n \r\n if (!confirm('Are you sure you want to reset all progress for this SOP?')) {\r\n return;\r\n }\r\n \r\n const idx = sops.findIndex(s => s.id === currentExecuteSOPId);\r\n if (idx === -1) return;\r\n \r\n const sop = sops[idx];\r\n \r\n \/\/ Reset all tasks\/steps\r\n if (sop.layout === 'spreadsheet') {\r\n sop.persons.forEach(person => {\r\n sop.tasks.forEach(task => {\r\n sop.gridData[person][task.name] = false;\r\n });\r\n });\r\n } else if (sop.steps) {\r\n sop.steps.forEach(step => {\r\n step.completed = false;\r\n });\r\n }\r\n \r\n \/\/ Clear all locks for this SOP\r\n if (lockedItems[currentExecuteSOPId]) {\r\n delete lockedItems[currentExecuteSOPId];\r\n saveLockedItems();\r\n }\r\n \r\n sop.modifiedDate = new Date().toISOString();\r\n saveSOPs();\r\n \r\n \/\/ Re-render\r\n executeSOP(currentExecuteSOPId);\r\n showToast('\u2705 SOP Reset!');\r\n }\r\n\r\n function toggleLock(sopId, itemKey) {\r\n if (!lockedItems[sopId]) {\r\n lockedItems[sopId] = {};\r\n }\r\n \r\n lockedItems[sopId][itemKey] = !lockedItems[sopId][itemKey];\r\n saveLockedItems();\r\n \r\n \/\/ Update UI\r\n executeSOP(sopId);\r\n }\r\n\r\n function isLocked(sopId, itemKey) {\r\n return lockedItems[sopId] && lockedItems[sopId][itemKey];\r\n }\r\n\r\n function saveLockedItems() {\r\n localStorage.setItem('lockedItems', JSON.stringify(lockedItems));\r\n }\r\n\r\n function loadLockedItems() {\r\n const saved = localStorage.getItem('lockedItems');\r\n if (saved) {\r\n lockedItems = JSON.parse(saved);\r\n }\r\n }\r\n\r\n function updateCurrentDate() {\r\n const now = new Date();\r\n const opts = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };\r\n document.getElementById('currentDate').textContent = now.toLocaleDateString('en-US', opts);\r\n }\r\n\r\n function loadData() {\r\n const saved = localStorage.getItem('sops_complete_final');\r\n const savedCats = localStorage.getItem('categories_complete_final');\r\n const savedTheme = localStorage.getItem('theme');\r\n const savedAlertDays = localStorage.getItem('alertDaysBefore');\r\n const savedShowOverdue = localStorage.getItem('showOverdueAlerts');\r\n \r\n if (saved) sops = JSON.parse(saved);\r\n if (savedCats) {\r\n categories = JSON.parse(savedCats);\r\n } else {\r\n categories = [\r\n { id: 'kitchen', name: 'Kitchen', icon: '\ud83c\udf73' },\r\n { id: 'office', name: 'Office', icon: '\ud83d\udcbc' },\r\n { id: 'cleaning', name: 'Cleaning', icon: '\ud83e\uddf9' },\r\n { id: 'maintenance', name: 'Maintenance', icon: '\ud83d\udd27' }\r\n ];\r\n saveCategories();\r\n }\r\n if (savedTheme) {\r\n currentTheme = savedTheme;\r\n document.body.className = 'theme-' + currentTheme;\r\n } else {\r\n document.body.className = 'theme-blue';\r\n }\r\n if (savedAlertDays) {\r\n alertDaysBefore = parseInt(savedAlertDays);\r\n }\r\n if (savedShowOverdue !== null) {\r\n showOverdueAlerts = savedShowOverdue === 'true';\r\n }\r\n loadLockedItems();\r\n }\r\n\r\n function saveSOPs() { localStorage.setItem('sops_complete_final', JSON.stringify(sops)); }\r\n function saveCategories() { localStorage.setItem('categories_complete_final', JSON.stringify(categories)); }\r\n\r\n function getDaysRemaining(endDate) {\r\n if (!endDate) return null;\r\n const today = new Date(); today.setHours(0,0,0,0);\r\n const end = new Date(endDate); end.setHours(0,0,0,0);\r\n return Math.ceil((end - today) \/ (1000 * 60 * 60 * 24));\r\n }\r\n\r\n function getDateStatus(endDate) {\r\n const days = getDaysRemaining(endDate);\r\n if (days === null) return null;\r\n if (days < 0) return { status: 'overdue', text: `Overdue by ${Math.abs(days)} days`, class: 'overdue' };\r\n if (days === 0) return { status: 'due-today', text: 'Due Today!', class: 'overdue' };\r\n if (days <= alertDaysBefore) return { status: 'due-soon', text: `${days} day${days > 1 ? 's' : ''} left`, class: 'due-soon' };\r\n return { status: 'on-track', text: `${days} days left`, class: 'on-track' };\r\n }\r\n\r\n function showLayoutModal() { document.getElementById('layoutModal').classList.add('active'); }\r\n function closeLayoutModal() { document.getElementById('layoutModal').classList.remove('active'); }\r\n\r\n function selectLayout(layout) {\r\n selectedLayout = layout;\r\n closeLayoutModal();\r\n showNewSOPForm(layout);\r\n }\r\n\r\n function showNewSOPForm(layout) {\r\n currentSOPId = null;\r\n stepCounter = 0; taskCounter = 0; personCounter = 0;\r\n selectedLayout = layout;\r\n\r\n document.getElementById('editorTitle').textContent = 'Create New SOP';\r\n document.getElementById('dashboardView').style.display = 'none';\r\n document.getElementById('executeView').style.display = 'none';\r\n document.getElementById('editorView').style.display = 'block';\r\n\r\n document.getElementById('sopTitle').value = '';\r\n document.getElementById('sopCategory').value = '';\r\n document.getElementById('sopStartDate').value = '';\r\n document.getElementById('sopEndDate').value = '';\r\n document.getElementById('sopPurpose').value = '';\r\n\r\n const layoutNames = {\r\n 'spreadsheet': '\ud83d\udcca Spreadsheet Tracker',\r\n 'standard': '\ud83d\udccb Standard Process',\r\n 'checklist': '\u2705 Checklist',\r\n 'flow': '\ud83d\udd04 Process Flow',\r\n 'decision': '\ud83c\udf33 Decision Tree',\r\n 'troubleshoot': '\ud83d\udd27 Troubleshooting',\r\n 'quick': '\u26a1 Quick Guide'\r\n };\r\n document.getElementById('sopLayout').value = layoutNames[layout];\r\n\r\n updateCategoryDropdown();\r\n loadEditor(layout);\r\n }\r\n\r\n function loadEditor(layout) {\r\n const container = document.getElementById('editorContent');\r\n if (layout === 'spreadsheet') {\r\n container.innerHTML = `\r\n <div class=\"steps-section\">\r\n <div class=\"section-header\">\r\n <h3>\ud83d\udcdd Configure Tasks<\/h3>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"addTask()\">\u2795 Add<\/button>\r\n <\/div>\r\n <div class=\"steps-container\" id=\"tasksContainer\"><\/div>\r\n <\/div>\r\n <div class=\"steps-section\">\r\n <div class=\"section-header\">\r\n <h3>\ud83d\udc65 Persons\/Days<\/h3>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"addPerson()\">\u2795 Add<\/button>\r\n <\/div>\r\n <div class=\"steps-container\" id=\"personsContainer\"><\/div>\r\n <\/div>\r\n `;\r\n addTask();\r\n addPerson();\r\n } else {\r\n container.innerHTML = `\r\n <div class=\"steps-section\">\r\n <div class=\"section-header\">\r\n <h3>\ud83d\udcdd Steps<\/h3>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"addStep()\">\u2795 Add<\/button>\r\n <\/div>\r\n <div class=\"steps-container\" id=\"stepsContainer\"><\/div>\r\n <\/div>\r\n `;\r\n addStep();\r\n }\r\n }\r\n\r\n function addTask() {\r\n taskCounter++;\r\n const container = document.getElementById('tasksContainer');\r\n const div = document.createElement('div');\r\n div.className = 'task-config-card';\r\n div.dataset.task = taskCounter;\r\n div.innerHTML = `\r\n <div style=\"display: flex; gap: 12px; align-items: center;\">\r\n <input type=\"text\" class=\"task-icon-input\" placeholder=\"\ud83d\udcdd\" maxlength=\"2\" value=\"\ud83d\udcdd\">\r\n <input type=\"text\" class=\"task-name\" placeholder=\"Task Name\" style=\"flex: 1; padding: 10px; border: 2px solid var(--border); border-radius: 8px; font-weight: 600;\">\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"this.parentElement.parentElement.remove()\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n `;\r\n container.appendChild(div);\r\n }\r\n\r\n function addPerson() {\r\n personCounter++;\r\n const container = document.getElementById('personsContainer');\r\n const div = document.createElement('div');\r\n div.className = 'task-config-card';\r\n div.dataset.person = personCounter;\r\n div.innerHTML = `\r\n <div style=\"display: flex; gap: 12px; align-items: center;\">\r\n <input type=\"text\" class=\"person-name\" placeholder=\"Person\/Day Name (e.g., Monday, John)\" style=\"flex: 1; padding: 10px; border: 2px solid var(--border); border-radius: 8px; font-weight: 600;\">\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"this.parentElement.parentElement.remove()\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n `;\r\n container.appendChild(div);\r\n }\r\n\r\n function addStep() {\r\n stepCounter++;\r\n const container = document.getElementById('stepsContainer');\r\n \r\n let html = '';\r\n switch(selectedLayout) {\r\n case 'standard':\r\n html = `\r\n <div class=\"step-card\" data-step=\"${stepCounter}\">\r\n <div class=\"step-header\">\r\n <div class=\"step-number\">${stepCounter}<\/div>\r\n <\/div>\r\n <div class=\"step-content\">\r\n <div class=\"form-group\">\r\n <label>Step Description *<\/label>\r\n <textarea class=\"step-description\" placeholder=\"Describe the step...\" style=\"width: 100%;\"><\/textarea>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Responsible Person<\/label>\r\n <input type=\"text\" class=\"step-responsible\" placeholder=\"e.g., Manager\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Estimated Time<\/label>\r\n <input type=\"text\" class=\"step-time\" placeholder=\"e.g., 15 mins\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Tools\/Resources<\/label>\r\n <input type=\"text\" class=\"step-tools\" placeholder=\"Required tools...\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Notes\/Warnings<\/label>\r\n <input type=\"text\" class=\"step-notes\" placeholder=\"Important notes...\">\r\n <\/div>\r\n <div class=\"step-actions\">\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"moveStepUp(${stepCounter})\">\u2b06\ufe0f<\/button>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"moveStepDown(${stepCounter})\">\u2b07\ufe0f<\/button>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"removeStep(${stepCounter})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n break;\r\n case 'checklist':\r\n html = `\r\n <div class=\"step-card checklist-item\" data-step=\"${stepCounter}\" style=\"display: block; padding: 15px;\">\r\n <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 10px;\">\r\n <div class=\"step-number\">${stepCounter}<\/div>\r\n <input type=\"text\" class=\"step-description\" placeholder=\"Checklist item...\" style=\"flex: 1; border: 2px solid var(--border); background: white; font-size: 1rem; padding: 8px; border-radius: 6px;\">\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"removeStep(${stepCounter})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-left: 44px;\">\r\n <div>\r\n <label style=\"font-size: 0.85rem; color: var(--gray); margin-bottom: 5px; display: block;\">Assigned to<\/label>\r\n <input type=\"text\" class=\"step-responsible\" placeholder=\"Person name...\" style=\"width: 100%; border: 2px solid var(--border); background: white; font-size: 0.9rem; padding: 8px; border-radius: 6px;\">\r\n <\/div>\r\n <div>\r\n <label style=\"font-size: 0.85rem; color: var(--gray); margin-bottom: 5px; display: block;\">\ud83d\udcc5 Due Date (Optional)<\/label>\r\n <input type=\"date\" class=\"step-due-date\" style=\"width: 100%; border: 2px solid var(--border); background: white; padding: 8px; border-radius: 6px;\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n break;\r\n case 'flow':\r\n html = `\r\n <div class=\"step-card flow-step\" data-step=\"${stepCounter}\">\r\n <div class=\"flow-arrow\">\u2192<\/div>\r\n <div class=\"form-group\">\r\n <label>Step ${stepCounter}<\/label>\r\n <input type=\"text\" class=\"step-description\" placeholder=\"Process step...\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Owner<\/label>\r\n <input type=\"text\" class=\"step-responsible\" placeholder=\"Person responsible...\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Duration<\/label>\r\n <input type=\"text\" class=\"step-time\" placeholder=\"Time required...\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\ud83d\udcc5 Date\/Recurrence Type<\/label>\r\n <select class=\"step-recurrence-type\" onchange=\"toggleFlowDateFields(this)\">\r\n <option value=\"\">No Date<\/option>\r\n <option value=\"single\">Single Date<\/option>\r\n <option value=\"weekly\">Weekly (e.g., Every Monday)<\/option>\r\n <option value=\"monthly\">Monthly (e.g., Every Month 15th)<\/option>\r\n <option value=\"daily\">Daily<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"flow-date-fields\" style=\"display: none;\">\r\n <div class=\"single-date-field\" style=\"display: none;\">\r\n <label>Due Date<\/label>\r\n <input type=\"date\" class=\"step-due-date\">\r\n <\/div>\r\n <div class=\"weekly-field\" style=\"display: none;\">\r\n <label>Day of Week<\/label>\r\n <select class=\"step-weekly-day\">\r\n <option value=\"1\">Monday<\/option>\r\n <option value=\"2\">Tuesday<\/option>\r\n <option value=\"3\">Wednesday<\/option>\r\n <option value=\"4\">Thursday<\/option>\r\n <option value=\"5\">Friday<\/option>\r\n <option value=\"6\">Saturday<\/option>\r\n <option value=\"0\">Sunday<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"monthly-field\" style=\"display: none;\">\r\n <label>Day of Month (1-31)<\/label>\r\n <input type=\"number\" class=\"step-monthly-day\" min=\"1\" max=\"31\" placeholder=\"e.g., 15\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-actions\">\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"moveStepUp(${stepCounter})\">\u2b06\ufe0f<\/button>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"moveStepDown(${stepCounter})\">\u2b07\ufe0f<\/button>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"removeStep(${stepCounter})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n break;\r\n case 'decision':\r\n html = `\r\n <div class=\"step-card decision-node\" data-step=\"${stepCounter}\">\r\n <div class=\"form-group\">\r\n <label>\ud83d\udd37 Decision Point ${stepCounter}<\/label>\r\n <input type=\"text\" class=\"step-description\" placeholder=\"What decision needs to be made?\">\r\n <\/div>\r\n <div class=\"decision-option\">\r\n <div class=\"form-group\">\r\n <label>\u2705 If YES:<\/label>\r\n <input type=\"text\" class=\"step-yes\" placeholder=\"Action if yes...\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"decision-option\">\r\n <div class=\"form-group\">\r\n <label>\u274c If NO:<\/label>\r\n <input type=\"text\" class=\"step-no\" placeholder=\"Action if no...\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"step-actions\">\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"removeStep(${stepCounter})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n break;\r\n case 'troubleshoot':\r\n html = `\r\n <div class=\"step-card\" data-step=\"${stepCounter}\">\r\n <div class=\"troubleshoot-problem\">\r\n <label><strong>\u2757 Problem ${stepCounter}<\/strong><\/label>\r\n <input type=\"text\" class=\"step-description\" placeholder=\"Describe the problem...\" style=\"width: 100%; margin-top: 10px; padding: 10px; border: 2px solid var(--border); border-radius: 6px;\">\r\n <\/div>\r\n <div class=\"troubleshoot-solution\">\r\n <label><strong>\u2705 Solution<\/strong><\/label>\r\n <textarea class=\"step-solution\" placeholder=\"How to resolve...\" style=\"width: 100%; margin-top: 10px; padding: 10px; border: 2px solid var(--border); border-radius: 6px; min-height: 70px;\"><\/textarea>\r\n <\/div>\r\n <div class=\"form-group\" style=\"margin-top: 12px;\">\r\n <label>Responsible Person<\/label>\r\n <input type=\"text\" class=\"step-responsible\" placeholder=\"Who handles this?\">\r\n <\/div>\r\n <div class=\"step-actions\">\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"removeStep(${stepCounter})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n break;\r\n case 'quick':\r\n html = `\r\n <div class=\"step-card\" data-step=\"${stepCounter}\" style=\"padding: 12px;\">\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <div class=\"step-number\" style=\"width: 30px; height: 30px; font-size: 0.9rem;\">${stepCounter}<\/div>\r\n <input type=\"text\" class=\"step-description\" placeholder=\"Quick instruction...\" style=\"flex: 1; border: 2px solid var(--border); padding: 10px; border-radius: 8px;\">\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"removeStep(${stepCounter})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n break;\r\n }\r\n \r\n container.insertAdjacentHTML('beforeend', html);\r\n }\r\n\r\n function removeStep(num) {\r\n const step = document.querySelector(`[data-step=\"${num}\"]`);\r\n if (step) {\r\n step.remove();\r\n renumberSteps();\r\n }\r\n }\r\n\r\n function moveStepUp(num) {\r\n const step = document.querySelector(`[data-step=\"${num}\"]`);\r\n const prev = step.previousElementSibling;\r\n if (prev) {\r\n step.parentNode.insertBefore(step, prev);\r\n renumberSteps();\r\n }\r\n }\r\n\r\n function moveStepDown(num) {\r\n const step = document.querySelector(`[data-step=\"${num}\"]`);\r\n const next = step.nextElementSibling;\r\n if (next) {\r\n step.parentNode.insertBefore(next, step);\r\n renumberSteps();\r\n }\r\n }\r\n\r\n function getRecurringStepStatus(step) {\r\n if (!step.recurrenceType) return null;\r\n \r\n const today = new Date();\r\n today.setHours(0, 0, 0, 0);\r\n \r\n if (step.recurrenceType === 'daily') {\r\n return { text: '\ud83d\udd04 Daily', color: 'var(--primary)', isToday: true, daysRemaining: 0 };\r\n }\r\n \r\n if (step.recurrenceType === 'weekly' && step.weeklyDay !== null) {\r\n const todayDay = today.getDay();\r\n const targetDay = parseInt(step.weeklyDay);\r\n const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];\r\n \r\n \/\/ Calculate days until target day\r\n let daysUntil = targetDay - todayDay;\r\n if (daysUntil < 0) daysUntil += 7; \/\/ Next week\r\n \r\n if (daysUntil === 0) {\r\n return { text: `\ud83d\udcc5 Today (${dayNames[targetDay]})`, color: 'var(--danger)', isToday: true, daysRemaining: 0 };\r\n } else if (daysUntil <= alertDaysBefore) {\r\n return { text: `\ud83d\udcc5 ${dayNames[targetDay]} (${daysUntil} day${daysUntil > 1 ? 's' : ''})`, color: 'var(--warning)', isToday: false, daysRemaining: daysUntil };\r\n } else {\r\n return { text: `\ud83d\udcc5 Every ${dayNames[targetDay]}`, color: 'var(--success)', isToday: false, daysRemaining: daysUntil };\r\n }\r\n }\r\n \r\n if (step.recurrenceType === 'monthly' && step.monthlyDay) {\r\n const todayDate = today.getDate();\r\n const targetDate = parseInt(step.monthlyDay);\r\n \r\n \/\/ Calculate days until target date\r\n let daysUntil = targetDate - todayDate;\r\n \r\n \/\/ If target date already passed this month, calculate for next month\r\n if (daysUntil < 0) {\r\n const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, targetDate);\r\n daysUntil = Math.ceil((nextMonth - today) \/ (1000 * 60 * 60 * 24));\r\n }\r\n \r\n if (daysUntil === 0) {\r\n return { text: `\ud83d\udcc6 Today (${targetDate}th)`, color: 'var(--danger)', isToday: true, daysRemaining: 0 };\r\n } else if (daysUntil <= alertDaysBefore) {\r\n return { text: `\ud83d\udcc6 ${targetDate}th (${daysUntil} day${daysUntil > 1 ? 's' : ''})`, color: 'var(--warning)', isToday: false, daysRemaining: daysUntil };\r\n } else {\r\n return { text: `\ud83d\udcc6 Every Month ${targetDate}th`, color: 'var(--success)', isToday: false, daysRemaining: daysUntil };\r\n }\r\n }\r\n \r\n if (step.recurrenceType === 'single' && step.dueDate) {\r\n const dueStatus = getDateStatus(step.dueDate);\r\n const days = getDaysRemaining(step.dueDate);\r\n if (dueStatus) {\r\n const dueStr = new Date(step.dueDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric'});\r\n let color = 'var(--success)';\r\n if (dueStatus.class === 'overdue') color = 'var(--danger)';\r\n else if (dueStatus.class === 'due-soon') color = 'var(--warning)';\r\n return { text: `\ud83d\udcc5 ${dueStr} - ${dueStatus.text}`, color: color, isToday: dueStatus.class === 'overdue', daysRemaining: days };\r\n }\r\n }\r\n \r\n return null;\r\n }\r\n\r\n function toggleFlowDateFields(select) {\r\n const parent = select.closest('.step-card');\r\n const fieldsContainer = parent.querySelector('.flow-date-fields');\r\n const singleField = parent.querySelector('.single-date-field');\r\n const weeklyField = parent.querySelector('.weekly-field');\r\n const monthlyField = parent.querySelector('.monthly-field');\r\n \r\n \/\/ Hide all first\r\n fieldsContainer.style.display = 'none';\r\n singleField.style.display = 'none';\r\n weeklyField.style.display = 'none';\r\n monthlyField.style.display = 'none';\r\n \r\n const value = select.value;\r\n if (value) {\r\n fieldsContainer.style.display = 'block';\r\n if (value === 'single') singleField.style.display = 'block';\r\n else if (value === 'weekly') weeklyField.style.display = 'block';\r\n else if (value === 'monthly') monthlyField.style.display = 'block';\r\n }\r\n }\r\n\r\n function renumberSteps() {\r\n const steps = document.querySelectorAll('[data-step]');\r\n steps.forEach((step, idx) => {\r\n const num = step.querySelector('.step-number');\r\n if (num) num.textContent = idx + 1;\r\n step.dataset.step = idx + 1;\r\n });\r\n stepCounter = steps.length;\r\n }\r\n\r\n function saveSOP() {\r\n const title = document.getElementById('sopTitle').value.trim();\r\n const category = document.getElementById('sopCategory').value;\r\n if (!title || !category) {\r\n showToast('\u26a0\ufe0f Please fill required fields!', 'warning');\r\n return;\r\n }\r\n\r\n let sopData = {\r\n id: currentSOPId || Date.now(),\r\n title, category,\r\n startDate: document.getElementById('sopStartDate').value || null,\r\n endDate: document.getElementById('sopEndDate').value || null,\r\n purpose: document.getElementById('sopPurpose').value.trim(),\r\n layout: selectedLayout,\r\n createdDate: currentSOPId ? sops.find(s => s.id === currentSOPId).createdDate : new Date().toISOString(),\r\n modifiedDate: new Date().toISOString()\r\n };\r\n\r\n if (selectedLayout === 'spreadsheet') {\r\n const taskCards = document.querySelectorAll('[data-task]');\r\n const tasks = [];\r\n taskCards.forEach(card => {\r\n const name = card.querySelector('.task-name').value.trim();\r\n if (!name) return;\r\n tasks.push({\r\n icon: card.querySelector('.task-icon-input').value.trim() || '\ud83d\udcdd',\r\n name: name\r\n });\r\n });\r\n\r\n const personCards = document.querySelectorAll('[data-person]');\r\n const persons = [];\r\n personCards.forEach(card => {\r\n const name = card.querySelector('.person-name').value.trim();\r\n if (name) persons.push(name);\r\n });\r\n\r\n if (tasks.length === 0 || persons.length === 0) {\r\n showToast('\u26a0\ufe0f Add at least one task and person!', 'warning');\r\n return;\r\n }\r\n\r\n const gridData = {};\r\n persons.forEach(person => {\r\n gridData[person] = {};\r\n tasks.forEach(task => {\r\n gridData[person][task.name] = false;\r\n });\r\n });\r\n\r\n sopData.tasks = tasks;\r\n sopData.persons = persons;\r\n sopData.gridData = gridData;\r\n } else {\r\n const stepCards = document.querySelectorAll('[data-step]');\r\n const steps = [];\r\n stepCards.forEach(card => {\r\n const desc = card.querySelector('.step-description').value.trim();\r\n if (!desc) return;\r\n \r\n const stepData = {\r\n description: desc,\r\n responsible: card.querySelector('.step-responsible')?.value.trim() || '',\r\n time: card.querySelector('.step-time')?.value.trim() || '',\r\n tools: card.querySelector('.step-tools')?.value.trim() || '',\r\n notes: card.querySelector('.step-notes')?.value.trim() || '',\r\n solution: card.querySelector('.step-solution')?.value.trim() || '',\r\n yes: card.querySelector('.step-yes')?.value.trim() || '',\r\n no: card.querySelector('.step-no')?.value.trim() || '',\r\n dueDate: card.querySelector('.step-due-date')?.value || null,\r\n recurrenceType: card.querySelector('.step-recurrence-type')?.value || null,\r\n weeklyDay: card.querySelector('.step-weekly-day')?.value || null,\r\n monthlyDay: card.querySelector('.step-monthly-day')?.value || null,\r\n completed: false\r\n };\r\n steps.push(stepData);\r\n });\r\n\r\n if (steps.length === 0) {\r\n showToast('\u26a0\ufe0f Add at least one step!', 'warning');\r\n return;\r\n }\r\n\r\n sopData.steps = steps;\r\n }\r\n\r\n if (currentSOPId) {\r\n const idx = sops.findIndex(s => s.id === currentSOPId);\r\n sops[idx] = sopData;\r\n showToast('\u2705 SOP Updated!');\r\n } else {\r\n sops.push(sopData);\r\n showToast('\u2705 SOP Created!');\r\n }\r\n\r\n saveSOPs();\r\n showDashboard();\r\n }\r\n\r\n function executeSOP(id) {\r\n const sop = sops.find(s => s.id === id);\r\n if (!sop) return;\r\n\r\n currentExecuteSOPId = id;\r\n document.getElementById('dashboardView').style.display = 'none';\r\n document.getElementById('editorView').style.display = 'none';\r\n document.getElementById('executeView').style.display = 'block';\r\n\r\n const cat = categories.find(c => c.id === sop.category);\r\n document.getElementById('executeTitle').textContent = sop.title;\r\n document.getElementById('executeCategory').textContent = `\ud83d\udcc2 ${cat ? cat.icon + ' ' + cat.name : sop.category}`;\r\n\r\n let dateText = '';\r\n if (sop.startDate && sop.endDate) {\r\n const start = new Date(sop.startDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric'});\r\n const end = new Date(sop.endDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric'});\r\n const status = getDateStatus(sop.endDate);\r\n dateText = `\ud83d\udcc5 ${start} \u2192 ${end}`;\r\n if (status) dateText += ` <span style=\"color: ${status.class === 'overdue' ? 'var(--danger)' : status.class === 'due-soon' ? 'var(--warning)' : 'var(--success)'};\">(${status.text})<\/span>`;\r\n } else if (sop.endDate) {\r\n const end = new Date(sop.endDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric'});\r\n const status = getDateStatus(sop.endDate);\r\n dateText = `\ud83d\udcc5 Due: ${end}`;\r\n if (status) dateText += ` <span style=\"color: ${status.class === 'overdue' ? 'var(--danger)' : status.class === 'due-soon' ? 'var(--warning)' : 'var(--success)'};\">(${status.text})<\/span>`;\r\n }\r\n document.getElementById('executeDates').innerHTML = dateText;\r\n\r\n if (sop.layout === 'spreadsheet') {\r\n renderSpreadsheet(sop);\r\n } else {\r\n renderSteps(sop);\r\n }\r\n updateProgress(sop);\r\n }\r\n\r\n function renderSpreadsheet(sop) {\r\n const container = document.getElementById('executeContent');\r\n let html = '<div style=\"overflow-x: auto;\"><table class=\"spreadsheet-table\"><thead><tr><th>Person\/Day<\/th>';\r\n sop.tasks.forEach(t => {\r\n html += `<th><div style=\"text-align: center;\"><div style=\"font-size: 1.5rem;\">${t.icon}<\/div><div style=\"font-size: 0.85rem; margin-top: 5px;\">${t.name}<\/div><\/div><\/th>`;\r\n });\r\n html += '<th style=\"min-width: 80px;\">Lock<\/th><\/tr><\/thead><tbody>';\r\n\r\n sop.persons.forEach(person => {\r\n html += `<tr><td>${person}<\/td>`;\r\n sop.tasks.forEach(task => {\r\n const itemKey = `${person}::${task.name}`;\r\n const locked = isLocked(sop.id, itemKey);\r\n const checked = sop.gridData[person][task.name] ? 'checked' : '';\r\n const bgClass = checked ? 'completed' : '';\r\n const disabled = locked ? 'disabled' : '';\r\n html += `<td class=\"task-cell ${bgClass}\"><input type=\"checkbox\" class=\"task-checkbox\" ${checked} ${disabled} onchange=\"toggleGrid('${person}', '${task.name}')\"><\/td>`;\r\n });\r\n \r\n \/\/ Add lock button for this row\r\n const rowKey = person;\r\n const rowLocked = isLocked(sop.id, rowKey);\r\n html += `<td><button class=\"lock-btn ${rowLocked ? 'locked' : ''}\" onclick=\"toggleRowLock('${person}')\">${rowLocked ? '\ud83d\udd12' : '\ud83d\udd13'}<\/button><\/td>`;\r\n \r\n html += '<\/tr>';\r\n });\r\n\r\n html += '<\/tbody><\/table><\/div>';\r\n container.innerHTML = html;\r\n }\r\n\r\n function toggleRowLock(person) {\r\n if (!currentExecuteSOPId) return;\r\n const sop = sops.find(s => s.id === currentExecuteSOPId);\r\n if (!sop) return;\r\n \r\n const rowKey = person;\r\n \r\n \/\/ Toggle row lock\r\n if (!lockedItems[currentExecuteSOPId]) {\r\n lockedItems[currentExecuteSOPId] = {};\r\n }\r\n \r\n const isCurrentlyLocked = lockedItems[currentExecuteSOPId][rowKey];\r\n lockedItems[currentExecuteSOPId][rowKey] = !isCurrentlyLocked;\r\n \r\n \/\/ Lock\/unlock all items in this row\r\n sop.tasks.forEach(task => {\r\n const itemKey = `${person}::${task.name}`;\r\n lockedItems[currentExecuteSOPId][itemKey] = !isCurrentlyLocked;\r\n });\r\n \r\n saveLockedItems();\r\n renderSpreadsheet(sop);\r\n }\r\n\r\n function toggleGrid(person, taskName) {\r\n const sop = sops.find(s => s.id === currentExecuteSOPId);\r\n if (!sop) return;\r\n \r\n const itemKey = `${person}::${taskName}`;\r\n if (isLocked(currentExecuteSOPId, itemKey)) {\r\n showToast('\u26a0\ufe0f This item is locked!', 'warning');\r\n return;\r\n }\r\n \r\n sop.gridData[person][taskName] = !sop.gridData[person][taskName];\r\n renderSpreadsheet(sop);\r\n updateProgress(sop);\r\n }\r\n\r\n function renderSteps(sop) {\r\n const container = document.getElementById('executeContent');\r\n let html = '<div style=\"display: grid; gap: 12px;\">';\r\n \r\n sop.steps.forEach((step, idx) => {\r\n const itemKey = `step::${idx}`;\r\n const locked = isLocked(currentExecuteSOPId, itemKey);\r\n const checked = step.completed ? 'checked' : '';\r\n const bgClass = step.completed ? 'completed' : '';\r\n const disabled = locked ? 'disabled' : '';\r\n const num = idx + 1;\r\n \r\n if (sop.layout === 'decision') {\r\n html += `\r\n <div class=\"step-card decision-node ${bgClass}\">\r\n <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 12px; justify-content: space-between;\">\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <input type=\"checkbox\" class=\"task-checkbox\" ${checked} ${disabled} onchange=\"toggleStep(${idx})\">\r\n <strong>\ud83d\udd37 Decision ${num}:<\/strong>\r\n <\/div>\r\n <button class=\"lock-btn ${locked ? 'locked' : ''}\" onclick=\"toggleStepLock(${idx})\">${locked ? '\ud83d\udd12 Locked' : '\ud83d\udd13 Unlocked'}<\/button>\r\n <\/div>\r\n <p style=\"margin: 8px 0;\">${step.description}<\/p>\r\n <div class=\"decision-option\">\r\n <p style=\"color: var(--success); margin: 5px 0;\"><strong>\u2705 If YES:<\/strong> ${step.yes}<\/p>\r\n <\/div>\r\n <div class=\"decision-option\">\r\n <p style=\"color: var(--danger); margin: 5px 0;\"><strong>\u274c If NO:<\/strong> ${step.no}<\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n } else if (sop.layout === 'troubleshoot') {\r\n html += `\r\n <div class=\"step-card ${bgClass}\">\r\n <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 12px; justify-content: space-between;\">\r\n <div style=\"display: flex; align-items: center; gap: 12px;\">\r\n <input type=\"checkbox\" class=\"task-checkbox\" ${checked} ${disabled} onchange=\"toggleStep(${idx})\">\r\n <strong style=\"color: var(--danger);\">\u2757 Problem ${num}<\/strong>\r\n <\/div>\r\n <button class=\"lock-btn ${locked ? 'locked' : ''}\" onclick=\"toggleStepLock(${idx})\">${locked ? '\ud83d\udd12 Locked' : '\ud83d\udd13 Unlocked'}<\/button>\r\n <\/div>\r\n <div class=\"troubleshoot-problem\">\r\n <p>${step.description}<\/p>\r\n <\/div>\r\n <div class=\"troubleshoot-solution\">\r\n <strong>\u2705 Solution:<\/strong>\r\n <p style=\"margin-top: 5px;\">${step.solution}<\/p>\r\n <\/div>\r\n ${step.responsible ? `<p style=\"color: var(--gray); margin-top: 10px;\">\ud83d\udc64 ${step.responsible}<\/p>` : ''}\r\n <\/div>\r\n `;\r\n } else {\r\n \/\/ Calculate due date or recurring status - only show on uncompleted steps\r\n let dueDateBadge = '';\r\n if (!step.completed) {\r\n const recurringStatus = getRecurringStepStatus(step);\r\n if (recurringStatus) {\r\n dueDateBadge = `<span style=\"background: ${recurringStatus.color}; color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.85rem; margin-left: 10px;\">${recurringStatus.text}<\/span>`;\r\n }\r\n }\r\n \r\n html += `\r\n <div class=\"step-card ${bgClass}\">\r\n <div class=\"step-header\">\r\n <input type=\"checkbox\" class=\"task-checkbox\" ${checked} ${disabled} onchange=\"toggleStep(${idx})\">\r\n <div class=\"step-number\">${num}<\/div>\r\n <div style=\"flex: 1;\">\r\n <div style=\"display: flex; align-items: center; flex-wrap: wrap;\">\r\n <p style=\"font-weight: 600; margin-bottom: 8px;\">${step.description}<\/p>\r\n ${dueDateBadge}\r\n <\/div>\r\n <div style=\"display: flex; gap: 15px; flex-wrap: wrap; color: var(--gray); font-size: 0.9rem;\">\r\n ${step.responsible ? `<span>\ud83d\udc64 ${step.responsible}<\/span>` : ''}\r\n ${step.time ? `<span>\u23f1\ufe0f ${step.time}<\/span>` : ''}\r\n ${step.tools ? `<span>\ud83d\udd27 ${step.tools}<\/span>` : ''}\r\n <\/div>\r\n ${step.notes ? `<p style=\"color: var(--warning); margin-top: 8px; font-size: 0.9rem;\">\u26a0\ufe0f ${step.notes}<\/p>` : ''}\r\n <\/div>\r\n <button class=\"lock-btn ${locked ? 'locked' : ''}\" onclick=\"toggleStepLock(${idx})\" style=\"margin-left: 10px;\">${locked ? '\ud83d\udd12' : '\ud83d\udd13'}<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n });\r\n \r\n html += '<\/div>';\r\n container.innerHTML = html;\r\n }\r\n\r\n function toggleStepLock(idx) {\r\n if (!currentExecuteSOPId) return;\r\n const itemKey = `step::${idx}`;\r\n toggleLock(currentExecuteSOPId, itemKey);\r\n }\r\n\r\n function toggleStep(idx) {\r\n const sop = sops.find(s => s.id === currentExecuteSOPId);\r\n if (!sop) return;\r\n \r\n const itemKey = `step::${idx}`;\r\n if (isLocked(currentExecuteSOPId, itemKey)) {\r\n showToast('\u26a0\ufe0f This step is locked!', 'warning');\r\n return;\r\n }\r\n \r\n sop.steps[idx].completed = !sop.steps[idx].completed;\r\n renderSteps(sop);\r\n updateProgress(sop);\r\n }\r\n\r\n function updateProgress(sop) {\r\n let total = 0, completed = 0;\r\n if (sop.layout === 'spreadsheet') {\r\n sop.persons.forEach(p => {\r\n sop.tasks.forEach(t => {\r\n total++;\r\n if (sop.gridData[p][t.name]) completed++;\r\n });\r\n });\r\n } else {\r\n total = sop.steps.length;\r\n completed = sop.steps.filter(s => s.completed).length;\r\n }\r\n\r\n const pct = total > 0 ? Math.round((completed \/ total) * 100) : 0;\r\n document.getElementById('progressText').textContent = `${completed}\/${total} (${pct}%)`;\r\n document.getElementById('progressBar').style.width = pct + '%';\r\n document.getElementById('progressPercent').textContent = pct + '%';\r\n }\r\n\r\n function saveProgress() {\r\n if (!currentExecuteSOPId) return;\r\n const idx = sops.findIndex(s => s.id === currentExecuteSOPId);\r\n if (idx !== -1) {\r\n sops[idx].modifiedDate = new Date().toISOString();\r\n saveSOPs();\r\n showToast('\u2705 Progress Saved!');\r\n }\r\n }\r\n\r\n function editCurrentSOP() {\r\n if (currentExecuteSOPId) editSOP(currentExecuteSOPId);\r\n }\r\n\r\n function editSOP(id) {\r\n const sop = sops.find(s => s.id === id);\r\n if (!sop) return;\r\n\r\n selectedLayout = sop.layout;\r\n showNewSOPForm(sop.layout);\r\n \r\n \/\/ Set currentSOPId AFTER showNewSOPForm (which sets it to null)\r\n currentSOPId = id;\r\n\r\n document.getElementById('editorTitle').textContent = 'Edit SOP';\r\n document.getElementById('sopTitle').value = sop.title;\r\n document.getElementById('sopCategory').value = sop.category;\r\n document.getElementById('sopStartDate').value = sop.startDate || '';\r\n document.getElementById('sopEndDate').value = sop.endDate || '';\r\n document.getElementById('sopPurpose').value = sop.purpose || '';\r\n\r\n if (sop.layout === 'spreadsheet') {\r\n const tasksContainer = document.getElementById('tasksContainer');\r\n tasksContainer.innerHTML = '';\r\n taskCounter = 0;\r\n sop.tasks.forEach(task => {\r\n addTask();\r\n const last = document.querySelector('[data-task]:last-child');\r\n last.querySelector('.task-icon-input').value = task.icon;\r\n last.querySelector('.task-name').value = task.name;\r\n });\r\n\r\n const personsContainer = document.getElementById('personsContainer');\r\n personsContainer.innerHTML = '';\r\n personCounter = 0;\r\n sop.persons.forEach(person => {\r\n addPerson();\r\n const last = document.querySelector('[data-person]:last-child');\r\n last.querySelector('.person-name').value = person;\r\n });\r\n } else {\r\n const stepsContainer = document.getElementById('stepsContainer');\r\n stepsContainer.innerHTML = '';\r\n stepCounter = 0;\r\n sop.steps.forEach(step => {\r\n addStep();\r\n const last = document.querySelector('[data-step]:last-child');\r\n last.querySelector('.step-description').value = step.description;\r\n \r\n const resp = last.querySelector('.step-responsible');\r\n if (resp) resp.value = step.responsible || '';\r\n \r\n const time = last.querySelector('.step-time');\r\n if (time) time.value = step.time || '';\r\n \r\n const tools = last.querySelector('.step-tools');\r\n if (tools) tools.value = step.tools || '';\r\n \r\n const notes = last.querySelector('.step-notes');\r\n if (notes) notes.value = step.notes || '';\r\n \r\n const solution = last.querySelector('.step-solution');\r\n if (solution) solution.value = step.solution || '';\r\n \r\n const yes = last.querySelector('.step-yes');\r\n if (yes) yes.value = step.yes || '';\r\n \r\n const no = last.querySelector('.step-no');\r\n if (no) no.value = step.no || '';\r\n \r\n const dueDate = last.querySelector('.step-due-date');\r\n if (dueDate) dueDate.value = step.dueDate || '';\r\n \r\n const recurrenceType = last.querySelector('.step-recurrence-type');\r\n if (recurrenceType) {\r\n recurrenceType.value = step.recurrenceType || '';\r\n \/\/ Trigger the toggle function to show correct fields\r\n if (step.recurrenceType) {\r\n toggleFlowDateFields(recurrenceType);\r\n }\r\n }\r\n \r\n const weeklyDay = last.querySelector('.step-weekly-day');\r\n if (weeklyDay && step.weeklyDay !== null) weeklyDay.value = step.weeklyDay;\r\n \r\n const monthlyDay = last.querySelector('.step-monthly-day');\r\n if (monthlyDay && step.monthlyDay) monthlyDay.value = step.monthlyDay;\r\n });\r\n }\r\n }\r\n\r\n function showAddCategoryModal() {\r\n document.getElementById('newCategoryName').value = '';\r\n document.getElementById('newCategoryIcon').value = '';\r\n document.getElementById('addCategoryModal').classList.add('active');\r\n }\r\n\r\n function closeAddCategoryModal() {\r\n document.getElementById('addCategoryModal').classList.remove('active');\r\n }\r\n\r\n function addCategory() {\r\n const name = document.getElementById('newCategoryName').value.trim();\r\n const icon = document.getElementById('newCategoryIcon').value.trim() || '\ud83d\udcc1';\r\n if (!name) {\r\n showToast('\u26a0\ufe0f Enter category name!', 'warning');\r\n return;\r\n }\r\n\r\n const id = name.toLowerCase().replace(\/\\s+\/g, '_');\r\n if (categories.find(c => c.id === id)) {\r\n showToast('\u26a0\ufe0f Category exists!', 'warning');\r\n return;\r\n }\r\n\r\n categories.push({ id, name, icon });\r\n saveCategories();\r\n closeAddCategoryModal();\r\n renderCategoryList();\r\n updateCategoryDropdown();\r\n showToast('\u2705 Category added!');\r\n }\r\n\r\n function selectCategory(cat) {\r\n currentCategory = cat;\r\n renderCategoryList();\r\n renderSOPList();\r\n }\r\n\r\n function updateCategoryDropdown() {\r\n const sel = document.getElementById('sopCategory');\r\n const curr = sel.value;\r\n sel.innerHTML = '<option value=\"\">Select Category<\/option>';\r\n categories.forEach(c => {\r\n sel.innerHTML += `<option value=\"${c.id}\">${c.icon} ${c.name}<\/option>`;\r\n });\r\n if (curr) sel.value = curr;\r\n }\r\n\r\n function showDashboard() {\r\n document.getElementById('dashboardView').style.display = 'grid';\r\n document.getElementById('editorView').style.display = 'none';\r\n document.getElementById('executeView').style.display = 'none';\r\n currentExecuteSOPId = null;\r\n renderDashboard();\r\n }\r\n\r\n function renderDashboard() {\r\n updateStats();\r\n renderCategoryList();\r\n renderSOPList();\r\n }\r\n\r\n function updateStats() {\r\n let total = 0, completed = 0, alerts = 0;\r\n\r\n sops.forEach(sop => {\r\n if (sop.layout === 'spreadsheet') {\r\n sop.persons.forEach(p => {\r\n sop.tasks.forEach(t => {\r\n total++;\r\n if (sop.gridData[p][t.name]) completed++;\r\n });\r\n });\r\n } else if (sop.steps) {\r\n total += sop.steps.length;\r\n completed += sop.steps.filter(s => s.completed).length;\r\n }\r\n\r\n \/\/ SOP-level alerts\r\n if (sop.endDate) {\r\n const days = getDaysRemaining(sop.endDate);\r\n if (days !== null && ((days >= 0 && days <= alertDaysBefore) || (showOverdueAlerts && days < 0))) {\r\n alerts++;\r\n }\r\n }\r\n \r\n \/\/ Step-level alerts\r\n if (sop.steps) {\r\n sop.steps.forEach(step => {\r\n if (!step.completed) {\r\n \/\/ Single date alerts\r\n if (step.dueDate && !step.recurrenceType) {\r\n const days = getDaysRemaining(step.dueDate);\r\n if (days !== null && ((days >= 0 && days <= alertDaysBefore) || (showOverdueAlerts && days < 0))) {\r\n alerts++;\r\n }\r\n }\r\n \/\/ Recurring alerts - count if within alert window\r\n const recurringStatus = getRecurringStepStatus(step);\r\n if (recurringStatus && recurringStatus.daysRemaining !== null && recurringStatus.daysRemaining <= alertDaysBefore) {\r\n alerts++;\r\n }\r\n }\r\n });\r\n }\r\n });\r\n\r\n document.getElementById('totalSOPs').textContent = sops.length;\r\n document.getElementById('totalItems').textContent = total;\r\n document.getElementById('completedItems').textContent = completed;\r\n document.getElementById('alertsCount').textContent = alerts;\r\n }\r\n\r\n function renderCategoryList() {\r\n const list = document.getElementById('categoryList');\r\n const allCount = sops.length;\r\n const counts = {};\r\n categories.forEach(c => {\r\n counts[c.id] = sops.filter(s => s.category === c.id).length;\r\n });\r\n\r\n let html = `\r\n <li class=\"category-item ${currentCategory === 'all' ? 'active' : ''}\" onclick=\"selectCategory('all')\">\r\n <span>\ud83d\udccb All SOPs<\/span>\r\n <span class=\"category-count\">${allCount}<\/span>\r\n <\/li>\r\n `;\r\n categories.forEach(c => {\r\n html += `\r\n <li class=\"category-item ${currentCategory === c.id ? 'active' : ''}\" onclick=\"selectCategory('${c.id}')\">\r\n <span>${c.icon} ${c.name}<\/span>\r\n <span class=\"category-count\">${counts[c.id] || 0}<\/span>\r\n <\/li>\r\n `;\r\n });\r\n list.innerHTML = html;\r\n }\r\n\r\n function renderSOPList() {\r\n const search = document.getElementById('searchInput').value.toLowerCase();\r\n let filtered = sops;\r\n if (currentCategory !== 'all') filtered = filtered.filter(s => s.category === currentCategory);\r\n if (search) filtered = filtered.filter(s => s.title.toLowerCase().includes(search));\r\n\r\n const list = document.getElementById('sopList');\r\n if (filtered.length === 0) {\r\n list.innerHTML = '<div class=\"empty-state\"><div class=\"empty-state-icon\">\ud83d\udd0d<\/div><h3>No SOPs Found<\/h3><\/div>';\r\n return;\r\n }\r\n\r\n const icons = { 'spreadsheet': '\ud83d\udcca', 'standard': '\ud83d\udccb', 'checklist': '\u2705', 'flow': '\ud83d\udd04', 'decision': '\ud83c\udf33', 'troubleshoot': '\ud83d\udd27', 'quick': '\u26a1' };\r\n const html = filtered.map(sop => {\r\n const cat = categories.find(c => c.id === sop.category);\r\n let total = 0, completed = 0;\r\n if (sop.layout === 'spreadsheet') {\r\n sop.persons.forEach(p => {\r\n sop.tasks.forEach(t => {\r\n total++;\r\n if (sop.gridData[p][t.name]) completed++;\r\n });\r\n });\r\n } else if (sop.steps) {\r\n total = sop.steps.length;\r\n completed = sop.steps.filter(s => s.completed).length;\r\n }\r\n const pct = total > 0 ? Math.round((completed \/ total) * 100) : 0;\r\n\r\n let badge = '';\r\n let cardClass = '';\r\n if (sop.endDate) {\r\n const status = getDateStatus(sop.endDate);\r\n if (status && (status.class === 'overdue' || status.class === 'due-soon')) {\r\n badge = `<div class=\"due-badge ${status.class}\">${status.text}<\/div>`;\r\n cardClass = status.class;\r\n }\r\n }\r\n\r\n let dateInfo = '';\r\n if (sop.startDate && sop.endDate) {\r\n const start = new Date(sop.startDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric'});\r\n const end = new Date(sop.endDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric'});\r\n dateInfo = `<span>\ud83d\udcc5 ${start} \u2192 ${end}<\/span>`;\r\n } else if (sop.endDate) {\r\n const end = new Date(sop.endDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric'});\r\n dateInfo = `<span>\ud83d\udcc5 Due: ${end}<\/span>`;\r\n }\r\n\r\n return `\r\n <div class=\"sop-card ${cardClass}\">\r\n ${badge}\r\n <h3 class=\"sop-title\">${sop.title}<\/h3>\r\n <div class=\"sop-meta\">\r\n <span>\ud83d\udcc2 ${cat ? cat.icon + ' ' + cat.name : sop.category}<\/span>\r\n ${dateInfo}\r\n <span>${icons[sop.layout] || '\ud83d\udccb'} ${sop.layout}<\/span>\r\n <span>\ud83d\udcdd ${total} items<\/span>\r\n <\/div>\r\n <div class=\"sop-progress\">\r\n <div class=\"sop-progress-bar\" style=\"width: ${pct}%\"><\/div>\r\n <\/div>\r\n <div style=\"color: var(--gray); font-size: 0.9rem; margin-top: 5px;\">${completed}\/${total} (${pct}%)<\/div>\r\n <div class=\"sop-actions\">\r\n <button class=\"btn btn-success btn-sm\" onclick=\"executeSOP(${sop.id})\">\u25b6\ufe0f View<\/button>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"editSOP(${sop.id})\">\u270f\ufe0f Edit<\/button>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"deleteSOP(${sop.id})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n list.innerHTML = html;\r\n }\r\n\r\n function showAlertsModal() {\r\n const alerts = [];\r\n \r\n sops.forEach(sop => {\r\n \/\/ SOP-level due date\r\n if (sop.endDate) {\r\n const days = getDaysRemaining(sop.endDate);\r\n \/\/ Check if within alert window and respect overdue setting\r\n if (days !== null && ((days >= 0 && days <= alertDaysBefore) || (showOverdueAlerts && days < 0))) {\r\n const cat = categories.find(c => c.id === sop.category);\r\n const status = getDateStatus(sop.endDate);\r\n alerts.push({\r\n id: sop.id,\r\n title: sop.title,\r\n subtitle: 'SOP Due Date',\r\n category: cat ? `${cat.icon} ${cat.name}` : sop.category,\r\n endDate: new Date(sop.endDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric'}),\r\n status: status,\r\n days: days\r\n });\r\n }\r\n }\r\n \r\n \/\/ Step-level due dates and recurring tasks\r\n if (sop.steps) {\r\n sop.steps.forEach((step, idx) => {\r\n if (!step.completed) {\r\n \/\/ Single due date\r\n if (step.dueDate && !step.recurrenceType) {\r\n const days = getDaysRemaining(step.dueDate);\r\n \/\/ Use alertDaysBefore setting and respect overdue setting\r\n if (days !== null && ((days >= 0 && days <= alertDaysBefore) || (showOverdueAlerts && days < 0))) {\r\n const cat = categories.find(c => c.id === sop.category);\r\n const status = getDateStatus(step.dueDate);\r\n alerts.push({\r\n id: sop.id,\r\n title: sop.title,\r\n subtitle: `Step ${idx + 1}: ${step.description.substring(0, 40)}${step.description.length > 40 ? '...' : ''}`,\r\n category: cat ? `${cat.icon} ${cat.name}` : sop.category,\r\n endDate: new Date(step.dueDate).toLocaleDateString('en-US', {month: 'short', day: 'numeric', year: 'numeric'}),\r\n status: status,\r\n days: days\r\n });\r\n }\r\n }\r\n \r\n \/\/ Recurring tasks - show if within alert window\r\n const recurringStatus = getRecurringStepStatus(step);\r\n if (recurringStatus && recurringStatus.daysRemaining !== null && recurringStatus.daysRemaining <= alertDaysBefore) {\r\n const cat = categories.find(c => c.id === sop.category);\r\n let statusText = 'Due Soon';\r\n let statusClass = 'due-soon';\r\n \r\n if (recurringStatus.daysRemaining === 0) {\r\n statusText = 'Due Today';\r\n statusClass = 'overdue';\r\n } else if (recurringStatus.daysRemaining === 1) {\r\n statusText = 'Due Tomorrow';\r\n statusClass = 'due-soon';\r\n } else {\r\n statusText = `${recurringStatus.daysRemaining} days left`;\r\n statusClass = 'due-soon';\r\n }\r\n \r\n alerts.push({\r\n id: sop.id,\r\n title: sop.title,\r\n subtitle: `Step ${idx + 1}: ${step.description.substring(0, 40)}${step.description.length > 40 ? '...' : ''}`,\r\n category: cat ? `${cat.icon} ${cat.name}` : sop.category,\r\n endDate: recurringStatus.text,\r\n status: { text: statusText, class: statusClass },\r\n days: recurringStatus.daysRemaining\r\n });\r\n }\r\n }\r\n });\r\n }\r\n });\r\n\r\n alerts.sort((a, b) => a.days - b.days);\r\n\r\n const list = document.getElementById('alertsList');\r\n if (alerts.length === 0) {\r\n list.innerHTML = '<div class=\"empty-state\"><div style=\"font-size: 3rem; margin-bottom: 15px;\">\u2705<\/div><h3>No Alerts<\/h3><p>All tasks on track!<\/p><\/div>';\r\n } else {\r\n list.innerHTML = alerts.map(a => `\r\n <div class=\"alert-item ${a.status.class}\">\r\n <div>\r\n <h4>${a.title}<\/h4>\r\n <p style=\"font-size: 0.9rem; color: var(--dark); margin: 3px 0;\">${a.subtitle}<\/p>\r\n <p style=\"font-size: 0.85rem;\">\ud83d\udcc2 ${a.category} | \ud83d\udcc5 Due: ${a.endDate}<\/p>\r\n <\/div>\r\n <div style=\"text-align: right;\">\r\n <strong style=\"color: ${a.status.class === 'overdue' ? 'var(--danger)' : 'var(--warning)'};\">${a.status.text}<\/strong><br>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"closeAlertsModal(); executeSOP(${a.id})\" style=\"margin-top: 8px;\">View<\/button>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n document.getElementById('alertsModal').classList.add('active');\r\n }\r\n\r\n function closeAlertsModal() {\r\n document.getElementById('alertsModal').classList.remove('active');\r\n }\r\n\r\n function deleteSOP(id) {\r\n deleteTarget = id;\r\n document.getElementById('deleteModal').classList.add('active');\r\n }\r\n\r\n function closeDeleteModal() {\r\n document.getElementById('deleteModal').classList.remove('active');\r\n deleteTarget = null;\r\n }\r\n\r\n function confirmDelete() {\r\n if (!deleteTarget) return;\r\n sops = sops.filter(s => s.id !== deleteTarget);\r\n saveSOPs();\r\n closeDeleteModal();\r\n showToast('\u2705 Deleted!');\r\n renderDashboard();\r\n }\r\n\r\n function exportData() {\r\n const data = { version: '5.0', exportDate: new Date().toISOString(), sops, categories };\r\n const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application\/json' });\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `SOP_Backup_${new Date().toISOString().split('T')[0]}.json`;\r\n a.click();\r\n URL.revokeObjectURL(url);\r\n showToast('\u2705 Exported!');\r\n }\r\n\r\n function importData() {\r\n document.getElementById('importFileInput').click();\r\n }\r\n\r\n function handleImport(e) {\r\n const file = e.target.files[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = function(ev) {\r\n try {\r\n const data = JSON.parse(ev.target.result);\r\n if (!data.sops || !data.categories) {\r\n showToast('\u26a0\ufe0f Invalid file!', 'warning');\r\n return;\r\n }\r\n if (confirm('Replace all data?')) {\r\n sops = data.sops;\r\n categories = data.categories;\r\n saveSOPs();\r\n saveCategories();\r\n renderDashboard();\r\n showToast('\u2705 Imported!');\r\n }\r\n } catch (err) {\r\n showToast('\u26a0\ufe0f Error reading file!', 'warning');\r\n }\r\n };\r\n reader.readAsText(file);\r\n e.target.value = '';\r\n }\r\n\r\n function showSettingsModal() {\r\n renderThemeSelector();\r\n renderCategoryManager();\r\n \/\/ Load alert settings\r\n document.getElementById('alertDaysBefore').value = alertDaysBefore;\r\n document.getElementById('showOverdueAlerts').checked = showOverdueAlerts;\r\n document.getElementById('settingsModal').classList.add('active');\r\n }\r\n\r\n function closeSettingsModal() {\r\n document.getElementById('settingsModal').classList.remove('active');\r\n }\r\n\r\n function renderThemeSelector() {\r\n const themes = [\r\n {id: 'blue', start: '#667eea', end: '#764ba2'},\r\n {id: 'green', start: '#10b981', end: '#059669'},\r\n {id: 'purple', start: '#8b5cf6', end: '#7c3aed'},\r\n {id: 'red', start: '#ef4444', end: '#dc2626'},\r\n {id: 'orange', start: '#f59e0b', end: '#d97706'}\r\n ];\r\n \r\n const html = themes.map(t => `\r\n <div onclick=\"changeTheme('${t.id}')\" style=\"cursor: pointer; text-align: center; padding: 8px; border: 3px solid ${currentTheme === t.id ? 'var(--primary)' : 'var(--border)'}; border-radius: 8px;\">\r\n <div style=\"height: 30px; background: linear-gradient(135deg, ${t.start}, ${t.end}); border-radius: 4px; margin-bottom: 5px;\"><\/div>\r\n <span style=\"font-size: 0.8rem; text-transform: capitalize;\">${t.id}<\/span>\r\n <\/div>\r\n `).join('');\r\n \r\n document.getElementById('themeSelector').innerHTML = html;\r\n }\r\n\r\n function changeTheme(theme) {\r\n currentTheme = theme;\r\n document.body.className = 'theme-' + theme;\r\n localStorage.setItem('theme', theme);\r\n renderThemeSelector();\r\n showToast('\u2705 Theme changed!');\r\n }\r\n\r\n function renderCategoryManager() {\r\n const html = categories.map(cat => {\r\n const count = sops.filter(s => s.category === cat.id).length;\r\n return `\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; padding: 10px; border: 2px solid var(--border); border-radius: 8px; margin-bottom: 8px;\">\r\n <div><span style=\"font-size: 1.2rem;\">${cat.icon}<\/span> <strong>${cat.name}<\/strong> <span style=\"color: var(--gray);\">(${count})<\/span><\/div>\r\n <div style=\"display: flex; gap: 5px;\">\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"editCategory('${cat.id}')\">\u270f\ufe0f<\/button>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"deleteCategory('${cat.id}')\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('');\r\n document.getElementById('categoryManagerList').innerHTML = html || '<p style=\"color: var(--gray); text-align: center;\">No categories<\/p>';\r\n }\r\n\r\n function editCategory(id) {\r\n const cat = categories.find(c => c.id === id);\r\n if (!cat) return;\r\n editCategoryId = id;\r\n document.getElementById('editCategoryName').value = cat.name;\r\n document.getElementById('editCategoryIcon').value = cat.icon;\r\n closeSettingsModal();\r\n document.getElementById('editCategoryModal').classList.add('active');\r\n }\r\n\r\n function closeEditCategoryModal() {\r\n document.getElementById('editCategoryModal').classList.remove('active');\r\n editCategoryId = null;\r\n }\r\n\r\n function saveEditCategory() {\r\n const name = document.getElementById('editCategoryName').value.trim();\r\n const icon = document.getElementById('editCategoryIcon').value.trim();\r\n if (!name) {\r\n showToast('\u26a0\ufe0f Enter name!', 'warning');\r\n return;\r\n }\r\n const idx = categories.findIndex(c => c.id === editCategoryId);\r\n if (idx !== -1) {\r\n categories[idx].name = name;\r\n categories[idx].icon = icon || categories[idx].icon;\r\n saveCategories();\r\n closeEditCategoryModal();\r\n renderDashboard();\r\n showToast('\u2705 Category updated!');\r\n }\r\n }\r\n\r\n function deleteCategory(id) {\r\n const count = sops.filter(s => s.category === id).length;\r\n if (count > 0) {\r\n showToast(`\u26a0\ufe0f Cannot delete! ${count} SOPs use this.`, 'warning');\r\n return;\r\n }\r\n if (!confirm('Delete this category?')) return;\r\n categories = categories.filter(c => c.id !== id);\r\n saveCategories();\r\n renderCategoryManager();\r\n renderDashboard();\r\n showToast('\u2705 Deleted!');\r\n }\r\n\r\n function saveAlertSettings() {\r\n const days = parseInt(document.getElementById('alertDaysBefore').value);\r\n const showOverdue = document.getElementById('showOverdueAlerts').checked;\r\n \r\n if (days < 1 || days > 30) {\r\n showToast('\u26a0\ufe0f Days must be between 1 and 30!', 'warning');\r\n return;\r\n }\r\n \r\n alertDaysBefore = days;\r\n showOverdueAlerts = showOverdue;\r\n \r\n localStorage.setItem('alertDaysBefore', days);\r\n localStorage.setItem('showOverdueAlerts', showOverdue);\r\n \r\n showToast('\u2705 Alert settings saved!');\r\n }\r\n\r\n function showToast(msg, type = 'success') {\r\n const toast = document.getElementById('toast');\r\n document.getElementById('toastMessage').textContent = msg;\r\n toast.style.background = type === 'warning' ? 'var(--warning)' : 'var(--success)';\r\n toast.classList.add('show');\r\n setTimeout(() => toast.classList.remove('show'), 3000);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SOP Management System – Complete \ud83d\udccb SOP Manager Pro \ud83d\udcc5 \u2699\ufe0f Settings \u2795 New SOP \ud83c\udfe0 Dashboard \ud83d\udcc2 Categories \u2795 0 Total SOPs 0 Total Items 0 Completed 0 \u26a0\ufe0f Date Alerts Create New SOP Cancel \ud83d\udcbe Save SOP Title * Category * Select Category Start Date (Optional) End Date (Optional) Purpose\/Objective Selected Layout SOP […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2696","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/comments?post=2696"}],"version-history":[{"count":55,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2696\/revisions"}],"predecessor-version":[{"id":3162,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2696\/revisions\/3162"}],"wp:attachment":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/media?parent=2696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}