515 lines
21 KiB
HTML
515 lines
21 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Census Report - {{ block.super }}{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.census-summary {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.census-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 10px 0;
|
|
border-left: 4px solid #007bff;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.occupancy-chart {
|
|
height: 300px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
.ward-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
margin: 20px 0;
|
|
}
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 15px;
|
|
}
|
|
.stat-number {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
color: #007bff;
|
|
}
|
|
.stat-label {
|
|
font-size: 0.9rem;
|
|
color: #6c757d;
|
|
margin-top: 5px;
|
|
}
|
|
.trend-indicator {
|
|
font-size: 0.8rem;
|
|
margin-top: 5px;
|
|
}
|
|
.trend-up { color: #28a745; }
|
|
.trend-down { color: #dc3545; }
|
|
.trend-stable { color: #6c757d; }
|
|
.census-table {
|
|
background: white;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.table th {
|
|
background: #f8f9fa;
|
|
border-top: none;
|
|
font-weight: 600;
|
|
}
|
|
.occupancy-bar {
|
|
height: 20px;
|
|
background: #e9ecef;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.occupancy-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #28a745, #ffc107, #dc3545);
|
|
transition: width 0.3s ease;
|
|
}
|
|
.occupancy-text {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
</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-chart-bar"></i> Census Report</h4>
|
|
<h6>Hospital occupancy and patient census data</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<button class="btn btn-primary me-2">
|
|
<i class="fas fa-download"></i> Export Report
|
|
</button>
|
|
<button class="btn btn-info">
|
|
<i class="fas fa-sync"></i> Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Census Summary -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="census-summary">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="stat-item">
|
|
<div class="stat-number">156</div>
|
|
<div class="stat-label">Total Patients</div>
|
|
<div class="trend-indicator trend-up">
|
|
<i class="fas fa-arrow-up"></i> +5 from yesterday
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stat-item">
|
|
<div class="stat-number">82%</div>
|
|
<div class="stat-label">Occupancy Rate</div>
|
|
<div class="trend-indicator trend-up">
|
|
<i class="fas fa-arrow-up"></i> +3% from last week
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stat-item">
|
|
<div class="stat-number">12</div>
|
|
<div class="stat-label">Admissions Today</div>
|
|
<div class="trend-indicator trend-stable">
|
|
<i class="fas fa-minus"></i> Same as yesterday
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="stat-item">
|
|
<div class="stat-number">8</div>
|
|
<div class="stat-label">Discharges Today</div>
|
|
<div class="trend-indicator trend-down">
|
|
<i class="fas fa-arrow-down"></i> -2 from yesterday
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Date Range Filter -->
|
|
<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>Report Date:</label>
|
|
<input type="date" class="form-control" value="2024-01-20">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label>Compare With:</label>
|
|
<select class="form-control">
|
|
<option>Previous Day</option>
|
|
<option>Previous Week</option>
|
|
<option>Previous Month</option>
|
|
<option>Same Day Last Year</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label>Report Type:</label>
|
|
<select class="form-control">
|
|
<option>Daily Census</option>
|
|
<option>Weekly Summary</option>
|
|
<option>Monthly Report</option>
|
|
<option>Quarterly Analysis</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ward-wise Census -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-hospital"></i> Ward-wise Census</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="census-table">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Ward</th>
|
|
<th>Total Beds</th>
|
|
<th>Occupied</th>
|
|
<th>Available</th>
|
|
<th>Occupancy Rate</th>
|
|
<th>Avg Length of Stay</th>
|
|
<th>Admissions Today</th>
|
|
<th>Discharges Today</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Intensive Care Unit</strong></td>
|
|
<td>20</td>
|
|
<td>18</td>
|
|
<td>2</td>
|
|
<td>
|
|
<div class="occupancy-bar">
|
|
<div class="occupancy-fill" style="width: 90%"></div>
|
|
<div class="occupancy-text">90%</div>
|
|
</div>
|
|
</td>
|
|
<td>4.2 days</td>
|
|
<td>3</td>
|
|
<td>1</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Cardiology</strong></td>
|
|
<td>30</td>
|
|
<td>24</td>
|
|
<td>6</td>
|
|
<td>
|
|
<div class="occupancy-bar">
|
|
<div class="occupancy-fill" style="width: 80%"></div>
|
|
<div class="occupancy-text">80%</div>
|
|
</div>
|
|
</td>
|
|
<td>3.8 days</td>
|
|
<td>2</td>
|
|
<td>3</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Surgery</strong></td>
|
|
<td>25</td>
|
|
<td>20</td>
|
|
<td>5</td>
|
|
<td>
|
|
<div class="occupancy-bar">
|
|
<div class="occupancy-fill" style="width: 80%"></div>
|
|
<div class="occupancy-text">80%</div>
|
|
</div>
|
|
</td>
|
|
<td>2.5 days</td>
|
|
<td>4</td>
|
|
<td>2</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Pediatrics</strong></td>
|
|
<td>20</td>
|
|
<td>15</td>
|
|
<td>5</td>
|
|
<td>
|
|
<div class="occupancy-bar">
|
|
<div class="occupancy-fill" style="width: 75%"></div>
|
|
<div class="occupancy-text">75%</div>
|
|
</div>
|
|
</td>
|
|
<td>2.1 days</td>
|
|
<td>2</td>
|
|
<td>1</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Maternity</strong></td>
|
|
<td>15</td>
|
|
<td>12</td>
|
|
<td>3</td>
|
|
<td>
|
|
<div class="occupancy-bar">
|
|
<div class="occupancy-fill" style="width: 80%"></div>
|
|
<div class="occupancy-text">80%</div>
|
|
</div>
|
|
</td>
|
|
<td>1.8 days</td>
|
|
<td>1</td>
|
|
<td>1</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Emergency</strong></td>
|
|
<td>10</td>
|
|
<td>8</td>
|
|
<td>2</td>
|
|
<td>
|
|
<div class="occupancy-bar">
|
|
<div class="occupancy-fill" style="width: 80%"></div>
|
|
<div class="occupancy-text">80%</div>
|
|
</div>
|
|
</td>
|
|
<td>0.5 days</td>
|
|
<td>15</td>
|
|
<td>12</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr class="table-info">
|
|
<th><strong>Total Hospital</strong></th>
|
|
<th><strong>120</strong></th>
|
|
<th><strong>97</strong></th>
|
|
<th><strong>23</strong></th>
|
|
<th>
|
|
<div class="occupancy-bar">
|
|
<div class="occupancy-fill" style="width: 81%"></div>
|
|
<div class="occupancy-text">81%</div>
|
|
</div>
|
|
</th>
|
|
<th><strong>2.8 days</strong></th>
|
|
<th><strong>27</strong></th>
|
|
<th><strong>20</strong></th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts and Analytics -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-chart-line"></i> Occupancy Trend (Last 7 Days)</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="occupancy-chart">
|
|
<canvas id="occupancyChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-chart-pie"></i> Patient Distribution by Ward</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="occupancy-chart">
|
|
<canvas id="distributionChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Metrics -->
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="census-card">
|
|
<h6><i class="fas fa-clock"></i> Average Length of Stay</h6>
|
|
<div class="stat-number">2.8</div>
|
|
<div class="stat-label">days</div>
|
|
<div class="trend-indicator trend-down">
|
|
<i class="fas fa-arrow-down"></i> -0.2 days from last month
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="census-card">
|
|
<h6><i class="fas fa-bed"></i> Bed Turnover Rate</h6>
|
|
<div class="stat-number">1.4</div>
|
|
<div class="stat-label">patients per bed per day</div>
|
|
<div class="trend-indicator trend-up">
|
|
<i class="fas fa-arrow-up"></i> +0.1 from last week
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="census-card">
|
|
<h6><i class="fas fa-percentage"></i> Readmission Rate</h6>
|
|
<div class="stat-number">8.2%</div>
|
|
<div class="stat-label">within 30 days</div>
|
|
<div class="trend-indicator trend-down">
|
|
<i class="fas fa-arrow-down"></i> -1.1% from last quarter
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Export Options -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-download"></i> Export Options</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Report Formats:</h6>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-outline-primary">
|
|
<i class="fas fa-file-pdf"></i> PDF
|
|
</button>
|
|
<button type="button" class="btn btn-outline-success">
|
|
<i class="fas fa-file-excel"></i> Excel
|
|
</button>
|
|
<button type="button" class="btn btn-outline-info">
|
|
<i class="fas fa-file-csv"></i> CSV
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary">
|
|
<i class="fas fa-print"></i> Print
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Schedule Reports:</h6>
|
|
<div class="form-group">
|
|
<select class="form-control">
|
|
<option>One-time Export</option>
|
|
<option>Daily Email Report</option>
|
|
<option>Weekly Summary</option>
|
|
<option>Monthly Report</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Occupancy Trend Chart
|
|
const occupancyCtx = document.getElementById('occupancyChart').getContext('2d');
|
|
new Chart(occupancyCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['Jan 14', 'Jan 15', 'Jan 16', 'Jan 17', 'Jan 18', 'Jan 19', 'Jan 20'],
|
|
datasets: [{
|
|
label: 'Occupancy Rate (%)',
|
|
data: [78, 82, 79, 85, 83, 81, 82],
|
|
borderColor: '#007bff',
|
|
backgroundColor: 'rgba(0, 123, 255, 0.1)',
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Distribution Chart
|
|
const distributionCtx = document.getElementById('distributionChart').getContext('2d');
|
|
new Chart(distributionCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['ICU', 'Cardiology', 'Surgery', 'Pediatrics', 'Maternity', 'Emergency'],
|
|
datasets: [{
|
|
data: [18, 24, 20, 15, 12, 8],
|
|
backgroundColor: [
|
|
'#dc3545',
|
|
'#007bff',
|
|
'#28a745',
|
|
'#ffc107',
|
|
'#17a2b8',
|
|
'#6f42c1'
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false
|
|
}
|
|
});
|
|
|
|
// Export functionality
|
|
$('.btn-outline-primary').click(function() {
|
|
alert('Exporting census report as PDF...');
|
|
});
|
|
|
|
$('.btn-outline-success').click(function() {
|
|
alert('Exporting census report as Excel...');
|
|
});
|
|
|
|
$('.btn-outline-info').click(function() {
|
|
alert('Exporting census report as CSV...');
|
|
});
|
|
|
|
$('.btn-outline-secondary').click(function() {
|
|
window.print();
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|