395 lines
23 KiB
HTML
395 lines
23 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;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Back Button -->
|
|
<div class="mb-6">
|
|
<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 border border-slate-200 rounded-xl text-slate hover:text-navy hover:bg-light transition text-sm font-semibold">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back" %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Breadcrumb & Header -->
|
|
<header class="mb-6">
|
|
<div class="flex items-center gap-2 text-sm text-slate mb-2">
|
|
<a href="{% url 'organizations:staff_list' %}">{% trans "Staff" %}</a>
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
<span class="font-bold text-navy">
|
|
{% if form.instance.pk %}{% trans "Edit Staff" %}{% else %}{% trans "Add New Staff" %}{% endif %}
|
|
</span>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-navy">
|
|
{% if form.instance.pk %}{% trans "Edit Staff" %}{% else %}{% trans "Add New Staff" %}{% endif %}
|
|
</h1>
|
|
</header>
|
|
|
|
<!-- 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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<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-2 gap-6">
|
|
<div>
|
|
<label for="{{ form.hospital.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
|
|
{% trans "Hospital" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<select name="{{ form.hospital.name }}" id="{{ form.hospital.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 Hospital" %}</option>
|
|
{% for choice in form.hospital.field.choices %}
|
|
{% if choice.0 %}
|
|
<option value="{{ choice.0 }}" {% if form.hospital.value == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
{% if form.hospital.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.hospital.errors.0 }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<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="bg-gradient-to-r from-navy to-blue text-white px-8 py-3 rounded-xl hover:opacity-90 transition font-semibold flex items-center gap-2 shadow-md">
|
|
<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="px-8 py-3 border border-slate-200 rounded-xl text-slate hover:bg-light transition font-semibold">
|
|
{% 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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<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="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<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 %}
|