209 lines
12 KiB
HTML
209 lines
12 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Search Appointments{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static 'plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}" rel="stylesheet" />
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-xl-12">
|
|
<ul class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'appointments:appointment_list' %}">Appointments</a></li>
|
|
<li class="breadcrumb-item active">Search</li>
|
|
</ul>
|
|
|
|
<h1 class="page-header">Search Appointments</h1>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Search Filters</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="get" class="row g-3">
|
|
<div class="col-md-3">
|
|
<label class="form-label">Patient Name</label>
|
|
<input type="text" name="patient_name" class="form-control" value="{{ request.GET.patient_name }}" placeholder="Enter patient name">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Patient ID</label>
|
|
<input type="text" name="patient_id" class="form-control" value="{{ request.GET.patient_id }}" placeholder="Enter patient ID">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Provider</label>
|
|
<select name="provider" class="form-select">
|
|
<option value="">All Providers</option>
|
|
{% for provider in providers %}
|
|
<option value="{{ provider.id }}" {% if request.GET.provider == provider.id|stringformat:"s" %}selected{% endif %}>
|
|
{{ provider.first_name }} {{ provider.last_name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Department</label>
|
|
<select name="department" class="form-select">
|
|
<option value="">All Departments</option>
|
|
{% for dept in departments %}
|
|
<option value="{{ dept.id }}" {% if request.GET.department == dept.id|stringformat:"s" %}selected{% endif %}>
|
|
{{ dept.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Date From</label>
|
|
<input type="date" name="date_from" class="form-control" value="{{ request.GET.date_from }}">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Date To</label>
|
|
<input type="date" name="date_to" class="form-control" value="{{ request.GET.date_to }}">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Status</label>
|
|
<select name="status" class="form-select">
|
|
<option value="">All Statuses</option>
|
|
<option value="scheduled" {% if request.GET.status == 'scheduled' %}selected{% endif %}>Scheduled</option>
|
|
<option value="confirmed" {% if request.GET.status == 'confirmed' %}selected{% endif %}>Confirmed</option>
|
|
<option value="checked_in" {% if request.GET.status == 'checked_in' %}selected{% endif %}>Checked In</option>
|
|
<option value="in_progress" {% if request.GET.status == 'in_progress' %}selected{% endif %}>In Progress</option>
|
|
<option value="completed" {% if request.GET.status == 'completed' %}selected{% endif %}>Completed</option>
|
|
<option value="cancelled" {% if request.GET.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
|
|
<option value="no_show" {% if request.GET.status == 'no_show' %}selected{% endif %}>No Show</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label">Appointment Type</label>
|
|
<select name="appointment_type" class="form-select">
|
|
<option value="">All Types</option>
|
|
{% for type in appointment_types %}
|
|
<option value="{{ type.id }}" {% if request.GET.appointment_type == type.id|stringformat:"s" %}selected{% endif %}>
|
|
{{ type.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fa fa-search me-2"></i>Search
|
|
</button>
|
|
<a href="{% url 'appointments:appointment_search' %}" class="btn btn-secondary ms-2">
|
|
<i class="fa fa-refresh me-2"></i>Clear
|
|
</a>
|
|
<a href="{% url 'appointments:appointment_create' %}" class="btn btn-success ms-2">
|
|
<i class="fa fa-plus me-2"></i>New Appointment
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% if appointments %}
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h4 class="card-title">Search Results ({{ appointments.count }} found)</h4>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped" id="appointmentsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Date/Time</th>
|
|
<th>Patient</th>
|
|
<th>Provider</th>
|
|
<th>Department</th>
|
|
<th>Type</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for appointment in appointments %}
|
|
<tr>
|
|
<td>
|
|
<div class="fw-bold">{{ appointment.appointment_date|date:"M d, Y" }}</div>
|
|
<small class="text-muted">{{ appointment.appointment_time|time:"g:i A" }}</small>
|
|
</td>
|
|
<td>
|
|
<div class="fw-bold">{{ appointment.patient.first_name }} {{ appointment.patient.last_name }}</div>
|
|
<small class="text-muted">ID: {{ appointment.patient.patient_id }}</small>
|
|
</td>
|
|
<td>{{ appointment.provider.first_name }} {{ appointment.provider.last_name }}</td>
|
|
<td>{{ appointment.department.name }}</td>
|
|
<td>{{ appointment.appointment_type.name }}</td>
|
|
<td>
|
|
{% if appointment.status == 'scheduled' %}
|
|
<span class="badge bg-info">Scheduled</span>
|
|
{% elif appointment.status == 'confirmed' %}
|
|
<span class="badge bg-success">Confirmed</span>
|
|
{% elif appointment.status == 'checked_in' %}
|
|
<span class="badge bg-primary">Checked In</span>
|
|
{% elif appointment.status == 'in_progress' %}
|
|
<span class="badge bg-warning">In Progress</span>
|
|
{% elif appointment.status == 'completed' %}
|
|
<span class="badge bg-success">Completed</span>
|
|
{% elif appointment.status == 'cancelled' %}
|
|
<span class="badge bg-danger">Cancelled</span>
|
|
{% elif appointment.status == 'no_show' %}
|
|
<span class="badge bg-secondary">No Show</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
<a href="{% url 'appointments:appointment_detail' appointment.id %}" class="btn btn-outline-primary btn-sm">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
<a href="{% url 'appointments:appointment_update' appointment.id %}" class="btn btn-outline-warning btn-sm">
|
|
<i class="fa fa-edit"></i>
|
|
</a>
|
|
{% if appointment.status == 'scheduled' or appointment.status == 'confirmed' %}
|
|
<a href="{% url 'appointments:check_in_patient' appointment.id %}" class="btn btn-outline-success btn-sm">
|
|
<i class="fa fa-check"></i>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% elif request.GET %}
|
|
<div class="card mt-4">
|
|
<div class="card-body text-center">
|
|
<i class="fa fa-search fa-3x text-muted mb-3"></i>
|
|
<h5>No appointments found</h5>
|
|
<p class="text-muted">Try adjusting your search criteria</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</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 src="{% static 'plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#appointmentsTable').DataTable({
|
|
responsive: true,
|
|
pageLength: 25,
|
|
order: [[0, 'desc']]
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|