From 4740c622a88d86215d26ac7584ff1dea490f63bb Mon Sep 17 00:00:00 2001 From: DevSoftTech Server Date: Sat, 6 Jun 2026 05:25:11 +0530 Subject: [PATCH] Redesign IPD discharge complaints table to match OPD consult form interface MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit UX IMPROVEMENT: Unified table design across OPD and IPD modules CHANGES: 1. TABLE REDESIGN: - Moved autocomplete input INTO table footer (like OPD form) - Added row numbers (#) column - Compact styling with smaller font sizes (.82rem) - Minimal delete button (× symbol) instead of full button - Removed separate 'Smart Complaints Picker' section above table - Clean, professional Healthplix-style interface 2. AUTOCOMPLETE IMPROVEMENTS: - Replaced datalist with custom dropdown menu - Better visual feedback with hover effects - Click to select from dropdown - Enter key to add complaint - Auto-close on selection 3. BUTTON REORGANIZATION: - AI Draft and Hinglish buttons moved below table - Emoji icons for better visual recognition - Compact size, less intrusive - Removed duplicate Hinglish button from 'Other Complaints' label 4. IMPROVED SPACING: - Tighter layout, less vertical space - More data visible on screen - Professional medical app look and feel BENEFITS: - Consistent interface between OPD and IPD modules - Faster complaint entry with inline autocomplete - Better use of screen space - Cleaner, more modern appearance - Familiar workflow for users switching between OPD/IPD --- app/Views/billing/ipd/discharge_create.php | 180 +++++++++++++-------- 1 file changed, 116 insertions(+), 64 deletions(-) diff --git a/app/Views/billing/ipd/discharge_create.php b/app/Views/billing/ipd/discharge_create.php index 9fd492b..f437ce6 100644 --- a/app/Views/billing/ipd/discharge_create.php +++ b/app/Views/billing/ipd/discharge_create.php @@ -714,58 +714,75 @@ $allergyStatusNoKnown = in_array($allergyStatusNormalized, ['no known drug aller -
- -
- - - -
- -
-
- -
- - - - - - + +
Complaint NameRemarkAction
+ + + + + + + + + + + + + + + + + - - - - - - - - - - - - -
#ComplaintRemark
No complaint rows yet.
+ + + + + +
No complaint rows yet.
- - - - - -
+ + + + + + + + + + + + + + + + +
+ +
+ +
@@ -832,9 +849,7 @@ $allergyStatusNoKnown = in_array($allergyStatusNormalized, ['no known drug aller
- +
@@ -1689,7 +1704,7 @@ $allergyStatusNoKnown = in_array($allergyStatusNormalized, ['no known drug aller } var lookup = document.getElementById('discharge_complaint_lookup'); - var suggest = document.getElementById('discharge_complaint_suggest'); + var dropdown = document.getElementById('discharge_complaint_dropdown'); var nameInput = document.getElementById('new_complaint_name'); var remarkInput = document.getElementById('new_complaint_remark'); var addRowBtn = document.getElementById('btn_add_complaint_row'); @@ -1703,11 +1718,11 @@ $allergyStatusNoKnown = in_array($allergyStatusNormalized, ['no known drug aller var complaintSuggestions = []; section.querySelectorAll('table tbody tr').forEach(function(row) { - var firstCell = row.querySelector('td'); + var firstCell = row.querySelector('.discharge-complaint-name-input'); if (!firstCell) { return; } - var value = (firstCell.textContent || '').trim(); + var value = (firstCell.value || '').trim(); if (value !== '' && value.toLowerCase() !== 'no complaint rows yet.') { selectedComplaints.push(value); } @@ -1740,29 +1755,66 @@ $allergyStatusNoKnown = in_array($allergyStatusNormalized, ['no known drug aller }); } - if (lookup) { + if (lookup && dropdown) { lookup.addEventListener('input', function() { var q = (lookup.value || '').trim(); if (q.length < 2 || !window.jQuery) { + dropdown.style.display = 'none'; return; } $.get('?q=' + encodeURIComponent(q), function(data) { complaintSuggestions = (data && data.rows) ? data.rows : []; - if (!suggest) { + if (!complaintSuggestions.length) { + dropdown.style.display = 'none'; return; } + var html = ''; complaintSuggestions.forEach(function(row) { var label = row.name || ''; - if (row.name_hinglish) { - label += ' (' + row.name_hinglish + ')'; - } - html += ''; + var hinglish = row.name_hinglish ? ' (' + row.name_hinglish + ')' : ''; + html += '
' + + $('
').text(label).html() + + '' + hinglish + '
'; + }); + dropdown.innerHTML = html; + dropdown.style.display = 'block'; + + dropdown.querySelectorAll('.dropdown-item').forEach(function(item) { + item.addEventListener('mouseenter', function() { + this.style.backgroundColor = '#f8f9fa'; + }); + item.addEventListener('mouseleave', function() { + this.style.backgroundColor = ''; + }); + item.addEventListener('click', function() { + var value = this.getAttribute('data-value'); + lookup.value = value; + dropdown.style.display = 'none'; + if (btnAdd) { + btnAdd.click(); + } + }); }); - suggest.innerHTML = html; }, 'json'); }); + + lookup.addEventListener('keydown', function(e) { + if (e.key === 'Enter' && btnAdd) { + e.preventDefault(); + dropdown.style.display = 'none'; + btnAdd.click(); + } else if (e.key === 'Escape') { + dropdown.style.display = 'none'; + } + }); + + lookup.addEventListener('blur', function() { + setTimeout(function() { + dropdown.style.display = 'none'; + }, 200); + }); } if (btnAdd) {