339 lines
15 KiB
HTML
339 lines
15 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Provisional Users" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<!-- Page Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h1 class="h3 mb-2">
|
|
<i class="bi bi-people me-2"></i>
|
|
{% trans "Provisional Users Management" %}
|
|
</h1>
|
|
<p class="text-muted mb-0">
|
|
{% trans "Manage and monitor provisional user onboarding" %}
|
|
</p>
|
|
</div>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createUserModal">
|
|
<i class="bi bi-plus me-2"></i>
|
|
{% trans "Create Provisional User" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-4">
|
|
<div class="card border-primary mb-3">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi bi-clock fa-2x text-primary"></i>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="text-muted mb-1">{% trans "Total Provisional" %}</h6>
|
|
<h3 class="mb-0">{{ total_count }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card border-success mb-3">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi bi-check-circle fa-2x text-success"></i>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="text-muted mb-1">{% trans "Completed" %}</h6>
|
|
<h3 class="mb-0">{{ completed_count }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card border-warning mb-3">
|
|
<div class="card-body">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<i class="bi bi-hourglass-split fa-2x text-warning"></i>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="text-muted mb-1">{% trans "In Progress" %}</h6>
|
|
<h3 class="mb-0">{{ in_progress_count }}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users List -->
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-white py-3">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">
|
|
<i class="bi bi-list me-2"></i>
|
|
{% trans "Provisional Users List" %}
|
|
</h5>
|
|
<div class="input-group" style="max-width: 300px;">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="{% trans 'Search users...' %}">
|
|
<button class="btn btn-outline-secondary" type="button">
|
|
<i class="bi bi-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0 align-middle" id="usersTable">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>{% trans "User" %}</th>
|
|
<th>{% trans "Hospital" %}</th>
|
|
<th>{% trans "Department" %}</th>
|
|
<th>{% trans "Roles" %}</th>
|
|
<th>{% trans "Status" %}</th>
|
|
<th>{% trans "Created" %}</th>
|
|
<th>{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for user in provisional_users %}
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar-circle bg-primary text-white">
|
|
{{ user.email|first|upper }}
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<h6 class="mb-0">{{ user.email }}</h6>
|
|
<small class="text-muted">{{ user.first_name }} {{ user.last_name }}</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>{{ user.hospital.name|default:"-" }}</td>
|
|
<td>{{ user.department.name|default:"-" }}</td>
|
|
<td>
|
|
{% for group in user.groups.all %}
|
|
<span class="badge bg-secondary me-1">{{ group.name }}</span>
|
|
{% empty %}
|
|
<span class="text-muted">-</span>
|
|
{% endfor %}
|
|
</td>
|
|
<td>
|
|
{% if user.acknowledgement_completed_at %}
|
|
<span class="badge bg-success">
|
|
<i class="bi bi-check me-1"></i>
|
|
{% trans "Completed" %}
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-warning">
|
|
<i class="bi bi-arrow-repeat me-1"></i>
|
|
{% trans "In Progress" %}
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<small>{{ user.created_at|date:"M d, Y" }}</small>
|
|
</td>
|
|
<td>
|
|
|
|
<a href="{% url 'accounts:provisional-user-progress' user.id %}"
|
|
class="btn btn-sm btn-outline-primary"
|
|
title="{% trans 'View Progress' %}">
|
|
|
|
<i class="bi bi-activity"></i>
|
|
</a>
|
|
<button class="btn btn-sm btn-outline-danger"
|
|
onclick="resendInvitation({{ user.id }})"
|
|
title="{% trans 'Resend Invitation' %}">
|
|
<i class="bi bi-send"></i>
|
|
</button>
|
|
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="7" class="text-center py-5">
|
|
<i class="bi bi-person-x fa-3x text-muted mb-3"></i>
|
|
<p class="text-muted mb-0">
|
|
{% trans "No provisional users found" %}
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create User Modal -->
|
|
<div class="modal fade" id="createUserModal" tabindex="-1" aria-labelledby="createUserModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="createUserModalLabel">
|
|
<i class="bi bi-person-plus me-2"></i>
|
|
{% trans "Create Provisional User" %}
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="email" class="form-label">
|
|
{% trans "Email Address" %}
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<input type="email" class="form-control" id="email" name="email" required>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="phone" class="form-label">{% trans "Phone Number" %}</label>
|
|
<input type="tel" class="form-control" id="phone" name="phone">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="first_name" class="form-label">
|
|
{% trans "First Name" %}
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" class="form-control" id="first_name" name="first_name" required>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="last_name" class="form-label">
|
|
{% trans "Last Name" %}
|
|
<span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" class="form-control" id="last_name" name="last_name" required>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="hospital" class="form-label">{% trans "Hospital" %}</label>
|
|
<select class="form-select" id="hospital" name="hospital">
|
|
<option value="">{% trans "Select Hospital" %}</option>
|
|
{% for hospital in hospitals %}
|
|
<option value="{{ hospital.id }}">{{ hospital.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="department" class="form-label">{% trans "Department" %}</label>
|
|
<select class="form-select" id="department" name="department">
|
|
<option value="">{% trans "Select Department" %}</option>
|
|
{% for department in departments %}
|
|
<option value="{{ department.id }}">{{ department.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">{% trans "Roles" %}</label>
|
|
<div class="row">
|
|
{% for role in roles %}
|
|
<div class="col-md-6 mb-2">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox"
|
|
name="roles" id="role_{{ role.id }}"
|
|
value="{{ role.name }}">
|
|
<label class="form-check-label" for="role_{{ role.id }}">
|
|
{{ role.name }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="bi bi-send me-2"></i>
|
|
{% trans "Create & Send Invitation" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.avatar-circle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 1.2rem;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Search functionality
|
|
document.getElementById('searchInput').addEventListener('keyup', function() {
|
|
const searchValue = this.value.toLowerCase();
|
|
const table = document.getElementById('usersTable');
|
|
const rows = table.getElementsByTagName('tr');
|
|
|
|
for (let i = 1; i < rows.length; i++) {
|
|
const row = rows[i];
|
|
const cells = row.getElementsByTagName('td');
|
|
let found = false;
|
|
|
|
for (let j = 0; j < cells.length; j++) {
|
|
const cellText = cells[j].textContent.toLowerCase();
|
|
if (cellText.includes(searchValue)) {
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
row.style.display = found ? '' : 'none';
|
|
}
|
|
});
|
|
|
|
function resendInvitation(userId) {
|
|
if (confirm('{% trans "Are you sure you want to resend the invitation email?" %}')) {
|
|
fetch(`/accounts/onboarding/provisional/${userId}/resend/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert('{% trans "Invitation sent successfully!" %}');
|
|
} else {
|
|
alert('{% trans "Failed to send invitation." %}');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
alert('{% trans "An error occurred. Please try again." %}');
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|