535 lines
21 KiB
HTML
535 lines
21 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}OR Block - {{ block.operating_room.name }}{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.block-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-radius: 0.5rem;
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.info-card {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.375rem;
|
|
margin-bottom: 1.5rem;
|
|
background: white;
|
|
}
|
|
|
|
.info-header {
|
|
background: #f8f9fa;
|
|
border-bottom: 1px solid #dee2e6;
|
|
padding: 1rem 1.5rem;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
.info-content {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 600;
|
|
color: #6c757d;
|
|
font-size: 0.875rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.info-value {
|
|
color: #495057;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.utilization-chart {
|
|
height: 200px;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.timeline-item {
|
|
display: flex;
|
|
align-items: start;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
|
|
.timeline-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 1rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.timeline-content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.case-card {
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.375rem;
|
|
margin-bottom: 1rem;
|
|
background: white;
|
|
}
|
|
|
|
.case-header {
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 1px solid #dee2e6;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.case-content {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.status-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.status-available { background-color: #28a745; }
|
|
.status-booked { background-color: #007bff; }
|
|
.status-in-progress { background-color: #ffc107; }
|
|
.status-completed { background-color: #6c757d; }
|
|
.status-cancelled { background-color: #dc3545; }
|
|
|
|
@media (max-width: 768px) {
|
|
.block-header {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.info-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.info-content {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div id="content" class="app-content">
|
|
<!-- Page Header -->
|
|
<div class="d-flex align-items-center mb-3">
|
|
<div>
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'operating_theatre:dashboard' %}">Operating Theatre</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'operating_theatre:block_schedule_list' %}">Block Schedule</a></li>
|
|
<li class="breadcrumb-item active">{{ block.operating_room.name }}</li>
|
|
</ol>
|
|
<h1 class="page-header mb-0">
|
|
<i class="fas fa-calendar-alt me-2"></i>OR Block Details
|
|
</h1>
|
|
</div>
|
|
<div class="ms-auto">
|
|
<div class="btn-group">
|
|
<a href="{% url 'operating_theatre:block_schedule_list' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left me-1"></i>Back
|
|
</a>
|
|
{% if block.status == 'available' %}
|
|
<a href="{% url 'operating_theatre:block_edit' block.pk %}" class="btn btn-primary">
|
|
<i class="fas fa-edit me-1"></i>Edit
|
|
</a>
|
|
{% endif %}
|
|
<button class="btn btn-outline-secondary" onclick="window.print()">
|
|
<i class="fas fa-print me-1"></i>Print
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Block Header -->
|
|
<div class="block-header">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<h2 class="mb-3">{{ block.operating_room.name }}</h2>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="mb-2">
|
|
<strong>Date:</strong> {{ block.date|date:"l, F d, Y" }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Time:</strong> {{ block.start_time|date:"H:i" }} - {{ block.end_time|date:"H:i" }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Duration:</strong> {{ block.duration_hours }} hours
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="mb-2">
|
|
<strong>Block Type:</strong> {{ block.get_block_type_display }}
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Assigned Surgeon:</strong>
|
|
{% if block.assigned_surgeon %}
|
|
{{ block.assigned_surgeon.get_full_name }}
|
|
{% else %}
|
|
<span class="text-muted">Unassigned</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="mb-2">
|
|
<strong>Created:</strong> {{ block.created_at|date:"M d, Y H:i" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 text-end">
|
|
<div class="mb-3">
|
|
<span class="status-indicator status-{{ block.status }}"></span>
|
|
{% if block.status == 'available' %}
|
|
<span class="badge bg-success fs-6">Available</span>
|
|
{% elif block.status == 'booked' %}
|
|
<span class="badge bg-primary fs-6">Booked</span>
|
|
{% elif block.status == 'in_progress' %}
|
|
<span class="badge bg-warning fs-6">In Progress</span>
|
|
{% elif block.status == 'completed' %}
|
|
<span class="badge bg-secondary fs-6">Completed</span>
|
|
{% elif block.status == 'cancelled' %}
|
|
<span class="badge bg-danger fs-6">Cancelled</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="fs-1 fw-bold">{{ block.utilization_percentage }}%</div>
|
|
<div>Utilization</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Block Information -->
|
|
<div class="col-lg-8">
|
|
<!-- Utilization Chart -->
|
|
<div class="info-card">
|
|
<div class="info-header">
|
|
<i class="fas fa-chart-bar me-2"></i>Block Utilization
|
|
</div>
|
|
<div class="info-content">
|
|
<div class="utilization-chart">
|
|
<canvas id="utilizationChart"></canvas>
|
|
</div>
|
|
<div class="row text-center">
|
|
<div class="col-md-3">
|
|
<div class="fw-bold text-primary">{{ block.total_minutes }}</div>
|
|
<small class="text-muted">Total Minutes</small>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="fw-bold text-success">{{ block.scheduled_minutes }}</div>
|
|
<small class="text-muted">Scheduled</small>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="fw-bold text-warning">{{ block.available_minutes }}</div>
|
|
<small class="text-muted">Available</small>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="fw-bold text-info">{{ block.turnover_minutes }}</div>
|
|
<small class="text-muted">Turnover</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scheduled Cases -->
|
|
<div class="info-card">
|
|
<div class="info-header">
|
|
<i class="fas fa-procedures me-2"></i>Scheduled Cases ({{ block.scheduled_cases.count }})
|
|
{% if block.status == 'available' %}
|
|
<div class="ms-auto">
|
|
<button class="btn btn-sm btn-primary" onclick="addCase()">
|
|
<i class="fas fa-plus me-1"></i>Add Case
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="info-content">
|
|
{% for case in block.scheduled_cases.all %}
|
|
<div class="case-card">
|
|
<div class="case-header">
|
|
<div>
|
|
<h6 class="mb-1">{{ case.patient.get_full_name }}</h6>
|
|
<small class="text-muted">{{ case.scheduled_start_time|date:"H:i" }} - {{ case.estimated_end_time|date:"H:i" }}</small>
|
|
</div>
|
|
<div>
|
|
{% if case.status == 'scheduled' %}
|
|
<span class="badge bg-primary">Scheduled</span>
|
|
{% elif case.status == 'in_progress' %}
|
|
<span class="badge bg-warning">In Progress</span>
|
|
{% elif case.status == 'completed' %}
|
|
<span class="badge bg-success">Completed</span>
|
|
{% elif case.status == 'cancelled' %}
|
|
<span class="badge bg-danger">Cancelled</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="case-content">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">Procedure</div>
|
|
<div class="info-value">{{ case.procedure_name }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Surgeon</div>
|
|
<div class="info-value">{{ case.primary_surgeon.get_full_name }}</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Estimated Duration</div>
|
|
<div class="info-value">{{ case.estimated_duration }} minutes</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">Priority</div>
|
|
<div class="info-value">
|
|
{% if case.priority == 'emergency' %}
|
|
<span class="badge bg-danger">Emergency</span>
|
|
{% elif case.priority == 'urgent' %}
|
|
<span class="badge bg-warning">Urgent</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">Routine</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mt-3">
|
|
<div class="btn-group">
|
|
<a href="{% url 'operating_theatre:case_detail' case.pk %}" class="btn btn-outline-primary btn-sm">
|
|
<i class="fas fa-eye me-1"></i>View
|
|
</a>
|
|
{% if case.status == 'scheduled' %}
|
|
<a href="{% url 'operating_theatre:case_edit' case.pk %}" class="btn btn-outline-secondary btn-sm">
|
|
<i class="fas fa-edit me-1"></i>Edit
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
<div class="btn-group">
|
|
{% if case.status == 'scheduled' %}
|
|
<button class="btn btn-success btn-sm" onclick="startCase('{{ case.pk }}')">
|
|
<i class="fas fa-play me-1"></i>Start
|
|
</button>
|
|
{% elif case.status == 'in_progress' %}
|
|
<button class="btn btn-warning btn-sm" onclick="completeCase('{{ case.pk }}')">
|
|
<i class="fas fa-check me-1"></i>Complete
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-calendar-plus fa-2x text-muted mb-2"></i>
|
|
<p class="text-muted mb-0">No cases scheduled for this block</p>
|
|
{% if block.status == 'available' %}
|
|
<button class="btn btn-primary mt-2" onclick="addCase()">
|
|
<i class="fas fa-plus me-1"></i>Add First Case
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Block Details -->
|
|
<div class="info-card">
|
|
<div class="info-header">
|
|
<i class="fas fa-info-circle me-2"></i>Block Details
|
|
</div>
|
|
<div class="info-content">
|
|
<div class="info-item mb-3">
|
|
<div class="info-label">Operating Room</div>
|
|
<div class="info-value">{{ block.operating_room.name }}</div>
|
|
</div>
|
|
<div class="info-item mb-3">
|
|
<div class="info-label">Room Type</div>
|
|
<div class="info-value">{{ block.operating_room.get_room_type_display }}</div>
|
|
</div>
|
|
<div class="info-item mb-3">
|
|
<div class="info-label">Capacity</div>
|
|
<div class="info-value">{{ block.operating_room.capacity }} people</div>
|
|
</div>
|
|
<div class="info-item mb-3">
|
|
<div class="info-label">Equipment Level</div>
|
|
<div class="info-value">{{ block.operating_room.get_equipment_level_display }}</div>
|
|
</div>
|
|
{% if block.notes %}
|
|
<div class="info-item mb-3">
|
|
<div class="info-label">Notes</div>
|
|
<div class="info-value">{{ block.notes }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Team Information -->
|
|
{% if block.assigned_surgeon or block.assigned_anesthesiologist or block.assigned_nurses.exists %}
|
|
<div class="info-card">
|
|
<div class="info-header">
|
|
<i class="fas fa-users me-2"></i>Assigned Team
|
|
</div>
|
|
<div class="info-content">
|
|
{% if block.assigned_surgeon %}
|
|
<div class="info-item mb-3">
|
|
<div class="info-label">Primary Surgeon</div>
|
|
<div class="info-value">{{ block.assigned_surgeon.get_full_name }}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if block.assigned_anesthesiologist %}
|
|
<div class="info-item mb-3">
|
|
<div class="info-label">Anesthesiologist</div>
|
|
<div class="info-value">{{ block.assigned_anesthesiologist.get_full_name }}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if block.assigned_nurses.exists %}
|
|
<div class="info-item mb-3">
|
|
<div class="info-label">Nursing Team</div>
|
|
<div class="info-value">
|
|
{% for nurse in block.assigned_nurses.all %}
|
|
<div>{{ nurse.get_full_name }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Activity Timeline -->
|
|
<div class="info-card">
|
|
<div class="info-header">
|
|
<i class="fas fa-history me-2"></i>Activity Timeline
|
|
</div>
|
|
<div class="info-content">
|
|
{% for activity in block.activities.all %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon bg-primary text-white">
|
|
<i class="fas fa-clock"></i>
|
|
</div>
|
|
<div class="timeline-content">
|
|
<div class="fw-bold">{{ activity.action }}</div>
|
|
<div class="text-muted small">{{ activity.created_at|date:"M d, Y H:i" }}</div>
|
|
{% if activity.notes %}
|
|
<div class="mt-1">{{ activity.notes }}</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="text-center py-3">
|
|
<i class="fas fa-history fa-2x text-muted mb-2"></i>
|
|
<p class="text-muted mb-0">No activity recorded</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
// Utilization Chart
|
|
const ctx = document.getElementById('utilizationChart').getContext('2d');
|
|
const utilizationChart = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Scheduled', 'Available', 'Turnover'],
|
|
datasets: [{
|
|
data: [{{ block.scheduled_minutes }}, {{ block.available_minutes }}, {{ block.turnover_minutes }}],
|
|
backgroundColor: ['#28a745', '#ffc107', '#17a2b8'],
|
|
borderWidth: 0
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
function addCase() {
|
|
window.location.href = '{% url "operating_theatre:case_create" %}?block={{ block.pk }}';
|
|
}
|
|
|
|
function startCase(caseId) {
|
|
if (confirm('Start this surgical case?')) {
|
|
$.ajax({
|
|
url: `/operating-theatre/cases/${caseId}/start/`,
|
|
method: 'POST',
|
|
data: {
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('Error starting case: ' + response.error);
|
|
}
|
|
},
|
|
error: function() {
|
|
alert('Error starting case');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function completeCase(caseId) {
|
|
if (confirm('Mark this surgical case as completed?')) {
|
|
$.ajax({
|
|
url: `/operating-theatre/cases/${caseId}/complete/`,
|
|
method: 'POST',
|
|
data: {
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('Error completing case: ' + response.error);
|
|
}
|
|
},
|
|
error: function() {
|
|
alert('Error completing case');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|