171 lines
8.9 KiB
HTML
171 lines
8.9 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Preview Onboarding" %}{% 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-indigo-500 rounded-2xl shadow-lg shadow-blue-200">
|
|
<i data-lucide="eye" 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 "Preview Onboarding Flow" %}
|
|
</h1>
|
|
<p class="text-slate">
|
|
{% trans "Preview the staff onboarding experience by role" %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Role Selection -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 md:p-8 mb-8">
|
|
<h2 class="text-xl font-bold text-navy mb-6 flex items-center gap-2">
|
|
<i data-lucide="user-cog" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Select Role to Preview" %}
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{% for role in available_roles %}
|
|
<a href="{% url 'accounts:preview-wizard-role' role.name %}"
|
|
class="group p-6 border-2 {% if selected_role == role %}border-blue bg-blue-50{% else %}border-blue-100 hover:border-blue{% endif %} rounded-2xl transition-all hover:shadow-lg hover:-translate-y-1">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-xl flex items-center justify-center group-hover:shadow-lg transition">
|
|
<i data-lucide="user" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<h3 class="font-bold text-navy">{{ role.name }}</h3>
|
|
</div>
|
|
<p class="text-sm text-slate">{{ role.description|truncatechars:80|default:"Preview the onboarding flow for this role" }}</p>
|
|
</a>
|
|
{% empty %}
|
|
<div class="col-span-full text-center py-12">
|
|
<i data-lucide="user-x" class="w-12 h-12 text-blue-200 mx-auto mb-3"></i>
|
|
<p class="text-slate">{% trans "No roles available" %}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
{% if selected_role %}
|
|
<!-- Preview Content for Selected Role -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
<!-- Content Sections -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
|
|
<div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
|
|
<h3 class="font-bold text-navy flex items-center gap-2">
|
|
<i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Content Sections" %}
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
{% if preview_content %}
|
|
<div class="space-y-4">
|
|
{% for content in preview_content %}
|
|
<div class="p-4 border-2 border-blue-100 rounded-xl hover:border-blue hover:bg-blue-50/50 transition">
|
|
<div class="flex items-start gap-3">
|
|
<div class="w-10 h-10 bg-gradient-to-br from-blue to-indigo-500 rounded-lg flex items-center justify-center flex-shrink-0">
|
|
<i data-lucide="file-check" class="w-5 h-5 text-white"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h4 class="font-bold text-navy mb-1">{{ content.title_en }}</h4>
|
|
<p class="text-sm text-slate">{{ content.description_en|truncatewords:15 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-8">
|
|
<i data-lucide="file-text" class="w-12 h-12 text-blue-200 mx-auto mb-3"></i>
|
|
<p class="text-slate">{% trans "No content sections for this role" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Checklist Items -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden">
|
|
<div class="px-6 py-5 border-b border-blue-100 bg-gradient-to-r from-blue-50 to-transparent">
|
|
<h3 class="font-bold text-navy flex items-center gap-2">
|
|
<i data-lucide="list-checks" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Checklist Items" %}
|
|
</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
{% if preview_checklist %}
|
|
<div class="space-y-3">
|
|
{% for item in preview_checklist %}
|
|
<div class="flex items-center gap-3 p-4 border-2 border-blue-100 rounded-xl hover:border-blue hover:bg-blue-50/50 transition">
|
|
<div class="w-6 h-6 border-2 border-blue-300 rounded flex items-center justify-center flex-shrink-0">
|
|
{% if item.is_required %}
|
|
<i data-lucide="asterisk" class="w-3 h-3 text-blue-500"></i>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="font-bold text-navy text-sm">{{ item.text_en }}</p>
|
|
{% if item.is_required %}
|
|
<span class="text-xs text-red-600 font-medium">{% trans "Required" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-8">
|
|
<i data-lucide="list-checks" class="w-12 h-12 text-blue-200 mx-auto mb-3"></i>
|
|
<p class="text-slate">{% trans "No checklist items for this role" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start Full Preview -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-2xl p-8 text-center">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue to-navy rounded-full mb-6 shadow-lg shadow-blue-200">
|
|
<i data-lucide="play" class="w-10 h-10 text-white"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-navy mb-2">{% trans "Start Full Preview" %}</h2>
|
|
<p class="text-slate mb-6 max-w-2xl mx-auto">
|
|
{% trans "Experience the complete onboarding flow from start to finish as a" %} <strong>{{ selected_role.name }}</strong> {% trans "user" %}
|
|
</p>
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<a href="{% url 'accounts:onboarding-welcome' %}" class="inline-flex items-center bg-gradient-to-r from-blue to-navy text-white px-8 py-4 rounded-xl font-bold hover:from-navy hover:to-blue transition shadow-lg shadow-blue-200">
|
|
<i data-lucide="rocket" class="w-5 h-5 mr-2"></i>
|
|
{% trans "Begin Preview" %}
|
|
<i data-lucide="arrow-right" class="w-5 h-5 ml-2"></i>
|
|
</a>
|
|
<a href="{% url 'accounts:onboarding-step-checklist' %}" class="inline-flex items-center bg-white border-2 border-blue-200 text-navy px-8 py-4 rounded-xl font-bold hover:bg-blue-50 transition">
|
|
<i data-lucide="list-checks" class="w-5 h-5 mr-2"></i>
|
|
{% trans "View Checklist" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<!-- No Role Selected -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-200 rounded-2xl p-12 text-center">
|
|
<div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full mb-6">
|
|
<i data-lucide="hand" class="w-10 h-10 text-blue-500"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-navy mb-2">{% trans "Select a Role" %}</h2>
|
|
<p class="text-slate max-w-xl mx-auto">
|
|
{% trans "Choose a role from the options above to preview the onboarding experience for that specific role" %}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %}
|