161 lines
9.2 KiB
HTML
161 lines
9.2 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Bulk Invite" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="flex items-center justify-center w-14 h-14 bg-gradient-to-br from-blue to-navy rounded-2xl shadow-lg shadow-blue-200">
|
|
<i data-lucide="mail-plus" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<div>
|
|
<a href="{% url 'accounts:acknowledgement-dashboard' %}" class="inline-flex items-center text-blue hover:text-navy mb-2 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-navy">
|
|
{% trans "Send Bulk Invitations" %}
|
|
</h1>
|
|
<p class="text-slate">
|
|
{% trans "Invite multiple staff members to complete onboarding" %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</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-blue-100 p-6 md:p-8">
|
|
<form method="post" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
|
|
<div class="mb-8">
|
|
<label class="block text-navy font-bold mb-3">
|
|
{% trans "Upload CSV File" %}
|
|
</label>
|
|
<div class="border-2 border-dashed border-blue-200 rounded-2xl p-8 text-center hover:border-blue transition cursor-pointer bg-blue-50/50">
|
|
<input type="file" name="csv_file" accept=".csv" class="hidden" id="csv_file">
|
|
<label for="csv_file" class="cursor-pointer">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-blue to-navy rounded-2xl flex items-center justify-center mb-4 mx-auto">
|
|
<i data-lucide="upload-cloud" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<p class="text-navy font-bold mb-1">{% trans "Click to upload CSV file" %}</p>
|
|
<p class="text-slate text-sm">{% trans "or drag and drop" %}</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="mt-4 bg-blue-50 border border-blue-200 rounded-xl p-4">
|
|
<div class="flex items-start gap-3">
|
|
<i data-lucide="info" class="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0"></i>
|
|
<div>
|
|
<p class="text-sm font-bold text-navy mb-1">{% trans "CSV Format Requirements" %}</p>
|
|
<p class="text-xs text-slate">{% trans "Required columns: email, first_name, last_name, role" %}</p>
|
|
<p class="text-xs text-slate">{% trans "Optional columns: hospital_id, department" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-8">
|
|
<label class="block text-navy font-bold mb-3">
|
|
{% trans "Or Enter Email Addresses" %}
|
|
</label>
|
|
<textarea name="emails" rows="5" class="w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition" placeholder="email1@example.com email2@example.com email3@example.com"></textarea>
|
|
<p class="text-xs text-slate mt-2">{% trans "Enter one email address per line" %}</p>
|
|
</div>
|
|
|
|
<div class="mb-8">
|
|
<label class="block text-navy font-bold mb-3">
|
|
{% trans "Custom Message (Optional)" %}
|
|
</label>
|
|
<textarea name="custom_message" rows="3" class="w-full px-4 py-3 border-2 border-blue-100 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-blue focus:border-transparent transition" 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-blue to-navy text-white px-6 py-4 rounded-xl font-bold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200 flex items-center justify-center gap-2">
|
|
<i data-lucide="send" class="w-5 h-5"></i>
|
|
{% trans "Send Invitations" %}
|
|
</button>
|
|
<a href="{% url 'accounts:acknowledgement-dashboard' %}" class="px-6 py-4 bg-slate-100 text-slate-700 rounded-xl font-bold hover:bg-slate-200 transition">
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Sidebar -->
|
|
<div class="space-y-6">
|
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-2xl p-6">
|
|
<h3 class="font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="help-circle" class="w-5 h-5 text-blue"></i>
|
|
{% trans "How it works" %}
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex items-center justify-center w-8 h-8 bg-gradient-to-br from-blue to-navy rounded-lg flex-shrink-0">
|
|
<span class="text-white font-bold text-sm">1</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-bold text-navy">{% trans "Prepare CSV or emails" %}</p>
|
|
<p class="text-xs text-slate">{% trans "Upload a CSV file or enter email addresses" %}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex items-center justify-center w-8 h-8 bg-gradient-to-br from-blue to-navy rounded-lg flex-shrink-0">
|
|
<span class="text-white font-bold text-sm">2</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-bold text-navy">{% trans "Review & send" %}</p>
|
|
<p class="text-xs text-slate">{% trans "We'll send personalized invitations" %}</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start gap-3">
|
|
<div class="flex items-center justify-center w-8 h-8 bg-gradient-to-br from-blue to-navy rounded-lg flex-shrink-0">
|
|
<span class="text-white font-bold text-sm">3</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-bold text-navy">{% trans "Track progress" %}</p>
|
|
<p class="text-xs text-slate">{% trans "Monitor completion from the dashboard" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white border border-blue-100 rounded-2xl p-6">
|
|
<h4 class="font-bold text-navy mb-3">{% trans "Quick Tips" %}</h4>
|
|
<ul class="space-y-2 text-sm text-slate">
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>{% trans "Use CSV for large batches (50+ users)" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>{% trans "Manual entry works well for small groups" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>{% trans "Add a custom message for personalization" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0"></i>
|
|
<span>{% trans "Double-check email addresses before sending" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %}
|