496 lines
20 KiB
HTML
496 lines
20 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Bed Assignment - {{ block.super }}{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.assignment-wizard {
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.step-indicator {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
.step {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 20px;
|
|
}
|
|
.step-number {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: #dee2e6;
|
|
color: #6c757d;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
margin-right: 10px;
|
|
}
|
|
.step.active .step-number {
|
|
background: #007bff;
|
|
color: white;
|
|
}
|
|
.step.completed .step-number {
|
|
background: #28a745;
|
|
color: white;
|
|
}
|
|
.patient-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 15px 0;
|
|
border-left: 4px solid #007bff;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.bed-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
.bed-option {
|
|
border: 2px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background: white;
|
|
}
|
|
.bed-option:hover {
|
|
border-color: #007bff;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
.bed-option.selected {
|
|
border-color: #007bff;
|
|
background: #e3f2fd;
|
|
}
|
|
.bed-available { border-left: 4px solid #28a745; }
|
|
.bed-preferred { border-left: 4px solid #007bff; }
|
|
.bed-isolation { border-left: 4px solid #ffc107; }
|
|
.priority-high { border-left-color: #dc3545; }
|
|
.priority-medium { border-left-color: #ffc107; }
|
|
.priority-low { border-left-color: #28a745; }
|
|
.assignment-summary {
|
|
background: #e8f5e8;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
.criteria-list {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin: 15px 0;
|
|
}
|
|
.criteria-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.criteria-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.match-indicator {
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
}
|
|
.match-yes { background: #d4edda; color: #155724; }
|
|
.match-no { background: #f8d7da; color: #721c24; }
|
|
.match-partial { background: #fff3cd; color: #856404; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content">
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-header">
|
|
<div class="page-title">
|
|
<h4><i class="fas fa-bed"></i> Bed Assignment</h4>
|
|
<h6>Assign patients to appropriate beds</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<a href="{% url 'inpatients:admission_list' %}" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i> Back to Admissions
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Assignment Wizard -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="assignment-wizard">
|
|
<div class="step-indicator">
|
|
<div class="step completed">
|
|
<div class="step-number">1</div>
|
|
<div class="step-label">Patient Selection</div>
|
|
</div>
|
|
<div class="step active">
|
|
<div class="step-number">2</div>
|
|
<div class="step-label">Bed Selection</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">3</div>
|
|
<div class="step-label">Confirmation</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Patient Information -->
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-user"></i> Patient Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="patient-card priority-high">
|
|
<h6><strong>Sarah Johnson</strong></h6>
|
|
<p><strong>MRN:</strong> MRN789012</p>
|
|
<p><strong>Age:</strong> 45 years</p>
|
|
<p><strong>Gender:</strong> Female</p>
|
|
<p><strong>Admission Type:</strong> Emergency</p>
|
|
<p><strong>Primary Diagnosis:</strong> Acute Chest Pain</p>
|
|
<p><strong>Attending Physician:</strong> Dr. Smith</p>
|
|
<div class="mt-3">
|
|
<span class="badge bg-danger">High Priority</span>
|
|
<span class="badge bg-warning">Isolation Required</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-list-check"></i> Assignment Criteria</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="criteria-list">
|
|
<div class="criteria-item">
|
|
<span>Gender Preference</span>
|
|
<span class="match-indicator match-yes">Female Ward</span>
|
|
</div>
|
|
<div class="criteria-item">
|
|
<span>Isolation Required</span>
|
|
<span class="match-indicator match-yes">Available</span>
|
|
</div>
|
|
<div class="criteria-item">
|
|
<span>Cardiac Monitoring</span>
|
|
<span class="match-indicator match-yes">Required</span>
|
|
</div>
|
|
<div class="criteria-item">
|
|
<span>Specialty Unit</span>
|
|
<span class="match-indicator match-partial">Cardiology Preferred</span>
|
|
</div>
|
|
<div class="criteria-item">
|
|
<span>Insurance Coverage</span>
|
|
<span class="match-indicator match-yes">Private Room</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-hospital"></i> Available Beds</h5>
|
|
<div class="card-tools">
|
|
<div class="legend">
|
|
<span class="badge bg-success me-2">Available</span>
|
|
<span class="badge bg-primary me-2">Preferred Match</span>
|
|
<span class="badge bg-warning">Isolation Capable</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Filter Options -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<select class="form-control" id="wardFilter">
|
|
<option value="">All Wards</option>
|
|
<option value="cardiology">Cardiology</option>
|
|
<option value="icu">ICU</option>
|
|
<option value="surgery">Surgery</option>
|
|
<option value="general">General Medicine</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<select class="form-control" id="roomTypeFilter">
|
|
<option value="">All Room Types</option>
|
|
<option value="private">Private Room</option>
|
|
<option value="semi-private">Semi-Private</option>
|
|
<option value="ward">Ward</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="isolationOnly">
|
|
<label class="form-check-label" for="isolationOnly">
|
|
Isolation Capable Only
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bed Options -->
|
|
<div class="bed-grid">
|
|
<div class="bed-option bed-preferred" data-bed="C201">
|
|
<h6>Room C201</h6>
|
|
<p><strong>Cardiology Ward</strong></p>
|
|
<p>Private Room</p>
|
|
<p>Cardiac Monitoring</p>
|
|
<div class="mt-2">
|
|
<span class="badge bg-success">Available</span>
|
|
<span class="badge bg-primary">Best Match</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<small class="text-muted">Last cleaned: 2 hours ago</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bed-option bed-isolation" data-bed="I105">
|
|
<h6>Room I105</h6>
|
|
<p><strong>Isolation Unit</strong></p>
|
|
<p>Private Room</p>
|
|
<p>Negative Pressure</p>
|
|
<div class="mt-2">
|
|
<span class="badge bg-success">Available</span>
|
|
<span class="badge bg-warning">Isolation</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<small class="text-muted">Last cleaned: 1 hour ago</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bed-option bed-available" data-bed="G301">
|
|
<h6>Room G301</h6>
|
|
<p><strong>General Medicine</strong></p>
|
|
<p>Semi-Private Room</p>
|
|
<p>Basic Monitoring</p>
|
|
<div class="mt-2">
|
|
<span class="badge bg-success">Available</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<small class="text-muted">Last cleaned: 30 minutes ago</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bed-option bed-preferred" data-bed="C203">
|
|
<h6>Room C203</h6>
|
|
<p><strong>Cardiology Ward</strong></p>
|
|
<p>Semi-Private Room</p>
|
|
<p>Cardiac Monitoring</p>
|
|
<div class="mt-2">
|
|
<span class="badge bg-success">Available</span>
|
|
<span class="badge bg-primary">Good Match</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<small class="text-muted">Last cleaned: 3 hours ago</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bed-option bed-available" data-bed="S401">
|
|
<h6>Room S401</h6>
|
|
<p><strong>Surgery Ward</strong></p>
|
|
<p>Private Room</p>
|
|
<p>Post-op Monitoring</p>
|
|
<div class="mt-2">
|
|
<span class="badge bg-success">Available</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<small class="text-muted">Last cleaned: 4 hours ago</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bed-option bed-available" data-bed="G302">
|
|
<h6>Room G302</h6>
|
|
<p><strong>General Medicine</strong></p>
|
|
<p>Ward Bed</p>
|
|
<p>Basic Care</p>
|
|
<div class="mt-2">
|
|
<span class="badge bg-success">Available</span>
|
|
</div>
|
|
<div class="mt-2">
|
|
<small class="text-muted">Last cleaned: 1 hour ago</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Assignment Summary -->
|
|
<div class="row" id="assignmentSummary" style="display: none;">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-check-circle"></i> Assignment Summary</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="assignment-summary">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Patient Details:</h6>
|
|
<p><strong>Name:</strong> Sarah Johnson</p>
|
|
<p><strong>MRN:</strong> MRN789012</p>
|
|
<p><strong>Admission Type:</strong> Emergency</p>
|
|
<p><strong>Priority:</strong> High</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Bed Assignment:</h6>
|
|
<p><strong>Room:</strong> <span id="selectedRoom">-</span></p>
|
|
<p><strong>Ward:</strong> <span id="selectedWard">-</span></p>
|
|
<p><strong>Room Type:</strong> <span id="selectedRoomType">-</span></p>
|
|
<p><strong>Special Features:</strong> <span id="selectedFeatures">-</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-12">
|
|
<h6>Assignment Notes:</h6>
|
|
<textarea class="form-control" rows="3" placeholder="Enter any special instructions or notes for this assignment..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body text-center">
|
|
<button type="button" class="btn btn-success btn-lg me-3" id="confirmAssignment" disabled>
|
|
<i class="fas fa-check"></i> Confirm Assignment
|
|
</button>
|
|
<button type="button" class="btn btn-warning btn-lg me-3">
|
|
<i class="fas fa-clock"></i> Schedule Later
|
|
</button>
|
|
<button type="button" class="btn btn-info btn-lg me-3">
|
|
<i class="fas fa-list"></i> View Waiting List
|
|
</button>
|
|
<button type="button" class="btn btn-secondary btn-lg">
|
|
<i class="fas fa-times"></i> Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
var selectedBed = null;
|
|
|
|
// Bed selection handler
|
|
$('.bed-option').click(function() {
|
|
$('.bed-option').removeClass('selected');
|
|
$(this).addClass('selected');
|
|
|
|
selectedBed = $(this).data('bed');
|
|
var roomText = $(this).find('h6').text();
|
|
var wardText = $(this).find('p:first').text();
|
|
var roomTypeText = $(this).find('p:nth-child(3)').text();
|
|
var featuresText = $(this).find('p:nth-child(4)').text();
|
|
|
|
// Update summary
|
|
$('#selectedRoom').text(roomText);
|
|
$('#selectedWard').text(wardText);
|
|
$('#selectedRoomType').text(roomTypeText);
|
|
$('#selectedFeatures').text(featuresText);
|
|
|
|
// Show summary and enable confirm button
|
|
$('#assignmentSummary').show();
|
|
$('#confirmAssignment').prop('disabled', false);
|
|
|
|
// Update step indicator
|
|
$('.step').removeClass('active');
|
|
$('.step:last').addClass('active');
|
|
});
|
|
|
|
// Filter functionality
|
|
$('#wardFilter, #roomTypeFilter').change(function() {
|
|
filterBeds();
|
|
});
|
|
|
|
$('#isolationOnly').change(function() {
|
|
filterBeds();
|
|
});
|
|
|
|
function filterBeds() {
|
|
var wardFilter = $('#wardFilter').val().toLowerCase();
|
|
var roomTypeFilter = $('#roomTypeFilter').val().toLowerCase();
|
|
var isolationOnly = $('#isolationOnly').is(':checked');
|
|
|
|
$('.bed-option').each(function() {
|
|
var bedWard = $(this).find('p:first').text().toLowerCase();
|
|
var bedRoomType = $(this).find('p:nth-child(3)').text().toLowerCase();
|
|
var hasIsolation = $(this).hasClass('bed-isolation');
|
|
|
|
var showBed = true;
|
|
|
|
if (wardFilter && !bedWard.includes(wardFilter)) {
|
|
showBed = false;
|
|
}
|
|
|
|
if (roomTypeFilter && !bedRoomType.includes(roomTypeFilter)) {
|
|
showBed = false;
|
|
}
|
|
|
|
if (isolationOnly && !hasIsolation) {
|
|
showBed = false;
|
|
}
|
|
|
|
$(this).toggle(showBed);
|
|
});
|
|
}
|
|
|
|
// Confirm assignment
|
|
$('#confirmAssignment').click(function() {
|
|
if (selectedBed) {
|
|
if (confirm('Are you sure you want to assign Sarah Johnson to ' + $('#selectedRoom').text() + '?')) {
|
|
// Process assignment
|
|
alert('Bed assignment completed successfully!');
|
|
// Redirect to admission list or patient details
|
|
window.location.href = "{% url 'inpatients:admission_list' %}";
|
|
}
|
|
}
|
|
});
|
|
|
|
// Auto-select best match if available
|
|
setTimeout(function() {
|
|
var bestMatch = $('.bed-preferred').first();
|
|
if (bestMatch.length) {
|
|
bestMatch.click();
|
|
}
|
|
}, 1000);
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|