hospital-management/templates/emr/note_template_detail.html
2025-08-12 13:33:25 +03:00

649 lines
30 KiB
HTML

{% extends "base.html" %}
{% load static %}
{% block title %}{{ template.title }} | Note Template Detail{% endblock %}
{% block css %}
<link href="{% static 'plugins/bootstrap-icons/font/bootstrap-icons.css' %}" rel="stylesheet" />
<style>
.template-badge {
font-size: 0.85rem;
padding: 0.35em 0.65em;
}
.template-type-progress {
background-color: var(--bs-primary);
color: white;
}
.template-type-admission {
background-color: var(--bs-danger);
color: white;
}
.template-type-discharge {
background-color: var(--bs-success);
color: white;
}
.template-type-procedure {
background-color: var(--bs-warning);
color: white;
}
.template-type-consultation {
background-color: var(--bs-info);
color: white;
}
.template-header {
background: linear-gradient(45deg, var(--bs-indigo), var(--bs-purple));
color: white;
padding: 1.5rem;
border-radius: 0.5rem;
margin-bottom: 1.5rem;
}
.template-content {
background-color: rgba(var(--bs-light-rgb), 0.5);
padding: 1.5rem;
border-radius: 0.5rem;
margin-bottom: 1.5rem;
border: 1px solid var(--bs-gray-300);
}
.template-section {
margin-bottom: 1.5rem;
}
.template-section-title {
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--bs-primary);
}
.template-metadata {
background-color: rgba(var(--bs-light-rgb), 0.5);
padding: 1rem;
border-radius: 0.5rem;
margin-bottom: 1.5rem;
border: 1px solid var(--bs-gray-300);
}
.template-metadata-item {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid var(--bs-gray-200);
}
.template-metadata-item:last-child {
border-bottom: none;
}
.template-metadata-label {
font-weight: 600;
color: var(--bs-gray-700);
}
.template-metadata-value {
text-align: right;
}
.usage-chart {
height: 250px;
}
.version-history-item {
display: flex;
padding: 1rem 0;
border-bottom: 1px solid var(--bs-gray-200);
}
.version-history-item:last-child {
border-bottom: none;
}
.version-history-badge {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--bs-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 1rem;
}
.version-history-content {
flex: 1;
}
.version-history-title {
font-weight: 600;
margin-bottom: 0.25rem;
}
.version-history-date {
color: var(--bs-gray-600);
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.version-history-changes {
background-color: rgba(var(--bs-light-rgb), 0.5);
padding: 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.nav-tabs .nav-link.active {
font-weight: bold;
border-bottom: 3px solid var(--bs-primary);
}
</style>
{% endblock %}
{% block content %}
<!-- begin breadcrumb -->
<ol class="breadcrumb float-xl-end">
<li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Home</a></li>
<li class="breadcrumb-item"><a href="{% url 'emr:dashboard' %}">EMR</a></li>
<li class="breadcrumb-item"><a href="{% url 'emr:note_template_list' %}">Note Templates</a></li>
<li class="breadcrumb-item active">{{ template.title }}</li>
</ol>
<!-- end breadcrumb -->
<!-- begin page-header -->
<h1 class="page-header">Note Template Detail <small>Standardized clinical documentation template</small></h1>
<!-- end page-header -->
<!-- begin row -->
<div class="row">
<!-- begin col-12 -->
<div class="col-xl-12">
<!-- begin template header -->
<div class="template-header d-flex justify-content-between align-items-center">
<div>
<h2 class="mb-1">{{ template.title }}</h2>
<div class="d-flex align-items-center">
<span class="me-3">
<i class="bi bi-person-fill me-1"></i> Created by {{ template.created_by.get_full_name }}
</span>
<span class="me-3">
<i class="bi bi-calendar-event me-1"></i> Version {{ template.version }}
</span>
<span>
<i class="bi bi-bar-chart me-1"></i> Used {{ template.usage_count }} times
</span>
</div>
</div>
<div>
<span class="badge template-type-{{ template.note_type|lower }}">{{ template.get_note_type_display }}</span>
</div>
</div>
<!-- end template header -->
<!-- begin template content panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Template Content</h4>
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
</div>
</div>
<div class="panel-body">
<div class="template-content">
{% if template.structured_content %}
{% for section in template.structured_content %}
<div class="template-section">
<div class="template-section-title">{{ section.title }}</div>
<div class="template-section-content">{{ section.content|safe }}</div>
</div>
{% endfor %}
{% else %}
{{ template.content|safe }}
{% endif %}
</div>
</div>
</div>
<!-- end template content panel -->
<!-- begin template details panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Template Details</h4>
<div class="panel-heading-btn">
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
</div>
</div>
<div class="panel-body">
<!-- begin nav tabs -->
<ul class="nav nav-tabs" id="templateDetailsTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="metadata-tab" data-bs-toggle="tab" data-bs-target="#metadata" type="button" role="tab" aria-controls="metadata" aria-selected="true">Metadata</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="usage-tab" data-bs-toggle="tab" data-bs-target="#usage" type="button" role="tab" aria-controls="usage" aria-selected="false">Usage Statistics</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="versions-tab" data-bs-toggle="tab" data-bs-target="#versions" type="button" role="tab" aria-controls="versions" aria-selected="false">Version History</button>
</li>
</ul>
<!-- end nav tabs -->
<!-- begin tab content -->
<div class="tab-content" id="templateDetailsTabsContent">
<!-- Metadata Tab -->
<div class="tab-pane fade show active" id="metadata" role="tabpanel" aria-labelledby="metadata-tab">
<div class="p-3">
<div class="row">
<div class="col-md-6">
<div class="template-metadata">
<div class="template-metadata-item">
<div class="template-metadata-label">Template ID</div>
<div class="template-metadata-value">{{ template.template_id }}</div>
</div>
<div class="template-metadata-item">
<div class="template-metadata-label">Title</div>
<div class="template-metadata-value">{{ template.title }}</div>
</div>
<div class="template-metadata-item">
<div class="template-metadata-label">Note Type</div>
<div class="template-metadata-value">{{ template.get_note_type_display }}</div>
</div>
<div class="template-metadata-item">
<div class="template-metadata-label">Version</div>
<div class="template-metadata-value">{{ template.version }}</div>
</div>
<div class="template-metadata-item">
<div class="template-metadata-label">Status</div>
<div class="template-metadata-value">{{ template.get_status_display }}</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="template-metadata">
<div class="template-metadata-item">
<div class="template-metadata-label">Created By</div>
<div class="template-metadata-value">{{ template.created_by.get_full_name }}</div>
</div>
<div class="template-metadata-item">
<div class="template-metadata-label">Created</div>
<div class="template-metadata-value">{{ template.created_at }}</div>
</div>
<div class="template-metadata-item">
<div class="template-metadata-label">Last Updated</div>
<div class="template-metadata-value">{{ template.updated_at }}</div>
</div>
<div class="template-metadata-item">
<div class="template-metadata-label">Last Updated By</div>
<div class="template-metadata-value">{{ template.updated_by.get_full_name }}</div>
</div>
<div class="template-metadata-item">
<div class="template-metadata-label">Usage Count</div>
<div class="template-metadata-value">{{ template.usage_count }}</div>
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<div class="template-metadata">
<div class="template-metadata-item">
<div class="template-metadata-label">Description</div>
<div class="template-metadata-value">{{ template.description }}</div>
</div>
<div class="template-metadata-item">
<div class="template-metadata-label">Department</div>
<div class="template-metadata-value">{{ template.department.name|default:"All Departments" }}</div>
</div>
<div class="template-metadata-item">
<div class="template-metadata-label">Specialty</div>
<div class="template-metadata-value">{{ template.specialty.name|default:"All Specialties" }}</div>
</div>
<div class="template-metadata-item">
<div class="template-metadata-label">Keywords</div>
<div class="template-metadata-value">
{% if template.keywords %}
{% for keyword in template.keywords %}
<span class="badge bg-secondary me-1">{{ keyword }}</span>
{% endfor %}
{% else %}
None
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Usage Statistics Tab -->
<div class="tab-pane fade" id="usage" role="tabpanel" aria-labelledby="usage-tab">
<div class="p-3">
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header bg-light">
<h6 class="card-title mb-0">Usage Over Time</h6>
</div>
<div class="card-body">
<div class="usage-chart" id="usageChart"></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header bg-light">
<h6 class="card-title mb-0">Usage by Department</h6>
</div>
<div class="card-body">
<div class="usage-chart" id="departmentChart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card mb-3">
<div class="card-header bg-light">
<h6 class="card-title mb-0">Recent Usage</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Date</th>
<th>User</th>
<th>Patient</th>
<th>Note Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for usage in template.recent_usage %}
<tr>
<td>{{ usage.created_at }}</td>
<td>{{ usage.user.get_full_name }}</td>
<td>{{ usage.patient.get_full_name }}</td>
<td>{{ usage.get_note_type_display }}</td>
<td>
<a href="{% url 'emr:clinical_note_detail' usage.id %}" class="btn btn-sm btn-primary">
<i class="fa fa-eye"></i> View Note
</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="5" class="text-center">No recent usage data available.</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Version History Tab -->
<div class="tab-pane fade" id="versions" role="tabpanel" aria-labelledby="versions-tab">
<div class="p-3">
<h5 class="mb-3">Version History</h5>
<div class="version-history">
{% for version in template.version_history %}
<div class="version-history-item">
<div class="version-history-badge">
{{ version.version }}
</div>
<div class="version-history-content">
<div class="version-history-title">{{ version.title }}</div>
<div class="version-history-date">
{{ version.created_at }} by {{ version.created_by.get_full_name }}
</div>
<div class="version-history-changes">
<strong>Changes:</strong> {{ version.change_description }}
</div>
<div class="mt-2">
<button class="btn btn-sm btn-outline-primary view-version-btn" data-version-id="{{ version.id }}">
<i class="fa fa-eye me-1"></i> View This Version
</button>
<button class="btn btn-sm btn-outline-secondary compare-version-btn" data-version-id="{{ version.id }}">
<i class="fa fa-exchange-alt me-1"></i> Compare with Current
</button>
</div>
</div>
</div>
{% empty %}
<div class="alert alert-info">
<i class="fa fa-info-circle me-2"></i> No version history available for this template.
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<!-- end tab content -->
</div>
</div>
<!-- end template details panel -->
<!-- begin action buttons -->
<div class="d-flex justify-content-between mt-3">
<div>
<a href="{% url 'emr:note_template_list' %}" class="btn btn-secondary me-2">
<i class="fa fa-arrow-left me-1"></i> Back to Templates
</a>
</div>
<div>
<a href="{% url 'emr:clinical_note_create' %}?template={{ template.id }}" class="btn btn-success me-2">
<i class="fa fa-file-alt me-1"></i> Use Template
</a>
<a href="{% url 'emr:note_template_duplicate' template.id %}" class="btn btn-info me-2">
<i class="fa fa-copy me-1"></i> Duplicate
</a>
<a href="{% url 'emr:note_template_update' template.id %}" class="btn btn-primary me-2">
<i class="fa fa-edit me-1"></i> Edit
</a>
<a href="{% url 'emr:note_template_delete' template.id %}" class="btn btn-danger">
<i class="fa fa-trash me-1"></i> Delete
</a>
</div>
</div>
<!-- end action buttons -->
</div>
<!-- end col-12 -->
</div>
<!-- end row -->
<!-- begin version preview modal -->
<div class="modal fade" id="versionPreviewModal" tabindex="-1" aria-labelledby="versionPreviewModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="versionPreviewModalLabel">Version Preview</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="versionPreviewContent"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="restoreVersionBtn">Restore This Version</button>
</div>
</div>
</div>
</div>
<!-- end version preview modal -->
<!-- begin version compare modal -->
<div class="modal fade" id="versionCompareModal" tabindex="-1" aria-labelledby="versionCompareModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="versionCompareModalLabel">Compare Versions</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<h6 class="text-center">Previous Version</h6>
<div id="previousVersionContent" class="border p-3 bg-light"></div>
</div>
<div class="col-md-6">
<h6 class="text-center">Current Version</h6>
<div id="currentVersionContent" class="border p-3 bg-light"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end version compare modal -->
{% endblock %}
{% block js %}
<script src="{% static 'plugins/apexcharts/dist/apexcharts.min.js' %}"></script>
<script>
$(document).ready(function() {
// Initialize tooltips
$('[data-bs-toggle="tooltip"]').tooltip();
// Usage chart
const usageChartOptions = {
chart: {
type: 'line',
height: 250,
toolbar: {
show: false
}
},
series: [{
name: 'Usage Count',
data: {{ template.usage_data|safe }}
}],
xaxis: {
categories: {{ template.usage_labels|safe }},
labels: {
rotateAlways: true,
rotate: -45,
offsetY: 0
}
},
yaxis: {
title: {
text: 'Number of Uses'
},
min: 0
},
stroke: {
curve: 'smooth',
width: 3
},
colors: ['#3498db'],
markers: {
size: 4
},
tooltip: {
y: {
formatter: function(value) {
return value + ' uses';
}
}
}
};
const usageChart = new ApexCharts(document.querySelector("#usageChart"), usageChartOptions);
usageChart.render();
// Department chart
const departmentChartOptions = {
chart: {
type: 'pie',
height: 250
},
series: {{ template.department_data|safe }},
labels: {{ template.department_labels|safe }},
colors: ['#3498db', '#2ecc71', '#f1c40f', '#e74c3c', '#9b59b6', '#1abc9c'],
legend: {
position: 'bottom'
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
const departmentChart = new ApexCharts(document.querySelector("#departmentChart"), departmentChartOptions);
departmentChart.render();
// View version button
$('.view-version-btn').click(function() {
const versionId = $(this).data('version-id');
// AJAX call to get version content
$.ajax({
url: `/emr/note-templates/version/${versionId}/`,
type: 'GET',
success: function(data) {
$('#versionPreviewContent').html(data.content);
$('#versionPreviewModalLabel').text(`Version ${data.version} - ${data.title}`);
$('#restoreVersionBtn').data('version-id', versionId);
$('#versionPreviewModal').modal('show');
},
error: function() {
alert('Error loading version preview');
}
});
});
// Compare version button
$('.compare-version-btn').click(function() {
const versionId = $(this).data('version-id');
// AJAX call to get version comparison
$.ajax({
url: `/emr/note-templates/compare/${versionId}/${template.id}/`,
type: 'GET',
success: function(data) {
$('#previousVersionContent').html(data.previous_content);
$('#currentVersionContent').html(data.current_content);
$('#versionCompareModalLabel').text(`Compare Version ${data.previous_version} with Current`);
$('#versionCompareModal').modal('show');
},
error: function() {
alert('Error loading version comparison');
}
});
});
// Restore version button
$('#restoreVersionBtn').click(function() {
const versionId = $(this).data('version-id');
if (confirm('Are you sure you want to restore this version? This will create a new version based on this historical version.')) {
// AJAX call to restore version
$.ajax({
url: `/emr/note-templates/restore/${versionId}/`,
type: 'POST',
data: {
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function(data) {
alert('Version restored successfully!');
window.location.reload();
},
error: function() {
alert('Error restoring version');
}
});
}
});
});
</script>
{% endblock %}