498 lines
23 KiB
HTML
498 lines
23 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Bed {{ object.bed_number }} Details{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'inpatients:dashboard' %}">Inpatients</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'inpatients:bed_management' %}">Bed Management</a></li>
|
|
<li class="breadcrumb-item active">Bed {{ object.bed_number }}</li>
|
|
</ol>
|
|
<h1 class="page-header mb-0">Bed {{ object.bed_number }} Details</h1>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<div class="btn-group">
|
|
<a href="{% url 'inpatients:bed_form' object.pk %}" class="btn btn-primary">
|
|
<i class="fas fa-edit me-2"></i>Edit Bed
|
|
</a>
|
|
<button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
|
|
<span class="visually-hidden">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#" onclick="updateBedStatus('available')">
|
|
<i class="fas fa-check text-success me-2"></i>Mark Available
|
|
</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="updateBedStatus('occupied')">
|
|
<i class="fas fa-user text-warning me-2"></i>Mark Occupied
|
|
</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="updateBedStatus('maintenance')">
|
|
<i class="fas fa-tools text-info me-2"></i>Mark for Maintenance
|
|
</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="updateBedStatus('cleaning')">
|
|
<i class="fas fa-broom text-primary me-2"></i>Mark for Cleaning
|
|
</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item text-danger" href="{% url 'inpatients:bed_confirm_delete' object.pk %}">
|
|
<i class="fas fa-trash me-2"></i>Delete Bed
|
|
</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xl-8">
|
|
<!-- Bed Information -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
<i class="fas fa-bed me-2"></i>
|
|
Bed Information
|
|
</h4>
|
|
<div class="card-toolbar">
|
|
<span class="badge bg-{% if object.status == 'available' %}success{% elif object.status == 'occupied' %}warning{% elif object.status == 'maintenance' %}danger{% else %}info{% endif %} fs-6">
|
|
{{ object.get_status_display }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td class="fw-bold">Bed Number:</td>
|
|
<td>{{ object.bed_number }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Ward:</td>
|
|
<td>
|
|
<a href="{% url 'inpatients:ward_detail' object.ward.pk %}">
|
|
{{ object.ward.name }}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Room:</td>
|
|
<td>{{ object.room_number|default:"Not assigned" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Bed Type:</td>
|
|
<td>{{ object.get_bed_type_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Status:</td>
|
|
<td>
|
|
<span class="badge bg-{% if object.status == 'available' %}success{% elif object.status == 'occupied' %}warning{% elif object.status == 'maintenance' %}danger{% else %}info{% endif %}">
|
|
{{ object.get_status_display }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td class="fw-bold">Features:</td>
|
|
<td>
|
|
{% if object.has_oxygen %}
|
|
<span class="badge bg-info me-1">Oxygen</span>
|
|
{% endif %}
|
|
{% if object.has_suction %}
|
|
<span class="badge bg-info me-1">Suction</span>
|
|
{% endif %}
|
|
{% if object.has_monitor %}
|
|
<span class="badge bg-info me-1">Monitor</span>
|
|
{% endif %}
|
|
{% if object.is_isolation %}
|
|
<span class="badge bg-warning me-1">Isolation</span>
|
|
{% endif %}
|
|
{% if not object.has_oxygen and not object.has_suction and not object.has_monitor and not object.is_isolation %}
|
|
<span class="text-muted">Standard bed</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Last Cleaned:</td>
|
|
<td>{{ object.last_cleaned|date:"M d, Y g:i A"|default:"Not recorded" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Last Maintenance:</td>
|
|
<td>{{ object.last_maintenance|date:"M d, Y g:i A"|default:"Not recorded" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Created:</td>
|
|
<td>{{ object.created_at|date:"M d, Y g:i A" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Last Updated:</td>
|
|
<td>{{ object.updated_at|date:"M d, Y g:i A" }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{% if object.notes %}
|
|
<div class="mt-3">
|
|
<h6>Notes:</h6>
|
|
<div class="alert alert-info">
|
|
{{ object.notes }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Patient -->
|
|
{% if object.current_patient %}
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
<i class="fas fa-user-injured me-2"></i>
|
|
Current Patient
|
|
</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar avatar-lg">
|
|
{% if object.current_patient.profile_picture %}
|
|
<img src="{{ object.current_patient.profile_picture.url }}" alt="{{ object.current_patient.get_full_name }}" class="rounded-circle">
|
|
{% else %}
|
|
<div class="avatar-initial rounded-circle bg-primary">
|
|
{{ object.current_patient.first_name|first }}{{ object.current_patient.last_name|first }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h5 class="mb-1">
|
|
<a href="{% url 'patients:patient_detail' object.current_patient.pk %}">
|
|
{{ object.current_patient.get_full_name }}
|
|
</a>
|
|
</h5>
|
|
<div class="text-muted mb-1">
|
|
<strong>MRN:</strong> {{ object.current_patient.medical_record_number }}
|
|
</div>
|
|
<div class="text-muted mb-1">
|
|
<strong>DOB:</strong> {{ object.current_patient.date_of_birth|date:"M d, Y" }}
|
|
</div>
|
|
<div class="text-muted">
|
|
<strong>Admitted:</strong> {{ object.current_admission.admission_date|date:"M d, Y g:i A" }}
|
|
</div>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<a href="{% url 'inpatients:admission_detail' object.current_admission.pk %}" class="btn btn-outline-primary">
|
|
<i class="fas fa-eye me-2"></i>View Admission
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Bed History -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">
|
|
<i class="fas fa-history me-2"></i>
|
|
Bed History
|
|
</h4>
|
|
<div class="card-toolbar">
|
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="refreshHistory()">
|
|
<i class="fas fa-sync me-2"></i>Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if bed_history %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Action</th>
|
|
<th>Patient</th>
|
|
<th>Duration</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for history in bed_history %}
|
|
<tr>
|
|
<td>
|
|
<div>{{ history.date|date:"M d, Y" }}</div>
|
|
<div class="small text-muted">{{ history.date|time:"g:i A" }}</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-{% if history.action == 'admission' %}success{% elif history.action == 'discharge' %}info{% elif history.action == 'transfer' %}warning{% else %}secondary{% endif %}">
|
|
{{ history.get_action_display }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
{% if history.patient %}
|
|
<a href="{% url 'patients:patient_detail' history.patient.pk %}">
|
|
{{ history.patient.get_full_name }}
|
|
</a>
|
|
<div class="small text-muted">{{ history.patient.medical_record_number }}</div>
|
|
{% else %}
|
|
<span class="text-muted">System action</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if history.duration %}
|
|
{{ history.duration }}
|
|
{% else %}
|
|
<span class="text-muted">-</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if history.notes %}
|
|
<span class="text-truncate" style="max-width: 200px;" title="{{ history.notes }}">
|
|
{{ history.notes }}
|
|
</span>
|
|
{% else %}
|
|
<span class="text-muted">-</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center text-muted py-4">
|
|
<i class="fas fa-history fa-3x mb-3"></i>
|
|
<h5>No History Available</h5>
|
|
<p>No bed history records found for this bed.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-4">
|
|
<!-- Quick Actions -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
<i class="fas fa-bolt me-2"></i>
|
|
Quick Actions
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
{% if object.status == 'available' %}
|
|
<button type="button" class="btn btn-success" onclick="assignPatient()">
|
|
<i class="fas fa-user-plus me-2"></i>Assign Patient
|
|
</button>
|
|
{% elif object.status == 'occupied' %}
|
|
<button type="button" class="btn btn-warning" onclick="dischargePatient()">
|
|
<i class="fas fa-sign-out-alt me-2"></i>Discharge Patient
|
|
</button>
|
|
<button type="button" class="btn btn-info" onclick="transferPatient()">
|
|
<i class="fas fa-exchange-alt me-2"></i>Transfer Patient
|
|
</button>
|
|
{% endif %}
|
|
|
|
<button type="button" class="btn btn-outline-primary" onclick="scheduleCleaning()">
|
|
<i class="fas fa-broom me-2"></i>Schedule Cleaning
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary" onclick="scheduleMaintenance()">
|
|
<i class="fas fa-tools me-2"></i>Schedule Maintenance
|
|
</button>
|
|
<button type="button" class="btn btn-outline-info" onclick="viewBedChart()">
|
|
<i class="fas fa-chart-line me-2"></i>View Utilization
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bed Statistics -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
<i class="fas fa-chart-bar me-2"></i>
|
|
Statistics
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span>Occupancy Rate (30 days)</span>
|
|
<span>{{ bed_stats.occupancy_rate|default:0 }}%</span>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-primary" style="width: {{ bed_stats.occupancy_rate|default:0 }}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row text-center">
|
|
<div class="col-6">
|
|
<div class="border-end">
|
|
<div class="fs-4 fw-bold text-primary">{{ bed_stats.total_admissions|default:0 }}</div>
|
|
<div class="small text-muted">Total Admissions</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="fs-4 fw-bold text-success">{{ bed_stats.avg_stay_days|default:0 }}</div>
|
|
<div class="small text-muted">Avg Stay (days)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Maintenance Schedule -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
<i class="fas fa-calendar-check me-2"></i>
|
|
Maintenance Schedule
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if maintenance_schedule %}
|
|
{% for maintenance in maintenance_schedule %}
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-{% if maintenance.type == 'cleaning' %}broom text-primary{% elif maintenance.type == 'inspection' %}search text-info{% else %}tools text-warning{% endif %} fa-lg"></i>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<div class="fw-bold">{{ maintenance.get_type_display }}</div>
|
|
<div class="small text-muted">{{ maintenance.scheduled_date|date:"M d, Y g:i A" }}</div>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<span class="badge bg-{% if maintenance.status == 'pending' %}warning{% elif maintenance.status == 'completed' %}success{% else %}secondary{% endif %}">
|
|
{{ maintenance.get_status_display }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="text-center text-muted">
|
|
<i class="fas fa-calendar-check fa-2x mb-2"></i>
|
|
<div>No scheduled maintenance</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ward Information -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
<i class="fas fa-hospital me-2"></i>
|
|
Ward Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<strong>Ward:</strong>
|
|
<a href="{% url 'inpatients:ward_detail' object.ward.pk %}">
|
|
{{ object.ward.name }}
|
|
</a>
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Department:</strong> {{ object.ward.department.name }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Capacity:</strong> {{ object.ward.total_beds }} beds
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Available:</strong> {{ object.ward.available_beds }} beds
|
|
</div>
|
|
<div>
|
|
<strong>Occupancy:</strong> {{ object.ward.occupancy_rate }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Update Status Modal -->
|
|
<div class="modal fade" id="updateStatusModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Update Bed Status</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="statusUpdateForm">
|
|
{% csrf_token %}
|
|
<input type="hidden" id="newStatus" name="status">
|
|
<div class="mb-3">
|
|
<label for="statusNotes" class="form-label">Notes</label>
|
|
<textarea class="form-control" id="statusNotes" name="notes" rows="3" placeholder="Add any relevant notes..."></textarea>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="confirmStatusUpdate()">Update Status</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function updateBedStatus(status) {
|
|
document.getElementById('newStatus').value = status;
|
|
const modal = new bootstrap.Modal(document.getElementById('updateStatusModal'));
|
|
modal.show();
|
|
}
|
|
|
|
function confirmStatusUpdate() {
|
|
const form = document.getElementById('statusUpdateForm');
|
|
const formData = new FormData(form);
|
|
|
|
// In a real implementation, this would submit via AJAX
|
|
console.log('Updating bed status to:', formData.get('status'));
|
|
|
|
// Close modal and refresh page
|
|
bootstrap.Modal.getInstance(document.getElementById('updateStatusModal')).hide();
|
|
location.reload();
|
|
}
|
|
|
|
function assignPatient() {
|
|
// In a real implementation, this would open a patient selection modal
|
|
alert('Patient assignment functionality would be implemented here.');
|
|
}
|
|
|
|
function dischargePatient() {
|
|
if (confirm('Are you sure you want to discharge the current patient?')) {
|
|
// In a real implementation, this would handle discharge process
|
|
alert('Discharge process would be initiated here.');
|
|
}
|
|
}
|
|
|
|
function transferPatient() {
|
|
// In a real implementation, this would open a transfer modal
|
|
alert('Patient transfer functionality would be implemented here.');
|
|
}
|
|
|
|
function scheduleCleaning() {
|
|
// In a real implementation, this would open a cleaning schedule modal
|
|
alert('Cleaning schedule functionality would be implemented here.');
|
|
}
|
|
|
|
function scheduleMaintenance() {
|
|
// In a real implementation, this would open a maintenance schedule modal
|
|
alert('Maintenance schedule functionality would be implemented here.');
|
|
}
|
|
|
|
function viewBedChart() {
|
|
// In a real implementation, this would show utilization charts
|
|
alert('Bed utilization charts would be displayed here.');
|
|
}
|
|
|
|
function refreshHistory() {
|
|
// In a real implementation, this would refresh the history via AJAX
|
|
location.reload();
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|