331 lines
14 KiB
HTML
331 lines
14 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Donor Details - {{ donor.full_name }}{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/datatables.net-bs5/css/dataTables.bootstrap5.min.css' %}" rel="stylesheet" />
|
|
<link href="{% static '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' %}">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'blood_bank:dashboard' %}">Blood Bank</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'blood_bank:donor_list' %}">Donors</a></li>
|
|
<li class="breadcrumb-item active">{{ donor.donor_id }}</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">
|
|
Donor Details
|
|
<small>{{ donor.full_name }} ({{ donor.donor_id }})</small>
|
|
</h1>
|
|
<!-- END page-header -->
|
|
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-4 -->
|
|
<div class="col-xl-4">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Donor Information</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="{% url 'blood_bank:donor_update' donor.id %}" class="btn btn-warning btn-sm">
|
|
<i class="fa fa-edit"></i> Edit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="row mb-3">
|
|
<div class="col-12 text-center">
|
|
<div class="bg-light rounded p-4 mb-3">
|
|
<i class="fa fa-user fa-4x text-muted mb-2"></i>
|
|
<h4>{{ donor.full_name }}</h4>
|
|
<p class="text-muted mb-0">{{ donor.donor_id }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td class="fw-bold">Blood Group:</td>
|
|
<td>
|
|
<span class="badge bg-primary fs-6">{{ donor.blood_group.display_name }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Age:</td>
|
|
<td>{{ donor.age }} years</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Gender:</td>
|
|
<td>{{ donor.get_gender_display }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Weight:</td>
|
|
<td>{{ donor.weight }} kg</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Height:</td>
|
|
<td>{{ donor.height }} cm</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Status:</td>
|
|
<td>
|
|
{% if donor.status == 'active' %}
|
|
<span class="badge bg-success">{{ donor.get_status_display }}</span>
|
|
{% elif donor.status == 'deferred' %}
|
|
<span class="badge bg-warning">{{ donor.get_status_display }}</span>
|
|
{% elif donor.status == 'permanently_deferred' %}
|
|
<span class="badge bg-danger">{{ donor.get_status_display }}</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{{ donor.get_status_display }}</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Donor Type:</td>
|
|
<td>{{ donor.get_donor_type_display }}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<hr>
|
|
|
|
<h6 class="fw-bold">Contact Information</h6>
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td class="fw-bold">Phone:</td>
|
|
<td>{{ donor.phone }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Email:</td>
|
|
<td>{{ donor.email|default:"Not provided" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Address:</td>
|
|
<td>{{ donor.address }}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<hr>
|
|
|
|
<h6 class="fw-bold">Emergency Contact</h6>
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td class="fw-bold">Name:</td>
|
|
<td>{{ donor.emergency_contact_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">Phone:</td>
|
|
<td>{{ donor.emergency_contact_phone }}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
{% if donor.notes %}
|
|
<hr>
|
|
<h6 class="fw-bold">Notes</h6>
|
|
<p class="text-muted">{{ donor.notes }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-4 -->
|
|
|
|
<!-- BEGIN col-8 -->
|
|
<div class="col-xl-8">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Donation Statistics</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="widget widget-stats bg-blue">
|
|
<div class="stats-icon"><i class="fa fa-tint"></i></div>
|
|
<div class="stats-info">
|
|
<h4>TOTAL DONATIONS</h4>
|
|
<p>{{ donor.total_donations }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="widget widget-stats bg-info">
|
|
<div class="stats-icon"><i class="fa fa-calendar"></i></div>
|
|
<div class="stats-info">
|
|
<h4>LAST DONATION</h4>
|
|
<p>
|
|
{% if donor.last_donation_date %}
|
|
{{ donor.last_donation_date|date:"M d, Y" }}
|
|
{% else %}
|
|
Never
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="widget widget-stats bg-orange">
|
|
<div class="stats-icon"><i class="fa fa-clock"></i></div>
|
|
<div class="stats-info">
|
|
<h4>NEXT ELIGIBLE</h4>
|
|
<p>{{ donor.next_eligible_date|date:"M d, Y" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="widget widget-stats {% if donor.is_eligible_for_donation %}bg-green{% else %}bg-red{% endif %}">
|
|
<div class="stats-icon">
|
|
<i class="fa {% if donor.is_eligible_for_donation %}fa-check{% else %}fa-times{% endif %}"></i>
|
|
</div>
|
|
<div class="stats-info">
|
|
<h4>ELIGIBILITY</h4>
|
|
<p>{% if donor.is_eligible_for_donation %}Eligible{% else %}Not Eligible{% endif %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Donation History</h4>
|
|
<div class="panel-heading-btn">
|
|
{% if donor.is_eligible_for_donation %}
|
|
<a href="{% url 'blood_bank:donor_eligibility' donor.id %}" class="btn btn-success btn-sm">
|
|
<i class="fa fa-tint"></i> New Donation
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
{% if blood_units %}
|
|
<div class="table-responsive">
|
|
<table id="donationTable" class="table table-striped table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Unit Number</th>
|
|
<th>Component</th>
|
|
<th>Collection Date</th>
|
|
<th>Volume (ml)</th>
|
|
<th>Status</th>
|
|
<th>Expiry Date</th>
|
|
<th>Location</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for unit in blood_units %}
|
|
<tr>
|
|
<td>
|
|
<a href="{% url 'blood_bank:blood_unit_detail' unit.id %}">
|
|
{{ unit.unit_number }}
|
|
</a>
|
|
</td>
|
|
<td>{{ unit.component.get_name_display }}</td>
|
|
<td>{{ unit.collection_date|date:"M d, Y H:i" }}</td>
|
|
<td>{{ unit.volume_ml }}</td>
|
|
<td>
|
|
{% if unit.status == 'available' %}
|
|
<span class="badge bg-success">{{ unit.get_status_display }}</span>
|
|
{% elif unit.status == 'expired' %}
|
|
<span class="badge bg-danger">{{ unit.get_status_display }}</span>
|
|
{% elif unit.status == 'transfused' %}
|
|
<span class="badge bg-info">{{ unit.get_status_display }}</span>
|
|
{% else %}
|
|
<span class="badge bg-warning">{{ unit.get_status_display }}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{{ unit.expiry_date|date:"M d, Y" }}
|
|
{% if unit.days_to_expiry <= 3 and unit.status == 'available' %}
|
|
<span class="badge bg-danger ms-1">Expiring Soon</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ unit.location }}</td>
|
|
<td>
|
|
<a href="{% url 'blood_bank:blood_unit_detail' unit.id %}"
|
|
class="btn btn-outline-primary btn-sm" title="View Details">
|
|
<i class="fa fa-eye"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<i class="fa fa-tint fa-3x text-muted mb-3"></i>
|
|
<h5 class="text-muted">No Donation History</h5>
|
|
<p class="text-muted">This donor has not made any donations yet.</p>
|
|
{% if donor.is_eligible_for_donation %}
|
|
<a href="{% url 'blood_bank:donor_eligibility' donor.id %}" class="btn btn-primary">
|
|
<i class="fa fa-tint"></i> Start First Donation
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-8 -->
|
|
</div>
|
|
<!-- END row -->
|
|
|
|
<!-- BEGIN action buttons -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between">
|
|
<a href="{% url 'blood_bank:donor_list' %}" class="btn btn-default">
|
|
<i class="fa fa-arrow-left"></i> Back to Donors
|
|
</a>
|
|
<div>
|
|
{% if donor.is_eligible_for_donation %}
|
|
<a href="{% url 'blood_bank:donor_eligibility' donor.id %}" class="btn btn-success">
|
|
<i class="fa fa-tint"></i> Check Eligibility
|
|
</a>
|
|
{% endif %}
|
|
<a href="{% url 'blood_bank:donor_update' donor.id %}" class="btn btn-warning">
|
|
<i class="fa fa-edit"></i> Edit Donor
|
|
</a>
|
|
<button type="button" class="btn btn-info" onclick="window.print()">
|
|
<i class="fa fa-print"></i> Print
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END action buttons -->
|
|
{% 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/datatables.net-responsive/js/dataTables.responsive.min.js' %}"></script>
|
|
<script src="{% static 'plugins/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js' %}"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#donationTable').DataTable({
|
|
responsive: true,
|
|
pageLength: 10,
|
|
order: [[2, 'desc']], // Sort by collection date
|
|
columnDefs: [
|
|
{ orderable: false, targets: [7] } // Actions column
|
|
]
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|