From e0b7ce374d5ab64ca322f46713abb53621508913 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 7 Jan 2026 10:54:47 -0500
Subject: [PATCH] Phase 5: Update modals and hamburger menus with ASCII frames
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Hamburger Menu Updates
- Ticket page menu: Added ascii-subsection-header and ascii-frame-inner wrapper
- Dashboard menu: Added ascii-subsection-header and dashboard-filters wrapper
- Maintains all inline editing functionality for ticket fields
- Preserves all filter checkbox functionality for dashboard

## Settings Modal Enhancement
- Wrapped in ascii-frame-outer with ╚╝ bottom corners
- Added ascii-section-header for title
- Nested content in ascii-content → ascii-frame-inner
- Added ascii-divider before footer
- Moved close button to footer for better layout

## Bulk Operations Modals
- Bulk Assign Modal: Full ASCII frame structure with nested sections
- Bulk Priority Modal: Full ASCII frame structure with nested sections
- Both modals now have:
  * ascii-frame-outer with corner decorations
  * ascii-section-header for title
  * ascii-content and ascii-frame-inner for body
  * ascii-divider before footer
  * Consistent visual hierarchy with rest of app

## Code Quality
- All event handlers and functionality preserved
- No breaking changes to JavaScript logic
- Consistent frame structure across all dynamically generated UI
- All modals and menus now match the nested frame aesthetic

## Files Modified
- assets/js/dashboard.js: Updated 5 HTML generation functions
  * createHamburgerMenu() - ticket page version
  * createHamburgerMenu() - dashboard version
  * createSettingsModal()
  * showBulkAssignModal()
  * showBulkPriorityModal()

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 assets/js/dashboard.js | 247 ++++++++++++++++++++++++-----------------
 1 file changed, 146 insertions(+), 101 deletions(-)

diff --git a/assets/js/dashboard.js b/assets/js/dashboard.js
index 527fa75..3ad1a2d 100644
--- a/assets/js/dashboard.js
+++ b/assets/js/dashboard.js
@@ -116,25 +116,34 @@ function createSettingsModal() {
     const backdrop = document.createElement('div');
     backdrop.className = 'settings-modal-backdrop';
     backdrop.innerHTML = `
-        <div class="settings-modal">
-            <div class="settings-modal-header">
-                <h2>Dashboard Settings</h2>
-                <button class="close-modal">×</button>
-            </div>
-            <div class="settings-modal-content">
-                <div class="setting-group">
-                    <h3>Rows per Page</h3>
-                    <select id="rows-per-page">
-                        <option value="15">15</option>
-                        <option value="25">25</option>
-                        <option value="50">50</option>
-                        <option value="100">100</option>
-                    </select>
+        <div class="settings-modal ascii-frame-outer">
+            <span class="bottom-left-corner">╚</span>
+            <span class="bottom-right-corner">╝</span>
+
+            <div class="ascii-section-header">Dashboard Settings</div>
+
+            <div class="ascii-content">
+                <div class="ascii-frame-inner">
+                    <div class="setting-group">
+                        <h3>Rows per Page</h3>
+                        <select id="rows-per-page">
+                            <option value="15">15</option>
+                            <option value="25">25</option>
+                            <option value="50">50</option>
+                            <option value="100">100</option>
+                        </select>
+                    </div>
                 </div>
             </div>
-            <div class="settings-modal-footer">
-                <button class="save-settings">Save Settings</button>
-                <button class="cancel-settings">Cancel</button>
+
+            <div class="ascii-divider"></div>
+
+            <div class="ascii-content">
+                <div class="settings-modal-footer">
+                    <button class="save-settings">Save Settings</button>
+                    <button class="cancel-settings">Cancel</button>
+                    <button class="close-modal">×</button>
+                </div>
             </div>
         </div>
     `;
@@ -387,56 +396,60 @@ function createHamburgerMenu() {
             <div class="hamburger-icon">☰</div>
             <div class="hamburger-content">
                 <div class="close-hamburger">☰</div>
-                <h3>Ticket Actions</h3>
-                <div class="ticket-info-editable">
-                    <div class="editable-field" data-field="priority">
-                        <label><strong>Priority:</strong></label>
-                        <span class="editable-value" data-current="${window.ticketData.priority}">P${window.ticketData.priority}</span>
-                        <div class="edit-dropdown" style="display: none;">
-                            <select class="field-select">
-                                <option value="1" ${String(window.ticketData.priority) === '1' ? 'selected' : ''}>P1 - Critical</option>
-                                <option value="2" ${String(window.ticketData.priority) === '2' ? 'selected' : ''}>P2 - High</option>
-                                <option value="3" ${String(window.ticketData.priority) === '3' ? 'selected' : ''}>P3 - Medium</option>
-                                <option value="4" ${String(window.ticketData.priority) === '4' ? 'selected' : ''}>P4 - Low</option>
-                                <option value="5" ${String(window.ticketData.priority) === '5' ? 'selected' : ''}>P5 - Lowest</option>
-                            </select>
-                            <div class="edit-actions">
-                                <button class="save-btn">✓</button>
-                                <button class="cancel-btn">✗</button>
+
+                <div class="ascii-subsection-header">Ticket Actions</div>
+
+                <div class="ascii-frame-inner">
+                    <div class="ticket-info-editable">
+                        <div class="editable-field" data-field="priority">
+                            <label><strong>Priority:</strong></label>
+                            <span class="editable-value" data-current="${window.ticketData.priority}">P${window.ticketData.priority}</span>
+                            <div class="edit-dropdown" style="display: none;">
+                                <select class="field-select">
+                                    <option value="1" ${String(window.ticketData.priority) === '1' ? 'selected' : ''}>P1 - Critical</option>
+                                    <option value="2" ${String(window.ticketData.priority) === '2' ? 'selected' : ''}>P2 - High</option>
+                                    <option value="3" ${String(window.ticketData.priority) === '3' ? 'selected' : ''}>P3 - Medium</option>
+                                    <option value="4" ${String(window.ticketData.priority) === '4' ? 'selected' : ''}>P4 - Low</option>
+                                    <option value="5" ${String(window.ticketData.priority) === '5' ? 'selected' : ''}>P5 - Lowest</option>
+                                </select>
+                                <div class="edit-actions">
+                                    <button class="save-btn">✓</button>
+                                    <button class="cancel-btn">✗</button>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    
-                    <div class="editable-field" data-field="category">
-                        <label><strong>Category:</strong></label>
-                        <span class="editable-value" data-current="${window.ticketData.category}">${window.ticketData.category}</span>
-                        <div class="edit-dropdown" style="display: none;">
-                            <select class="field-select">
-                                <option value="Hardware" ${window.ticketData.category === 'Hardware' ? 'selected' : ''}>Hardware</option>
-                                <option value="Software" ${window.ticketData.category === 'Software' ? 'selected' : ''}>Software</option>
-                            </select>
-                            <div class="edit-actions">
-                                <button class="save-btn">✓</button>
-                                <button class="cancel-btn">✗</button>
+
+                        <div class="editable-field" data-field="category">
+                            <label><strong>Category:</strong></label>
+                            <span class="editable-value" data-current="${window.ticketData.category}">${window.ticketData.category}</span>
+                            <div class="edit-dropdown" style="display: none;">
+                                <select class="field-select">
+                                    <option value="Hardware" ${window.ticketData.category === 'Hardware' ? 'selected' : ''}>Hardware</option>
+                                    <option value="Software" ${window.ticketData.category === 'Software' ? 'selected' : ''}>Software</option>
+                                </select>
+                                <div class="edit-actions">
+                                    <button class="save-btn">✓</button>
+                                    <button class="cancel-btn">✗</button>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    
-                    <div class="editable-field" data-field="type">
-                        <label><strong>Type:</strong></label>
-                        <span class="editable-value" data-current="${window.ticketData.type}">${window.ticketData.type}</span>
-                        <div class="edit-dropdown" style="display: none;">
-                            <select class="field-select">
-                                <option value="Install" ${window.ticketData.type === 'Install' ? 'selected' : ''}>Install</option>
-                                <option value="Maintenance" ${window.ticketData.type === 'Maintenance' ? 'selected' : ''}>Maintenance</option>
-                                <option value="Problem" ${window.ticketData.type === 'Problem' ? 'selected' : ''}>Problem</option>
-                                <option value="Request" ${window.ticketData.type === 'Request' ? 'selected' : ''}>Request</option>
-                                <option value="Task" ${window.ticketData.type === 'Task' ? 'selected' : ''}>Task</option>
-                                <option value="Upgrade" ${window.ticketData.type === 'Upgrade' ? 'selected' : ''}>Upgrade</option>
-                            </select>
-                            <div class="edit-actions">
-                                <button class="save-btn">✓</button>
-                                <button class="cancel-btn">✗</button>
+
+                        <div class="editable-field" data-field="type">
+                            <label><strong>Type:</strong></label>
+                            <span class="editable-value" data-current="${window.ticketData.type}">${window.ticketData.type}</span>
+                            <div class="edit-dropdown" style="display: none;">
+                                <select class="field-select">
+                                    <option value="Install" ${window.ticketData.type === 'Install' ? 'selected' : ''}>Install</option>
+                                    <option value="Maintenance" ${window.ticketData.type === 'Maintenance' ? 'selected' : ''}>Maintenance</option>
+                                    <option value="Problem" ${window.ticketData.type === 'Problem' ? 'selected' : ''}>Problem</option>
+                                    <option value="Request" ${window.ticketData.type === 'Request' ? 'selected' : ''}>Request</option>
+                                    <option value="Task" ${window.ticketData.type === 'Task' ? 'selected' : ''}>Task</option>
+                                    <option value="Upgrade" ${window.ticketData.type === 'Upgrade' ? 'selected' : ''}>Upgrade</option>
+                                </select>
+                                <div class="edit-actions">
+                                    <button class="save-btn">✓</button>
+                                    <button class="cancel-btn">✗</button>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -456,18 +469,24 @@ function createHamburgerMenu() {
             <div class="hamburger-icon">☰</div>
             <div class="hamburger-content">
                 <div class="close-hamburger">☰</div>
-                <h3>Filters</h3>
-                <div class="filter-section">
-                    <h4>Categories</h4>
-                    <div id="category-filters"></div>
-                </div>
-                <div class="filter-section">
-                    <h4>Types</h4>
-                    <div id="type-filters"></div>
-                </div>
-                <div class="filter-actions">
-                    <button id="apply-filters">Apply Filters</button>
-                    <button id="clear-filters">Clear Filters</button>
+
+                <div class="ascii-subsection-header">Filters</div>
+
+                <div class="ascii-frame-inner">
+                    <div class="dashboard-filters">
+                        <div class="filter-section">
+                            <h4>Categories</h4>
+                            <div id="category-filters"></div>
+                        </div>
+                        <div class="filter-section">
+                            <h4>Types</h4>
+                            <div id="type-filters"></div>
+                        </div>
+                        <div class="filter-actions">
+                            <button id="apply-filters">Apply Filters</button>
+                            <button id="clear-filters">Clear Filters</button>
+                        </div>
+                    </div>
                 </div>
             </div>
         `;
@@ -971,18 +990,31 @@ function showBulkAssignModal() {
     // Create modal HTML
     const modalHtml = `
         <div class="modal-overlay" id="bulkAssignModal">
-            <div class="modal-content">
-                <h3>Assign ${ticketIds.length} Ticket(s)</h3>
-                <div class="modal-body">
-                    <label for="bulkAssignUser">Assign to:</label>
-                    <select id="bulkAssignUser" class="editable">
-                        <option value="">Select User...</option>
-                        <!-- Users will be loaded dynamically -->
-                    </select>
+            <div class="modal-content ascii-frame-outer">
+                <span class="bottom-left-corner">╚</span>
+                <span class="bottom-right-corner">╝</span>
+
+                <div class="ascii-section-header">Assign ${ticketIds.length} Ticket(s)</div>
+
+                <div class="ascii-content">
+                    <div class="ascii-frame-inner">
+                        <div class="modal-body">
+                            <label for="bulkAssignUser">Assign to:</label>
+                            <select id="bulkAssignUser" class="editable">
+                                <option value="">Select User...</option>
+                                <!-- Users will be loaded dynamically -->
+                            </select>
+                        </div>
+                    </div>
                 </div>
-                <div class="modal-footer">
-                    <button onclick="performBulkAssign()" class="btn btn-bulk">Assign</button>
-                    <button onclick="closeBulkAssignModal()" class="btn btn-secondary">Cancel</button>
+
+                <div class="ascii-divider"></div>
+
+                <div class="ascii-content">
+                    <div class="modal-footer">
+                        <button onclick="performBulkAssign()" class="btn btn-bulk">Assign</button>
+                        <button onclick="closeBulkAssignModal()" class="btn btn-secondary">Cancel</button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -1060,22 +1092,35 @@ function showBulkPriorityModal() {
 
     const modalHtml = `
         <div class="modal-overlay" id="bulkPriorityModal">
-            <div class="modal-content">
-                <h3>Change Priority for ${ticketIds.length} Ticket(s)</h3>
-                <div class="modal-body">
-                    <label for="bulkPriority">Priority:</label>
-                    <select id="bulkPriority" class="editable">
-                        <option value="">Select Priority...</option>
-                        <option value="1">P1 - Critical Impact</option>
-                        <option value="2">P2 - High Impact</option>
-                        <option value="3">P3 - Medium Impact</option>
-                        <option value="4">P4 - Low Impact</option>
-                        <option value="5">P5 - Minimal Impact</option>
-                    </select>
+            <div class="modal-content ascii-frame-outer">
+                <span class="bottom-left-corner">╚</span>
+                <span class="bottom-right-corner">╝</span>
+
+                <div class="ascii-section-header">Change Priority for ${ticketIds.length} Ticket(s)</div>
+
+                <div class="ascii-content">
+                    <div class="ascii-frame-inner">
+                        <div class="modal-body">
+                            <label for="bulkPriority">Priority:</label>
+                            <select id="bulkPriority" class="editable">
+                                <option value="">Select Priority...</option>
+                                <option value="1">P1 - Critical Impact</option>
+                                <option value="2">P2 - High Impact</option>
+                                <option value="3">P3 - Medium Impact</option>
+                                <option value="4">P4 - Low Impact</option>
+                                <option value="5">P5 - Minimal Impact</option>
+                            </select>
+                        </div>
+                    </div>
                 </div>
-                <div class="modal-footer">
-                    <button onclick="performBulkPriority()" class="btn btn-bulk">Update</button>
-                    <button onclick="closeBulkPriorityModal()" class="btn btn-secondary">Cancel</button>
+
+                <div class="ascii-divider"></div>
+
+                <div class="ascii-content">
+                    <div class="modal-footer">
+                        <button onclick="performBulkPriority()" class="btn btn-bulk">Update</button>
+                        <button onclick="closeBulkPriorityModal()" class="btn btn-secondary">Cancel</button>
+                    </div>
                 </div>
             </div>
         </div>