89 lines
4.7 KiB
HTML
89 lines
4.7 KiB
HTML
{% load i18n %}
|
|
|
|
<div class="hierarchy-node">
|
|
<div class="hierarchy-card {{ node.is_search_result|yesno:'search-result,' }}" onclick="window.location.href='{% url 'organizations:staff_detail' node.staff.id %}'">
|
|
<div class="flex items-center gap-3">
|
|
<div class="staff-avatar flex-shrink-0">
|
|
{% if node.staff.photo %}
|
|
<img src="{{ node.staff.photo.url }}" alt="{{ node.staff.get_full_name }}" class="w-12 h-12 object-cover rounded-full">
|
|
{% else %}
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-navy to-blue flex items-center justify-center text-white font-semibold text-sm">
|
|
{{ node.staff.first_name|first }}{{ node.staff.last_name|first }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="staff-info flex-grow-1 min-w-0">
|
|
<h6 class="text-sm font-semibold text-slate-800 mb-1 truncate">
|
|
{{ node.staff.get_full_name }}
|
|
{% if node.staff.report_to %}
|
|
<span class="inline-flex items-center gap-1.5 ml-2 px-2 py-0.5 bg-slate-100 text-slate-600 rounded-full text-xs font-medium">
|
|
<i data-lucide="arrow-up" class="w-3 h-3"></i>
|
|
<span class="hidden sm:inline">{% trans "Reports to:" %} {{ node.staff.report_to.get_full_name }}</span>
|
|
</span>
|
|
{% endif %}
|
|
</h6>
|
|
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500">
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<i data-lucide="badge" class="w-3.5 h-3.5"></i>
|
|
{{ node.staff.employee_id }}
|
|
</span>
|
|
{% if node.staff.job_title %}
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<i data-lucide="briefcase" class="w-3.5 h-3.5"></i>
|
|
{{ node.staff.job_title }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-500 mt-1">
|
|
{% if node.staff.hospital %}
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<i data-lucide="hospital" class="w-3.5 h-3.5"></i>
|
|
{{ node.staff.hospital.name }}
|
|
</span>
|
|
{% endif %}
|
|
{% if node.staff.department %}
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<i data-lucide="building" class="w-3.5 h-3.5"></i>
|
|
{{ node.staff.department.name }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex items-center gap-2 mt-2">
|
|
{% if node.has_children %}
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-navy text-white rounded-full text-xs font-semibold">
|
|
<i data-lucide="users" class="w-3.5 h-3.5"></i>
|
|
{{ node.direct_reports|length }} {% trans "Direct Report" %}{{ node.direct_reports|length|pluralize }}
|
|
</span>
|
|
{% endif %}
|
|
{% if node.staff.status == 'active' %}
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-green-100 text-green-700 rounded-full text-xs font-semibold">
|
|
<i data-lucide="check-circle" class="w-3.5 h-3.5"></i>
|
|
{% trans "Active" %}
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-semibold">
|
|
<i data-lucide="x-circle" class="w-3.5 h-3.5"></i>
|
|
{% trans "Inactive" %}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if node.has_children %}
|
|
<div class="flex-shrink-0">
|
|
<button class="p-2 hover:bg-slate-100 rounded-lg transition-colors" onclick="event.stopPropagation(); toggleNode('{{ node.staff.id }}')">
|
|
<i data-lucide="chevron-right" class="w-5 h-5 text-slate-400 expand-icon"></i>
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if node.has_children %}
|
|
<div class="children-container" id="children-{{ node.staff.id }}">
|
|
{% for child in node.direct_reports %}
|
|
{% include 'organizations/hierarchy_node.html' with node=child %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|