365 lines
15 KiB
HTML
365 lines
15 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Blood Bank Dashboard{% 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 active">Blood Bank Dashboard</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">Blood Bank Dashboard <small>overview of blood bank operations</small></h1>
|
|
<!-- END page-header -->
|
|
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="widget widget-stats bg-blue">
|
|
<div class="stats-icon"><i class="fa fa-users"></i></div>
|
|
<div class="stats-info">
|
|
<h4>ACTIVE DONORS</h4>
|
|
<p>{{ total_donors }}</p>
|
|
</div>
|
|
<div class="stats-link">
|
|
<a href="{% url 'blood_bank:donor_list' %}">View Detail <i class="fa fa-arrow-alt-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="widget widget-stats bg-info">
|
|
<div class="stats-icon"><i class="fa fa-tint"></i></div>
|
|
<div class="stats-info">
|
|
<h4>AVAILABLE UNITS</h4>
|
|
<p>{{ total_units }}</p>
|
|
</div>
|
|
<div class="stats-link">
|
|
<a href="{% url 'blood_bank:blood_unit_list' %}">View Detail <i class="fa fa-arrow-alt-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="widget widget-stats bg-orange">
|
|
<div class="stats-icon"><i class="fa fa-clipboard-list"></i></div>
|
|
<div class="stats-info">
|
|
<h4>PENDING REQUESTS</h4>
|
|
<p>{{ pending_requests }}</p>
|
|
</div>
|
|
<div class="stats-link">
|
|
<a href="{% url 'blood_bank:blood_request_list' %}">View Detail <i class="fa fa-arrow-alt-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="widget widget-stats bg-red">
|
|
<div class="stats-icon"><i class="fa fa-exclamation-triangle"></i></div>
|
|
<div class="stats-info">
|
|
<h4>EXPIRING SOON</h4>
|
|
<p>{{ expiring_soon }}</p>
|
|
</div>
|
|
<div class="stats-link">
|
|
<a href="{% url 'blood_bank:inventory_overview' %}">View Detail <i class="fa fa-arrow-alt-circle-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
</div>
|
|
<!-- END row -->
|
|
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-8 -->
|
|
<div class="col-xl-8">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Blood Group Distribution</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th>Blood Group</th>
|
|
<th>Available Units</th>
|
|
<th>Percentage</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for stat in blood_group_stats %}
|
|
<tr>
|
|
<td>
|
|
<span class="badge bg-primary fs-6 fw-bold">
|
|
{{ stat.blood_group__abo_type }}{% if stat.blood_group__rh_factor == 'POS' %}+{% else %}-{% endif %}
|
|
</span>
|
|
</td>
|
|
<td>{{ stat.count }}</td>
|
|
<td>
|
|
{% widthratio stat.count total_units 100 %}%
|
|
</td>
|
|
<td>
|
|
{% if stat.count >= 10 %}
|
|
<span class="badge bg-success">Adequate</span>
|
|
{% elif stat.count >= 5 %}
|
|
<span class="badge bg-warning">Low</span>
|
|
{% else %}
|
|
<span class="badge bg-danger">Critical</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="4" class="text-center">No blood units available</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-8 -->
|
|
|
|
<!-- BEGIN col-4 -->
|
|
<div class="col-xl-4">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Quick Stats</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="list-group">
|
|
<div class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<i class="fa fa-tint text-info me-2"></i>
|
|
Recent Donations (7 days)
|
|
</div>
|
|
<span class="badge bg-info rounded-pill">{{ recent_donations }}</span>
|
|
</div>
|
|
<div class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<i class="fa fa-heartbeat text-success me-2"></i>
|
|
Active Transfusions
|
|
</div>
|
|
<span class="badge bg-success rounded-pill">{{ active_transfusions }}</span>
|
|
</div>
|
|
<div class="list-group-item d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<i class="fa fa-clock text-warning me-2"></i>
|
|
Expiring This Week
|
|
</div>
|
|
<span class="badge bg-warning rounded-pill">{{ expiring_soon }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-4 -->
|
|
</div>
|
|
<!-- END row -->
|
|
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-xl-6">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Recent Blood Units</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="{% url 'blood_bank:blood_unit_list' %}" class="btn btn-xs btn-primary">View All</a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Unit Number</th>
|
|
<th>Donor</th>
|
|
<th>Component</th>
|
|
<th>Blood Group</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for unit in recent_units %}
|
|
<tr>
|
|
<td>
|
|
<a href="{% url 'blood_bank:blood_unit_detail' unit.id %}">
|
|
{{ unit.unit_number }}
|
|
</a>
|
|
</td>
|
|
<td>{{ unit.donor.full_name }}</td>
|
|
<td>{{ unit.component.get_name_display }}</td>
|
|
<td>
|
|
<span class="badge bg-primary">{{ unit.blood_group.display_name }}</span>
|
|
</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>
|
|
{% else %}
|
|
<span class="badge bg-info">{{ unit.get_status_display }}</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="5" class="text-center">No recent blood units</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-xl-6">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Urgent Blood Requests</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="{% url 'blood_bank:blood_request_list' %}" class="btn btn-xs btn-primary">View All</a>
|
|
</div>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Request #</th>
|
|
<th>Patient</th>
|
|
<th>Component</th>
|
|
<th>Units</th>
|
|
<th>Urgency</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for request in urgent_requests %}
|
|
<tr>
|
|
<td>
|
|
<a href="{% url 'blood_bank:blood_request_detail' request.id %}">
|
|
{{ request.request_number }}
|
|
</a>
|
|
</td>
|
|
<td>{{ request.patient.full_name }}</td>
|
|
<td>{{ request.component_requested.get_name_display }}</td>
|
|
<td>{{ request.units_requested }}</td>
|
|
<td>
|
|
<span class="badge bg-danger">{{ request.get_urgency_display }}</span>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="5" class="text-center">No urgent requests</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
</div>
|
|
<!-- END row -->
|
|
|
|
<!-- 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">Quick Actions</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="col-md-3 mb-3">
|
|
<a href="{% url 'blood_bank:donor_create' %}" class="btn btn-primary btn-lg w-100">
|
|
<i class="fa fa-user-plus fa-2x d-block mb-2"></i>
|
|
Register Donor
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<a href="{% url 'blood_bank:blood_unit_create' %}" class="btn btn-info btn-lg w-100">
|
|
<i class="fa fa-tint fa-2x d-block mb-2"></i>
|
|
Register Blood Unit
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<a href="{% url 'blood_bank:blood_request_create' %}" class="btn btn-warning btn-lg w-100">
|
|
<i class="fa fa-clipboard-list fa-2x d-block mb-2"></i>
|
|
Create Request
|
|
</a>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<a href="{% url 'blood_bank:inventory_overview' %}" class="btn btn-success btn-lg w-100">
|
|
<i class="fa fa-boxes fa-2x d-block mb-2"></i>
|
|
View Inventory
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
</div>
|
|
<!-- END row -->
|
|
{% 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() {
|
|
// Auto-refresh dashboard every 5 minutes
|
|
setInterval(function() {
|
|
location.reload();
|
|
}, 300000);
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|