hospital-management/templates/pharmacy/interactions/drug_interaction_detail.html
2025-08-12 13:33:25 +03:00

599 lines
30 KiB
HTML

{% extends "base.html" %}
{% load static %}
{% block title %}Drug Interaction Detail - Pharmacy{% endblock %}
{% block content %}
<!-- BEGIN breadcrumb -->
<ol class="breadcrumb float-xl-end">
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{% url 'pharmacy:dashboard' %}">Pharmacy</a></li>
<li class="breadcrumb-item"><a href="{% url 'pharmacy:drug_interaction_list' %}">Drug Interactions</a></li>
<li class="breadcrumb-item active">{{ object.medication1.generic_name }} + {{ object.medication2.generic_name }}</li>
</ol>
<!-- END breadcrumb -->
<!-- BEGIN page-header -->
<h1 class="page-header">
Drug Interaction Detail
<small>{{ object.medication1.generic_name }} + {{ object.medication2.generic_name }}</small>
</h1>
<!-- END page-header -->
<div class="row">
<div class="col-xl-8">
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">
{% if object.severity == 'major' %}
<i class="fa fa-exclamation-triangle text-danger me-2"></i>
<span class="badge bg-danger me-2">Major Interaction</span>
{% elif object.severity == 'moderate' %}
<i class="fa fa-exclamation-circle text-warning me-2"></i>
<span class="badge bg-warning text-dark me-2">Moderate Interaction</span>
{% elif object.severity == 'minor' %}
<i class="fa fa-info-circle text-info me-2"></i>
<span class="badge bg-info me-2">Minor Interaction</span>
{% endif %}
Interaction Details
</h4>
<div class="panel-heading-btn">
<button type="button" class="btn btn-xs btn-success me-2" onclick="addToMonitoring()">
<i class="fa fa-plus"></i> Add to Monitoring
</button>
<button type="button" class="btn btn-xs btn-info me-2" onclick="printInteraction()">
<i class="fa fa-print"></i> Print
</button>
<button type="button" class="btn btn-xs btn-warning me-2" onclick="createAlert()">
<i class="fa fa-bell"></i> Create Alert
</button>
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
</div>
</div>
<div class="panel-body">
<!-- Severity Alert -->
{% if object.severity == 'major' %}
<div class="alert alert-danger">
<h5 class="alert-heading">
<i class="fa fa-exclamation-triangle me-2"></i>
Major Drug Interaction - Contraindicated
</h5>
<p class="mb-0">
This combination is generally contraindicated and should be avoided. Consider alternative medications or consult with a clinical pharmacist.
</p>
</div>
{% elif object.severity == 'moderate' %}
<div class="alert alert-warning">
<h5 class="alert-heading">
<i class="fa fa-exclamation-circle me-2"></i>
Moderate Drug Interaction - Monitor Closely
</h5>
<p class="mb-0">
This combination requires close monitoring. Consider dose adjustments, timing modifications, or additional monitoring parameters.
</p>
</div>
{% elif object.severity == 'minor' %}
<div class="alert alert-info">
<h5 class="alert-heading">
<i class="fa fa-info-circle me-2"></i>
Minor Drug Interaction - Caution Advised
</h5>
<p class="mb-0">
This interaction is generally manageable with appropriate precautions. Monitor for potential effects and counsel patient accordingly.
</p>
</div>
{% endif %}
<!-- Medication Information -->
<div class="row mb-4">
<div class="col-md-6">
<div class="card border-primary">
<div class="card-header bg-primary text-white">
<h6 class="card-title mb-0">
<i class="fa fa-pills me-2"></i>First Medication
</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="mb-2">
<strong>Generic Name:</strong> {{ object.medication1.generic_name }}
</div>
{% if object.medication1.brand_name %}
<div class="mb-2">
<strong>Brand Name:</strong> {{ object.medication1.brand_name }}
</div>
{% endif %}
<div class="mb-2">
<strong>Strength:</strong> {{ object.medication1.strength }}
</div>
<div class="mb-2">
<strong>Dosage Form:</strong> {{ object.medication1.get_dosage_form_display }}
</div>
{% if object.medication1.therapeutic_class %}
<div class="mb-2">
<strong>Therapeutic Class:</strong> {{ object.medication1.therapeutic_class }}
</div>
{% endif %}
{% if object.medication1.is_controlled %}
<div class="mb-2">
<span class="badge bg-warning text-dark">
<i class="fa fa-shield-alt me-1"></i>
Controlled Substance (Schedule {{ object.medication1.controlled_schedule }})
</span>
</div>
{% endif %}
{% if object.medication1.is_high_alert %}
<div class="mb-2">
<span class="badge bg-danger">
<i class="fa fa-exclamation-triangle me-1"></i>
High Alert Medication
</span>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-secondary">
<div class="card-header bg-secondary text-white">
<h6 class="card-title mb-0">
<i class="fa fa-pills me-2"></i>Second Medication
</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-12">
<div class="mb-2">
<strong>Generic Name:</strong> {{ object.medication2.generic_name }}
</div>
{% if object.medication2.brand_name %}
<div class="mb-2">
<strong>Brand Name:</strong> {{ object.medication2.brand_name }}
</div>
{% endif %}
<div class="mb-2">
<strong>Strength:</strong> {{ object.medication2.strength }}
</div>
<div class="mb-2">
<strong>Dosage Form:</strong> {{ object.medication2.get_dosage_form_display }}
</div>
{% if object.medication2.therapeutic_class %}
<div class="mb-2">
<strong>Therapeutic Class:</strong> {{ object.medication2.therapeutic_class }}
</div>
{% endif %}
{% if object.medication2.is_controlled %}
<div class="mb-2">
<span class="badge bg-warning text-dark">
<i class="fa fa-shield-alt me-1"></i>
Controlled Substance (Schedule {{ object.medication2.controlled_schedule }})
</span>
</div>
{% endif %}
{% if object.medication2.is_high_alert %}
<div class="mb-2">
<span class="badge bg-danger">
<i class="fa fa-exclamation-triangle me-1"></i>
High Alert Medication
</span>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Clinical Information -->
<div class="card border-info mb-4">
<div class="card-header bg-info text-white">
<h6 class="card-title mb-0">
<i class="fa fa-stethoscope me-2"></i>Clinical Information
</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
{% if object.clinical_effect %}
<div class="mb-3">
<h6 class="text-primary">Clinical Effect:</h6>
<p class="mb-0">{{ object.clinical_effect }}</p>
</div>
{% endif %}
{% if object.mechanism %}
<div class="mb-3">
<h6 class="text-primary">Mechanism of Interaction:</h6>
<p class="mb-0">{{ object.get_mechanism_display }}</p>
{% if object.mechanism_description %}
<div class="small text-muted mt-1">{{ object.mechanism_description }}</div>
{% endif %}
</div>
{% endif %}
{% if object.onset %}
<div class="mb-3">
<h6 class="text-primary">Onset:</h6>
<p class="mb-0">{{ object.onset }}</p>
</div>
{% endif %}
</div>
<div class="col-md-6">
{% if object.evidence_level %}
<div class="mb-3">
<h6 class="text-primary">Evidence Level:</h6>
<p class="mb-0">
{{ object.get_evidence_level_display }}
{% if object.evidence_level == 'excellent' %}
<span class="badge bg-success ms-2">High Quality</span>
{% elif object.evidence_level == 'good' %}
<span class="badge bg-info ms-2">Good Quality</span>
{% elif object.evidence_level == 'fair' %}
<span class="badge bg-warning text-dark ms-2">Fair Quality</span>
{% elif object.evidence_level == 'poor' %}
<span class="badge bg-secondary ms-2">Limited Evidence</span>
{% endif %}
</p>
</div>
{% endif %}
{% if object.frequency %}
<div class="mb-3">
<h6 class="text-primary">Frequency:</h6>
<p class="mb-0">{{ object.frequency }}</p>
</div>
{% endif %}
{% if object.category %}
<div class="mb-3">
<h6 class="text-primary">Category:</h6>
<p class="mb-0">{{ object.get_category_display }}</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<!-- Management Recommendations -->
{% if object.management_recommendation %}
<div class="card border-success mb-4">
<div class="card-header bg-success text-white">
<h6 class="card-title mb-0">
<i class="fa fa-clipboard-list me-2"></i>Management Recommendations
</h6>
</div>
<div class="card-body">
<div class="mb-3">
{{ object.management_recommendation|linebreaks }}
</div>
{% if object.monitoring_parameters %}
<div class="mb-3">
<h6 class="text-success">Monitoring Parameters:</h6>
<div class="small">{{ object.monitoring_parameters|linebreaks }}</div>
</div>
{% endif %}
{% if object.alternative_medications %}
<div class="mb-3">
<h6 class="text-success">Alternative Medications:</h6>
<div class="small">{{ object.alternative_medications|linebreaks }}</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
<!-- Patient Counseling Points -->
{% if object.patient_counseling %}
<div class="card border-warning mb-4">
<div class="card-header bg-warning text-dark">
<h6 class="card-title mb-0">
<i class="fa fa-comments me-2"></i>Patient Counseling Points
</h6>
</div>
<div class="card-body">
{{ object.patient_counseling|linebreaks }}
</div>
</div>
{% endif %}
<!-- References and Sources -->
{% if object.references %}
<div class="card border-secondary mb-4">
<div class="card-header bg-secondary text-white">
<h6 class="card-title mb-0">
<i class="fa fa-book me-2"></i>References and Sources
</h6>
</div>
<div class="card-body">
<div class="small">{{ object.references|linebreaks }}</div>
</div>
</div>
{% endif %}
<!-- Related Interactions -->
{% if related_interactions %}
<div class="card border-info mb-4">
<div class="card-header bg-info text-white">
<h6 class="card-title mb-0">
<i class="fa fa-link me-2"></i>Related Interactions
</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>Medications</th>
<th>Severity</th>
<th>Clinical Effect</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for interaction in related_interactions %}
<tr>
<td>
<div class="small">
{{ interaction.medication1.generic_name }} + {{ interaction.medication2.generic_name }}
</div>
</td>
<td>
{% if interaction.severity == 'major' %}
<span class="badge bg-danger">Major</span>
{% elif interaction.severity == 'moderate' %}
<span class="badge bg-warning text-dark">Moderate</span>
{% elif interaction.severity == 'minor' %}
<span class="badge bg-info">Minor</span>
{% endif %}
</td>
<td>
<div class="small">{{ interaction.clinical_effect|truncatechars:50 }}</div>
</td>
<td>
<a href="{% url 'pharmacy:drug_interaction_detail' interaction.pk %}"
class="btn btn-xs btn-outline-primary">
<i class="fa fa-eye"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endif %}
<!-- Action Buttons -->
<div class="d-flex justify-content-between">
<div>
<a href="{% url 'pharmacy:drug_interaction_list' %}" class="btn btn-secondary">
<i class="fa fa-arrow-left me-2"></i>Back to List
</a>
</div>
<div>
<button type="button" class="btn btn-success me-2" onclick="addToMonitoring()">
<i class="fa fa-plus me-2"></i>Add to Monitoring
</button>
<button type="button" class="btn btn-warning me-2" onclick="createAlert()">
<i class="fa fa-bell me-2"></i>Create Alert
</button>
<button type="button" class="btn btn-info" onclick="printInteraction()">
<i class="fa fa-print me-2"></i>Print
</button>
</div>
</div>
</div>
</div>
<!-- END panel -->
</div>
<div class="col-xl-4">
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Quick Actions</h4>
</div>
<div class="panel-body">
<div class="d-grid gap-2">
<button type="button" class="btn btn-outline-primary" onclick="checkPatientMedications()">
<i class="fa fa-user-check me-2"></i>Check Patient Medications
</button>
<button type="button" class="btn btn-outline-success" onclick="addToMonitoring()">
<i class="fa fa-plus me-2"></i>Add to Monitoring List
</button>
<button type="button" class="btn btn-outline-warning" onclick="createAlert()">
<i class="fa fa-bell me-2"></i>Create Clinical Alert
</button>
<button type="button" class="btn btn-outline-info" onclick="generateReport()">
<i class="fa fa-file-alt me-2"></i>Generate Report
</button>
<button type="button" class="btn btn-outline-secondary" onclick="shareInteraction()">
<i class="fa fa-share me-2"></i>Share with Team
</button>
</div>
</div>
</div>
<!-- END panel -->
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Interaction Summary</h4>
</div>
<div class="panel-body">
<div class="list-group list-group-flush">
<div class="list-group-item d-flex justify-content-between align-items-center">
<span>Severity Level</span>
{% if object.severity == 'major' %}
<span class="badge bg-danger">Major</span>
{% elif object.severity == 'moderate' %}
<span class="badge bg-warning text-dark">Moderate</span>
{% elif object.severity == 'minor' %}
<span class="badge bg-info">Minor</span>
{% endif %}
</div>
{% if object.evidence_level %}
<div class="list-group-item d-flex justify-content-between align-items-center">
<span>Evidence Quality</span>
{% if object.evidence_level == 'excellent' %}
<span class="badge bg-success">Excellent</span>
{% elif object.evidence_level == 'good' %}
<span class="badge bg-info">Good</span>
{% elif object.evidence_level == 'fair' %}
<span class="badge bg-warning text-dark">Fair</span>
{% elif object.evidence_level == 'poor' %}
<span class="badge bg-secondary">Poor</span>
{% endif %}
</div>
{% endif %}
{% if object.mechanism %}
<div class="list-group-item d-flex justify-content-between align-items-center">
<span>Mechanism</span>
<span class="badge bg-secondary">{{ object.get_mechanism_display }}</span>
</div>
{% endif %}
{% if object.onset %}
<div class="list-group-item d-flex justify-content-between align-items-center">
<span>Onset</span>
<span class="small text-muted">{{ object.onset }}</span>
</div>
{% endif %}
<div class="list-group-item d-flex justify-content-between align-items-center">
<span>Last Updated</span>
<span class="small text-muted">{{ object.updated_at|date:"M d, Y" }}</span>
</div>
</div>
</div>
</div>
<!-- END panel -->
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Clinical Decision Support</h4>
</div>
<div class="panel-body">
<div class="alert alert-info">
<h6 class="alert-heading">Recommendation</h6>
{% if object.severity == 'major' %}
<p class="mb-2">
<strong>Avoid this combination.</strong> Consider alternative medications or consult with a clinical pharmacist for safer alternatives.
</p>
{% elif object.severity == 'moderate' %}
<p class="mb-2">
<strong>Monitor closely.</strong> This combination may be used with appropriate monitoring and possible dose adjustments.
</p>
{% elif object.severity == 'minor' %}
<p class="mb-2">
<strong>Caution advised.</strong> This combination is generally safe but requires patient counseling and awareness.
</p>
{% endif %}
{% if object.management_recommendation %}
<div class="small">
<strong>Key Points:</strong>
<ul class="mb-0 mt-1">
{% for point in object.management_recommendation|slice:":200"|split:"." %}
{% if point.strip %}
<li>{{ point.strip }}.</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
</div>
</div>
</div>
<!-- END panel -->
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Contact Information</h4>
</div>
<div class="panel-body">
<div class="small">
<div class="mb-2">
<strong>Clinical Pharmacist:</strong><br>
<i class="fa fa-phone me-1"></i> (555) 123-4567<br>
<i class="fa fa-envelope me-1"></i> clinpharm@hospital.com
</div>
<div class="mb-2">
<strong>Drug Information:</strong><br>
<i class="fa fa-phone me-1"></i> (555) 123-4568<br>
<i class="fa fa-envelope me-1"></i> druginfo@hospital.com
</div>
<div class="mb-2">
<strong>Poison Control:</strong><br>
<i class="fa fa-phone me-1"></i> 1-800-222-1222<br>
<i class="fa fa-globe me-1"></i> 24/7 Emergency Line
</div>
</div>
</div>
</div>
<!-- END panel -->
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function() {
// Initialize tooltips
$('[data-bs-toggle="tooltip"]').tooltip();
});
function addToMonitoring() {
$.ajax({
url: '{% url "pharmacy:add_to_monitoring" %}',
method: 'POST',
data: {
'interaction_id': '{{ object.id }}',
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
success: function(response) {
toastr.success('Interaction added to monitoring list');
},
error: function() {
toastr.error('Failed to add interaction to monitoring');
}
});
}
function createAlert() {
// Implementation for creating clinical alerts
toastr.info('Clinical alert creation feature coming soon');
}
function printInteraction() {
var printUrl = '{% url "pharmacy:print_interaction" object.pk %}';
window.open(printUrl, '_blank');
}
function checkPatientMedications() {
// Implementation for checking patient medications against this interaction
toastr.info('Patient medication check feature coming soon');
}
function generateReport() {
var reportUrl = '{% url "pharmacy:interaction_report" object.pk %}';
window.open(reportUrl, '_blank');
}
function shareInteraction() {
// Implementation for sharing interaction with team
toastr.info('Team sharing feature coming soon');
}
</script>
{% endblock %}