HH/templates/accounts/settings.html

562 lines
37 KiB
HTML

{% extends 'layouts/base.html' %}
{% load i18n %}
{% block title %}{% trans "Settings" %} - PX360{% endblock %}
{% block content %}
<div class="container-fluid px-4 py-4">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h3 mb-0">{% trans "Settings" %}</h1>
</div>
<div class="card shadow-sm">
<!-- Tab Navigation -->
<ul class="nav nav-tabs nav-fill" id="settingsTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">
<i class="fas fa-user-circle me-2"></i>{% trans "Profile" %}
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="notifications-tab" data-bs-toggle="tab" data-bs-target="#notifications" type="button" role="tab">
<i class="fas fa-bell me-2"></i>{% trans "Notifications" %}
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="security-tab" data-bs-toggle="tab" data-bs-target="#security" type="button" role="tab">
<i class="fas fa-shield-alt me-2"></i>{% trans "Security" %}
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="account-tab" data-bs-toggle="tab" data-bs-target="#account" type="button" role="tab">
<i class="fas fa-info-circle me-2"></i>{% trans "Account" %}
</button>
</li>
{% if user.is_px_admin or user.is_hospital_admin %}
<li class="nav-item" role="presentation">
<button class="nav-link" id="sla-tab" data-bs-toggle="tab" data-bs-target="#sla" type="button" role="tab">
<i class="fas fa-clock me-2"></i>{% trans "SLA" %}
</button>
</li>
{% endif %}
</ul>
<!-- Tab Content -->
<div class="tab-content p-4" id="settingsTabsContent">
<!-- Profile Tab -->
<div class="tab-pane fade show active" id="profile" role="tabpanel">
<div class="row">
<div class="col-lg-8">
<h5 class="mb-4">
<i class="fas fa-user-circle text-primary me-2"></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-4">
{% if user.avatar %}
<img src="{{ user.avatar.url }}" alt="{{ user.get_full_name }}" class="rounded-circle mb-2 border" style="width: 120px; height: 120px; object-fit: cover;">
{% else %}
<div class="rounded-circle bg-light d-flex align-items-center justify-content-center mb-2 border" style="width: 120px; height: 120px; margin: 0 auto;">
<i class="fas fa-user fa-4x text-muted"></i>
</div>
{% endif %}
<div class="mt-2">
<label for="avatar" class="btn btn-outline-primary btn-sm">
<i class="fas fa-camera me-1"></i>{% trans "Change Avatar" %}
</label>
<input type="file" id="avatar" name="avatar" class="d-none" accept="image/*">
</div>
</div>
<div class="row g-3">
<div class="col-md-6">
<label for="first_name" class="form-label">{% trans "First Name" %}</label>
<input type="text" class="form-control" id="first_name" name="first_name" value="{{ user.first_name }}" required>
</div>
<div class="col-md-6">
<label for="last_name" class="form-label">{% trans "Last Name" %}</label>
<input type="text" class="form-control" id="last_name" name="last_name" value="{{ user.last_name }}" required>
</div>
<div class="col-md-12">
<label for="email" class="form-label">{% trans "Email" %}</label>
<input type="email" class="form-control" id="email" value="{{ user.email }}" readonly>
<small class="form-text text-muted">{% trans "Contact administrator to change email" %}</small>
</div>
<div class="col-md-6">
<label for="phone" class="form-label">{% trans "Phone Number" %}</label>
<input type="tel" class="form-control" id="phone" name="phone" value="{{ user.phone|default:'' }}">
<small class="form-text text-muted">{% trans "Required for SMS notifications" %}</small>
</div>
<div class="col-md-6">
<label for="language" class="form-label">{% trans "Language" %}</label>
<select class="form-select" 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="col-12">
<label for="bio" class="form-label">{% trans "Bio" %}</label>
<textarea class="form-control" id="bio" name="bio" rows="4">{{ user.bio|default:'' }}</textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save me-2"></i>{% trans "Save Profile" %}
</button>
</div>
</div>
</form>
</div>
<div class="col-lg-4">
<div class="card bg-light">
<div class="card-body">
<h6 class="card-title">
<i class="fas fa-info-circle text-info me-2"></i>{% trans "Profile Tips" %}
</h6>
<ul class="list-unstyled small">
<li class="mb-2">
<i class="fas fa-check text-success me-2"></i>
{% trans "Add a professional photo to help others recognize you" %}
</li>
<li class="mb-2">
<i class="fas fa-check text-success me-2"></i>
{% trans "Keep your phone number updated for SMS notifications" %}
</li>
<li class="mb-2">
<i class="fas fa-check text-success me-2"></i>
{% trans "Add a bio to share your role and expertise" %}
</li>
<li class="mb-2">
<i class="fas fa-check text-success me-2"></i>
{% trans "Choose your preferred language for the interface" %}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Notifications Tab -->
<div class="tab-pane fade" id="notifications" role="tabpanel">
<div class="row">
<div class="col-lg-8">
<h5 class="mb-4">
<i class="fas fa-bell text-info me-2"></i>{% trans "Notification Preferences" %}
</h5>
<form method="post">
{% csrf_token %}
<input type="hidden" name="form_type" value="preferences">
<!-- Email Notifications -->
<div class="card mb-4">
<div class="card-body">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="notification_email_enabled" name="notification_email_enabled" {% if user.notification_email_enabled %}checked{% endif %}>
<label class="form-check-label" for="notification_email_enabled">
<strong>{% trans "Email Notifications" %}</strong>
</label>
</div>
<small class="text-muted d-block mt-1">{% trans "Receive notifications via email for complaint assignments, updates, and escalations" %}</small>
</div>
</div>
<!-- SMS Notifications -->
<div class="card mb-4">
<div class="card-body">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="notification_sms_enabled" name="notification_sms_enabled" {% if user.notification_sms_enabled %}checked{% endif %}>
<label class="form-check-label" for="notification_sms_enabled">
<strong>{% trans "SMS Notifications" %}</strong>
</label>
</div>
<small class="text-muted d-block mt-1">{% trans "Receive critical notifications via SMS (requires phone number)" %}</small>
</div>
</div>
<div class="row g-3">
<div class="col-md-12">
<label for="preferred_notification_channel" class="form-label">
<strong>{% trans "Preferred Notification Channel" %}</strong>
</label>
<select class="form-select" 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>
<small class="form-text text-muted">{% trans "Default channel for general notifications" %}</small>
</div>
<div class="col-md-12">
<label for="explanation_notification_channel" class="form-label">
<strong>{% trans "Explanation Request Channel" %}</strong>
</label>
<select class="form-select" 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>
<small class="form-text text-muted">{% trans "Default channel when requesting complaint explanations" %}</small>
</div>
<div class="col-md-12">
<label for="phone" class="form-label">
<strong>{% trans "Phone Number for SMS" %}</strong>
</label>
<input type="tel" class="form-control" id="phone" name="phone" value="{{ user.phone|default:'' }}" placeholder="+966 5X XXX XXXX">
<small class="form-text text-muted">{% trans "Required to receive SMS notifications" %}</small>
</div>
<div class="col-12 mt-4">
<button type="submit" class="btn btn-info">
<i class="fas fa-save me-2"></i>{% trans "Save Preferences" %}
</button>
</div>
</div>
</form>
</div>
<div class="col-lg-4">
<div class="card bg-light">
<div class="card-body">
<h6 class="card-title">
<i class="fas fa-info-circle text-info me-2"></i>{% trans "Notification Tips" %}
</h6>
<p class="small text-muted mb-3">
{% trans "Configure how you receive notifications to stay informed without being overwhelmed." %}
</p>
<ul class="list-unstyled small">
<li class="mb-2">
<i class="fas fa-envelope text-primary me-2"></i>
{% trans "Email is best for detailed information" %}
</li>
<li class="mb-2">
<i class="fas fa-mobile-alt text-success me-2"></i>
{% trans "SMS is best for urgent alerts" %}
</li>
<li class="mb-2">
<i class="fas fa-bell text-warning me-2"></i>
{% trans "In-app notifications are always enabled" %}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Security Tab -->
<div class="tab-pane fade" id="security" role="tabpanel">
<div class="row">
<div class="col-lg-8">
<h5 class="mb-4">
<i class="fas fa-shield-alt text-warning me-2"></i>{% trans "Security Settings" %}
</h5>
<form method="post">
{% csrf_token %}
<input type="hidden" name="form_type" value="password">
<div class="card">
<div class="card-body">
<div class="row g-3">
<div class="col-12">
<label for="current_password" class="form-label">{% trans "Current Password" %}</label>
<input type="password" class="form-control" id="current_password" name="current_password" required>
</div>
<div class="col-md-6">
<label for="new_password" class="form-label">{% trans "New Password" %}</label>
<input type="password" class="form-control" id="new_password" name="new_password" required minlength="8">
<small class="form-text text-muted">{% trans "Minimum 8 characters" %}</small>
</div>
<div class="col-md-6">
<label for="confirm_password" class="form-label">{% trans "Confirm New Password" %}</label>
<input type="password" class="form-control" id="confirm_password" name="confirm_password" required minlength="8">
</div>
<div class="col-12 mt-4">
<button type="submit" class="btn btn-warning text-dark">
<i class="fas fa-key me-2"></i>{% trans "Change Password" %}
</button>
</div>
</div>
</div>
</div>
</form>
<div class="card bg-light mt-4">
<div class="card-body">
<h6 class="card-title">
<i class="fas fa-history text-secondary me-2"></i>{% trans "Password History" %}
</h6>
<p class="small text-muted mb-0">
<i class="fas fa-clock me-1"></i>
{% trans "Last password change:" %} {% if user.password %}{% trans "Recently" %}{% else %}{% trans "Never" %}{% endif %}
</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card bg-light">
<div class="card-body">
<h6 class="card-title">
<i class="fas fa-info-circle text-info me-2"></i>{% trans "Security Tips" %}
</h6>
<ul class="list-unstyled small">
<li class="mb-2">
<i class="fas fa-check text-success me-2"></i>
{% trans "Use strong passwords with letters, numbers, and symbols" %}
</li>
<li class="mb-2">
<i class="fas fa-check text-success me-2"></i>
{% trans "Don't reuse passwords from other sites" %}
</li>
<li class="mb-2">
<i class="fas fa-check text-success me-2"></i>
{% trans "Change your password regularly" %}
</li>
<li class="mb-2">
<i class="fas fa-check text-success me-2"></i>
{% trans "Never share your password with anyone" %}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Account Tab -->
<div class="tab-pane fade" id="account" role="tabpanel">
<div class="row">
<div class="col-lg-8">
<h5 class="mb-4">
<i class="fas fa-info-circle text-secondary me-2"></i>{% trans "Account Information" %}
</h5>
<div class="card">
<div class="card-body">
<table class="table table-borderless">
<tbody>
<tr>
<td class="text-muted" style="width: 200px;">
<i class="fas fa-user me-2"></i>{% trans "Full Name" %}
</td>
<td><strong>{{ user.get_full_name }}</strong></td>
</tr>
<tr>
<td class="text-muted">
<i class="fas fa-envelope me-2"></i>{% trans "Email" %}
</td>
<td><strong>{{ user.email }}</strong></td>
</tr>
<tr>
<td class="text-muted">
<i class="fas fa-calendar me-2"></i>{% trans "Member Since" %}
</td>
<td><strong>{{ user.date_joined|date:"F d, Y" }}</strong></td>
</tr>
<tr>
<td class="text-muted">
<i class="fas fa-hospital me-2"></i>{% trans "Hospital" %}
</td>
<td><strong>{% if user.hospital %}{{ user.hospital.name }}{% else %}{% trans "Not assigned" %}{% endif %}</strong></td>
</tr>
<tr>
<td class="text-muted">
<i class="fas fa-building me-2"></i>{% trans "Department" %}
</td>
<td><strong>{% if user.department %}{{ user.department.name }}{% else %}{% trans "Not assigned" %}{% endif %}</strong></td>
</tr>
<tr>
<td class="text-muted">
<i class="fas fa-id-badge me-2"></i>{% trans "Employee ID" %}
</td>
<td><strong>{{ user.employee_id|default:"N/A" }}</strong></td>
</tr>
<tr>
<td class="text-muted">
<i class="fas fa-user-tie me-2"></i>{% trans "Role" %}
</td>
<td>
{% if user.is_px_admin %}
<span class="badge bg-primary">{% trans "PX Admin" %}</span>
{% elif user.is_hospital_admin %}
<span class="badge bg-success">{% trans "Hospital Admin" %}</span>
{% elif user.is_department_head %}
<span class="badge bg-info">{% trans "Department Head" %}</span>
{% else %}
<span class="badge bg-secondary">{% trans "Staff" %}</span>
{% endif %}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card bg-light">
<div class="card-body">
<h6 class="card-title">
<i class="fas fa-info-circle text-info me-2"></i>{% trans "Account Info" %}
</h6>
<p class="small text-muted">
{% 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>
</div>
<!-- SLA Configuration Tab (Admins only) -->
{% if user.is_px_admin or user.is_hospital_admin %}
<div class="tab-pane fade" id="sla" role="tabpanel">
<div class="row">
<div class="col-12">
<h5 class="mb-4">
<i class="fas fa-clock text-success me-2"></i>{% trans "SLA Configuration" %}
</h5>
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
{% trans "Configure Service Level Agreements, escalation rules, and complaint thresholds for your organization." %}
</div>
<div class="row g-4">
<!-- SLA Configurations -->
<div class="col-md-4">
<a href="{% url 'complaints:sla_config_list' %}" class="card text-decoration-none text-dark h-100">
<div class="card-body text-center py-4">
<i class="fas fa-clock fa-3x text-primary mb-3"></i>
<h5 class="card-title">{% trans "SLA Configurations" %}</h5>
<p class="card-text text-muted small">{% trans "Manage deadline settings for complaint resolution" %}</p>
<span class="btn btn-outline-primary btn-sm">{% trans "Manage" %}</span>
</div>
</a>
</div>
<!-- Escalation Rules -->
<div class="col-md-4">
<a href="{% url 'complaints:escalation_rule_list' %}" class="card text-decoration-none text-dark h-100">
<div class="card-body text-center py-4">
<i class="fas fa-arrow-up fa-3x text-warning mb-3"></i>
<h5 class="card-title">{% trans "Escalation Rules" %}</h5>
<p class="card-text text-muted small">{% trans "Configure automatic escalation when deadlines are exceeded" %}</p>
<span class="btn btn-outline-warning btn-sm">{% trans "Configure" %}</span>
</div>
</a>
</div>
<!-- Complaint Thresholds -->
<div class="col-md-4">
<a href="{% url 'complaints:complaint_threshold_list' %}" class="card text-decoration-none text-dark h-100">
<div class="card-body text-center py-4">
<i class="fas fa-chart-line fa-3x text-info mb-3"></i>
<h5 class="card-title">{% trans "Complaint Thresholds" %}</h5>
<p class="card-text text-muted small">{% trans "Set alert thresholds for complaint volume monitoring" %}</p>
<span class="btn btn-outline-info btn-sm">{% trans "Setup" %}</span>
</div>
</a>
</div>
</div>
<div class="card bg-light mt-4">
<div class="card-body">
<h6 class="card-title">
<i class="fas fa-info-circle text-info me-2"></i>{% trans "SLA Best Practices" %}
</h6>
<ul class="list-unstyled small">
<li class="mb-2">
<i class="fas fa-check text-success me-2"></i>
{% trans "Set realistic deadlines based on complaint severity" %}
</li>
<li class="mb-2">
<i class="fas fa-check text-success me-2"></i>
{% trans "Configure multiple escalation levels for smooth handoffs" %}
</li>
<li class="mb-2">
<i class="fas fa-check text-success me-2"></i>
{% trans "Monitor thresholds to identify trends and issues early" %}
</li>
<li class="mb-2">
<i class="fas fa-check text-success me-2"></i>
{% trans "Review and adjust SLA settings regularly" %}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<script>
// Password confirmation validation
document.addEventListener('DOMContentLoaded', function() {
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!" %}');
}
});
}
// Store active tab in localStorage
const tabLinks = document.querySelectorAll('#settingsTabs button[data-bs-toggle="tab"]');
const savedTab = localStorage.getItem('activeSettingsTab');
if (savedTab) {
const tabButton = document.querySelector(`#settingsTabs button[data-bs-target="${savedTab}"]`);
if (tabButton) {
const tabInstance = new bootstrap.Tab(tabButton);
tabInstance.show();
}
}
tabLinks.forEach(tabLink => {
tabLink.addEventListener('shown.bs.tab', function(e) {
const target = e.target.getAttribute('data-bs-target');
localStorage.setItem('activeSettingsTab', target);
});
});
});
</script>
{% endblock %}