781 lines
52 KiB
HTML
781 lines
52 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Settings" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Page Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-800 mb-2 flex items-center gap-2">
|
|
<i data-lucide="settings" class="w-8 h-8 text-navy"></i>
|
|
{% trans "Settings" %}
|
|
</h1>
|
|
<p class="text-gray-500">{% trans "Manage your account preferences and configurations" %}</p>
|
|
</div>
|
|
|
|
<!-- Settings Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-50 overflow-hidden">
|
|
<!-- Tab Navigation -->
|
|
<div class="border-b border-gray-100 overflow-x-auto">
|
|
<div class="flex gap-1 p-2 min-w-max" role="tablist">
|
|
<button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2 active" data-tab="profile">
|
|
<i data-lucide="user-circle" class="w-4 h-4"></i>
|
|
{% trans "Profile" %}
|
|
</button>
|
|
<button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="notifications">
|
|
<i data-lucide="bell" class="w-4 h-4"></i>
|
|
{% trans "Notifications" %}
|
|
</button>
|
|
<button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="security">
|
|
<i data-lucide="shield" class="w-4 h-4"></i>
|
|
{% trans "Security" %}
|
|
</button>
|
|
<button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="account">
|
|
<i data-lucide="info" class="w-4 h-4"></i>
|
|
{% trans "Account" %}
|
|
</button>
|
|
{% if user.is_px_admin or user.is_hospital_admin %}
|
|
<button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="sla">
|
|
<i data-lucide="clock" class="w-4 h-4"></i>
|
|
{% trans "SLA" %}
|
|
</button>
|
|
<button class="settings-tab px-6 py-3 rounded-xl font-medium text-sm transition flex items-center gap-2" data-tab="hospital-notifications">
|
|
<i data-lucide="bell-ring" class="w-4 h-4"></i>
|
|
{% trans "Hospital Notifications" %}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="p-6">
|
|
|
|
<!-- Profile Tab -->
|
|
<div class="settings-content" id="profile-content">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div class="lg:col-span-2">
|
|
<h5 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
|
|
<i data-lucide="user-circle" class="w-5 h-5 text-navy"></i>
|
|
{% trans "Profile Settings" %}
|
|
</h5>
|
|
|
|
<form method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="form_type" value="profile">
|
|
|
|
<!-- Avatar -->
|
|
<div class="text-center mb-8">
|
|
{% if user.avatar %}
|
|
<img src="{{ user.avatar.url }}" alt="{{ user.get_full_name }}" class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-gray-100 object-cover">
|
|
{% else %}
|
|
<div class="w-32 h-32 rounded-full bg-gray-100 mx-auto mb-4 border-4 border-gray-100 flex items-center justify-center">
|
|
<i data-lucide="user" class="w-16 h-16 text-gray-400"></i>
|
|
</div>
|
|
{% endif %}
|
|
<div class="mt-3">
|
|
<label for="avatar" class="inline-flex items-center gap-2 px-4 py-2 text-navy bg-light rounded-xl hover:bg-light transition cursor-pointer">
|
|
<i data-lucide="camera" class="w-4 h-4"></i>
|
|
{% trans "Change Avatar" %}
|
|
</label>
|
|
<input type="file" id="avatar" name="avatar" class="hidden" accept="image/*">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="first_name" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "First Name" %}
|
|
</label>
|
|
<input type="text" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="first_name" name="first_name" value="{{ user.first_name }}" required>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="last_name" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "Last Name" %}
|
|
</label>
|
|
<input type="text" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="last_name" name="last_name" value="{{ user.last_name }}" required>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<label for="email" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "Email" %}
|
|
</label>
|
|
<input type="email" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 bg-gray-50" id="email" value="{{ user.email }}" readonly>
|
|
<p class="text-sm text-gray-400 mt-1">{% trans "Contact administrator to change email" %}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="phone" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "Phone Number" %}
|
|
</label>
|
|
<input type="tel" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="phone" name="phone" value="{{ user.phone|default:'' }}">
|
|
<p class="text-sm text-gray-400 mt-1">{% trans "Required for SMS notifications" %}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="language" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "Language" %}
|
|
</label>
|
|
<select class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="language" name="language">
|
|
{% for lang_code, lang_name in languages %}
|
|
<option value="{{ lang_code }}" {% if user.language == lang_code %}selected{% endif %}>
|
|
{{ lang_name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<label for="bio" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "Bio" %}
|
|
</label>
|
|
<textarea class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="bio" name="bio" rows="4">{{ user.bio|default:'' }}</textarea>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<button type="submit" class="bg-light0 text-white px-6 py-3 rounded-xl font-bold hover:bg-navy transition flex items-center gap-2">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
{% trans "Save Profile" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bg-gray-50 rounded-2xl p-6">
|
|
<h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-navy"></i>
|
|
{% trans "Profile Tips" %}
|
|
</h6>
|
|
<ul class="space-y-3 text-sm text-gray-600">
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Add a professional photo to help others recognize you" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Keep your phone number updated for SMS notifications" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Add a bio to share your role and expertise" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Choose your preferred language for the interface" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notifications Tab -->
|
|
<div class="settings-content hidden" id="notifications-content">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div class="lg:col-span-2">
|
|
<h5 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
|
|
<i data-lucide="bell" class="w-5 h-5 text-navy"></i>
|
|
{% trans "Notification Preferences" %}
|
|
</h5>
|
|
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="form_type" value="preferences">
|
|
|
|
<!-- Email Notifications -->
|
|
<div class="bg-gray-50 rounded-2xl p-6 mb-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<strong class="text-gray-800">{% trans "Email Notifications" %}</strong>
|
|
<p class="text-sm text-gray-500 mt-1">{% trans "Receive notifications via email for complaint assignments, updates, and escalations" %}</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" id="notification_email_enabled" name="notification_email_enabled" class="sr-only peer" {% if user.notification_email_enabled %}checked{% endif %}>
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-navy/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-light0"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SMS Notifications -->
|
|
<div class="bg-gray-50 rounded-2xl p-6 mb-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<strong class="text-gray-800">{% trans "SMS Notifications" %}</strong>
|
|
<p class="text-sm text-gray-500 mt-1">{% trans "Receive critical notifications via SMS (requires phone number)" %}</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input type="checkbox" id="notification_sms_enabled" name="notification_sms_enabled" class="sr-only peer" {% if user.notification_sms_enabled %}checked{% endif %}>
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-navy/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-light0"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div>
|
|
<label for="preferred_notification_channel" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "Preferred Notification Channel" %}
|
|
</label>
|
|
<select class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="preferred_notification_channel" name="preferred_notification_channel">
|
|
{% for channel_code, channel_name in notification_channels %}
|
|
<option value="{{ channel_code }}" {% if user.preferred_notification_channel == channel_code %}selected{% endif %}>
|
|
{{ channel_name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<p class="text-sm text-gray-400 mt-1">{% trans "Default channel for general notifications" %}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="explanation_notification_channel" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "Explanation Request Channel" %}
|
|
</label>
|
|
<select class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="explanation_notification_channel" name="explanation_notification_channel">
|
|
{% for channel_code, channel_name in notification_channels %}
|
|
<option value="{{ channel_code }}" {% if user.explanation_notification_channel == channel_code %}selected{% endif %}>
|
|
{{ channel_name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
<p class="text-sm text-gray-400 mt-1">{% trans "Default channel when requesting complaint explanations" %}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="phone" class="block text-sm font-bold text-gray-700 mb-2">
|
|
{% trans "Phone Number for SMS" %}
|
|
</label>
|
|
<input type="tel" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="phone" name="phone" value="{{ user.phone|default:'' }}" placeholder="+966 5X XXX XXXX">
|
|
<p class="text-sm text-gray-400 mt-1">{% trans "Required to receive SMS notifications" %}</p>
|
|
</div>
|
|
|
|
<button type="submit" class="bg-blue-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-blue-600 transition flex items-center gap-2">
|
|
<i data-lucide="save" class="w-4 h-4"></i>
|
|
{% trans "Save Preferences" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bg-gray-50 rounded-2xl p-6">
|
|
<h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-navy"></i>
|
|
{% trans "Notification Tips" %}
|
|
</h6>
|
|
<p class="text-sm text-gray-600 mb-4">
|
|
{% trans "Configure how you receive notifications to stay informed without being overwhelmed." %}
|
|
</p>
|
|
<ul class="space-y-3 text-sm text-gray-600">
|
|
<li class="flex gap-2">
|
|
<i data-lucide="mail" class="w-4 h-4 text-blue-500 flex-shrink-0"></i>
|
|
<span>{% trans "Email is best for detailed information" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="smartphone" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "SMS is best for urgent alerts" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="bell" class="w-4 h-4 text-orange-500 flex-shrink-0"></i>
|
|
<span>{% trans "In-app notifications are always enabled" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Tab -->
|
|
<div class="settings-content hidden" id="security-content">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div class="lg:col-span-2">
|
|
<h5 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
|
|
<i data-lucide="shield" class="w-5 h-5 text-navy"></i>
|
|
{% trans "Security Settings" %}
|
|
</h5>
|
|
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="form_type" value="password">
|
|
|
|
<div class="bg-gray-50 rounded-2xl p-6">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<label for="current_password" class="block text-sm font-bold text-gray-700 mb-2">{% trans "Current Password" %}</label>
|
|
<input type="password" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="current_password" name="current_password" required>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="new_password" class="block text-sm font-bold text-gray-700 mb-2">{% trans "New Password" %}</label>
|
|
<input type="password" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="new_password" name="new_password" required minlength="8">
|
|
<p class="text-sm text-gray-400 mt-1">{% trans "Minimum 8 characters" %}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="confirm_password" class="block text-sm font-bold text-gray-700 mb-2">{% trans "Confirm New Password" %}</label>
|
|
<input type="password" class="w-full px-4 py-2.5 border-2 border-gray-200 rounded-xl text-gray-800 focus:ring-2 focus:ring-navy focus:border-transparent transition" id="confirm_password" name="confirm_password" required minlength="8">
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="bg-orange-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-orange-600 transition flex items-center gap-2">
|
|
<i data-lucide="key" class="w-4 h-4"></i>
|
|
{% trans "Change Password" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="bg-gray-50 rounded-2xl p-6 mt-6">
|
|
<h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="clock" class="w-4 h-4 text-gray-500"></i>
|
|
{% trans "Password History" %}
|
|
</h6>
|
|
<p class="text-sm text-gray-600">
|
|
<i data-lucide="clock" class="w-4 h-4 inline mr-1"></i>
|
|
{% trans "Last password change:" %} {% if user.password %}{% trans "Recently" %}{% else %}{% trans "Never" %}{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bg-gray-50 rounded-2xl p-6">
|
|
<h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-navy"></i>
|
|
{% trans "Security Tips" %}
|
|
</h6>
|
|
<ul class="space-y-3 text-sm text-gray-600">
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Use strong passwords with letters, numbers, and symbols" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Don't reuse passwords from other sites" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Change your password regularly" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Never share your password with anyone" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Tab -->
|
|
<div class="settings-content hidden" id="account-content">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<div class="lg:col-span-2">
|
|
<h5 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
|
|
<i data-lucide="info" class="w-5 h-5 text-navy"></i>
|
|
{% trans "Account Information" %}
|
|
</h5>
|
|
|
|
<div class="bg-gray-50 rounded-2xl p-6">
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center py-3 border-b border-gray-200">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="user" class="w-5 h-5 text-gray-500"></i>
|
|
<span class="text-gray-600">{% trans "Full Name" %}</span>
|
|
</div>
|
|
<span class="font-bold text-gray-800">{{ user.get_full_name }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-gray-200">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="mail" class="w-5 h-5 text-gray-500"></i>
|
|
<span class="text-gray-600">{% trans "Email" %}</span>
|
|
</div>
|
|
<span class="font-bold text-gray-800">{{ user.email }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-gray-200">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="calendar" class="w-5 h-5 text-gray-500"></i>
|
|
<span class="text-gray-600">{% trans "Member Since" %}</span>
|
|
</div>
|
|
<span class="font-bold text-gray-800">{{ user.date_joined|date:"F d, Y" }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-gray-200">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="building-2" class="w-5 h-5 text-gray-500"></i>
|
|
<span class="text-gray-600">{% trans "Hospital" %}</span>
|
|
</div>
|
|
<span class="font-bold text-gray-800">{% if user.hospital %}{{ user.hospital.name }}{% else %}{% trans "Not assigned" %}{% endif %}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-gray-200">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="building" class="w-5 h-5 text-gray-500"></i>
|
|
<span class="text-gray-600">{% trans "Department" %}</span>
|
|
</div>
|
|
<span class="font-bold text-gray-800">{% if user.department %}{{ user.department.name }}{% else %}{% trans "Not assigned" %}{% endif %}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-gray-200">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="badge" class="w-5 h-5 text-gray-500"></i>
|
|
<span class="text-gray-600">{% trans "Employee ID" %}</span>
|
|
</div>
|
|
<span class="font-bold text-gray-800">{{ user.employee_id|default:"N/A" }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3">
|
|
<div class="flex items-center gap-3">
|
|
<i data-lucide="user-tie" class="w-5 h-5 text-gray-500"></i>
|
|
<span class="text-gray-600">{% trans "Role" %}</span>
|
|
</div>
|
|
<div>
|
|
{% if user.is_px_admin %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-light text-navy">{% trans "PX Admin" %}</span>
|
|
{% elif user.is_hospital_admin %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-green-100 text-green-700">{% trans "Hospital Admin" %}</span>
|
|
{% elif user.is_department_head %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-blue-100 text-blue-700">{% trans "Department Head" %}</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">{% trans "Staff" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bg-gray-50 rounded-2xl p-6">
|
|
<h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-navy"></i>
|
|
{% trans "Account Info" %}
|
|
</h6>
|
|
<p class="text-sm text-gray-600">
|
|
{% trans "This information is managed by your organization's administrators. Contact them if you need to update your hospital, department, or employee ID." %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hospital Notifications Configuration Tab (Admins only) -->
|
|
{% if user.is_px_admin or user.is_hospital_admin %}
|
|
<div class="settings-content hidden" id="hospital-notifications-content">
|
|
<div class="mb-6">
|
|
<div class="flex justify-between items-center">
|
|
<h5 class="text-xl font-bold text-gray-800 flex items-center gap-2">
|
|
<i data-lucide="bell-ring" class="w-5 h-5 text-navy"></i>
|
|
{% trans "Hospital Notification Configuration" %}
|
|
</h5>
|
|
<a href="{% url 'notifications:settings' %}" class="bg-light0 text-white px-4 py-2 rounded-xl font-bold text-sm hover:bg-navy transition flex items-center gap-2">
|
|
<i data-lucide="external-link" class="w-4 h-4"></i>
|
|
{% trans "Open Full Settings" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
|
|
<div class="flex items-center gap-2 text-blue-700">
|
|
<i data-lucide="info" class="w-5 h-5"></i>
|
|
<span>{% trans "Configure which notifications are sent to staff and patients, and through which channels (Email, SMS, WhatsApp)." %}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Stats -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
<div class="bg-blue-500 text-white p-4 rounded-xl text-center">
|
|
<i data-lucide="mail" class="w-8 h-8 mx-auto mb-2"></i>
|
|
<h6 class="font-bold mb-0">{% trans "Email" %}</h6>
|
|
<span class="text-xs text-white/80">{% trans "Most Reliable" %}</span>
|
|
</div>
|
|
<div class="bg-green-500 text-white p-4 rounded-xl text-center">
|
|
<i data-lucide="smartphone" class="w-8 h-8 mx-auto mb-2"></i>
|
|
<h6 class="font-bold mb-0">{% trans "SMS" %}</h6>
|
|
<span class="text-xs text-white/80">{% trans "Instant Delivery" %}</span>
|
|
</div>
|
|
<div class="bg-teal-500 text-white p-4 rounded-xl text-center">
|
|
<i data-lucide="message-circle" class="w-8 h-8 mx-auto mb-2"></i>
|
|
<h6 class="font-bold mb-0">{% trans "WhatsApp" %}</h6>
|
|
<span class="text-xs text-white/80">{% trans "Rich Messages" %}</span>
|
|
</div>
|
|
<div class="bg-amber-500 text-white p-4 rounded-xl text-center">
|
|
<i data-lucide="moon" class="w-8 h-8 mx-auto mb-2"></i>
|
|
<h6 class="font-bold mb-0">{% trans "Quiet Hours" %}</h6>
|
|
<span class="text-xs text-white/80">{% trans "Do Not Disturb" %}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification Categories -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- Complaint Notifications -->
|
|
<a href="{% url 'notifications:settings' %}#complaint" class="block bg-white border-2 border-blue-200 rounded-xl p-4 hover:border-blue-400 hover:shadow-md transition">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<i data-lucide="alert-triangle" class="w-8 h-8 text-blue-500"></i>
|
|
<div>
|
|
<h6 class="font-bold text-gray-800">{% trans "Complaint Notifications" %}</h6>
|
|
<span class="text-xs text-gray-500">{% trans "5 events" %}</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-600">{% trans "Complaint acknowledgment, assignment, status changes, resolution, and closure notifications." %}</p>
|
|
<span class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-blue-600 hover:text-blue-700">
|
|
{% trans "Configure" %}
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Explanation Notifications -->
|
|
<a href="{% url 'notifications:settings' %}#explanation" class="block bg-white border-2 border-blue-200 rounded-xl p-4 hover:border-blue-400 hover:shadow-md transition">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<i data-lucide="message-square" class="w-8 h-8 text-blue-500"></i>
|
|
<div>
|
|
<h6 class="font-bold text-gray-800">{% trans "Explanation Workflow" %}</h6>
|
|
<span class="text-xs text-gray-500">{% trans "4 events" %}</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-600">{% trans "Explanation requests, reminders, escalations, and received confirmations." %}</p>
|
|
<span class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-blue-600 hover:text-blue-700">
|
|
{% trans "Configure" %}
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Survey Notifications -->
|
|
<a href="{% url 'notifications:settings' %}#survey" class="block bg-white border-2 border-green-200 rounded-xl p-4 hover:border-green-400 hover:shadow-md transition">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<i data-lucide="bar-chart-2" class="w-8 h-8 text-green-500"></i>
|
|
<div>
|
|
<h6 class="font-bold text-gray-800">{% trans "Survey Notifications" %}</h6>
|
|
<span class="text-xs text-gray-500">{% trans "3 events" %}</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-600">{% trans "Survey invitations, reminders, and completion confirmations." %}</p>
|
|
<span class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-green-600 hover:text-green-700">
|
|
{% trans "Configure" %}
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Action Plan Notifications -->
|
|
<a href="{% url 'notifications:settings' %}#action" class="block bg-white border-2 border-amber-200 rounded-xl p-4 hover:border-amber-400 hover:shadow-md transition">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<i data-lucide="check-square" class="w-8 h-8 text-amber-500"></i>
|
|
<div>
|
|
<h6 class="font-bold text-gray-800">{% trans "Action Plan" %}</h6>
|
|
<span class="text-xs text-gray-500">{% trans "3 events" %}</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-600">{% trans "Action assignments, due soon reminders, and overdue alerts." %}</p>
|
|
<span class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-amber-600 hover:text-amber-700">
|
|
{% trans "Configure" %}
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
</span>
|
|
</a>
|
|
|
|
<!-- SLA Notifications -->
|
|
<a href="{% url 'notifications:settings' %}#sla" class="block bg-white border-2 border-red-200 rounded-xl p-4 hover:border-red-400 hover:shadow-md transition">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<i data-lucide="timer" class="w-8 h-8 text-red-500"></i>
|
|
<div>
|
|
<h6 class="font-bold text-gray-800">{% trans "SLA Notifications" %}</h6>
|
|
<span class="text-xs text-gray-500">{% trans "2 events" %}</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-600">{% trans "SLA reminders and breach alerts for timely resolution." %}</p>
|
|
<span class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-red-600 hover:text-red-700">
|
|
{% trans "Configure" %}
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
</span>
|
|
</a>
|
|
|
|
<!-- Onboarding Notifications -->
|
|
<a href="{% url 'notifications:settings' %}#onboarding" class="block bg-white border-2 border-green-200 rounded-xl p-4 hover:border-green-400 hover:shadow-md transition">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<i data-lucide="user-plus" class="w-8 h-8 text-green-500"></i>
|
|
<div>
|
|
<h6 class="font-bold text-gray-800">{% trans "Onboarding" %}</h6>
|
|
<span class="text-xs text-gray-500">{% trans "3 events" %}</span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-gray-600">{% trans "Invitation, reminder, and completion notifications for new user onboarding." %}</p>
|
|
<span class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-green-600 hover:text-green-700">
|
|
{% trans "Configure" %}
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="bg-amber-50 rounded-2xl p-6 mt-6">
|
|
<h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-amber-500"></i>
|
|
{% trans "Notification Best Practices" %}
|
|
</h6>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600">
|
|
<ul class="space-y-2">
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Enable Email for all critical notifications" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Use SMS only for urgent/escalation alerts" %}</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="space-y-2">
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Configure quiet hours to respect staff rest time" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Review notification logs regularly" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- SLA Configuration Tab (Admins only) -->
|
|
{% if user.is_px_admin or user.is_hospital_admin %}
|
|
<div class="settings-content hidden" id="sla-content">
|
|
<h5 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
|
|
<i data-lucide="timer" class="w-5 h-5 text-navy"></i>
|
|
{% trans "SLA Configuration" %}
|
|
</h5>
|
|
|
|
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
|
|
<div class="flex items-center gap-2 text-blue-700">
|
|
<i data-lucide="info" class="w-5 h-5"></i>
|
|
<span>{% trans "Configure Service Level Agreements, escalation rules, and complaint thresholds for your organization." %}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- SLA Configurations -->
|
|
<a href="{% url 'complaints:sla_config_list' %}" class="block bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-blue hover:shadow-md transition text-center">
|
|
<i data-lucide="timer" class="w-12 h-12 text-navy mx-auto mb-4"></i>
|
|
<h6 class="font-bold text-gray-800 mb-2">{% trans "SLA Configurations" %}</h6>
|
|
<p class="text-sm text-gray-600">{% trans "Manage deadline settings for complaint resolution" %}</p>
|
|
</a>
|
|
|
|
<!-- Escalation Rules -->
|
|
<a href="{% url 'complaints:escalation_rule_list' %}" class="block bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-blue hover:shadow-md transition text-center">
|
|
<i data-lucide="trending-up" class="w-12 h-12 text-orange-500 mx-auto mb-4"></i>
|
|
<h6 class="font-bold text-gray-800 mb-2">{% trans "Escalation Rules" %}</h6>
|
|
<p class="text-sm text-gray-600">{% trans "Configure automatic escalation when deadlines are exceeded" %}</p>
|
|
</a>
|
|
|
|
<!-- Complaint Thresholds -->
|
|
<a href="{% url 'complaints:complaint_threshold_list' %}" class="block bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-blue hover:shadow-md transition text-center">
|
|
<i data-lucide="bar-chart" class="w-12 h-12 text-blue-500 mx-auto mb-4"></i>
|
|
<h6 class="font-bold text-gray-800 mb-2">{% trans "Complaint Thresholds" %}</h6>
|
|
<p class="text-sm text-gray-600">{% trans "Set alert thresholds for complaint volume monitoring" %}</p>
|
|
</a>
|
|
|
|
<!-- On-Call Admin Schedules -->
|
|
<a href="{% url 'complaints:oncall_dashboard' %}" class="block bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-blue hover:shadow-md transition text-center">
|
|
<i data-lucide="moon" class="w-12 h-12 text-indigo-500 mx-auto mb-4"></i>
|
|
<h6 class="font-bold text-gray-800 mb-2">{% trans "On-Call Schedules" %}</h6>
|
|
<p class="text-sm text-gray-600">{% trans "Configure working hours and on-call admin assignments for notifications" %}</p>
|
|
</a>
|
|
|
|
<!-- Send SMS -->
|
|
<a href="{% url 'notifications:send_sms_direct' %}" class="block bg-white border-2 border-gray-200 rounded-xl p-6 hover:border-blue hover:shadow-md transition text-center">
|
|
<i data-lucide="message-square" class="w-12 h-12 text-green-500 mx-auto mb-4"></i>
|
|
<h6 class="font-bold text-gray-800 mb-2">{% trans "Send SMS" %}</h6>
|
|
<p class="text-sm text-gray-600">{% trans "Send text messages directly to any phone number" %}</p>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 rounded-2xl p-6 mt-6">
|
|
<h6 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-navy"></i>
|
|
{% trans "SLA Best Practices" %}
|
|
</h6>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-600">
|
|
<ul class="space-y-2">
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Set realistic deadlines based on complaint severity" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Configure multiple escalation levels for smooth handoffs" %}</span>
|
|
</li>
|
|
</ul>
|
|
<ul class="space-y-2">
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Monitor thresholds to identify trends and issues early" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i>
|
|
<span>{% trans "Review and adjust SLA settings regularly" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
|
|
// Tab switching
|
|
const tabs = document.querySelectorAll('.settings-tab');
|
|
const contents = document.querySelectorAll('.settings-content');
|
|
|
|
// Load saved tab
|
|
const savedTab = localStorage.getItem('activeSettingsTab') || 'profile';
|
|
|
|
function activateTab(tabName) {
|
|
tabs.forEach(tab => {
|
|
const isActive = tab.dataset.tab === tabName;
|
|
if (isActive) {
|
|
tab.classList.add('bg-light', 'text-navy');
|
|
tab.classList.remove('text-gray-500', 'hover:bg-gray-100');
|
|
} else {
|
|
tab.classList.remove('bg-light', 'text-navy');
|
|
tab.classList.add('text-gray-500', 'hover:bg-gray-100');
|
|
}
|
|
});
|
|
|
|
contents.forEach(content => {
|
|
if (content.id === `${tabName}-content`) {
|
|
content.classList.remove('hidden');
|
|
} else {
|
|
content.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
localStorage.setItem('activeSettingsTab', tabName);
|
|
}
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
const tabName = this.dataset.tab;
|
|
activateTab(tabName);
|
|
});
|
|
});
|
|
|
|
// Initialize with saved tab
|
|
activateTab(savedTab);
|
|
|
|
// Password confirmation validation
|
|
const passwordForm = document.querySelector('form input[name="form_type"][value="password"]')?.closest('form');
|
|
if (passwordForm) {
|
|
passwordForm.addEventListener('submit', function(e) {
|
|
const newPassword = this.querySelector('#new_password').value;
|
|
const confirmPassword = this.querySelector('#confirm_password').value;
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
e.preventDefault();
|
|
alert('{% trans "Passwords do not match!" %}');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |