agdar/medical/templates/medical/consultation_list.html

{% extends "base.html" %}
{% load i18n static %}

{% block title %}{% trans "Medical Consultations" %} - Tenhal{% endblock %}

{% block css %}
<link href="{% static 'plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
{% 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-stethoscope me-2"></i>{% trans "Medical Consultations" %}
            </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 active">{% trans "Medical Consultations" %}</li>
                </ol>
            </nav>
        </div>
        <div>
            {% if user.role in 'ADMIN,DOCTOR' %}
            <a href="{% url 'medical:consultation_create' %}" class="btn btn-primary">
                <i class="fas fa-plus me-1"></i>{% trans "New Consultation" %}
            </a>
            {% endif %}
        </div>
    </div>

    <!-- Unsigned Consultations Alert -->
    {% if unsigned_count > 0 %}
    <div class="alert alert-warning alert-dismissible fade show mb-3" role="alert">
        <h5 class="alert-heading">
            <i class="fas fa-exclamation-triangle me-2"></i>{% trans "Unsigned Consultations" %}
        </h5>
        <p class="mb-2">
            {% blocktrans count counter=unsigned_count %}
            You have {{ counter }} unsigned consultation that requires your signature.
            {% plural %}
            You have {{ counter }} unsigned consultations that require your signature.
            {% endblocktrans %}
        </p>
        {% if unsigned_items %}
        <hr>
        <p class="mb-2"><strong>{% trans "Recent unsigned consultations:" %}</strong></p>
        <ul class="mb-0">
            {% for item in unsigned_items %}
            <li>
                <a href="{% url 'medical:consultation_detail' item.pk %}" class="alert-link">
                    {{ item.consultation_date|date:"Y-m-d" }} - {{ item.patient.first_name_en }} {{ item.patient.last_name_en }} ({{ item.patient.mrn }})
                </a>
                {% if item.provider != user %}
                    <small class="text-muted">- {% trans "Provider" %}: {{ item.provider.get_full_name }}</small>
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endif %}

    <!-- Filters Card -->
    <div class="card mb-3">
        <div class="card-body">
            <form method="get" id="filterForm" hx-get="{% url 'medical:consultation_list' %}" 
                  hx-target="#consultationListContainer" hx-trigger="change, submit" hx-swap="innerHTML">
                <div class="row g-3">
                    <!-- Search -->
                    <div class="col-md-3">
                        <label class="form-label">{% trans "Search" %}</label>
                        <input type="text" name="search" class="form-control" 
                               placeholder="{% trans 'Patient name or MRN' %}"
                               value="{{ current_filters.search }}"
                               hx-get="{% url 'medical:consultation_list' %}"
                               hx-target="#consultationListContainer"
                               hx-trigger="keyup changed delay:500ms"
                               hx-include="[name='provider'], [name='date_from'], [name='date_to']">
                    </div>

                    <!-- Provider Filter -->
                    <div class="col-md-3">
                        <label class="form-label">{% trans "Provider" %}</label>
                        <select name="provider" class="form-select">
                            <option value="">{% trans "All Providers" %}</option>
                            {% for provider in providers %}
                            <option value="{{ provider.pk }}" {% if current_filters.provider == provider.pk|stringformat:"s" %}selected{% endif %}>
                                {{ provider.get_full_name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Date From -->
                    <div class="col-md-2">
                        <label class="form-label">{% trans "From Date" %}</label>
                        <input type="date" name="date_from" class="form-control" 
                               value="{{ current_filters.date_from }}">
                    </div>

                    <!-- Date To -->
                    <div class="col-md-2">
                        <label class="form-label">{% trans "To Date" %}</label>
                        <input type="date" name="date_to" class="form-control" 
                               value="{{ current_filters.date_to }}">
                    </div>

                    <!-- Apply/Clear Buttons -->
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="fas fa-filter me-1"></i>{% trans "Apply" %}
                        </button>
                        <a href="{% url 'medical:consultation_list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-1"></i>{% trans "Clear" %}
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Consultations List -->
    <div class="card">
        <div class="card-body">
            <div id="consultationListContainer">
                {% include 'medical/partials/consultation_list_partial.html' %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{% static 'plugins/datatables.net/js/dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables.net-bs5/js/dataTables.bootstrap5.min.js' %}"></script>
<script>
    // HTMX event listeners
    document.body.addEventListener('htmx:afterSwap', function(event) {
        if (event.detail.target.id === 'consultationListContainer') {
            // Reinitialize tooltips after HTMX swap
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        }
    });
</script>
{% endblock %}