HH/templates/organizations/staff_detail.html
2026-01-24 15:27:27 +03:00

489 lines
20 KiB
HTML

{% extends "layouts/base.html" %}
{% load i18n %}
{% block title %}{{ staff.get_full_name }} - {% trans "Staff Details" %}{% endblock %}
{% block content %}
<div class="page-header">
<div class="d-flex justify-content-between align-items-center">
<div>
<a href="{% url 'organizations:staff_list' %}" class="btn btn-outline-secondary mb-2">
<i class="fas fa-arrow-left"></i> {% trans "Back to List" %}
</a>
<h1 class="page-title">{{ staff.get_full_name }}</h1>
<p class="text-muted">{{ staff.job_title }} | {{ staff.get_staff_type_display }}</p>
</div>
<div>
{% if user.is_px_admin or user.is_hospital_admin %}
<a href="{% url 'organizations:staff_update' staff.id %}" class="btn btn-primary">
<i class="fas fa-edit"></i> {% trans "Edit" %}
</a>
{% endif %}
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<!-- Bilingual Names -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="fas fa-user"></i> {% trans "Personal Information" %}
</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="text-muted small">{% trans "First Name (English)" %}</label>
<div class="fw-bold">{{ staff.first_name }}</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="text-muted small">{% trans "Last Name (English)" %}</label>
<div class="fw-bold">{{ staff.last_name }}</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="text-muted small">{% trans "First Name (Arabic)" %}</label>
<div class="fw-bold" dir="rtl">{{ staff.first_name_ar|default:"-" }}</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="text-muted small">{% trans "Last Name (Arabic)" %}</label>
<div class="fw-bold" dir="rtl">{{ staff.last_name_ar|default:"-" }}</div>
</div>
</div>
</div>
{% if staff.license_number %}
<div class="mb-3">
<label class="text-muted small">{% trans "License Number" %}</label>
<div class="fw-bold">{{ staff.license_number }}</div>
</div>
{% endif %}
{% if staff.specialization %}
<div class="mb-3">
<label class="text-muted small">{% trans "Specialization" %}</label>
<div class="fw-bold">{{ staff.specialization }}</div>
</div>
{% endif %}
</div>
</div>
<!-- Organization Information -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="fas fa-building"></i> {% trans "Organization" %}
</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label class="text-muted small">{% trans "Hospital" %}</label>
<div class="fw-bold">{{ staff.hospital.name }}</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Department" %}</label>
<div class="fw-bold">{{ staff.department.name|default:"-" }}</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Employee ID" %}</label>
<div class="fw-bold">{{ staff.employee_id }}</div>
</div>
</div>
</div>
<!-- Contact Information -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="fas fa-envelope"></i> {% trans "Contact Information" %}
</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label class="text-muted small">{% trans "Email" %}</label>
<div class="fw-bold">
{% if staff.email %}
<a href="mailto:{{ staff.email }}">{{ staff.email }}</a>
{% else %}
-
{% endif %}
</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Phone" %}</label>
<div class="fw-bold">
{% if staff.phone %}
<a href="tel:{{ staff.phone }}">{{ staff.phone }}</a>
{% else %}
-
{% endif %}
</div>
</div>
</div>
</div>
<!-- Demographics -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="fas fa-info-circle"></i> {% trans "Demographics" %}
</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label class="text-muted small">{% trans "Gender" %}</label>
<div class="fw-bold">
{% if staff.gender %}
<span class="text-capitalize">{{ staff.gender }}</span>
{% else %}
-
{% endif %}
</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Country" %}</label>
<div class="fw-bold">{{ staff.country|default:"-" }}</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Location" %}</label>
<div class="fw-bold">{{ staff.location|default:"-" }}</div>
</div>
</div>
</div>
<!-- Hierarchy -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="fas fa-sitemap"></i> {% trans "Hierarchy" %}
</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label class="text-muted small">{% trans "Reports To" %}</label>
<div class="fw-bold">
{% if staff.report_to %}
<a href="{% url 'organizations:staff_detail' staff.report_to.id %}" class="text-decoration-none">
{{ staff.report_to }}
</a>
{% else %}
-
{% endif %}
</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Direct Reports" %}</label>
<div>
{% if staff.direct_reports.exists %}
<ul class="list-unstyled mb-0">
{% for direct_report in staff.direct_reports.all %}
<li><a href="{% url 'organizations:staff_detail' direct_report.id %}" class="text-decoration-none">{{ direct_report }}</a></li>
{% endfor %}
</ul>
{% else %}
-
{% endif %}
</div>
</div>
</div>
</div>
<!-- Additional Details -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="fas fa-list"></i> {% trans "Additional Details" %}
</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label class="text-muted small">{% trans "Section" %}</label>
<div class="fw-bold">{{ staff.section|default:"-" }}</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Subsection" %}</label>
<div class="fw-bold">{{ staff.subsection|default:"-" }}</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Department (Original)" %}</label>
<div class="fw-bold">{{ staff.department_name|default:"-" }}</div>
</div>
{% if staff.name %}
<div class="mb-3">
<label class="text-muted small">{% trans "Full Name (Original)" %}</label>
<div class="fw-bold">{{ staff.name }}</div>
</div>
{% endif %}
</div>
</div>
</div>
<div class="col-lg-4">
<!-- User Account -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="fas fa-user-circle"></i> {% trans "User Account" %}
</h5>
</div>
<div class="card-body">
{% if staff.user %}
<div class="alert alert-success mb-3">
<i class="fas fa-check-circle"></i> {% trans "User account exists" %}
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Username" %}</label>
<div class="fw-bold">{{ staff.user.username }}</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Email" %}</label>
<div class="fw-bold">{{ staff.user.email }}</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Active" %}</label>
<div>
{% if staff.user.is_active %}
<span class="badge bg-success">{% trans "Yes" %}</span>
{% else %}
<span class="badge bg-danger">{% trans "No" %}</span>
{% endif %}
</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Created" %}</label>
<div>{{ staff.user.date_joined|date:"Y-m-d H:i" }}</div>
</div>
{% if user.is_px_admin or user.is_hospital_admin %}
<div class="d-grid gap-2">
<button type="button" class="btn btn-outline-warning" onclick="sendInvitation()">
<i class="fas fa-envelope"></i> {% trans "Resend Invitation Email" %}
</button>
<button type="button" class="btn btn-outline-danger" onclick="unlinkUserAccount()">
<i class="fas fa-user-minus"></i> {% trans "Unlink User Account" %}
</button>
</div>
{% endif %}
{% else %}
<div class="alert alert-warning mb-3">
<i class="fas fa-exclamation-circle"></i> {% trans "No user account" %}
</div>
<p class="text-muted small mb-3">
{% trans "This staff member does not have a user account and cannot log in to the system." %}
</p>
{% if user.is_px_admin or user.is_hospital_admin %}
{% if staff.email %}
<button type="button" class="btn btn-success w-100" onclick="createUserAccount()">
<i class="fas fa-user-plus"></i> {% trans "Create User Account" %}
</button>
{% else %}
<div class="alert alert-info">
<i class="fas fa-info-circle"></i> {% trans "Add an email address to create a user account." %}
</div>
{% endif %}
{% endif %}
{% endif %}
</div>
</div>
<!-- Status -->
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="fas fa-info-circle"></i> {% trans "Status" %}
</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label class="text-muted small">{% trans "Staff Status" %}</label>
<div>
{% if staff.status == 'active' %}
<span class="badge bg-success fs-6">{% trans "Active" %}</span>
{% else %}
<span class="badge bg-secondary fs-6">{% trans "Inactive" %}</span>
{% endif %}
</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Created" %}</label>
<div>{{ staff.created_at|date:"Y-m-d H:i" }}</div>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Last Updated" %}</label>
<div>{{ staff.updated_at|date:"Y-m-d H:i" }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- Create User Modal -->
<div class="modal" id="createUserModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans "Create User Account" %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>{% trans "Are you sure you want to create a user account for" %} <strong>{{ staff.get_full_name }}</strong>?</p>
<p class="text-muted small">{% trans "A username will be generated automatically and credentials will be emailed to" %} <strong>{{ staff.email }}</strong>.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
<button type="button" class="btn btn-primary" onclick="confirmCreateUser()">{% trans "Create Account" %}</button>
</div>
</div>
</div>
</div>
<!-- Send Invitation Modal -->
<div class="modal" id="sendInvitationModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans "Send Invitation Email" %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>{% trans "Are you sure you want to send a new invitation email to" %} <strong>{{ staff.get_full_name }}</strong>?</p>
<p class="text-muted small">{% trans "A new password will be generated and sent to" %} <strong>{{ staff.email }}</strong>.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
<button type="button" class="btn btn-primary" onclick="confirmSendInvitation()">{% trans "Send Email" %}</button>
</div>
</div>
</div>
</div>
<!-- Unlink User Modal -->
<div class="modal" id="unlinkUserModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans "Unlink User Account" %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>{% trans "Are you sure you want to unlink the user account from" %} <strong>{{ staff.get_full_name }}</strong>?</p>
<p class="text-warning small">{% trans "This will remove login access for this staff member. The user account will still exist but will no longer be linked to this staff profile." %}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
<button type="button" class="btn btn-danger" onclick="confirmUnlinkUser()">{% trans "Unlink Account" %}</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function createUserAccount() {
new bootstrap.Modal(document.getElementById('createUserModal')).show();
}
function confirmCreateUser() {
const btn = event.target;
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating...';
fetch(`/organizations/api/staff/{{ staff.id }}/create_user_account/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
},
body: JSON.stringify({})
})
.then(response => response.json())
.then(data => {
bootstrap.Modal.getInstance(document.getElementById('createUserModal')).hide();
if (data.message) {
alert(data.message);
}
location.reload();
})
.catch(error => {
alert('Error: ' + error.message);
btn.disabled = false;
btn.innerHTML = 'Create Account';
});
}
function sendInvitation() {
new bootstrap.Modal(document.getElementById('sendInvitationModal')).show();
}
function confirmSendInvitation() {
const btn = event.target;
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
fetch(`/organizations/api/staff/{{ staff.id }}/send_invitation/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
},
body: JSON.stringify({})
})
.then(response => response.json())
.then(data => {
bootstrap.Modal.getInstance(document.getElementById('sendInvitationModal')).hide();
if (data.message) {
alert(data.message);
}
location.reload();
})
.catch(error => {
alert('Error: ' + error.message);
btn.disabled = false;
btn.innerHTML = 'Send Email';
});
}
function unlinkUserAccount() {
new bootstrap.Modal(document.getElementById('unlinkUserModal')).show();
}
function confirmUnlinkUser() {
const btn = event.target;
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Unlinking...';
fetch(`/organizations/api/staff/{{ staff.id }}/unlink_user/`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
},
body: JSON.stringify({})
})
.then(response => response.json())
.then(data => {
bootstrap.Modal.getInstance(document.getElementById('unlinkUserModal')).hide();
if (data.message) {
alert(data.message);
}
location.reload();
})
.catch(error => {
alert('Error: ' + error.message);
btn.disabled = false;
btn.innerHTML = 'Unlink Account';
});
}
</script>
{% endblock %}