479 lines
25 KiB
HTML
479 lines
25 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% if form.instance.pk %}{% trans "Edit Staff" %}{% else %}{% trans "Add New Staff" %}{% endif %} - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
#staffForm input[type="text"],
|
|
#staffForm input[type="email"],
|
|
#staffForm input[type="tel"],
|
|
#staffForm select,
|
|
#staffForm textarea {
|
|
@apply w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm;
|
|
}
|
|
#staffForm textarea {
|
|
@apply resize-none;
|
|
}
|
|
#staffForm input[type="checkbox"] {
|
|
@apply w-5 h-5 text-navy border-slate-300 rounded focus:ring-navy;
|
|
}
|
|
|
|
.page-header-gradient {
|
|
background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
|
|
color: white;
|
|
padding: 1.5rem 2rem;
|
|
border-radius: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
|
|
}
|
|
|
|
.form-section {
|
|
background: #fff;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 1rem;
|
|
padding: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.form-section:hover {
|
|
border-color: #005696;
|
|
box-shadow: 0 4px 12px rgba(0, 86, 150, 0.1);
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: #005696;
|
|
color: white;
|
|
border-radius: 0.75rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.btn-primary:hover {
|
|
background: #007bbd;
|
|
}
|
|
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: white;
|
|
color: #64748b;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 0.75rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.btn-secondary:hover {
|
|
background: #f1f5f9;
|
|
border-color: #005696;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Gradient Header -->
|
|
<div class="page-header-gradient">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<a href="{% if form.instance.pk %}{% url 'organizations:staff_detail' form.instance.pk %}{% else %}{% url 'organizations:staff_list' %}{% endif %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm rounded-xl text-white hover:bg-white/30 transition text-sm font-semibold">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back" %}
|
|
</a>
|
|
</div>
|
|
<h1 class="text-2xl font-bold">
|
|
{% if form.instance.pk %}{% trans "Edit Staff" %}{% else %}{% trans "Add New Staff" %}{% endif %}
|
|
</h1>
|
|
<p class="text-white/80 mt-1">
|
|
{% if form.instance.pk %}{% trans "Update staff member information" %}{% else %}{% trans "Create a new staff member record" %}{% endif %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Main Content Grid -->
|
|
<div class="grid grid-cols-12 gap-8">
|
|
<!-- Left Column (Form) -->
|
|
<div class="col-span-8">
|
|
<form method="post" id="staffForm" class="space-y-6">
|
|
{% csrf_token %}
|
|
|
|
<!-- Personal Information -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
|
|
<i data-lucide="user" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Personal Information" %}
|
|
</h3>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="{{ form.first_name.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "First Name" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="{{ form.first_name.name }}" id="{{ form.first_name.id_for_label }}"
|
|
value="{{ form.first_name.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
|
|
required>
|
|
{% if form.first_name.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.first_name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.last_name.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Last Name" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="{{ form.last_name.name }}" id="{{ form.last_name.id_for_label }}"
|
|
value="{{ form.last_name.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
|
|
required>
|
|
{% if form.last_name.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.last_name.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.first_name_ar.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "First Name (Arabic)" %}
|
|
</label>
|
|
<input type="text" name="{{ form.first_name_ar.name }}" id="{{ form.first_name_ar.id_for_label }}"
|
|
value="{{ form.first_name_ar.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
|
|
dir="rtl">
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.last_name_ar.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Last Name (Arabic)" %}
|
|
</label>
|
|
<input type="text" name="{{ form.last_name_ar.name }}" id="{{ form.last_name_ar.id_for_label }}"
|
|
value="{{ form.last_name_ar.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
|
|
dir="rtl">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Role Information -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
|
|
<i data-lucide="briefcase" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Role Information" %}
|
|
</h3>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="{{ form.staff_type.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Staff Type" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select name="{{ form.staff_type.name }}" id="{{ form.staff_type.id_for_label }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm" required>
|
|
<option value="">{% trans "Select Type" %}</option>
|
|
{% for choice in form.staff_type.field.choices %}
|
|
<option value="{{ choice.0 }}" {% if form.staff_type.value == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% if form.staff_type.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.staff_type.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.job_title.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Job Title" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="{{ form.job_title.name }}" id="{{ form.job_title.id_for_label }}"
|
|
value="{{ form.job_title.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
|
|
required>
|
|
{% if form.job_title.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.job_title.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Professional Information -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
|
|
<i data-lucide="id-card" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Professional Information" %}
|
|
</h3>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="{{ form.employee_id.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Employee ID" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text" name="{{ form.employee_id.name }}" id="{{ form.employee_id.id_for_label }}"
|
|
value="{{ form.employee_id.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
|
|
required>
|
|
{% if form.employee_id.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.employee_id.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label for="{{ form.email.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Email" %}
|
|
</label>
|
|
<input type="email" name="{{ form.email.name }}" id="{{ form.email.id_for_label }}"
|
|
value="{{ form.email.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
|
|
{% if form.email.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.email.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
<p class="text-slate text-xs mt-1">{% trans "Required for user account creation" %}</p>
|
|
</div>
|
|
{% if form.license_number %}
|
|
<div>
|
|
<label for="{{ form.license_number.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "License Number" %}
|
|
</label>
|
|
<input type="text" name="{{ form.license_number.name }}" id="{{ form.license_number.id_for_label }}"
|
|
value="{{ form.license_number.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
|
|
{% if form.license_number.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.license_number.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% if form.specialization %}
|
|
<div>
|
|
<label for="{{ form.specialization.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Specialization" %}
|
|
</label>
|
|
<input type="text" name="{{ form.specialization.name }}" id="{{ form.specialization.id_for_label }}"
|
|
value="{{ form.specialization.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
|
|
{% if form.specialization.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.specialization.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<label for="{{ form.phone.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Phone" %}
|
|
</label>
|
|
<input type="tel" name="{{ form.phone.name }}" id="{{ form.phone.id_for_label }}"
|
|
value="{{ form.phone.value|default:'' }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Organization -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
|
|
<i data-lucide="building-2" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Organization" %}
|
|
</h3>
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<!-- Hospital (hidden, auto-set by HospitalFieldMixin) -->
|
|
{{ form.hospital }}
|
|
|
|
<!-- Department -->
|
|
<div>
|
|
<label for="{{ form.department.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Department" %}
|
|
</label>
|
|
<select name="{{ form.department.name }}" id="{{ form.department.id_for_label }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
|
|
<option value="">{% trans "Select Department" %}</option>
|
|
{% for choice in form.department.field.choices %}
|
|
{% if choice.0 %}
|
|
<option value="{{ choice.0 }}" {% if form.department.value == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
{% if form.department.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.department.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Status -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
|
|
<i data-lucide="toggle-left" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Status" %}
|
|
</h3>
|
|
<div class="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="{{ form.status.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Status" %}
|
|
</label>
|
|
<select name="{{ form.status.name }}" id="{{ form.status.id_for_label }}"
|
|
class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
|
|
{% for choice in form.status.field.choices %}
|
|
<option value="{{ choice.0 }}" {% if form.status.value == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
{% if form.status.errors %}
|
|
<div class="text-red-500 text-sm mt-1 flex items-center gap-1">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i>
|
|
{{ form.status.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex items-center gap-3 p-4 bg-light/30 rounded-xl">
|
|
<input type="checkbox" name="{{ form.is_head.name }}" id="{{ form.is_head.id_for_label }}"
|
|
class="w-5 h-5 text-navy border-slate-300 rounded focus:ring-navy"
|
|
{% if form.is_head.value %}checked{% endif %}>
|
|
<div>
|
|
<label for="{{ form.is_head.id_for_label }}" class="text-sm font-semibold text-navy block">
|
|
{% trans "Department Head" %}
|
|
</label>
|
|
<p class="text-xs text-slate">{% trans "Mark as head of department" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center gap-4 pt-4">
|
|
<button type="submit" class="btn-primary">
|
|
<i data-lucide="save" class="w-5 h-5"></i>
|
|
{% trans "Save" %}
|
|
</button>
|
|
<a href="{% if form.instance.pk %}{% url 'organizations:staff_detail' form.instance.pk %}{% else %}{% url 'organizations:staff_list' %}{% endif %}"
|
|
class="btn-secondary">
|
|
<i data-lucide="x" class="w-5 h-5"></i>
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Right Column (Sidebar) -->
|
|
<div class="col-span-4 space-y-6">
|
|
|
|
<!-- Create User Account -->
|
|
{% if not form.instance.pk or not form.instance.user %}
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-4 text-sm flex items-center gap-2">
|
|
<i data-lucide="user-plus" class="w-4 h-4 text-blue"></i>
|
|
{% trans "User Account" %}
|
|
</h3>
|
|
<div class="flex items-start gap-3 p-4 bg-light/30 rounded-xl">
|
|
<input type="checkbox" name="create_user" id="create_user"
|
|
class="w-5 h-5 mt-0.5 text-navy border-slate-300 rounded focus:ring-navy">
|
|
<div>
|
|
<label for="create_user" class="text-sm font-semibold text-navy block">
|
|
{% trans "Create user account" %}
|
|
</label>
|
|
<p class="text-xs text-slate mt-1">
|
|
{% trans "Automatically create a login account. Credentials will be emailed to the staff member." %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 p-3 bg-blue-50 border border-blue-100 rounded-lg">
|
|
<p class="text-blue-700 text-xs flex items-start gap-2">
|
|
<i data-lucide="info" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
|
|
{% trans "Email address is required to create a user account." %}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<!-- Tips -->
|
|
<section class="form-section">
|
|
<h3 class="font-bold text-navy mb-4 text-sm flex items-center gap-2">
|
|
<i data-lucide="lightbulb" class="w-4 h-4 text-blue"></i>
|
|
{% trans "Tips" %}
|
|
</h3>
|
|
<ul class="space-y-3 text-sm text-slate">
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
|
|
<span>{% trans "All fields marked with * are required" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
|
|
<span>{% trans "Employee ID must be unique" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
|
|
<span>{% trans "Email is required for user account creation" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
|
|
<span>{% trans "License number is required for physicians" %}</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const hospitalField = document.querySelector('input[name="hospital"]');
|
|
// Use the correct ID generated by Django form (id_department)
|
|
const departmentSelect = document.getElementById('id_department');
|
|
|
|
// Only proceed if both fields exist on the page
|
|
if (!departmentSelect) {
|
|
return;
|
|
}
|
|
|
|
// Function to load departments based on hospital
|
|
function loadDepartments(hospitalId) {
|
|
if (!hospitalId) {
|
|
departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
|
|
return;
|
|
}
|
|
|
|
departmentSelect.innerHTML = '<option value="">{% trans "Loading..." %}</option>';
|
|
|
|
fetch('/organizations/api/departments/?hospital=' + hospitalId)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const results = data.results || data;
|
|
departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
|
|
|
|
results.forEach(dept => {
|
|
const option = document.createElement('option');
|
|
option.value = dept.id;
|
|
option.textContent = dept.name;
|
|
departmentSelect.appendChild(option);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading departments:', error);
|
|
departmentSelect.innerHTML = '<option value="">{% trans "Error loading departments" %}</option>';
|
|
});
|
|
}
|
|
|
|
// If hospital is hidden, get initial hospital value and load departments
|
|
if (hospitalField && hospitalField.type === 'hidden' && hospitalField.value) {
|
|
loadDepartments(hospitalField.value);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|