466 lines
23 KiB
HTML
466 lines
23 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n static patient_tags %}
|
|
|
|
{% block title %}{% trans "Nursing Encounter" %} - {{ encounter.patient.mrn }} - Tenhal{% endblock %}
|
|
|
|
{% block css %}
|
|
<style>
|
|
.vitals-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
.vital-item {
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
background: #f8f9fa;
|
|
}
|
|
.vital-value {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
}
|
|
.vital-normal { border-left: 4px solid #198754; }
|
|
.vital-warning { border-left: 4px solid #ffc107; }
|
|
.vital-danger { border-left: 4px solid #dc3545; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div>
|
|
<h1 class="page-header mb-0">
|
|
<i class="fas fa-heartbeat me-2"></i>{% trans "Nursing Encounter" %}
|
|
</h1>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">{% trans "Dashboard" %}</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'nursing:encounter_list' %}">{% trans "Nursing Encounters" %}</a></li>
|
|
<li class="breadcrumb-item active">{{ encounter.encounter_date|date:"Y-m-d" }}</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<div>
|
|
{% if user.role in 'ADMIN,NURSE' %}
|
|
<a href="{% url 'nursing:encounter_update' encounter.pk %}" class="btn btn-outline-primary">
|
|
<i class="fas fa-edit me-1"></i>{% trans "Edit" %}
|
|
</a>
|
|
{% endif %}
|
|
<button onclick="window.print()" class="btn btn-outline-secondary">
|
|
<i class="fas fa-print me-1"></i>{% trans "Print" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Main Content -->
|
|
<div class="col-lg-8">
|
|
<!-- Patient Info Card -->
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-user me-2"></i>{% trans "Patient Information" %}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<strong>{% patient_name encounter.patient %}</strong>
|
|
<br>
|
|
<span class="text-muted">{% trans "MRN" %}: {{ encounter.patient.mrn }}</span>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="text-muted small">{% trans "Date of Birth" %}</div>
|
|
<div>{{ encounter.patient.date_of_birth|date:"Y-m-d" }} ({{ encounter.patient.age }} {% trans "years" %})</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vital Signs Card -->
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-heartbeat me-2"></i>{% trans "Vital Signs" %}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="vitals-grid">
|
|
{% if encounter.hr_bpm %}
|
|
<div class="vital-item {% if vitals_interpretation.hr %}vital-{{ vitals_interpretation.hr.color }}{% endif %}">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<i class="fas fa-heartbeat text-danger fa-2x"></i>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="vital-value">{{ encounter.hr_bpm }}</div>
|
|
<div class="text-muted small">bpm</div>
|
|
{% if vitals_interpretation.hr %}
|
|
<span class="badge bg-{{ vitals_interpretation.hr.color }}">{{ vitals_interpretation.hr.status }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 small text-muted">{% trans "Heart Rate" %}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if encounter.bp_systolic and encounter.bp_diastolic %}
|
|
<div class="vital-item {% if vitals_interpretation.bp %}vital-{{ vitals_interpretation.bp.color }}{% endif %}">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<i class="fas fa-tint text-primary fa-2x"></i>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="vital-value">{{ encounter.bp_systolic }}/{{ encounter.bp_diastolic }}</div>
|
|
<div class="text-muted small">mmHg</div>
|
|
{% if vitals_interpretation.bp %}
|
|
<span class="badge bg-{{ vitals_interpretation.bp.color }}">{{ vitals_interpretation.bp.status }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 small text-muted">{% trans "Blood Pressure" %}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if encounter.respiratory_rate %}
|
|
<div class="vital-item">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<i class="fas fa-wind text-info fa-2x"></i>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="vital-value">{{ encounter.respiratory_rate }}</div>
|
|
<div class="text-muted small">/min</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 small text-muted">{% trans "Respiratory Rate" %}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if encounter.spo2 %}
|
|
<div class="vital-item {% if vitals_interpretation.spo2 %}vital-{{ vitals_interpretation.spo2.color }}{% endif %}">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<i class="fas fa-lungs text-info fa-2x"></i>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="vital-value">{{ encounter.spo2 }}%</div>
|
|
<div class="text-muted small">SpO2</div>
|
|
{% if vitals_interpretation.spo2 %}
|
|
<span class="badge bg-{{ vitals_interpretation.spo2.color }}">{{ vitals_interpretation.spo2.status }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 small text-muted">{% trans "Oxygen Saturation" %}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if encounter.temperature %}
|
|
<div class="vital-item">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<i class="fas fa-thermometer-half text-warning fa-2x"></i>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="vital-value">{{ encounter.temperature }}</div>
|
|
<div class="text-muted small">°C</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 small text-muted">{% trans "Temperature" %}</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if encounter.crt %}
|
|
<div class="vital-item">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<i class="fas fa-hand-pointer text-secondary fa-2x"></i>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="vital-value small">{{ encounter.get_crt_display }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 small text-muted">{% trans "Capillary Refill Time" %}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Anthropometrics Card -->
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-ruler-combined me-2"></i>{% trans "Anthropometric Measurements" %}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
{% if encounter.weight_kg %}
|
|
<div class="col-md-4 mb-3">
|
|
<div class="text-center p-3 bg-light rounded">
|
|
<i class="fas fa-weight fa-2x text-success mb-2"></i>
|
|
<div class="h3 mb-0">{{ encounter.weight_kg }} kg</div>
|
|
<div class="text-muted small">{% trans "Weight" %}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if encounter.height_cm %}
|
|
<div class="col-md-4 mb-3">
|
|
<div class="text-center p-3 bg-light rounded">
|
|
<i class="fas fa-ruler-vertical fa-2x text-info mb-2"></i>
|
|
<div class="h3 mb-0">{{ encounter.height_cm }} cm</div>
|
|
<div class="text-muted small">{% trans "Height" %}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if encounter.bmi %}
|
|
<div class="col-md-4 mb-3">
|
|
<div class="text-center p-3 bg-light rounded">
|
|
<i class="fas fa-calculator fa-2x text-secondary mb-2"></i>
|
|
<div class="h3 mb-0">{{ encounter.bmi }}</div>
|
|
<div class="text-muted small">{% trans "BMI" %}</div>
|
|
{% if bmi_interpretation %}
|
|
<span class="badge bg-{{ bmi_interpretation.color }} mt-1">
|
|
{{ bmi_interpretation.category }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if encounter.head_circumference_cm %}
|
|
<div class="col-md-4 mb-3">
|
|
<div class="text-center p-3 bg-light rounded">
|
|
<i class="fas fa-head-side-virus fa-2x text-warning mb-2"></i>
|
|
<div class="h3 mb-0">{{ encounter.head_circumference_cm }} cm</div>
|
|
<div class="text-muted small">{% trans "Head Circumference" %}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<a href="{% url 'nursing:growth_chart' encounter.patient.pk %}" class="btn btn-outline-primary btn-sm">
|
|
<i class="fas fa-chart-line me-1"></i>{% trans "View Growth Chart" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pain & Allergies -->
|
|
<div class="row">
|
|
{% if encounter.pain_score is not None %}
|
|
<div class="col-md-6 mb-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-sad-tear me-2"></i>{% trans "Pain Assessment" %}
|
|
</h6>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div class="display-4 mb-2">{{ encounter.pain_score }}/10</div>
|
|
<div class="progress" style="height: 25px;">
|
|
<div class="progress-bar {% if encounter.pain_score < 4 %}bg-success{% elif encounter.pain_score < 7 %}bg-warning{% else %}bg-danger{% endif %}"
|
|
role="progressbar"
|
|
style="width: {{ encounter.pain_score }}0%">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>{% trans "Allergies" %}
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if encounter.allergy_present %}
|
|
<div class="alert alert-danger mb-0">
|
|
<i class="fas fa-exclamation-circle me-2"></i>
|
|
<strong>{% trans "Allergy Present" %}</strong>
|
|
{% if encounter.allergy_details %}
|
|
<p class="mb-0 mt-2">{{ encounter.allergy_details }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center text-muted">
|
|
<i class="fas fa-check-circle fa-2x mb-2"></i>
|
|
<p class="mb-0">{% trans "No known allergies" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Observations -->
|
|
{% if encounter.observations %}
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-notes-medical me-2"></i>{% trans "Observations" %}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="mb-0">{{ encounter.observations|linebreaks }}</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Signature Status -->
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h6 class="mb-0"><i class="fas fa-signature me-2"></i>{% trans "Signature Status" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if encounter.signed_by %}
|
|
<p class="text-success">
|
|
<i class="fas fa-check-circle me-2"></i>{% trans "Signed" %}
|
|
</p>
|
|
<p class="small">
|
|
<strong>{% trans "Signed by" %}:</strong> {{ encounter.signed_by.get_full_name }}<br>
|
|
<strong>{% trans "Signed at" %}:</strong> {{ encounter.signed_at|date:"Y-m-d H:i" }}
|
|
</p>
|
|
{% else %}
|
|
<div class="alert alert-warning mb-3">
|
|
<i class="fas fa-exclamation-triangle me-2"></i>{% trans "This encounter has not been signed yet" %}
|
|
</div>
|
|
{% if user.role == 'ADMIN' or user == encounter.filled_by %}
|
|
<form method="post" action="{% url 'nursing:encounter_sign' encounter.pk %}" id="signForm"> { if (confirmed) this.submit(); });">
|
|
{% csrf_token %}
|
|
<button type="submit" class="btn btn-success w-100">
|
|
<i class="fas fa-signature me-2"></i>{% trans "Sign Encounter" %}
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<p class="text-muted small">
|
|
<i class="fas fa-info-circle me-2"></i>{% trans "Only the nurse who filled this encounter or an administrator can sign it" %}
|
|
</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Encounter Info -->
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-info-circle me-2"></i>{% trans "Encounter Information" %}
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<div class="text-muted small">{% trans "Date" %}</div>
|
|
<div>{{ encounter.encounter_date|date:"l, F d, Y" }}</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="text-muted small">{% trans "Filled By" %}</div>
|
|
<div>{{ encounter.filled_by.get_full_name }}</div>
|
|
<small class="text-muted">{{ encounter.filled_by.get_role_display }}</small>
|
|
</div>
|
|
{% if encounter.appointment %}
|
|
<div class="mb-2">
|
|
<div class="text-muted small">{% trans "Linked Appointment" %}</div>
|
|
<div>
|
|
<a href="{% url 'appointments:appointment_detail' encounter.appointment.pk %}">
|
|
{{ encounter.appointment.appointment_number }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="mb-2">
|
|
<div class="text-muted small">{% trans "Created" %}</div>
|
|
<div>{{ encounter.created_at|date:"Y-m-d H:i" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Previous Encounters -->
|
|
{% if previous_encounters %}
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-history me-2"></i>{% trans "Previous Encounters" %}
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="list-group list-group-flush">
|
|
{% for prev in previous_encounters %}
|
|
<a href="{% url 'nursing:encounter_detail' prev.pk %}" class="list-group-item list-group-item-action">
|
|
<div class="d-flex justify-content-between">
|
|
<div>{{ prev.encounter_date|date:"Y-m-d" }}</div>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</div>
|
|
<small class="text-muted">
|
|
{% if prev.weight_kg %}{{ prev.weight_kg }}kg{% endif %}
|
|
{% if prev.hr_bpm %} | HR: {{ prev.hr_bpm }}{% endif %}
|
|
</small>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="mt-2">
|
|
<a href="{% url 'nursing:patient_vitals_history' encounter.patient.pk %}" class="btn btn-outline-secondary btn-sm w-100">
|
|
<i class="fas fa-chart-line me-1"></i>{% trans "View All History" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">
|
|
<i class="fas fa-bolt me-2"></i>{% trans "Quick Actions" %}
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<a href="{% url 'nursing:patient_vitals_history' encounter.patient.pk %}" class="btn btn-outline-primary btn-sm">
|
|
<i class="fas fa-chart-line me-1"></i>{% trans "Vitals History" %}
|
|
</a>
|
|
<a href="{% url 'nursing:growth_chart' encounter.patient.pk %}" class="btn btn-outline-success btn-sm">
|
|
<i class="fas fa-chart-area me-1"></i>{% trans "Growth Chart" %}
|
|
</a>
|
|
<a href="{% url 'core:patient_detail' encounter.patient.pk %}" class="btn btn-outline-secondary btn-sm">
|
|
<i class="fas fa-user me-1"></i>{% trans "Patient Profile" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% block js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const signForm = document.getElementById('signForm');
|
|
if (signForm) {
|
|
signForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
showConfirmModal(
|
|
'{% trans "Are you sure you want to sign this document? Once signed, no further editing will be allowed. This action cannot be undone." %}',
|
|
'{% trans "Confirm Signature" %}'
|
|
).then((confirmed) => {
|
|
if (confirmed) {
|
|
this.submit();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|