555 lines
24 KiB
HTML
555 lines
24 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Patient Notes - Patients{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'assets/plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'assets/plugins/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css' %}" rel="stylesheet" />
|
|
{% 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 'patients:patient_list' %}">Patients</a></li>
|
|
<li class="breadcrumb-item active">Patient Notes</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">
|
|
Patient Notes
|
|
<small>Clinical Documentation</small>
|
|
</h1>
|
|
<!-- END page-header -->
|
|
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Patient Notes</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="{% url 'patients:patient_note_create' %}" class="btn btn-xs btn-success me-2">
|
|
<i class="fa fa-plus"></i> Add Note
|
|
</a>
|
|
<button type="button" class="btn btn-xs btn-primary me-2" onclick="refreshData()">
|
|
<i class="fa fa-refresh"></i> Refresh
|
|
</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">
|
|
<!-- Statistics Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card border-primary">
|
|
<div class="card-body text-center">
|
|
<div class="fs-24px fw-bold text-primary" id="total-notes">{{ total_notes }}</div>
|
|
<div class="small text-muted">Total Notes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-success">
|
|
<div class="card-body text-center">
|
|
<div class="fs-24px fw-bold text-success" id="today-notes">{{ today_notes }}</div>
|
|
<div class="small text-muted">Today's Notes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-warning">
|
|
<div class="card-body text-center">
|
|
<div class="fs-24px fw-bold text-warning" id="urgent-notes">{{ urgent_notes }}</div>
|
|
<div class="small text-muted">Urgent Notes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-info">
|
|
<div class="card-body text-center">
|
|
<div class="fs-24px fw-bold text-info" id="follow-up-notes">{{ follow_up_notes }}</div>
|
|
<div class="small text-muted">Follow-up Required</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-3">
|
|
<div class="form-floating">
|
|
<select class="form-select" id="filter-priority">
|
|
<option value="">All Priorities</option>
|
|
<option value="LOW">Low</option>
|
|
<option value="NORMAL">Normal</option>
|
|
<option value="HIGH">High</option>
|
|
<option value="URGENT">Urgent</option>
|
|
</select>
|
|
<label>Priority</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-floating">
|
|
<select class="form-select" id="filter-category">
|
|
<option value="">All Categories</option>
|
|
<option value="CLINICAL">Clinical</option>
|
|
<option value="ADMINISTRATIVE">Administrative</option>
|
|
<option value="BILLING">Billing</option>
|
|
<option value="INSURANCE">Insurance</option>
|
|
<option value="FOLLOW_UP">Follow-up</option>
|
|
<option value="OTHER">Other</option>
|
|
</select>
|
|
<label>Category</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-floating">
|
|
<input type="date" class="form-control" id="filter-date">
|
|
<label>Date</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="form-floating">
|
|
<input type="text" class="form-control" id="search-input" placeholder="Search...">
|
|
<label>Search Patient/Note</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bulk Actions -->
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="selectAll()">
|
|
<i class="fa fa-check-square me-1"></i>Select All
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="selectNone()">
|
|
<i class="fa fa-square me-1"></i>Select None
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 text-end">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-outline-warning btn-sm" onclick="markUrgent()" disabled id="urgent-btn">
|
|
<i class="fa fa-exclamation-triangle me-1"></i>Mark Urgent
|
|
</button>
|
|
<button type="button" class="btn btn-outline-info btn-sm" onclick="addFollowUp()" disabled id="followup-btn">
|
|
<i class="fa fa-calendar me-1"></i>Add Follow-up
|
|
</button>
|
|
<button type="button" class="btn btn-outline-success btn-sm" onclick="exportSelected()" disabled id="export-btn">
|
|
<i class="fa fa-download me-1"></i>Export Selected
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notes Table -->
|
|
<div class="table-responsive">
|
|
<table id="notes-table" class="table table-striped table-bordered align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th width="30">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="select-all-checkbox">
|
|
</div>
|
|
</th>
|
|
<th>Patient</th>
|
|
<th>Note</th>
|
|
<th>Category</th>
|
|
<th>Priority</th>
|
|
<th>Created By</th>
|
|
<th>Date</th>
|
|
<th>Follow-up</th>
|
|
<th width="120">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for note in object_list %}
|
|
<tr>
|
|
<td>
|
|
<div class="form-check">
|
|
<input class="form-check-input row-checkbox" type="checkbox" value="{{ note.pk }}">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="w-40px h-40px bg-primary rounded-circle d-flex align-items-center justify-content-center me-3">
|
|
<i class="fa fa-user text-white"></i>
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold">
|
|
<a href="{% url 'patients:patient_detail' note.patient.pk %}" class="text-decoration-none">
|
|
{{ note.patient.get_full_name }}
|
|
</a>
|
|
</div>
|
|
<small class="text-muted">{{ note.patient.patient_id }}</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="fw-bold">{{ note.title|truncatechars:50 }}</div>
|
|
<small class="text-muted">{{ note.content|truncatechars:100 }}</small>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-{% if note.category == 'CLINICAL' %}primary{% elif note.category == 'URGENT' %}danger{% elif note.category == 'FOLLOW_UP' %}warning{% else %}secondary{% endif %}">
|
|
{{ note.get_category_display }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-{% if note.priority == 'URGENT' %}danger{% elif note.priority == 'HIGH' %}warning{% elif note.priority == 'NORMAL' %}success{% else %}secondary{% endif %}">
|
|
{{ note.get_priority_display }}
|
|
</span>
|
|
{% if note.priority == 'URGENT' %}
|
|
<br><small class="text-danger">
|
|
<i class="fa fa-exclamation-triangle"></i> Urgent
|
|
</small>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="fw-bold">{{ note.created_by.get_full_name }}</div>
|
|
<small class="text-muted">{{ note.created_by.username }}</small>
|
|
</td>
|
|
<td>
|
|
{{ note.created_at|date:"M d, Y" }}
|
|
<br><small class="text-muted">{{ note.created_at|time:"H:i" }}</small>
|
|
</td>
|
|
<td>
|
|
{% if note.follow_up_date %}
|
|
{{ note.follow_up_date|date:"M d, Y" }}
|
|
{% if note.is_follow_up_overdue %}
|
|
<br><small class="text-danger">
|
|
<i class="fa fa-exclamation-circle"></i> Overdue
|
|
</small>
|
|
{% elif note.is_follow_up_due_soon %}
|
|
<br><small class="text-warning">
|
|
<i class="fa fa-clock"></i> Due Soon
|
|
</small>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="text-muted">None</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="btn-group" role="group">
|
|
<a href="{% url 'patients:patient_note_detail' note.pk %}" class="btn btn-xs btn-outline-primary" title="View">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a href="{% url 'patients:patient_note_update' note.pk %}" class="btn btn-xs btn-outline-warning" title="Edit">
|
|
<i class="fa fa-edit"></i>
|
|
</a>
|
|
<button type="button" class="btn btn-xs btn-outline-info" onclick="addFollowUpSingle('{{ note.pk }}')" title="Follow-up">
|
|
<i class="fa fa-calendar"></i>
|
|
</button>
|
|
<a href="{% url 'patients:patient_note_delete' note.pk %}" class="btn btn-xs btn-outline-danger" title="Delete">
|
|
<i class="fa fa-trash"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="9" class="text-center text-muted py-4">
|
|
<i class="fa fa-sticky-note fa-3x mb-3"></i>
|
|
<div>No patient notes found</div>
|
|
<a href="{% url 'patients:patient_note_create' %}" class="btn btn-primary mt-2">
|
|
<i class="fa fa-plus me-2"></i>Add First Patient Note
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if is_paginated %}
|
|
<nav aria-label="Notes pagination">
|
|
<ul class="pagination justify-content-center">
|
|
{% if page_obj.has_previous %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page=1">« First</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">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 }}">{{ 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 }}">Next</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Last »</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
</div>
|
|
<!-- END row -->
|
|
|
|
<!-- Follow-up Modal -->
|
|
<div class="modal fade" id="followUpModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Add Follow-up</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="followup-form">
|
|
<div class="mb-3">
|
|
<label class="form-label">Follow-up Date</label>
|
|
<input type="date" class="form-control" name="follow_up_date" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Follow-up Notes</label>
|
|
<textarea class="form-control" name="follow_up_notes" rows="3" placeholder="Enter follow-up instructions..."></textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="send_reminder" id="send-reminder" checked>
|
|
<label class="form-check-label" for="send-reminder">
|
|
Send reminder notification
|
|
</label>
|
|
</div>
|
|
</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="saveFollowUp()">
|
|
<i class="fa fa-calendar me-2"></i>Add Follow-up
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'assets/plugins/datatables.net/js/jquery.dataTables.min.js' %}"></script>
|
|
<script src="{% static 'assets/plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js' %}"></script>
|
|
<script src="{% static 'assets/plugins/datatables.net-responsive/js/dataTables.responsive.min.js' %}"></script>
|
|
<script src="{% static 'assets/plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js' %}"></script>
|
|
|
|
<script>
|
|
var table;
|
|
var selectedNoteIds = [];
|
|
|
|
$(document).ready(function() {
|
|
// Initialize DataTable
|
|
table = $('#notes-table').DataTable({
|
|
responsive: true,
|
|
pageLength: 25,
|
|
order: [[6, 'desc']],
|
|
columnDefs: [
|
|
{ orderable: false, targets: [0, 8] }
|
|
]
|
|
});
|
|
|
|
// Filter handlers
|
|
$('#filter-priority, #filter-category, #filter-date').on('change', function() {
|
|
filterTable();
|
|
});
|
|
|
|
$('#search-input').on('keyup', function() {
|
|
table.search(this.value).draw();
|
|
});
|
|
|
|
// Select all checkbox
|
|
$('#select-all-checkbox').on('change', function() {
|
|
$('.row-checkbox').prop('checked', this.checked);
|
|
updateBulkButtons();
|
|
});
|
|
|
|
// Row checkboxes
|
|
$(document).on('change', '.row-checkbox', function() {
|
|
updateBulkButtons();
|
|
|
|
// Update select all checkbox
|
|
var totalCheckboxes = $('.row-checkbox').length;
|
|
var checkedCheckboxes = $('.row-checkbox:checked').length;
|
|
$('#select-all-checkbox').prop('indeterminate', checkedCheckboxes > 0 && checkedCheckboxes < totalCheckboxes);
|
|
$('#select-all-checkbox').prop('checked', checkedCheckboxes === totalCheckboxes);
|
|
});
|
|
|
|
// Auto-refresh every 5 minutes
|
|
setInterval(refreshData, 300000);
|
|
});
|
|
|
|
function filterTable() {
|
|
var priority = $('#filter-priority').val();
|
|
var category = $('#filter-category').val();
|
|
var date = $('#filter-date').val();
|
|
|
|
// Apply filters
|
|
table.columns(4).search(priority);
|
|
table.columns(3).search(category);
|
|
if (date) {
|
|
table.columns(6).search(date);
|
|
} else {
|
|
table.columns(6).search('');
|
|
}
|
|
table.draw();
|
|
}
|
|
|
|
function updateBulkButtons() {
|
|
var checkedCount = $('.row-checkbox:checked').length;
|
|
$('#urgent-btn, #followup-btn, #export-btn').prop('disabled', checkedCount === 0);
|
|
}
|
|
|
|
function selectAll() {
|
|
$('.row-checkbox').prop('checked', true);
|
|
$('#select-all-checkbox').prop('checked', true);
|
|
updateBulkButtons();
|
|
}
|
|
|
|
function selectNone() {
|
|
$('.row-checkbox').prop('checked', false);
|
|
$('#select-all-checkbox').prop('checked', false);
|
|
updateBulkButtons();
|
|
}
|
|
|
|
function markUrgent() {
|
|
var selectedIds = $('.row-checkbox:checked').map(function() {
|
|
return this.value;
|
|
}).get();
|
|
|
|
if (selectedIds.length === 0) {
|
|
toastr.warning('Please select notes to mark as urgent');
|
|
return;
|
|
}
|
|
|
|
if (confirm('Mark ' + selectedIds.length + ' selected notes as urgent?')) {
|
|
$.ajax({
|
|
url: '{% url "patients:bulk_mark_urgent_notes" %}',
|
|
method: 'POST',
|
|
data: {
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}',
|
|
'note_ids': selectedIds
|
|
},
|
|
success: function(response) {
|
|
toastr.success(response.message);
|
|
refreshData();
|
|
},
|
|
error: function() {
|
|
toastr.error('Failed to mark notes as urgent');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function addFollowUp() {
|
|
selectedNoteIds = $('.row-checkbox:checked').map(function() {
|
|
return this.value;
|
|
}).get();
|
|
|
|
if (selectedNoteIds.length === 0) {
|
|
toastr.warning('Please select notes to add follow-up');
|
|
return;
|
|
}
|
|
|
|
$('#followUpModal').modal('show');
|
|
}
|
|
|
|
function addFollowUpSingle(noteId) {
|
|
selectedNoteIds = [noteId];
|
|
$('#followUpModal').modal('show');
|
|
}
|
|
|
|
function saveFollowUp() {
|
|
var followUpDate = $('input[name="follow_up_date"]').val();
|
|
var followUpNotes = $('textarea[name="follow_up_notes"]').val();
|
|
var sendReminder = $('input[name="send_reminder"]').is(':checked');
|
|
|
|
if (!followUpDate) {
|
|
toastr.error('Please select a follow-up date');
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '{% url "patients:bulk_add_followup_notes" %}',
|
|
method: 'POST',
|
|
data: {
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}',
|
|
'note_ids': selectedNoteIds,
|
|
'follow_up_date': followUpDate,
|
|
'follow_up_notes': followUpNotes,
|
|
'send_reminder': sendReminder
|
|
},
|
|
success: function(response) {
|
|
toastr.success(response.message);
|
|
$('#followUpModal').modal('hide');
|
|
refreshData();
|
|
},
|
|
error: function() {
|
|
toastr.error('Failed to add follow-up');
|
|
}
|
|
});
|
|
}
|
|
|
|
function exportSelected() {
|
|
var selectedIds = $('.row-checkbox:checked').map(function() {
|
|
return this.value;
|
|
}).get();
|
|
|
|
if (selectedIds.length === 0) {
|
|
toastr.warning('Please select notes to export');
|
|
return;
|
|
}
|
|
|
|
// Create form and submit for download
|
|
var form = $('<form>', {
|
|
method: 'POST',
|
|
action: '{% url "patients:export_patient_notes" %}'
|
|
});
|
|
|
|
form.append($('<input>', {
|
|
type: 'hidden',
|
|
name: 'csrfmiddlewaretoken',
|
|
value: '{{ csrf_token }}'
|
|
}));
|
|
|
|
selectedIds.forEach(function(id) {
|
|
form.append($('<input>', {
|
|
type: 'hidden',
|
|
name: 'note_ids',
|
|
value: id
|
|
}));
|
|
});
|
|
|
|
$('body').append(form);
|
|
form.submit();
|
|
form.remove();
|
|
|
|
toastr.info('Exporting ' + selectedIds.length + ' patient notes...');
|
|
}
|
|
|
|
function refreshData() {
|
|
location.reload();
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|