417 lines
27 KiB
HTML
417 lines
27 KiB
HTML
{% load i18n %}
|
|
{% load hospital_filters %}
|
|
{% load static %}
|
|
|
|
<style>
|
|
.sidebar-icon-only {
|
|
width: 5rem;
|
|
transition: width 0.3s ease;
|
|
}
|
|
.sidebar-icon-only:hover {
|
|
width: 16rem;
|
|
}
|
|
.sidebar-icon-only .sidebar-text {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
width: 0;
|
|
overflow: hidden;
|
|
transition: opacity 0.2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
.sidebar-icon-only:hover .sidebar-text {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
width: auto;
|
|
}
|
|
.sidebar-icon-only .sidebar-logo-text {
|
|
opacity: 0;
|
|
width: 0;
|
|
overflow: hidden;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
.sidebar-icon-only:hover .sidebar-logo-text {
|
|
opacity: 1;
|
|
width: auto;
|
|
}
|
|
.sidebar-icon-only .submenu {
|
|
display: none;
|
|
}
|
|
.sidebar-icon-only:hover .submenu {
|
|
display: block;
|
|
}
|
|
.nav-item-active {
|
|
background-color: rgba(255,255,255,0.1);
|
|
border-left: 3px solid #fff;
|
|
}
|
|
.nav-item-sublink-active {
|
|
background-color: rgba(255,255,255,0.15);
|
|
}
|
|
.submenu {
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
transition: max-height 0.3s ease;
|
|
}
|
|
.submenu.open {
|
|
max-height: 500px;
|
|
}
|
|
.submenu a {
|
|
padding-left: 3.5rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
</style>
|
|
|
|
<aside id="sidebar" class="sidebar-icon-only bg-navy text-white flex flex-col shadow-2xl z-20 fixed left-0 top-0 h-screen overflow-y-auto overflow-x-hidden">
|
|
<!-- Brand -->
|
|
<div class="p-4 flex flex-col items-center border-b border-white/10">
|
|
<div class="sidebar-logo-text rounded-lg overflow-hidden mb-3" style="width: 200px; height: 100px;">
|
|
<img src="{% static 'img/logo.png' %}" alt="Al Hammadi Hospital" class="w-full h-full object-contain">
|
|
</div>
|
|
{% comment %} <div class="sidebar-logo-text overflow-hidden text-center">
|
|
<h1 class="text-lg font-black tracking-tighter whitespace-nowrap">PX360</h1>
|
|
<p class="text-[8px] font-bold text-blue-200 tracking-widest uppercase whitespace-nowrap">Analytics Platform</p>
|
|
</div> {% endcomment %}
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="flex-1 px-2 py-4 space-y-1">
|
|
<!-- Dashboard -->
|
|
<a href="{% url 'analytics:command_center' %}"
|
|
class="flex items-center gap-3 p-3 rounded-lg transition {% if request.resolver_match.url_name == 'command_center' %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="layout-dashboard" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Dashboard" %}</span>
|
|
</a>
|
|
|
|
<!-- Admin Evaluation (Admin only) -->
|
|
{% if user.is_px_admin or user.is_hospital_admin %}
|
|
<a href="{% url 'dashboard:admin_evaluation' %}"
|
|
class="flex items-center gap-3 p-3 rounded-lg transition {% if 'admin-evaluation' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="shield-check" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Admin Evaluation" %}</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<!-- Complaints -->
|
|
<a href="{% url 'complaints:complaint_list' %}"
|
|
class="flex items-center gap-3 p-3 rounded-lg transition {% if 'complaints' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="file-text" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Complaints" %}</span>
|
|
{% if complaint_count|default:0 > 0 %}
|
|
<span class="sidebar-text ml-auto bg-white/20 text-white text-xs px-1.5 py-0.5 rounded-full min-w-[1.25rem] text-center">{{ complaint_count }}</span>
|
|
{% endif %}
|
|
</a>
|
|
|
|
<!-- Feedback -->
|
|
{% comment %} <a href="{% url 'feedback:feedback_list' %}"
|
|
class="flex items-center gap-3 p-3 rounded-lg transition {% if 'feedback' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="message-square-heart" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Feedback" %}</span>
|
|
</a>
|
|
|
|
<!-- Appreciation -->
|
|
<a href="{% url 'appreciation:appreciation_list' %}"
|
|
class="flex items-center gap-3 p-3 rounded-lg transition {% if 'appreciation' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="heart" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Appreciation" %}</span>
|
|
</a> {% endcomment %}
|
|
|
|
<!-- Surveys (with submenu) -->
|
|
{% url 'surveys:instance_list' as survey_instances_url %}
|
|
{% url 'surveys:template_list' as survey_templates_url %}
|
|
{% url 'surveys:template_create' as survey_create_url %}
|
|
{% url 'surveys:manual_send' as survey_send_url %}
|
|
{% url 'surveys:analytics_reports' as survey_reports_url %}
|
|
{% url 'integrations:survey-mapping-settings' as survey_mapping_url %}
|
|
<div class="survey-nav-container">
|
|
<button onclick="toggleSurveyMenu(event)"
|
|
class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'surveys' in request.path or 'survey-mapping' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="clipboard-list" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "Surveys" %}</span>
|
|
<i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'surveys' in request.path or 'survey-mapping' in request.path %}rotate-180{% endif %}" id="survey-chevron"></i>
|
|
</button>
|
|
<div class="submenu {% if 'surveys' in request.path or 'survey-mapping' in request.path %}open{% endif %} space-y-1 mt-1" id="survey-submenu">
|
|
<a href="{{ survey_instances_url }}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'surveys' in request.path and 'templates' not in request.path and 'send' not in request.path and 'reports' not in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="list" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Survey List" %}</span>
|
|
</a>
|
|
<a href="{{ survey_templates_url }}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'templates' in request.path and 'create' not in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="files" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Templates" %}</span>
|
|
</a>
|
|
<a href="{{ survey_create_url }}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'templates/create' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="plus-circle" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Create Survey" %}</span>
|
|
</a>
|
|
<a href="{{ survey_send_url }}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if '/send' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="send" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Manual Send" %}</span>
|
|
</a>
|
|
<a href="{% url 'surveys:his_patient_import' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'his-import' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="upload" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "HIS Import" %}</span>
|
|
</a>
|
|
{% comment %} <a href="{% url 'surveys:bulk_job_list' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'bulk-jobs' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="layers" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Bulk Jobs" %}</span>
|
|
</a> {% endcomment %}
|
|
{% comment %} <a href="{{ survey_reports_url }}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if '/reports' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="bar-chart-2" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Reports" %}</span>
|
|
</a> {% endcomment %}
|
|
<a href="{{ survey_mapping_url }}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'survey-mapping' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="link" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Mapping" %}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Staff (with submenu) -->
|
|
<div class="staff-nav-container">
|
|
<button onclick="toggleStaffMenu(event)"
|
|
class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'staff' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="users" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "Staff" %}</span>
|
|
<i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'staff' in request.path %}rotate-180{% endif %}" id="staff-chevron"></i>
|
|
</button>
|
|
<div class="submenu {% if 'staff' in request.path %}open{% endif %} space-y-1 mt-1" id="staff-submenu">
|
|
<a href="{% url 'organizations:staff_list' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'staff_list' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="list" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "All Staff" %}</span>
|
|
</a>
|
|
<a href="{% url 'organizations:staff_hierarchy_d3' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'hierarchy' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="git-branch" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Hierarchy" %}</span>
|
|
</a>
|
|
{% comment %} <a href="{% url 'organizations:section_list' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'section' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="layers" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Sections" %}</span>
|
|
</a> {% endcomment %}
|
|
{% comment %} <a href="{% url 'organizations:subsection_list' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'subsection' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="layout-grid" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Subsections" %}</span>
|
|
</a> {% endcomment %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Patients -->
|
|
{% comment %} <a href="{% url 'organizations:patient_list' %}"
|
|
class="flex items-center gap-3 p-3 rounded-lg transition {% if 'patients' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="heart-pulse" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Patients" %}</span>
|
|
</a> {% endcomment %}
|
|
|
|
<!-- Physicians (with submenu) -->
|
|
<div class="physicians-nav-container">
|
|
<button onclick="togglePhysiciansMenu(event)"
|
|
class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'physicians' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="stethoscope" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "Physicians" %}</span>
|
|
<i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'physicians' in request.path %}rotate-180{% endif %}" id="physicians-chevron"></i>
|
|
</button>
|
|
<div class="submenu {% if 'physicians' in request.path %}open{% endif %} space-y-1 mt-1" id="physicians-submenu">
|
|
<a href="{% url 'physicians:physician_ratings_dashboard' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'physician_ratings_dashboard' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="layout-dashboard" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Dashboard" %}</span>
|
|
</a>
|
|
<a href="{% url 'physicians:physician_list' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'physician_list' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="users" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "All Physicians" %}</span>
|
|
</a>
|
|
<a href="{% url 'physicians:leaderboard' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'leaderboard' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="trophy" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Leaderboard" %}</span>
|
|
</a>
|
|
{% if user.is_px_admin or user.is_hospital_admin %}
|
|
<a href="{% url 'physicians:doctor_rating_import' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'import' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="upload" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Import Ratings" %}</span>
|
|
</a>
|
|
<a href="{% url 'physicians:individual_ratings_list' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'individual' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="star" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Individual Ratings" %}</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analytics (with submenu) -->
|
|
<div class="analytics-nav-container">
|
|
<button onclick="toggleAnalyticsMenu(event)"
|
|
class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'analytics' in request.path and 'command_center' not in request.resolver_match.url_name %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="bar-chart-3" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "Analytics" %}</span>
|
|
<i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'analytics' in request.path and 'command_center' not in request.resolver_match.url_name %}rotate-180{% endif %}" id="analytics-chevron"></i>
|
|
</button>
|
|
<div class="submenu {% if 'analytics' in request.path and 'command_center' not in request.resolver_match.url_name %}open{% endif %} space-y-1 mt-1" id="analytics-submenu">
|
|
<a href="{% url 'analytics:dashboard' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'analytics' in request.path and 'kpi' not in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="layout-dashboard" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Dashboard" %}</span>
|
|
</a>
|
|
<a href="{% url 'analytics:kpi_report_list' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'kpi-reports' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="file-bar-chart" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "KPI Reports" %}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PX Sources (with submenu) -->
|
|
<div class="px-sources-nav-container">
|
|
<button onclick="togglePXSourcesMenu(event)"
|
|
class="w-full flex items-center gap-3 p-3 rounded-lg transition {% if 'px-sources' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="radio" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap flex-1 text-left">{% trans "PX Sources" %}</span>
|
|
<i data-lucide="chevron-down" class="sidebar-text w-4 h-4 flex-shrink-0 transform transition-transform duration-200 {% if 'px-sources' in request.path %}rotate-180{% endif %}" id="px-sources-chevron"></i>
|
|
</button>
|
|
<div class="submenu {% if 'px-sources' in request.path %}open{% endif %} space-y-1 mt-1" id="px-sources-submenu">
|
|
<a href="{% url 'px_sources:source_list' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if request.resolver_match.url_name == 'source_list' %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="list" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "All Sources" %}</span>
|
|
</a>
|
|
<a href="{% url 'px_sources:source_user_dashboard' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'dashboard' in request.path and 'px-sources' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="layout-dashboard" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Dashboard" %}</span>
|
|
</a>
|
|
<a href="{% url 'px_sources:source_user_complaint_list' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'complaints' in request.path and 'px-sources' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="file-text" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Source Complaints" %}</span>
|
|
</a>
|
|
<a href="{% url 'px_sources:source_user_inquiry_list' %}"
|
|
class="flex items-center gap-2 p-2 rounded-lg transition {% if 'inquiries' in request.path and 'px-sources' in request.path %}nav-item-sublink-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="help-circle" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text whitespace-nowrap">{% trans "Source Inquiries" %}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Send SMS (Admin only) -->
|
|
{% if user.is_px_admin or user.is_hospital_admin %}
|
|
<a href="{% url 'notifications:send_sms_direct' %}"
|
|
class="flex items-center gap-3 p-3 rounded-lg transition {% if 'send-sms' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="message-square" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Send SMS" %}</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<!-- Settings (Admin only) -->
|
|
{% if user.is_px_admin or user.is_hospital_admin %}
|
|
<a href="{% url 'config:dashboard' %}"
|
|
class="flex items-center gap-3 p-3 rounded-lg transition {% if 'config' in request.path %}nav-item-active{% else %}opacity-70 hover:opacity-100 hover:bg-white/10{% endif %}">
|
|
<i data-lucide="settings" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-sm font-semibold whitespace-nowrap">{% trans "Settings" %}</span>
|
|
</a>
|
|
{% endif %}
|
|
</nav>
|
|
|
|
<!-- User Profile & Logout -->
|
|
<div class="p-3 border-t border-white/10">
|
|
<div class="flex items-center gap-3 p-2 rounded-lg hover:bg-white/10 transition cursor-pointer" onclick="toggleUserMenu()">
|
|
<div class="w-8 h-8 rounded-full bg-blue border-2 border-white/20 flex items-center justify-center font-bold text-xs flex-shrink-0">
|
|
{{ user.first_name|first|default:"U" }}{{ user.last_name|first|default:"" }}
|
|
</div>
|
|
<div class="sidebar-text flex-1 overflow-hidden min-w-0">
|
|
<p class="text-xs font-bold truncate">{{ user.get_full_name|default:user.username }}</p>
|
|
<p class="text-[10px] text-white/50 truncate">{{ user.get_role_display|default:"User" }}</p>
|
|
</div>
|
|
<i data-lucide="log-out" class="w-4 h-4 text-white/40 hover:text-white cursor-pointer flex-shrink-0 sidebar-text" onclick="event.stopPropagation(); logout()"></i>
|
|
</div>
|
|
|
|
<!-- User Dropdown Menu (hidden by default) -->
|
|
<div id="userMenu" class="hidden mt-2 space-y-1">
|
|
<a href="{% url 'accounts:settings' %}" class="flex items-center gap-3 p-2 rounded-lg opacity-70 hover:opacity-100 hover:bg-white/10 transition">
|
|
<i data-lucide="user" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-xs font-semibold whitespace-nowrap">{% trans "Profile" %}</span>
|
|
</a>
|
|
<form method="post" action="{% url 'accounts:logout' %}" class="m-0">
|
|
{% csrf_token %}
|
|
<button type="submit" class="w-full flex items-center gap-3 p-2 rounded-lg opacity-70 hover:opacity-100 hover:bg-white/10 transition text-left">
|
|
<i data-lucide="log-out" class="w-4 h-4 flex-shrink-0"></i>
|
|
<span class="sidebar-text text-xs font-semibold whitespace-nowrap">{% trans "Logout" %}</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<script>
|
|
function toggleUserMenu() {
|
|
const menu = document.getElementById('userMenu');
|
|
menu.classList.toggle('hidden');
|
|
}
|
|
|
|
function toggleSurveyMenu(event) {
|
|
event.preventDefault();
|
|
const submenu = document.getElementById('survey-submenu');
|
|
const chevron = document.getElementById('survey-chevron');
|
|
submenu.classList.toggle('open');
|
|
chevron.classList.toggle('rotate-180');
|
|
}
|
|
|
|
function toggleAnalyticsMenu(event) {
|
|
event.preventDefault();
|
|
const submenu = document.getElementById('analytics-submenu');
|
|
const chevron = document.getElementById('analytics-chevron');
|
|
submenu.classList.toggle('open');
|
|
chevron.classList.toggle('rotate-180');
|
|
}
|
|
|
|
function togglePhysiciansMenu(event) {
|
|
event.preventDefault();
|
|
const submenu = document.getElementById('physicians-submenu');
|
|
const chevron = document.getElementById('physicians-chevron');
|
|
submenu.classList.toggle('open');
|
|
chevron.classList.toggle('rotate-180');
|
|
}
|
|
|
|
function toggleStaffMenu(event) {
|
|
event.preventDefault();
|
|
const submenu = document.getElementById('staff-submenu');
|
|
const chevron = document.getElementById('staff-chevron');
|
|
submenu.classList.toggle('open');
|
|
chevron.classList.toggle('rotate-180');
|
|
}
|
|
|
|
function togglePXSourcesMenu(event) {
|
|
event.preventDefault();
|
|
const submenu = document.getElementById('px-sources-submenu');
|
|
const chevron = document.getElementById('px-sources-chevron');
|
|
submenu.classList.toggle('open');
|
|
chevron.classList.toggle('rotate-180');
|
|
}
|
|
|
|
function logout() {
|
|
if (confirm('{% trans "Are you sure you want to logout?" %}')) {
|
|
document.querySelector('form[action="{% url 'accounts:logout' %}"]').submit();
|
|
}
|
|
}
|
|
|
|
// Close user menu when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
const userMenu = document.getElementById('userMenu');
|
|
const userProfile = e.target.closest('.cursor-pointer');
|
|
if (userMenu && !userMenu.contains(e.target) && !userProfile) {
|
|
userMenu.classList.add('hidden');
|
|
}
|
|
});
|
|
</script>
|