2025-08-12 13:33:25 +03:00

712 lines
33 KiB
HTML

{% extends "base.html" %}
{% load static %}
{% block title %}Prescriptions - 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 active">Prescriptions</li>
</ol>
<!-- END breadcrumb -->
<!-- BEGIN page-header -->
<h1 class="page-header">
Prescriptions
<small>Manage prescription orders and dispensing</small>
</h1>
<!-- END page-header -->
<!-- BEGIN panel -->
<div class="panel panel-inverse">
<div class="panel-heading">
<h4 class="panel-title">Prescription Management</h4>
<div class="panel-heading-btn">
<button type="button" class="btn btn-success btn-sm me-2" data-bs-toggle="modal" data-bs-target="#newPrescriptionModal">
<i class="fa fa-plus me-2"></i>New Prescription
</button>
<button type="button" class="btn btn-info btn-sm me-2" onclick="refreshList()">
<i class="fa fa-refresh me-2"></i>Refresh
</button>
<div class="btn-group me-2">
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
<i class="fa fa-download me-2"></i>Export
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" onclick="exportData('csv')">Export as CSV</a></li>
<li><a class="dropdown-item" href="#" onclick="exportData('excel')">Export as Excel</a></li>
<li><a class="dropdown-item" href="#" onclick="exportData('pdf')">Export as PDF</a></li>
</ul>
</div>
<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">
<!-- Statistics Cards -->
<div class="row mb-4">
<div class="col-xl-3 col-md-6">
<div class="widget widget-stats bg-primary">
<div class="stats-icon"><i class="fa fa-prescription"></i></div>
<div class="stats-info">
<h4 id="total-prescriptions">{{ total_prescriptions|default:0 }}</h4>
<p>Total Prescriptions</p>
</div>
<div class="stats-link">
<a href="javascript:;" onclick="filterByStatus('all')">View All <i class="fa fa-arrow-alt-circle-right"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="widget widget-stats bg-warning">
<div class="stats-icon"><i class="fa fa-clock"></i></div>
<div class="stats-info">
<h4 id="pending-prescriptions">{{ pending_prescriptions|default:0 }}</h4>
<p>Pending</p>
</div>
<div class="stats-link">
<a href="javascript:;" onclick="filterByStatus('pending')">View Pending <i class="fa fa-arrow-alt-circle-right"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="widget widget-stats bg-success">
<div class="stats-icon"><i class="fa fa-check-circle"></i></div>
<div class="stats-info">
<h4 id="dispensed-prescriptions">{{ dispensed_prescriptions|default:0 }}</h4>
<p>Dispensed</p>
</div>
<div class="stats-link">
<a href="javascript:;" onclick="filterByStatus('dispensed')">View Dispensed <i class="fa fa-arrow-alt-circle-right"></i></a>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6">
<div class="widget widget-stats bg-danger">
<div class="stats-icon"><i class="fa fa-exclamation-triangle"></i></div>
<div class="stats-info">
<h4 id="urgent-prescriptions">{{ urgent_prescriptions|default:0 }}</h4>
<p>Urgent</p>
</div>
<div class="stats-link">
<a href="javascript:;" onclick="filterByStatus('urgent')">View Urgent <i class="fa fa-arrow-alt-circle-right"></i></a>
</div>
</div>
</div>
</div>
<!-- Filters -->
<div class="row mb-3">
<div class="col-md-3">
<div class="form-floating">
<input type="text" class="form-control" id="search-input" placeholder="Search prescriptions...">
<label for="search-input">Search prescriptions...</label>
</div>
</div>
<div class="col-md-2">
<div class="form-floating">
<select class="form-select" id="status-filter">
<option value="">All Statuses</option>
<option value="pending">Pending</option>
<option value="verified">Verified</option>
<option value="dispensed">Dispensed</option>
<option value="completed">Completed</option>
<option value="cancelled">Cancelled</option>
</select>
<label for="status-filter">Status</label>
</div>
</div>
<div class="col-md-2">
<div class="form-floating">
<select class="form-select" id="priority-filter">
<option value="">All Priorities</option>
<option value="routine">Routine</option>
<option value="urgent">Urgent</option>
<option value="stat">STAT</option>
<option value="emergency">Emergency</option>
</select>
<label for="priority-filter">Priority</label>
</div>
</div>
<div class="col-md-2">
<div class="form-floating">
<input type="date" class="form-control" id="date-from">
<label for="date-from">From Date</label>
</div>
</div>
<div class="col-md-2">
<div class="form-floating">
<input type="date" class="form-control" id="date-to">
<label for="date-to">To Date</label>
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-outline-secondary h-100" onclick="clearFilters()">
<i class="fa fa-times"></i>
</button>
</div>
</div>
<!-- Bulk Actions -->
<div class="row mb-3" id="bulk-actions" style="display: none;">
<div class="col-12">
<div class="alert alert-info">
<div class="d-flex justify-content-between align-items-center">
<span><strong id="selected-count">0</strong> prescriptions selected</span>
<div>
<button type="button" class="btn btn-sm btn-success me-2" onclick="bulkVerify()">
<i class="fa fa-check me-1"></i>Verify Selected
</button>
<button type="button" class="btn btn-sm btn-primary me-2" onclick="bulkDispense()">
<i class="fa fa-pills me-1"></i>Dispense Selected
</button>
<button type="button" class="btn btn-sm btn-warning me-2" onclick="bulkPrint()">
<i class="fa fa-print me-1"></i>Print Selected
</button>
<button type="button" class="btn btn-sm btn-secondary" onclick="clearSelection()">
<i class="fa fa-times me-1"></i>Clear Selection
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Prescriptions Table -->
<div class="table-responsive">
<table class="table table-striped table-bordered align-middle" id="prescriptions-table">
<thead class="table-dark">
<tr>
<th width="30">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="select-all">
</div>
</th>
<th>Prescription #</th>
<th>Patient</th>
<th>Prescriber</th>
<th>Medication</th>
<th>Status</th>
<th>Priority</th>
<th>Date Prescribed</th>
<th>Due Date</th>
<th width="120">Actions</th>
</tr>
</thead>
<tbody>
{% for prescription in object_list %}
<tr data-prescription-id="{{ prescription.pk }}">
<td>
<div class="form-check">
<input class="form-check-input prescription-checkbox" type="checkbox" value="{{ prescription.pk }}">
</div>
</td>
<td>
<a href="{% url 'pharmacy:prescription_detail' prescription.pk %}" class="text-decoration-none fw-bold">
{{ prescription.prescription_number }}
</a>
{% if prescription.is_controlled %}
<span class="badge bg-warning ms-2" title="Controlled Substance">
<i class="fa fa-shield"></i>
</span>
{% endif %}
</td>
<td>
<div class="d-flex align-items-center">
<div class="me-2">
<div class="w-30px h-30px bg-primary rounded-circle d-flex align-items-center justify-content-center">
<i class="fa fa-user text-white fs-12px"></i>
</div>
</div>
<div>
<div class="fw-bold">
<a href="{% url 'patients:patient_detail' prescription.patient.pk %}" class="text-decoration-none">
{{ prescription.patient.get_full_name }}
</a>
</div>
<div class="small text-muted">{{ prescription.patient.patient_id }}</div>
</div>
</div>
</td>
<td>
<div>{{ prescription.prescriber.get_full_name }}</div>
<div class="small text-muted">{{ prescription.prescriber.specialty|default:"General" }}</div>
</td>
<td>
<div class="fw-bold">{{ prescription.medication.name }}</div>
<div class="small text-muted">
{{ prescription.dosage }} {{ prescription.dosage_unit }}
{% if prescription.frequency %}
- {{ prescription.frequency }}
{% endif %}
</div>
<div class="small text-muted">Qty: {{ prescription.quantity }}</div>
</td>
<td>
<span class="badge bg-{% if prescription.status == 'dispensed' %}success{% elif prescription.status == 'verified' %}info{% elif prescription.status == 'pending' %}warning{% elif prescription.status == 'cancelled' %}danger{% else %}secondary{% endif %}">
{{ prescription.get_status_display }}
</span>
{% if prescription.is_overdue %}
<div class="small text-danger mt-1">
<i class="fa fa-clock me-1"></i>Overdue
</div>
{% endif %}
</td>
<td>
<span class="badge bg-{% if prescription.priority == 'emergency' %}danger{% elif prescription.priority == 'stat' %}warning{% elif prescription.priority == 'urgent' %}info{% else %}secondary{% endif %}">
{{ prescription.get_priority_display }}
</span>
</td>
<td>
<div>{{ prescription.date_prescribed|date:"M d, Y" }}</div>
<div class="small text-muted">{{ prescription.date_prescribed|date:"H:i" }}</div>
</td>
<td>
{% if prescription.due_date %}
<div class="{% if prescription.is_overdue %}text-danger{% elif prescription.is_due_soon %}text-warning{% endif %}">
{{ prescription.due_date|date:"M d, Y" }}
</div>
<div class="small text-muted">{{ prescription.due_date|date:"H:i" }}</div>
{% else %}
<span class="text-muted">No due date</span>
{% endif %}
</td>
<td>
<div class="btn-group">
<a href="{% url 'pharmacy:prescription_detail' prescription.pk %}" class="btn btn-outline-primary btn-sm" title="View Details">
<i class="fa fa-eye"></i>
</a>
{% if prescription.status == 'pending' %}
<button type="button" class="btn btn-outline-success btn-sm" onclick="verifyPrescription({{ prescription.pk }})" title="Verify">
<i class="fa fa-check"></i>
</button>
{% endif %}
{% if prescription.status == 'verified' %}
<button type="button" class="btn btn-outline-info btn-sm" onclick="dispensePrescription({{ prescription.pk }})" title="Dispense">
<i class="fa fa-pills"></i>
</button>
{% endif %}
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
<i class="fa fa-ellipsis-v"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="{% url 'pharmacy:prescription_detail' prescription.pk %}">
<i class="fa fa-eye me-2"></i>View Details
</a></li>
{% if prescription.can_edit %}
<li><a class="dropdown-item" href="{% url 'pharmacy:prescription_edit' prescription.pk %}">
<i class="fa fa-edit me-2"></i>Edit
</a></li>
{% endif %}
<li><a class="dropdown-item" href="#" onclick="printPrescription({{ prescription.pk }})">
<i class="fa fa-print me-2"></i>Print
</a></li>
<li><a class="dropdown-item" href="#" onclick="checkInteractions({{ prescription.pk }})">
<i class="fa fa-exclamation-triangle me-2"></i>Check Interactions
</a></li>
{% if prescription.can_cancel %}
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="{% url 'pharmacy:prescription_cancel' prescription.pk %}">
<i class="fa fa-times me-2"></i>Cancel
</a></li>
{% endif %}
</ul>
</div>
</div>
</td>
</tr>
{% empty %}
<tr>
<td colspan="10" class="text-center py-4">
<div class="text-muted">
<i class="fa fa-prescription fa-3x mb-3"></i>
<div>No prescriptions found</div>
<div class="small">Try adjusting your search criteria or add a new prescription</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- Pagination -->
{% if is_paginated %}
<div class="d-flex justify-content-between align-items-center mt-3">
<div class="text-muted">
Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} prescriptions
</div>
<nav aria-label="Prescriptions pagination">
<ul class="pagination mb-0">
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">First</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Previous</a>
</li>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<li class="page-item active">
<span class="page-link">{{ num }}</span>
</li>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<li class="page-item">
<a class="page-link" href="?page={{ num }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">{{ num }}</a>
</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Next</a>
</li>
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}">Last</a>
</li>
{% endif %}
</ul>
</nav>
</div>
{% endif %}
</div>
</div>
<!-- END panel -->
<!-- New Prescription Modal -->
<div class="modal fade" id="newPrescriptionModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New Prescription</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="new-prescription-form">
<div class="row mb-3">
<div class="col-md-6">
<div class="form-floating">
<select class="form-select" id="patient-select" required>
<option value="">Select Patient</option>
<!-- Populated via AJAX -->
</select>
<label for="patient-select">Patient</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<select class="form-select" id="medication-select" required>
<option value="">Select Medication</option>
<!-- Populated via AJAX -->
</select>
<label for="medication-select">Medication</label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-4">
<div class="form-floating">
<input type="text" class="form-control" id="dosage" required>
<label for="dosage">Dosage</label>
</div>
</div>
<div class="col-md-4">
<div class="form-floating">
<select class="form-select" id="dosage-unit">
<option value="mg">mg</option>
<option value="g">g</option>
<option value="ml">ml</option>
<option value="tablets">tablets</option>
<option value="capsules">capsules</option>
</select>
<label for="dosage-unit">Unit</label>
</div>
</div>
<div class="col-md-4">
<div class="form-floating">
<input type="number" class="form-control" id="quantity" required>
<label for="quantity">Quantity</label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<div class="form-floating">
<select class="form-select" id="frequency">
<option value="">Select Frequency</option>
<option value="once_daily">Once Daily</option>
<option value="twice_daily">Twice Daily</option>
<option value="three_times_daily">Three Times Daily</option>
<option value="four_times_daily">Four Times Daily</option>
<option value="as_needed">As Needed</option>
</select>
<label for="frequency">Frequency</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<select class="form-select" id="priority">
<option value="routine">Routine</option>
<option value="urgent">Urgent</option>
<option value="stat">STAT</option>
<option value="emergency">Emergency</option>
</select>
<label for="priority">Priority</label>
</div>
</div>
</div>
<div class="mb-3">
<label for="instructions" class="form-label">Instructions</label>
<textarea class="form-control" id="instructions" rows="3"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="createPrescription()">Create Prescription</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
$(document).ready(function() {
// Initialize filters
initializeFilters();
// Load patients and medications for new prescription modal
loadPatients();
loadMedications();
// Auto-refresh every 30 seconds
setInterval(function() {
refreshList();
}, 30000);
});
function initializeFilters() {
$('#search-input, #status-filter, #priority-filter, #date-from, #date-to').on('change input', function() {
filterPrescriptions();
});
// Select all checkbox
$('#select-all').on('change', function() {
$('.prescription-checkbox').prop('checked', this.checked);
updateBulkActions();
});
// Individual checkboxes
$(document).on('change', '.prescription-checkbox', function() {
updateBulkActions();
});
}
function filterPrescriptions() {
var search = $('#search-input').val();
var status = $('#status-filter').val();
var priority = $('#priority-filter').val();
var dateFrom = $('#date-from').val();
var dateTo = $('#date-to').val();
var params = new URLSearchParams();
if (search) params.append('search', search);
if (status) params.append('status', status);
if (priority) params.append('priority', priority);
if (dateFrom) params.append('date_from', dateFrom);
if (dateTo) params.append('date_to', dateTo);
window.location.href = '?' + params.toString();
}
function filterByStatus(status) {
$('#status-filter').val(status === 'all' ? '' : status);
filterPrescriptions();
}
function clearFilters() {
$('#search-input, #status-filter, #priority-filter, #date-from, #date-to').val('');
window.location.href = window.location.pathname;
}
function updateBulkActions() {
var selectedCount = $('.prescription-checkbox:checked').length;
$('#selected-count').text(selectedCount);
if (selectedCount > 0) {
$('#bulk-actions').show();
} else {
$('#bulk-actions').hide();
}
// Update select all checkbox
var totalCheckboxes = $('.prescription-checkbox').length;
$('#select-all').prop('indeterminate', selectedCount > 0 && selectedCount < totalCheckboxes);
$('#select-all').prop('checked', selectedCount === totalCheckboxes);
}
function clearSelection() {
$('.prescription-checkbox, #select-all').prop('checked', false);
updateBulkActions();
}
function refreshList() {
location.reload();
}
function exportData(format) {
var params = new URLSearchParams(window.location.search);
params.append('export', format);
window.open('?' + params.toString(), '_blank');
}
function verifyPrescription(prescriptionId) {
if (confirm('Verify this prescription?')) {
$.ajax({
url: '{% url "pharmacy:verify_prescription" 0 %}'.replace('0', prescriptionId),
method: 'POST',
success: function() {
toastr.success('Prescription verified successfully');
refreshList();
},
error: function() {
toastr.error('Failed to verify prescription');
}
});
}
}
function dispensePrescription(prescriptionId) {
window.location.href = '{% url "pharmacy:dispense_prescription" 0 %}'.replace('0', prescriptionId);
}
function printPrescription(prescriptionId) {
window.open('{% url "pharmacy:print_prescription" 0 %}'.replace('0', prescriptionId), '_blank');
}
function checkInteractions(prescriptionId) {
window.open('{% url "pharmacy:check_interactions" 0 %}'.replace('0', prescriptionId), '_blank');
}
function bulkVerify() {
var selectedIds = $('.prescription-checkbox:checked').map(function() {
return this.value;
}).get();
if (selectedIds.length === 0) {
toastr.warning('Please select prescriptions to verify');
return;
}
if (confirm('Verify ' + selectedIds.length + ' selected prescriptions?')) {
$.ajax({
url: '{% url "pharmacy:bulk_verify_prescriptions" %}',
method: 'POST',
data: {
'prescription_ids': selectedIds,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
success: function(response) {
toastr.success(response.message);
refreshList();
},
error: function() {
toastr.error('Failed to verify prescriptions');
}
});
}
}
function bulkDispense() {
var selectedIds = $('.prescription-checkbox:checked').map(function() {
return this.value;
}).get();
if (selectedIds.length === 0) {
toastr.warning('Please select prescriptions to dispense');
return;
}
window.location.href = '{% url "pharmacy:bulk_dispense_prescriptions" %}?ids=' + selectedIds.join(',');
}
function bulkPrint() {
var selectedIds = $('.prescription-checkbox:checked').map(function() {
return this.value;
}).get();
if (selectedIds.length === 0) {
toastr.warning('Please select prescriptions to print');
return;
}
window.open('{% url "pharmacy:bulk_print_prescriptions" %}?ids=' + selectedIds.join(','), '_blank');
}
function loadPatients() {
$.ajax({
url: '{% url "pharmacy:get_patients" %}',
method: 'GET',
success: function(response) {
var select = $('#patient-select');
select.empty().append('<option value="">Select Patient</option>');
response.patients.forEach(function(patient) {
select.append('<option value="' + patient.id + '">' + patient.name + ' (' + patient.patient_id + ')</option>');
});
}
});
}
function loadMedications() {
$.ajax({
url: '{% url "pharmacy:get_medications" %}',
method: 'GET',
success: function(response) {
var select = $('#medication-select');
select.empty().append('<option value="">Select Medication</option>');
response.medications.forEach(function(medication) {
select.append('<option value="' + medication.id + '">' + medication.name + ' (' + medication.strength + ')</option>');
});
}
});
}
function createPrescription() {
var formData = {
'patient': $('#patient-select').val(),
'medication': $('#medication-select').val(),
'dosage': $('#dosage').val(),
'dosage_unit': $('#dosage-unit').val(),
'quantity': $('#quantity').val(),
'frequency': $('#frequency').val(),
'priority': $('#priority').val(),
'instructions': $('#instructions').val(),
'csrfmiddlewaretoken': '{{ csrf_token }}'
};
$.ajax({
url: '{% url "pharmacy:create_prescription" %}',
method: 'POST',
data: formData,
success: function(response) {
toastr.success('Prescription created successfully');
$('#newPrescriptionModal').modal('hide');
refreshList();
},
error: function(xhr) {
var errors = xhr.responseJSON.errors;
toastr.error('Failed to create prescription: ' + Object.values(errors).join(', '));
}
});
}
</script>
{% endblock %}