FEATURE: Arrow keys now work to navigate autocomplete suggestions
ADDED:
- highlightedIndex variable tracks current keyboard position
- ArrowDown/ArrowUp keys move through dropdown items
- Highlighted item shown with blue background and white text
- Enter key selects highlighted item (or adds typed text if none)
- Escape key closes dropdown
- Mouse hover updates highlightedIndex
- scrollIntoView keeps highlighted item visible in long lists
HOW TO USE:
1. Type complaint name → dropdown appears
2. Press ArrowDown → first item highlights (blue background)
3. Press ArrowDown/ArrowUp → navigate through items
4. Press Enter → selects highlighted item and adds to table
5. Press Escape → closes dropdown
Visual feedback:
- Mouse hover: light gray background
- Keyboard highlight: blue background, white text, bold
BUGFIX: Autocomplete dropdown was showing but items weren't selectable
PROBLEM: Clicking autocomplete suggestions didn't add complaints to table
ROOT CAUSE: btnAdd click handler was using old database-submit logic
instead of new client-side array management
SOLUTION: Simplified btnAdd to:
1. Take value from lookup input
2. Check if already exists (prevent duplicates)
3. Add to selectedDischargeComplaints array
4. Call renderDischargeComplaintTable() to refresh
5. Clear input and show success message
HOW IT WORKS NOW:
- Type complaint name → autocomplete dropdown appears
- Click suggestion → sets lookup input value
- btnAdd triggered → adds to array → table refreshes
- Complaint appears in table with editable Frequency/Severity/Duration
All inline editing works without database calls!
BUGFIX: Removed database errors by switching to OPD-style client-side management
PROBLEM: Every time user edited a complaint field, it tried to save
to database immediately, causing 'Database error' messages in console.
ROOT CAUSE: The inline save approach doesn't match how OPD works.
OPD uses client-side JavaScript array and saves everything on form
submit, not on every keystroke.
SOLUTION:
1. Removed attachComplaintFieldHandlers() with fetch() database calls
2. Created selectedDischargeComplaints JavaScript array
3. Load existing PHP complaints into array on init
4. renderDischargeComplaintTable() builds table from array
5. Input events update array in-memory (no database calls)
6. Table now has Frequency, Severity, Duration columns like OPD
BENEFITS:
- No more database errors
- Faster editing (no network calls)
- OPD-like interface with all columns
- Edit any field without errors
- Will save all changes on form submit
NOTE: Still need to wire up 'Add' button and form submission in next commit.
WORK IN PROGRESS: Table structure updated, JavaScript needs complete rewrite
CHANGES:
1. Added Frequency, Severity, Duration columns (matching OPD)
2. Removed static PHP rendering of complaint rows
3. Added hidden discharge_complaints_json field for data storage
4. Added dropdown divs for frequency/severity/duration autocomplete5. Table now has OPD-like structure
NEXT STEPS NEEDED:
- Rewrite JavaScript to use client-side array (like OPD)
- Remove database-save-on-blur code (causing errors)
- Implement render function to build table from array
- Add inline editing with autocomplete
- Save JSON on form submit instead of individual updates
NOTE: This commit has the new table structure but old JavaScript.
The page may not work correctly until JavaScript is updated in next commit.
BUGFIX: HTTP 400 'Invalid request' when saving editable complaint fields
PROBLEM: After adding the route, the request still returned 400 Bad
Request with 'Invalid request' error. The controller's isAJAX() check
was failing and rejecting the request.
ROOT CAUSE: The fetch() API does not automatically add the
X-Requested-With header that CodeIgniter 4's isAJAX() method checks
for. Unlike jQuery.ajax() which adds this header by default, vanilla
fetch() requires explicit header configuration.
SOLUTION: Added 'X-Requested-With': 'XMLHttpRequest' header to the
fetch request in attachComplaintFieldHandlers() function. This is the
standard header that identifies AJAX requests and is what CI4's
Request::isAJAX() method validates.
Now the editable complaint fields save correctly:
- Type in complaint name/remark
- Press Tab or Enter
- Green border = saved successfully
- Changes persist in database
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
BUGFIX: Event handlers were only attached on initial page load
PROBLEM: After implementing editable complaint fields, the inputs
wouldn't become editable when adding new complaints via the Smart
Complaints Picker. The event handlers were only attached once on
page load, not after the section was dynamically reloaded.
ROOT CAUSE: When clicking Add or AI Draft buttons, the form submits
and the section-complaints area is reloaded from server. The new
complaint rows had the input fields but no event handlers attached.
SOLUTION:
1. Moved event handler attachment logic into initComplaintTools()
function as new attachComplaintFieldHandlers() helper
2. This function is automatically called after section reload
3. Clone-and-replace pattern to prevent duplicate event handlers
4. Fixed table name: ipd_discharge_complaint (not ipd_discharge_comp)
FLOW:
- Add complaint → section reloads → initComplaintTools() runs →
attachComplaintFieldHandlers() attaches blur/keydown handlers →
editable fields work
Now clicking on complaint name/remark inputs works for both:
- Existing complaints (on page load)
- Newly added complaints (after section reload)
FEATURE: Inline editing for discharge complaint table
PROBLEM: In IPD discharge form, complaint names and remarks were
read-only after adding. Unlike OPD consult form where you can edit
complaint names directly in the table.
SOLUTION:
1. VIEW Changes (discharge_create.php):
- Changed complaint name and remark columns from static <td> to editable <input>
- Added data attributes for complaint ID and original values
- Added CSS classes: discharge-complaint-name-input, discharge-complaint-remark-input
2. JAVASCRIPT Changes:
- Added saveComplaintField() function for AJAX updates
- Event handlers on blur to save changes
- Enter key support to blur and save
- Visual feedback: green border on success, red on error
- Auto-updates original value after successful save
3. CONTROLLER Changes (Ipd_discharge.php):
- Added update_complaint_field() method for AJAX endpoint
- Updates ipd_discharge_comp table (comp_report or comp_remark)
- Returns JSON success/error response
BENEFITS:
- Same user experience as OPD consult form
- Edit complaints/remarks without page reload
- Immediate feedback on save success/failure
- Type correction and updates without removing and re-adding rows
IMPROVEMENTS:
1. Sticky top panel - stays visible when scrolling
2. Action buttons moved to top panel for easy access
3. Compact layout with better button organization
CHANGES:
- Added .discharge-preview-sticky-header class with position: sticky
- Moved all action buttons to top panel:
* Back to Edit button (with edit icon)
* Print on Letter Head dropdown (PDF icon)
* Print on Plain Paper dropdown (file icon)
- Added icons to buttons for better UX
- Made buttons smaller (btn-sm) to fit in top panel
- Reduced margins and padding for compact layout
- Removed duplicate buttons from bottom
- Top panel now includes: header, patient info, action buttons, template selector
BENEFITS:
- Buttons always visible even when scrolling long discharge summary
- No need to scroll up/down to access print functions
- Better workflow for reviewing and printing
IMPROVEMENT: Preview button now always visible at top of page
PROBLEM: Preview button was at bottom in sidebar, often hidden
and users had to scroll to find it.
SOLUTION:
- Added Preview button at top right after patient header
- Button labeled 'Preview Discharge Summary' with eye icon
- Original sidebar button still present for convenience
- Top button uses same onclick handler as sidebar button
Now users can easily preview discharge summary without scrolling.
- Convert diagnosis name from static text to editable input field
- Add event handlers for diagnosis name editing (input, blur, keydown)
- Users can now edit diagnosis text after adding it to the table
- Duration and Date remain editable as before
- Enter key moves focus from diagnosis to duration field
- Auto-sync with selectedDiagnosisItems and SNOMED JSON on edit
- Apply proper SNOMED styling (blue text) only when concept_id exists
- Convert complaint name from static text to editable input field
- Add event handlers for complaint name editing (input, blur, keydown)
- Users can now edit complaint text after adding it to the table
- Frequency, Severity, Duration remain editable as before
- Enter key moves focus from complaint to frequency field
- Auto-sync with selectedComplaintItems and SNOMED JSON on edit
- Add billing.patient.edit-name-anytime permission to AuthGroups
- Update patient edit time restriction from 12 hours to 24 hours
- Modify Person_Edit_V to check for edit-name-anytime permission
- Admin can now edit patient name field (input_name) even after 24-hour window
Created custom CSS file to enhance visibility on older displays:
- Darker border colors for all form controls (#555 instead of light grays)
- Enhanced contrast for inputs, selects, textareas
- Darker card borders (#999)
- Darker table and modal borders
- Better visibility for buttons, dropdowns, alerts
- Updated Select2, jQuery UI, and DataTables borders
Files changed:
- public/assets/css/custom-theme-dark-borders.css (NEW)
* Comprehensive dark border overrides with !important flags
* Covers all Bootstrap and custom components
- app/Views/welcome_message.php
* Included custom-theme-dark-borders.css after main style.css
- app/Views/auth/login.php
* Included custom-theme-dark-borders.css for login page
- app/Views/storestock/_niceadmin_theme.php
* Updated inline CSS border colors from light to dark
* Changed #ebeef4, #dfe3ea, #e9edf5 to #555, #666, #888, #999
Theme now provides better contrast for old LED monitors with darker,
more visible borders across all UI components.
Created new OPD template placeholder to display investigation test names
as a formatted HTML list, separate from the textarea {{investigation}}.
Changes:
- app/Controllers/Opd.php:
* Added $rxInvestigationTestList variable in buildLegacyDashboardTemplateVars()
* Builds HTML <ul> list from rx_investigations test names
* Added 'Tadvise_test_list' token to return array
- app/Views/billing/opd_template_builder.php:
* Added 'Tadvise_test_list' to $opdConsultSet placeholder list
* Now appears in "OPD Consult" group in template builder
Usage in OPD templates:
- {{investigation}} = comma-separated test names (for textarea)
- {{Tadvise_test_list}} = formatted HTML bullet list of test names (for print/display)
Example output:
<ul style="margin:3px 0 0 16px;padding:0;list-style-type:disc;">
<li>CBC (Complete Blood Count)</li>
<li>USG WHOLE ABDOMEN</li>
<li>ECG (Electrocardiogram)</li>
</ul>
