# 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:

```python
{
    '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

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

### Checking User Role

```django
{% 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

```django
{% 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:

```css
.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](./TENANT_AWARE_ROUTING_IMPLEMENTATION.md)
- [Organization Model](./ORGANIZATION_MODEL.md)
- [Architecture](./ARCHITECTURE.md)

## 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.