118 lines
6.1 KiB
HTML
118 lines
6.1 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Bulk Invite" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="p-6 md:p-8">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<a href="{% url 'accounts:onboarding_dashboard' %}" class="inline-flex items-center text-navy hover:text-navy mb-4 font-medium">
|
|
<i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
|
|
{% trans "Back to Dashboard" %}
|
|
</a>
|
|
<h1 class="text-3xl font-bold text-gray-800 mb-2">
|
|
{% trans "Send Bulk Invitations" %}
|
|
</h1>
|
|
<p class="text-gray-500">
|
|
{% trans "Invite multiple staff members to complete onboarding" %}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<!-- Form -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-8">
|
|
<form method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 font-medium mb-2">
|
|
{% trans "Upload CSV File" %}
|
|
</label>
|
|
<div class="border-2 border-dashed border-gray-200 rounded-2xl p-8 text-center hover:border-blue transition cursor-pointer">
|
|
<input type="file" name="csv_file" accept=".csv" class="hidden" id="csv_file">
|
|
<label for="csv_file" class="cursor-pointer">
|
|
<i data-lucide="upload-cloud" class="w-12 h-12 text-gray-400 mx-auto mb-3"></i>
|
|
<p class="text-gray-600 font-medium mb-1">{% trans "Click to upload CSV file" %}</p>
|
|
<p class="text-gray-400 text-sm">{% trans "or drag and drop" %}</p>
|
|
</label>
|
|
</div>
|
|
<p class="text-sm text-gray-400 mt-2">
|
|
<i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
|
|
{% trans "CSV should contain columns: email, name, department" %}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 font-medium mb-2">
|
|
{% trans "Or Enter Email Addresses" %}
|
|
</label>
|
|
<textarea name="emails" rows="5" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent" placeholder="email1@example.com email2@example.com email3@example.com"></textarea>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-gray-700 font-medium mb-2">
|
|
{% trans "Custom Message (Optional)" %}
|
|
</label>
|
|
<textarea name="custom_message" rows="3" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent" placeholder="{% trans 'Add a personal note to your invitation emails...' %}"></textarea>
|
|
</div>
|
|
|
|
<div class="flex gap-4">
|
|
<button type="submit" class="flex-1 bg-gradient-to-r from-navy to-orange-500 text-white px-6 py-3 rounded-xl font-bold hover:from-navy hover:to-orange-600 transition shadow-lg shadow-blue-200">
|
|
<i data-lucide="send" class="w-5 h-5 inline mr-2"></i>
|
|
{% trans "Send Invitations" %}
|
|
</button>
|
|
<a href="{% url 'accounts:onboarding_dashboard' %}" class="px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-bold hover:bg-gray-200 transition">
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Sidebar -->
|
|
<div class="space-y-6">
|
|
<div class="bg-blue-50 border border-blue-200 rounded-2xl p-6">
|
|
<h3 class="font-bold text-blue-800 mb-3 flex items-center gap-2">
|
|
<i data-lucide="help-circle" class="w-5 h-5"></i>
|
|
{% trans "How it works" %}
|
|
</h3>
|
|
<ol class="text-blue-700 text-sm space-y-2 list-decimal list-inside">
|
|
<li>{% trans "Upload a CSV file or enter emails manually" %}</li>
|
|
<li>{% trans "Preview and verify the invitation list" %}</li>
|
|
<li>{% trans "Send invitations to all staff members" %}</li>
|
|
<li>{% trans "Track their onboarding progress" %}</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="bg-light border border-blue-200 rounded-2xl p-6">
|
|
<h3 class="font-bold text-navy mb-3 flex items-center gap-2">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5"></i>
|
|
{% trans "Important Notes" %}
|
|
</h3>
|
|
<ul class="text-navy text-sm space-y-2">
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
|
|
<span>{% trans "Each email will receive a unique activation link" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
|
|
<span>{% trans "Links expire after 7 days" %}</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
|
|
<span>{% trans "Staff must complete onboarding to access the system" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |