586 lines
29 KiB
HTML
586 lines
29 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}{{ department.name }} - Department Details{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Breadcrumb -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
|
|
<h4 class="mb-sm-0">Department Details</h4>
|
|
<div class="page-title-right">
|
|
<ol class="breadcrumb m-0">
|
|
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'core:department_list' %}">Departments</a></li>
|
|
<li class="breadcrumb-item active">{{ department.name }}</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Main Content -->
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-header bg-{% if department.department_type == 'clinical' %}success{% elif department.department_type == 'administrative' %}info{% elif department.department_type == 'support' %}secondary{% endif %} bg-opacity-25">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar-sm me-3">
|
|
<span class="avatar-title rounded-circle bg-primary text-white">
|
|
{{ department.name|first|upper }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h5 class="card-title mb-0">{{ department.name }}</h5>
|
|
<small class="text-muted">{{ department.code }}</small>
|
|
</div>
|
|
<div class="flex-shrink-0">
|
|
<span class="badge bg-{% if department.is_active %}success{% else %}danger{% endif %}">
|
|
{% if department.is_active %}Active{% else %}Inactive{% endif %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="d-flex mb-3">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-tag text-muted me-2"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-0">Department Type</h6>
|
|
<p class="mb-0">
|
|
<span class="badge bg-{% if department.department_type == 'clinical' %}success{% elif department.department_type == 'administrative' %}info{% elif department.department_type == 'support' %}secondary{% endif %}">
|
|
{{ department.get_department_type_display }}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="d-flex mb-3">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-users text-muted me-2"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-0">Staff Count</h6>
|
|
<p class="mb-0">
|
|
<span class="badge bg-info">{{ department.staff_count }}</span>
|
|
<a href="{% url 'hr:employee_list' %}?department={{ department.pk }}" class="ms-2 small">View Staff</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-2">Description</h6>
|
|
<div class="p-3 bg-light rounded">
|
|
{{ department.description|linebreaks|default:"No description provided." }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="d-flex mb-3">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-phone text-muted me-2"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-0">Contact Number</h6>
|
|
<p class="mb-0">{{ department.contact_number|default:"Not provided" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="d-flex mb-3">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-envelope text-muted me-2"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-0">Email</h6>
|
|
<p class="mb-0">
|
|
{% if department.email %}
|
|
<a href="mailto:{{ department.email }}">{{ department.email }}</a>
|
|
{% else %}
|
|
Not provided
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<div class="d-flex mb-3">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-map-marker-alt text-muted me-2"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-0">Location</h6>
|
|
<p class="mb-0">{{ department.location|default:"Not specified" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="d-flex mb-3">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-clock text-muted me-2"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-0">Working Hours</h6>
|
|
<p class="mb-0">{{ department.working_hours|default:"Not specified" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-0">
|
|
<div class="col-md-6">
|
|
<div class="d-flex mb-3">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-calendar-alt text-muted me-2"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-0">Created</h6>
|
|
<p class="text-muted mb-0">{{ department.created_at|date:"F j, Y" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="d-flex mb-3">
|
|
<div class="flex-shrink-0">
|
|
<i class="fas fa-edit text-muted me-2"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h6 class="mb-0">Last Updated</h6>
|
|
<p class="text-muted mb-0">{{ department.updated_at|date:"F j, Y" }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Department Staff -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-users me-2"></i>
|
|
Department Staff
|
|
</h5>
|
|
<div class="ms-auto">
|
|
<a href="{% url 'hr:employee_list' %}?department={{ department.pk }}" class="btn btn-sm btn-outline-primary">
|
|
View All Staff
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if staff_members %}
|
|
<div class="table-responsive">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Designation</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for staff in staff_members %}
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar-xs me-2">
|
|
<span class="avatar-title rounded-circle bg-secondary text-white">
|
|
{{ staff.user.first_name|first|upper }}{{ staff.user.last_name|first|upper }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<span>{{ staff.user.get_full_name }}</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>{{ staff.designation }}</td>
|
|
<td>
|
|
<span class="badge bg-{% if staff.is_active %}success{% else %}danger{% endif %}">
|
|
{% if staff.is_active %}Active{% else %}Inactive{% endif %}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<a href="{% url 'hr:employee_detail' staff.pk %}" class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-users fa-3x text-muted mb-3"></i>
|
|
<h5>No staff members</h5>
|
|
<p class="text-muted">This department doesn't have any staff members assigned yet.</p>
|
|
<a href="{% url 'hr:employee_create' %}?department={{ department.pk }}" class="btn btn-primary mt-2">
|
|
<i class="fas fa-plus me-1"></i>
|
|
Add Staff Member
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Department Resources -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="d-flex align-items-center">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-box me-2"></i>
|
|
Department Resources
|
|
</h5>
|
|
<div class="ms-auto">
|
|
<a href="{% url 'inventory:item_list' %}?department={{ department.pk }}" class="btn btn-sm btn-outline-primary">
|
|
View All Resources
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if resources %}
|
|
<div class="table-responsive">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Resource</th>
|
|
<th>Category</th>
|
|
<th>Quantity</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for resource in resources %}
|
|
<tr>
|
|
<td>{{ resource.name }}</td>
|
|
<td>{{ resource.category }}</td>
|
|
<td>{{ resource.quantity }} {{ resource.unit }}</td>
|
|
<td>
|
|
<span class="badge bg-{% if resource.status == 'available' %}success{% elif resource.status == 'low' %}warning{% elif resource.status == 'out_of_stock' %}danger{% else %}info{% endif %}">
|
|
{{ resource.get_status_display }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-box fa-3x text-muted mb-3"></i>
|
|
<h5>No resources</h5>
|
|
<p class="text-muted">No resources have been assigned to this department.</p>
|
|
<a href="{% url 'inventory:item_create' %}?department={{ department.pk }}" class="btn btn-primary mt-2">
|
|
<i class="fas fa-plus me-1"></i>
|
|
Add Resource
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Quick Actions -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-bolt me-2"></i>
|
|
Quick Actions
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<a href="{% url 'core:department_list' %}" class="btn btn-outline-primary">
|
|
<i class="fas fa-arrow-left me-2"></i>
|
|
Back to Departments
|
|
</a>
|
|
|
|
<a href="{% url 'core:department_update' department.pk %}" class="btn btn-outline-info">
|
|
<i class="fas fa-edit me-2"></i>
|
|
Edit Department
|
|
</a>
|
|
|
|
<a href="{% url 'hr:employee_list' %}?department={{ department.pk }}" class="btn btn-outline-success">
|
|
<i class="fas fa-users me-2"></i>
|
|
Manage Staff
|
|
</a>
|
|
|
|
<a href="{% url 'inventory:item_list' %}?department={{ department.pk }}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-box me-2"></i>
|
|
Manage Resources
|
|
</a>
|
|
|
|
<button type="button" class="btn btn-outline-{% if department.is_active %}danger{% else %}success{% endif %}"
|
|
onclick="toggleDepartmentStatus('{{ department.pk }}', {% if department.is_active %}false{% else %}true{% endif %})">
|
|
<i class="fas fa-{% if department.is_active %}ban{% else %}check-circle{% endif %} me-2"></i>
|
|
{% if department.is_active %}Deactivate{% else %}Activate{% endif %} Department
|
|
</button>
|
|
|
|
<a href="{% url 'core:department_delete' department.pk %}" class="btn btn-outline-danger">
|
|
<i class="fas fa-trash me-2"></i>
|
|
Delete Department
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Department Head -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-user-tie me-2"></i>
|
|
Department Head
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if department.department_head %}
|
|
<div class="text-center mb-3">
|
|
<div class="avatar-lg mx-auto mb-3">
|
|
<span class="avatar-title rounded-circle bg-primary text-white" style="font-size: 2rem;">
|
|
{{ department.department_head.user.first_name|first|upper }}{{ department.department_head.user.last_name|first|upper }}
|
|
</span>
|
|
</div>
|
|
<h5 class="mb-1">{{ department.department_head.user.get_full_name }}</h5>
|
|
<p class="text-muted mb-3">{{ department.department_head.designation }}</p>
|
|
|
|
<div class="d-flex justify-content-center mb-3">
|
|
{% if department.department_head.email %}
|
|
<a href="mailto:{{ department.department_head.email }}" class="btn btn-sm btn-outline-primary me-2">
|
|
<i class="fas fa-envelope"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if department.department_head.phone %}
|
|
<a href="tel:{{ department.department_head.phone }}" class="btn btn-sm btn-outline-primary me-2">
|
|
<i class="fas fa-phone"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<a href="{% url 'hr:employee_detail' department.department_head.pk %}" class="btn btn-sm btn-outline-primary">
|
|
<i class="fas fa-user"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<a href="{% url 'core:change_department_head' department.pk %}" class="btn btn-sm btn-outline-secondary">
|
|
<i class="fas fa-exchange-alt me-1"></i>
|
|
Change Department Head
|
|
</a>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-user-tie fa-3x text-muted mb-3"></i>
|
|
<h5>No department head</h5>
|
|
<p class="text-muted">No department head has been assigned yet.</p>
|
|
<a href="{% url 'core:assign_department_head' department.pk %}" class="btn btn-primary mt-2">
|
|
<i class="fas fa-user-plus me-1"></i>
|
|
Assign Department Head
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Department Statistics -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-chart-pie me-2"></i>
|
|
Department Statistics
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-3">Staff Distribution</h6>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="flex-shrink-0" style="width: 100px;">Doctors</div>
|
|
<div class="flex-grow-1">
|
|
<div class="progress" style="height: 10px;">
|
|
<div class="progress-bar bg-primary" role="progressbar" style="width: {{ doctor_percentage }}%;" aria-valuenow="{{ doctor_percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-shrink-0 ms-2">{{ doctor_count }}</div>
|
|
</div>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="flex-shrink-0" style="width: 100px;">Nurses</div>
|
|
<div class="flex-grow-1">
|
|
<div class="progress" style="height: 10px;">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: {{ nurse_percentage }}%;" aria-valuenow="{{ nurse_percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-shrink-0 ms-2">{{ nurse_count }}</div>
|
|
</div>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="flex-shrink-0" style="width: 100px;">Admin</div>
|
|
<div class="flex-grow-1">
|
|
<div class="progress" style="height: 10px;">
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: {{ admin_percentage }}%;" aria-valuenow="{{ admin_percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-shrink-0 ms-2">{{ admin_count }}</div>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0" style="width: 100px;">Other</div>
|
|
<div class="flex-grow-1">
|
|
<div class="progress" style="height: 10px;">
|
|
<div class="progress-bar bg-secondary" role="progressbar" style="width: {{ other_percentage }}%;" aria-valuenow="{{ other_percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-shrink-0 ms-2">{{ other_count }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<h6 class="text-muted mb-3">Resource Allocation</h6>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="flex-shrink-0" style="width: 100px;">Equipment</div>
|
|
<div class="flex-grow-1">
|
|
<div class="progress" style="height: 10px;">
|
|
<div class="progress-bar bg-primary" role="progressbar" style="width: {{ equipment_percentage }}%;" aria-valuenow="{{ equipment_percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-shrink-0 ms-2">{{ equipment_count }}</div>
|
|
</div>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="flex-shrink-0" style="width: 100px;">Supplies</div>
|
|
<div class="flex-grow-1">
|
|
<div class="progress" style="height: 10px;">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: {{ supplies_percentage }}%;" aria-valuenow="{{ supplies_percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-shrink-0 ms-2">{{ supplies_count }}</div>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0" style="width: 100px;">Medications</div>
|
|
<div class="flex-grow-1">
|
|
<div class="progress" style="height: 10px;">
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: {{ medications_percentage }}%;" aria-valuenow="{{ medications_percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-shrink-0 ms-2">{{ medications_count }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h6 class="text-muted mb-3">Monthly Activity</h6>
|
|
<div id="monthlyActivityChart" style="height: 200px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Monthly Activity Chart
|
|
var options = {
|
|
series: [{
|
|
name: 'Patients',
|
|
data: {{ monthly_patients|safe }}
|
|
}, {
|
|
name: 'Procedures',
|
|
data: {{ monthly_procedures|safe }}
|
|
}],
|
|
chart: {
|
|
type: 'line',
|
|
height: 200,
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
colors: ['#4e73df', '#1cc88a'],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2
|
|
},
|
|
xaxis: {
|
|
categories: {{ months|safe }},
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
fontSize: '10px'
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: true,
|
|
style: {
|
|
fontSize: '10px'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'top',
|
|
horizontalAlign: 'right',
|
|
fontSize: '12px'
|
|
},
|
|
grid: {
|
|
borderColor: '#e7e7e7',
|
|
row: {
|
|
colors: ['#f3f3f3', 'transparent'],
|
|
opacity: 0.5
|
|
}
|
|
}
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#monthlyActivityChart"), options);
|
|
chart.render();
|
|
});
|
|
|
|
function toggleDepartmentStatus(departmentId, isActive) {
|
|
fetch(`{% url 'core:activate_department' 0 %}`.replace('0', departmentId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': '{{ csrf_token }}'
|
|
},
|
|
body: JSON.stringify({ is_active: isActive })
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// Reload the page to reflect the changes
|
|
window.location.reload();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('Failed to update department status. Please try again.');
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|