HH/docs/HOSPITAL_HEADER_DISPLAY.md

Hospital Sidebar Display Feature

Overview

This document describes hospital display feature in PX360 sidebar, which shows the current hospital context and allows PX Admins to quickly switch between hospitals.

Features

1. Hospital Display in Sidebar

The sidebar now displays the current hospital at the bottom:

• Hospital icon (🏥)
• Hospital name (truncated if too long)
• City for context
• Dropdown for PX Admins to switch hospitals
• Read-only display for Hospital Admins and Department Managers

Position: At the bottom of the sidebar, after all navigation items.

2. PX Admin Quick Switch

For PX Admins, clicking on the hospital display opens a dropdown with:

• List of all hospitals in the system
• Current hospital highlighted with a checkmark
• Hospital name and city for each option
• "View All Hospitals" link to the full hospital selector page

3. Hospital Context Availability

The current hospital is available in all templates through the current_hospital context variable, provided by the hospital_context context processor.

Implementation Details

Files Modified

1. apps/core/context_processors.py

   • Added hospital_context() function
   • Provides current_hospital and is_px_admin to all templates
   • Also updated sidebar_counts() to include hospital context

2. config/settings/base.py

   • Added apps.core.context_processors.hospital_context to context_processors list

3. templates/layouts/partials/sidebar.html

   • Added hospital display component at the top of sidebar (after brand)
   • Includes dropdown for PX Admins with all hospitals
   • Forms for quick hospital switching

4. apps/core/templatetags/hospital_filters.py (new)

   • Created get_all_hospitals template tag
   • Returns all hospitals ordered by name, city

5. apps/core/templatetags/__init__.py (new)

   • Enables template tag module for core app

Context Variables

Available in all templates:

{
    'current_hospital': Hospital,  # Current hospital object or None
    'is_px_admin': bool,           # True if user is PX Admin
}

User Experience

For PX Admins

1. Initial State: Shows current hospital with dropdown indicator
2. Click Dropdown: Opens list of all hospitals
3. Select Hospital:
   • Submits form to select hospital
   • Session is updated
   • Page refreshes with new hospital data
   • Hospital display updates to show new selection
4. Alternative: Can click "View All Hospitals" to see full hospital selector page

For Hospital Admins

1. Display: Shows their assigned hospital (read-only)
2. No Dropdown: Cannot switch hospitals
3. Clear Context: Always know which hospital data they're viewing

For Department Managers

1. Display: Shows their hospital (read-only)
2. No Dropdown: Cannot switch hospitals
3. Consistent View: Hospital context is clear

Template Usage

Accessing Hospital in Templates

{% if current_hospital %}
    <h2>{{ current_hospital.name }}</h2>
    <p>{{ current_hospital.city }}</p>
{% endif %}

Checking User Role

{% if is_px_admin %}
    <p>You are a PX Admin with access to all hospitals</p>
{% else %}
    <p>You are viewing: {{ current_hospital.name }}</p>
{% endif %}

Using Hospital Filter

{% load hospital_filters %}

{% get_all_hospitals as hospitals %}
{% for hospital in hospitals %}
    {{ hospital.name }}
{% endfor %}

Styling

The hospital display uses Bootstrap 5 classes with custom styling:

.btn-light {
    min-width: 200px;
    max-width: 300px;
}

.dropdown-item {
    display: flex;
    align-items: center;
}

Responsive Design

• Hospital display is visible on desktop (md and up)
• On mobile, it may need adjustment or can be hidden
• Dropdown has max-height with scrollbar for many hospitals

Future Enhancements

1. Recent Hospitals: Show recently accessed hospitals first
2. Hospital Search: Add search box within dropdown for many hospitals
3. Hospital Avatar: Display hospital logo/image instead of icon
4. Hospital Status: Show active/inactive status indicators
5. Hospital Stats: Display quick stats (complaints, surveys, etc.)
6. Mobile Optimization: Better mobile experience for hospital switching

Testing Checklist

• Hospital displays correctly for all user types
• PX Admin can see dropdown with all hospitals
• PX Admin can switch hospitals successfully
• Hospital Admin sees only their hospital (no dropdown)
• Department Manager sees their hospital (no dropdown)
• Hospital name truncates properly if too long
• Dropdown shows checkmark for current hospital
• "View All Hospitals" link works
• Session updates after hospital switch
• Page refreshes with correct hospital data
• Hospital context available in all templates

Troubleshooting

Hospital Not Displaying

Problem: Hospital display doesn't show in sidebar.

Solutions:

1. Check that user is authenticated
2. Verify TenantMiddleware is setting request.tenant_hospital
3. Ensure hospital_context is in settings context_processors
4. Check browser console for template errors

Dropdown Not Working

Problem: PX Admin sees hospital but dropdown doesn't open.

Solutions:

1. Check Bootstrap 5 JavaScript is loaded
2. Verify data-bs-toggle="dropdown" attribute is present
3. Check for JavaScript errors in browser console
4. Ensure jQuery is loaded (required for some Bootstrap features)

Hospitals Not Loading

Problem: Dropdown shows empty list or no hospitals.

Solutions:

1. Check that hospital_filters is loaded in template
2. Verify Hospital model has records
3. Check database connection
4. Review server logs for errors

Related Documentation

• Tenant-Aware Routing Implementation
• Organization Model
• Architecture

Conclusion

The hospital sidebar display provides clear context awareness and convenient hospital switching for PX Admins, improving the overall user experience in the PX360 platform. The feature is production-ready and follows Django best practices for context processors, template tags, and responsive design.