617 lines
30 KiB
HTML
617 lines
30 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Drug Interactions - Pharmacy Management{% 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>Drug Interactions</h4>
|
|
<h6>Monitor and manage potential drug interactions</h6>
|
|
</div>
|
|
<div class="page-btn">
|
|
<a href="{% url 'pharmacy:drug_interaction_check' %}" class="btn btn-added">
|
|
<i class="fas fa-search me-1"></i>Check Interactions
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alert Statistics -->
|
|
<div class="row">
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget dash-widget1">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-exclamation-triangle text-danger"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.critical_interactions|default:8 }}</h5>
|
|
<h6>Critical Interactions</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget dash-widget2">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-exclamation-circle text-warning"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.major_interactions|default:24 }}</h5>
|
|
<h6>Major Interactions</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget dash-widget3">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-info-circle text-info"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.moderate_interactions|default:156 }}</h5>
|
|
<h6>Moderate Interactions</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="dash-widget dash-widget4">
|
|
<div class="dash-widgetimg">
|
|
<span><i class="fas fa-check-circle text-success"></i></span>
|
|
</div>
|
|
<div class="dash-widgetcontent">
|
|
<h5>{{ stats.resolved_interactions|default:89 }}</h5>
|
|
<h6>Resolved Today</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters and Search -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-top">
|
|
<div class="search-set">
|
|
<div class="search-path">
|
|
<a class="btn btn-filter" id="filter_search">
|
|
<i class="fas fa-filter"></i>
|
|
<span><i class="fas fa-times"></i></span>
|
|
</a>
|
|
</div>
|
|
<div class="search-input">
|
|
<a class="btn btn-searchset">
|
|
<i class="fas fa-search"></i>
|
|
</a>
|
|
<input type="text" id="searchInput" placeholder="Search by drug name, patient, or interaction...">
|
|
</div>
|
|
</div>
|
|
<div class="wordset">
|
|
<ul>
|
|
<li>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="PDF" onclick="exportToPDF()">
|
|
<i class="fas fa-file-pdf"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Excel" onclick="exportToExcel()">
|
|
<i class="fas fa-file-excel"></i>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-bs-toggle="tooltip" data-bs-placement="top" title="Print" onclick="printTable()">
|
|
<i class="fas fa-print"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Panel -->
|
|
<div class="card mb-0" id="filter_inputs" style="display: none;">
|
|
<div class="card-body pb-0">
|
|
<div class="row">
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="form-group">
|
|
<label>Severity Level</label>
|
|
<select class="select" id="severityFilter">
|
|
<option value="">All Severities</option>
|
|
<option value="critical">Critical</option>
|
|
<option value="major">Major</option>
|
|
<option value="moderate">Moderate</option>
|
|
<option value="minor">Minor</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="form-group">
|
|
<label>Status</label>
|
|
<select class="select" id="statusFilter">
|
|
<option value="">All Status</option>
|
|
<option value="active">Active</option>
|
|
<option value="resolved">Resolved</option>
|
|
<option value="overridden">Overridden</option>
|
|
<option value="monitoring">Monitoring</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="form-group">
|
|
<label>Date Range</label>
|
|
<input type="date" class="form-control" id="startDate" placeholder="Start Date">
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="form-group">
|
|
<label>End Date</label>
|
|
<input type="date" class="form-control" id="endDate" placeholder="End Date">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="form-group">
|
|
<label>Interaction Type</label>
|
|
<select class="select" id="interactionTypeFilter">
|
|
<option value="">All Types</option>
|
|
<option value="drug-drug">Drug-Drug</option>
|
|
<option value="drug-food">Drug-Food</option>
|
|
<option value="drug-allergy">Drug-Allergy</option>
|
|
<option value="drug-condition">Drug-Condition</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 col-12">
|
|
<div class="form-group">
|
|
<label>Department</label>
|
|
<select class="select" id="departmentFilter">
|
|
<option value="">All Departments</option>
|
|
<option value="emergency">Emergency</option>
|
|
<option value="icu">ICU</option>
|
|
<option value="cardiology">Cardiology</option>
|
|
<option value="oncology">Oncology</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 col-12">
|
|
<div class="form-group">
|
|
<a class="btn btn-filters ms-auto" onclick="applyFilters()">
|
|
<i class="fas fa-search"></i>
|
|
</a>
|
|
<a class="btn btn-filters ms-2" onclick="clearFilters()">
|
|
<i class="fas fa-times-circle"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Drug Interactions Table -->
|
|
<div class="table-responsive">
|
|
<table class="table" id="interactionsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<label class="checkboxs">
|
|
<input type="checkbox" id="select-all">
|
|
<span class="checkmarks"></span>
|
|
</label>
|
|
</th>
|
|
<th>Alert ID</th>
|
|
<th>Patient</th>
|
|
<th>Interacting Drugs</th>
|
|
<th>Severity</th>
|
|
<th>Type</th>
|
|
<th>Clinical Effect</th>
|
|
<th>Detected Date</th>
|
|
<th>Status</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Sample Data -->
|
|
<tr>
|
|
<td>
|
|
<label class="checkboxs">
|
|
<input type="checkbox" value="1">
|
|
<span class="checkmarks"></span>
|
|
</label>
|
|
</td>
|
|
<td>INT-2024-001</td>
|
|
<td>
|
|
<div class="userimgname">
|
|
<a href="#" class="product-img">
|
|
<i class="fas fa-user-circle"></i>
|
|
</a>
|
|
<a href="#">John Smith</a>
|
|
<small class="d-block text-muted">MRN: 123456</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="drug-interaction">
|
|
<span class="drug-name">Warfarin</span>
|
|
<i class="fas fa-exchange-alt mx-2 text-danger"></i>
|
|
<span class="drug-name">Aspirin</span>
|
|
<small class="d-block text-muted">Blood thinners combination</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badges bg-lightred">
|
|
<i class="fas fa-exclamation-triangle me-1"></i>Critical
|
|
</span>
|
|
</td>
|
|
<td>Drug-Drug</td>
|
|
<td>
|
|
<div class="clinical-effect">
|
|
<strong>Increased bleeding risk</strong>
|
|
<small class="d-block text-muted">Monitor INR closely</small>
|
|
</div>
|
|
</td>
|
|
<td>2024-01-15 09:30 AM</td>
|
|
<td><span class="badges bg-lightyellow">Active</span></td>
|
|
<td>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Override">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Resolve">
|
|
<i class="fas fa-check-circle"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label class="checkboxs">
|
|
<input type="checkbox" value="2">
|
|
<span class="checkmarks"></span>
|
|
</label>
|
|
</td>
|
|
<td>INT-2024-002</td>
|
|
<td>
|
|
<div class="userimgname">
|
|
<a href="#" class="product-img">
|
|
<i class="fas fa-user-circle"></i>
|
|
</a>
|
|
<a href="#">Sarah Johnson</a>
|
|
<small class="d-block text-muted">MRN: 789012</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="drug-interaction">
|
|
<span class="drug-name">Simvastatin</span>
|
|
<i class="fas fa-exchange-alt mx-2 text-warning"></i>
|
|
<span class="drug-name">Amlodipine</span>
|
|
<small class="d-block text-muted">Statin interaction</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badges bg-lightyellow">
|
|
<i class="fas fa-exclamation-circle me-1"></i>Major
|
|
</span>
|
|
</td>
|
|
<td>Drug-Drug</td>
|
|
<td>
|
|
<div class="clinical-effect">
|
|
<strong>Increased myopathy risk</strong>
|
|
<small class="d-block text-muted">Monitor CK levels</small>
|
|
</div>
|
|
</td>
|
|
<td>2024-01-15 11:45 AM</td>
|
|
<td><span class="badges bg-lightblue">Monitoring</span></td>
|
|
<td>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Add Note">
|
|
<i class="fas fa-sticky-note"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Resolve">
|
|
<i class="fas fa-check-circle"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label class="checkboxs">
|
|
<input type="checkbox" value="3">
|
|
<span class="checkmarks"></span>
|
|
</label>
|
|
</td>
|
|
<td>INT-2024-003</td>
|
|
<td>
|
|
<div class="userimgname">
|
|
<a href="#" class="product-img">
|
|
<i class="fas fa-user-circle"></i>
|
|
</a>
|
|
<a href="#">Michael Brown</a>
|
|
<small class="d-block text-muted">MRN: 345678</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="drug-interaction">
|
|
<span class="drug-name">Lisinopril</span>
|
|
<i class="fas fa-utensils mx-2 text-info"></i>
|
|
<span class="drug-name">Potassium</span>
|
|
<small class="d-block text-muted">Drug-food interaction</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badges bg-lightblue">
|
|
<i class="fas fa-info-circle me-1"></i>Moderate
|
|
</span>
|
|
</td>
|
|
<td>Drug-Food</td>
|
|
<td>
|
|
<div class="clinical-effect">
|
|
<strong>Hyperkalemia risk</strong>
|
|
<small class="d-block text-muted">Limit potassium intake</small>
|
|
</div>
|
|
</td>
|
|
<td>2024-01-15 02:15 PM</td>
|
|
<td><span class="badges bg-lightgreen">Resolved</span></td>
|
|
<td>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="View Resolution">
|
|
<i class="fas fa-clipboard-check"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Reactivate">
|
|
<i class="fas fa-redo"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label class="checkboxs">
|
|
<input type="checkbox" value="4">
|
|
<span class="checkmarks"></span>
|
|
</label>
|
|
</td>
|
|
<td>INT-2024-004</td>
|
|
<td>
|
|
<div class="userimgname">
|
|
<a href="#" class="product-img">
|
|
<i class="fas fa-user-circle"></i>
|
|
</a>
|
|
<a href="#">Emily Davis</a>
|
|
<small class="d-block text-muted">MRN: 901234</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="drug-interaction">
|
|
<span class="drug-name">Metformin</span>
|
|
<i class="fas fa-disease mx-2 text-secondary"></i>
|
|
<span class="drug-name">Kidney Disease</span>
|
|
<small class="d-block text-muted">Drug-condition interaction</small>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badges bg-lightyellow">
|
|
<i class="fas fa-exclamation-circle me-1"></i>Major
|
|
</span>
|
|
</td>
|
|
<td>Drug-Condition</td>
|
|
<td>
|
|
<div class="clinical-effect">
|
|
<strong>Lactic acidosis risk</strong>
|
|
<small class="d-block text-muted">Monitor renal function</small>
|
|
</div>
|
|
</td>
|
|
<td>2024-01-14 04:30 PM</td>
|
|
<td><span class="badges bg-lightpurple">Overridden</span></td>
|
|
<td>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="View Details">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Override Reason">
|
|
<i class="fas fa-comment-medical"></i>
|
|
</a>
|
|
<a class="me-3" href="#" data-bs-toggle="tooltip" title="Review">
|
|
<i class="fas fa-search-plus"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="pagination-wrapper">
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-5">
|
|
<div class="dataTables_info">
|
|
Showing 1 to 4 of 277 entries
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-7">
|
|
<div class="dataTables_paginate">
|
|
<ul class="pagination">
|
|
<li class="paginate_button page-item previous disabled">
|
|
<a href="#" class="page-link">Previous</a>
|
|
</li>
|
|
<li class="paginate_button page-item active">
|
|
<a href="#" class="page-link">1</a>
|
|
</li>
|
|
<li class="paginate_button page-item">
|
|
<a href="#" class="page-link">2</a>
|
|
</li>
|
|
<li class="paginate_button page-item">
|
|
<a href="#" class="page-link">3</a>
|
|
</li>
|
|
<li class="paginate_button page-item next">
|
|
<a href="#" class="page-link">Next</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize search functionality
|
|
const searchInput = document.getElementById('searchInput');
|
|
searchInput.addEventListener('keyup', function() {
|
|
filterTable();
|
|
});
|
|
|
|
// Initialize select all checkbox
|
|
const selectAllCheckbox = document.getElementById('select-all');
|
|
selectAllCheckbox.addEventListener('change', function() {
|
|
const checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
|
|
checkboxes.forEach(checkbox => {
|
|
checkbox.checked = this.checked;
|
|
});
|
|
});
|
|
|
|
// Initialize filter toggle
|
|
const filterButton = document.getElementById('filter_search');
|
|
const filterPanel = document.getElementById('filter_inputs');
|
|
filterButton.addEventListener('click', function() {
|
|
if (filterPanel.style.display === 'none') {
|
|
filterPanel.style.display = 'block';
|
|
} else {
|
|
filterPanel.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Initialize tooltips
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
});
|
|
});
|
|
|
|
function filterTable() {
|
|
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
|
const table = document.getElementById('interactionsTable');
|
|
const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
|
|
|
|
for (let i = 0; i < rows.length; i++) {
|
|
const row = rows[i];
|
|
const cells = row.getElementsByTagName('td');
|
|
let found = false;
|
|
|
|
// Search in alert ID, patient name, drugs
|
|
const searchableText = (
|
|
cells[1].textContent + ' ' + // Alert ID
|
|
cells[2].textContent + ' ' + // Patient
|
|
cells[3].textContent // Drugs
|
|
).toLowerCase();
|
|
|
|
if (searchableText.includes(searchTerm)) {
|
|
found = true;
|
|
}
|
|
|
|
row.style.display = found ? '' : 'none';
|
|
}
|
|
}
|
|
|
|
function applyFilters() {
|
|
const severity = document.getElementById('severityFilter').value;
|
|
const status = document.getElementById('statusFilter').value;
|
|
const startDate = document.getElementById('startDate').value;
|
|
const endDate = document.getElementById('endDate').value;
|
|
const interactionType = document.getElementById('interactionTypeFilter').value;
|
|
const department = document.getElementById('departmentFilter').value;
|
|
|
|
console.log('Applying filters:', {
|
|
severity, status, startDate, endDate, interactionType, department
|
|
});
|
|
|
|
// Filter logic would be implemented here
|
|
alert('Filters applied! In a real implementation, this would filter the drug interactions.');
|
|
}
|
|
|
|
function clearFilters() {
|
|
document.getElementById('severityFilter').value = '';
|
|
document.getElementById('statusFilter').value = '';
|
|
document.getElementById('startDate').value = '';
|
|
document.getElementById('endDate').value = '';
|
|
document.getElementById('interactionTypeFilter').value = '';
|
|
document.getElementById('departmentFilter').value = '';
|
|
document.getElementById('searchInput').value = '';
|
|
|
|
// Show all rows
|
|
const table = document.getElementById('interactionsTable');
|
|
const rows = table.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
|
|
for (let i = 0; i < rows.length; i++) {
|
|
rows[i].style.display = '';
|
|
}
|
|
|
|
console.log('Filters cleared');
|
|
}
|
|
|
|
function exportToPDF() {
|
|
console.log('Exporting drug interactions to PDF...');
|
|
alert('PDF export functionality would be implemented here.');
|
|
}
|
|
|
|
function exportToExcel() {
|
|
console.log('Exporting drug interactions to Excel...');
|
|
alert('Excel export functionality would be implemented here.');
|
|
}
|
|
|
|
function printTable() {
|
|
console.log('Printing drug interactions...');
|
|
window.print();
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.drug-interaction {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.drug-name {
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
.clinical-effect strong {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.dash-widget1 .dash-widgetimg span {
|
|
background: linear-gradient(90deg, #ff6b6b 0%, #ee5a52 100%);
|
|
}
|
|
|
|
.dash-widget2 .dash-widgetimg span {
|
|
background: linear-gradient(90deg, #ffa726 0%, #fb8c00 100%);
|
|
}
|
|
|
|
.dash-widget3 .dash-widgetimg span {
|
|
background: linear-gradient(90deg, #42a5f5 0%, #1e88e5 100%);
|
|
}
|
|
|
|
.dash-widget4 .dash-widgetimg span {
|
|
background: linear-gradient(90deg, #66bb6a 0%, #43a047 100%);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.drug-interaction {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.drug-interaction .fas {
|
|
margin: 5px 0;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|