411 lines
17 KiB
HTML
411 lines
17 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Ward Management - {{ block.super }}{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.ward-overview {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.bed-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
.bed-card {
|
|
border: 2px solid #dee2e6;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.bed-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
}
|
|
.bed-occupied { border-color: #dc3545; background: #f8d7da; }
|
|
.bed-available { border-color: #28a745; background: #d4edda; }
|
|
.bed-maintenance { border-color: #ffc107; background: #fff3cd; }
|
|
.bed-reserved { border-color: #17a2b8; background: #d1ecf1; }
|
|
.ward-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
border-left: 4px solid #007bff;
|
|
}
|
|
.stat-number {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #007bff;
|
|
}
|
|
.patient-list {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
.patient-item {
|
|
padding: 10px;
|
|
border-bottom: 1px solid #eee;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.patient-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.priority-high { border-left: 4px solid #dc3545; }
|
|
.priority-medium { border-left: 4px solid #ffc107; }
|
|
.priority-low { border-left: 4px solid #28a745; }
|
|
</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-hospital"></i> Ward Management</h4>
|
|
<h6>Monitor and manage ward operations</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<button class="btn btn-primary me-2">
|
|
<i class="fas fa-plus"></i> New Admission
|
|
</button>
|
|
<button class="btn btn-info">
|
|
<i class="fas fa-sync"></i> Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ward Selection -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-4">
|
|
<label>Select Ward:</label>
|
|
<select class="form-control" id="wardSelect">
|
|
<option value="icu">Intensive Care Unit</option>
|
|
<option value="cardiology" selected>Cardiology Ward</option>
|
|
<option value="surgery">Surgery Ward</option>
|
|
<option value="pediatrics">Pediatrics Ward</option>
|
|
<option value="maternity">Maternity Ward</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="ward-stats">
|
|
<div class="stat-card">
|
|
<div class="stat-number">24</div>
|
|
<div>Total Beds</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">18</div>
|
|
<div>Occupied</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">4</div>
|
|
<div>Available</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number">2</div>
|
|
<div>Maintenance</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bed Layout -->
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-bed"></i> Bed Layout - Cardiology Ward</h5>
|
|
<div class="card-tools">
|
|
<div class="legend">
|
|
<span class="badge bg-danger me-2">Occupied</span>
|
|
<span class="badge bg-success me-2">Available</span>
|
|
<span class="badge bg-warning me-2">Maintenance</span>
|
|
<span class="badge bg-info">Reserved</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="bed-grid">
|
|
<div class="bed-card bed-occupied" data-bed="C101">
|
|
<h6>Room C101</h6>
|
|
<p><strong>John Smith</strong></p>
|
|
<small>Admitted: 2024-01-15</small>
|
|
<div class="mt-2">
|
|
<span class="badge bg-danger">High Priority</span>
|
|
</div>
|
|
</div>
|
|
<div class="bed-card bed-occupied" data-bed="C102">
|
|
<h6>Room C102</h6>
|
|
<p><strong>Mary Johnson</strong></p>
|
|
<small>Admitted: 2024-01-16</small>
|
|
<div class="mt-2">
|
|
<span class="badge bg-warning">Medium Priority</span>
|
|
</div>
|
|
</div>
|
|
<div class="bed-card bed-available" data-bed="C103">
|
|
<h6>Room C103</h6>
|
|
<p><strong>Available</strong></p>
|
|
<small>Last cleaned: 10:30 AM</small>
|
|
<div class="mt-2">
|
|
<button class="btn btn-sm btn-primary">Assign</button>
|
|
</div>
|
|
</div>
|
|
<div class="bed-card bed-occupied" data-bed="C104">
|
|
<h6>Room C104</h6>
|
|
<p><strong>Robert Davis</strong></p>
|
|
<small>Admitted: 2024-01-14</small>
|
|
<div class="mt-2">
|
|
<span class="badge bg-success">Stable</span>
|
|
</div>
|
|
</div>
|
|
<div class="bed-card bed-maintenance" data-bed="C105">
|
|
<h6>Room C105</h6>
|
|
<p><strong>Maintenance</strong></p>
|
|
<small>Equipment repair</small>
|
|
<div class="mt-2">
|
|
<span class="badge bg-warning">Out of Service</span>
|
|
</div>
|
|
</div>
|
|
<div class="bed-card bed-reserved" data-bed="C106">
|
|
<h6>Room C106</h6>
|
|
<p><strong>Reserved</strong></p>
|
|
<small>Expected: 2:00 PM</small>
|
|
<div class="mt-2">
|
|
<span class="badge bg-info">Incoming</span>
|
|
</div>
|
|
</div>
|
|
<div class="bed-card bed-available" data-bed="C107">
|
|
<h6>Room C107</h6>
|
|
<p><strong>Available</strong></p>
|
|
<small>Ready for admission</small>
|
|
<div class="mt-2">
|
|
<button class="btn btn-sm btn-primary">Assign</button>
|
|
</div>
|
|
</div>
|
|
<div class="bed-card bed-occupied" data-bed="C108">
|
|
<h6>Room C108</h6>
|
|
<p><strong>Lisa Wilson</strong></p>
|
|
<small>Admitted: 2024-01-17</small>
|
|
<div class="mt-2">
|
|
<span class="badge bg-warning">Discharge Planning</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-users"></i> Current Patients</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="patient-list">
|
|
<div class="patient-item priority-high">
|
|
<div>
|
|
<strong>John Smith</strong><br>
|
|
<small>C101 - Acute MI</small>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-primary">View</button>
|
|
</div>
|
|
</div>
|
|
<div class="patient-item priority-medium">
|
|
<div>
|
|
<strong>Mary Johnson</strong><br>
|
|
<small>C102 - Chest Pain</small>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-primary">View</button>
|
|
</div>
|
|
</div>
|
|
<div class="patient-item priority-low">
|
|
<div>
|
|
<strong>Robert Davis</strong><br>
|
|
<small>C104 - Stable Angina</small>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-primary">View</button>
|
|
</div>
|
|
</div>
|
|
<div class="patient-item priority-medium">
|
|
<div>
|
|
<strong>Lisa Wilson</strong><br>
|
|
<small>C108 - Post-op Recovery</small>
|
|
</div>
|
|
<div>
|
|
<button class="btn btn-sm btn-outline-primary">View</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-exclamation-triangle"></i> Alerts & Notifications</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="alert alert-danger alert-sm">
|
|
<strong>Critical:</strong> Patient in C101 requires immediate attention
|
|
</div>
|
|
<div class="alert alert-warning alert-sm">
|
|
<strong>Maintenance:</strong> Room C105 equipment repair scheduled
|
|
</div>
|
|
<div class="alert alert-info alert-sm">
|
|
<strong>Admission:</strong> New patient expected in C106 at 2:00 PM
|
|
</div>
|
|
<div class="alert alert-success alert-sm">
|
|
<strong>Discharge:</strong> Patient in C108 ready for discharge
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ward Activities -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-activity"></i> Recent Ward Activities</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Time</th>
|
|
<th>Activity</th>
|
|
<th>Patient</th>
|
|
<th>Room</th>
|
|
<th>Staff</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>11:30 AM</td>
|
|
<td>Patient Admission</td>
|
|
<td>Lisa Wilson</td>
|
|
<td>C108</td>
|
|
<td>Dr. Smith</td>
|
|
<td><span class="badge bg-success">Completed</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>10:45 AM</td>
|
|
<td>Room Cleaning</td>
|
|
<td>-</td>
|
|
<td>C103</td>
|
|
<td>Housekeeping</td>
|
|
<td><span class="badge bg-success">Completed</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>09:15 AM</td>
|
|
<td>Patient Transfer</td>
|
|
<td>Michael Brown</td>
|
|
<td>C102 → ICU</td>
|
|
<td>Nurse Johnson</td>
|
|
<td><span class="badge bg-success">Completed</span></td>
|
|
</tr>
|
|
<tr>
|
|
<td>08:30 AM</td>
|
|
<td>Equipment Maintenance</td>
|
|
<td>-</td>
|
|
<td>C105</td>
|
|
<td>Maintenance Team</td>
|
|
<td><span class="badge bg-warning">In Progress</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Ward selection change
|
|
$('#wardSelect').change(function() {
|
|
var selectedWard = $(this).val();
|
|
// Reload ward data based on selection
|
|
loadWardData(selectedWard);
|
|
});
|
|
|
|
// Bed card click handler
|
|
$('.bed-card').click(function() {
|
|
var bedId = $(this).data('bed');
|
|
var isOccupied = $(this).hasClass('bed-occupied');
|
|
|
|
if (isOccupied) {
|
|
// Show patient details modal
|
|
showPatientDetails(bedId);
|
|
} else if ($(this).hasClass('bed-available')) {
|
|
// Show bed assignment options
|
|
showBedAssignment(bedId);
|
|
}
|
|
});
|
|
|
|
// Assign bed button
|
|
$('.bed-card .btn-primary').click(function(e) {
|
|
e.stopPropagation();
|
|
var bedId = $(this).closest('.bed-card').data('bed');
|
|
showBedAssignment(bedId);
|
|
});
|
|
|
|
// Auto-refresh every 5 minutes
|
|
setInterval(function() {
|
|
location.reload();
|
|
}, 300000);
|
|
|
|
function loadWardData(wardId) {
|
|
// AJAX call to load ward-specific data
|
|
console.log('Loading data for ward:', wardId);
|
|
}
|
|
|
|
function showPatientDetails(bedId) {
|
|
// Show patient details modal
|
|
alert('Show patient details for bed: ' + bedId);
|
|
}
|
|
|
|
function showBedAssignment(bedId) {
|
|
// Show bed assignment modal
|
|
alert('Assign patient to bed: ' + bedId);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|