282 lines
10 KiB
HTML
282 lines
10 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Complaint Templates" %} - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
:root {
|
|
--hh-navy: #005696;
|
|
--hh-blue: #007bbd;
|
|
--hh-light: #eef6fb;
|
|
--hh-slate: #64748b;
|
|
}
|
|
|
|
.page-header-gradient {
|
|
background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
|
|
color: white;
|
|
padding: 1.5rem 2rem;
|
|
border-radius: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
|
|
}
|
|
|
|
.section-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
border: 2px solid #e2e8f0;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.section-card:hover {
|
|
border-color: #005696;
|
|
box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
|
|
}
|
|
|
|
.section-header {
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
background: linear-gradient(to right, #f8fafc, #f1f5f9);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.section-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.section-icon.primary {
|
|
background: linear-gradient(135deg, #005696, #007bbd);
|
|
color: white;
|
|
}
|
|
|
|
.section-icon.secondary {
|
|
background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
|
|
color: #005696;
|
|
}
|
|
|
|
.template-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
border: 2px solid #e2e8f0;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
padding: 1.5rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.template-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
|
|
border-color: #005696;
|
|
}
|
|
|
|
.usage-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
|
|
color: #1e40af;
|
|
}
|
|
|
|
.hh-btn-primary {
|
|
background: linear-gradient(135deg, var(--hh-navy) 0%, var(--hh-blue) 100%);
|
|
color: white;
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 0.75rem;
|
|
font-weight: 600;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.hh-btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 16px rgba(0, 86, 150, 0.3);
|
|
}
|
|
|
|
.hh-btn-secondary {
|
|
background: white;
|
|
color: #475569;
|
|
padding: 0.625rem 1.25rem;
|
|
border-radius: 0.75rem;
|
|
font-weight: 600;
|
|
border: 2px solid #e2e8f0;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.hh-btn-secondary:hover {
|
|
background: #f1f5f9;
|
|
border-color: #cbd5e1;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-in {
|
|
animation: fadeIn 0.5s ease-out forwards;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="px-4 py-6">
|
|
<!-- Page Header -->
|
|
<div class="page-header-gradient animate-in">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-bold mb-2">
|
|
<i data-lucide="file-template" class="w-7 h-7 inline-block me-2"></i>
|
|
{% trans "Complaint Templates" %}
|
|
</h1>
|
|
<p class="text-white/90">{% trans "Pre-defined templates for common complaints" %}</p>
|
|
</div>
|
|
<a href="{% url 'complaints:template_create' %}" class="hh-btn hh-btn-secondary">
|
|
<i data-lucide="plus" class="w-4 h-4"></i>
|
|
{% trans "New Template" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="section-card mb-6 animate-in">
|
|
<div class="section-header">
|
|
<div class="section-icon secondary">
|
|
<i data-lucide="filter" class="w-5 h-5"></i>
|
|
</div>
|
|
<h2 class="text-lg font-bold text-navy m-0">{% trans "Filters" %}</h2>
|
|
</div>
|
|
<div class="p-6">
|
|
<form method="get" class="flex flex-wrap gap-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate mb-1.5">{% trans "Status" %}</label>
|
|
<select name="is_active" class="px-4 py-2.5 border-2 border-slate-200 rounded-xl focus:outline-none focus:border-blue bg-white">
|
|
<option value="">{% trans "All Status" %}</option>
|
|
<option value="true" {% if is_active_filter == 'true' %}selected{% endif %}>{% trans "Active" %}</option>
|
|
<option value="false" {% if is_active_filter == 'false' %}selected{% endif %}>{% trans "Inactive" %}</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex-1 min-w-[250px]">
|
|
<label class="block text-sm font-semibold text-slate mb-1.5">{% trans "Search" %}</label>
|
|
<input type="text" name="search" value="{{ search }}"
|
|
placeholder="{% trans 'Template name...' %}"
|
|
class="w-full px-4 py-2.5 border-2 border-slate-200 rounded-xl focus:outline-none focus:border-blue">
|
|
</div>
|
|
<div class="flex items-end">
|
|
<button type="submit" class="hh-btn hh-btn-primary h-[46px]">
|
|
<i data-lucide="search" class="w-4 h-4"></i>
|
|
{% trans "Filter" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Templates Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-in">
|
|
{% for template in templates %}
|
|
<div class="template-card" onclick="window.location='{% url 'complaints:template_detail' template.pk %}'">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div class="w-12 h-12 bg-blue/10 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="file-text" class="w-6 h-6 text-blue-600"></i>
|
|
</div>
|
|
{% if template.is_active %}
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-green-100 text-green-700 rounded-full text-xs font-bold">
|
|
<i data-lucide="check-circle" class="w-3.5 h-3.5"></i>
|
|
{% trans "Active" %}
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 text-slate-600 rounded-full text-xs font-bold">
|
|
<i data-lucide="x-circle" class="w-3.5 h-3.5"></i>
|
|
{% trans "Inactive" %}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<h3 class="text-lg font-bold text-navy mb-2">{{ template.name }}</h3>
|
|
<p class="text-sm text-slate mb-4 line-clamp-2">{{ template.description|truncatewords:15 }}</p>
|
|
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="usage-badge">
|
|
<i data-lucide="trending-up" class="w-3.5 h-3.5"></i>
|
|
{{ template.usage_count }} {% trans "uses" %}
|
|
</div>
|
|
{% if template.category %}
|
|
<span class="text-xs text-slate font-medium">{{ template.category.get_localized_name }}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between pt-4 border-t border-slate-100">
|
|
<div class="text-xs text-slate">
|
|
<i data-lucide="building" class="w-3 h-3 inline-block mr-1"></i>
|
|
{{ template.hospital.name }}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<a href="{% url 'complaints:template_edit' template.pk %}"
|
|
class="p-2 text-blue hover:bg-blue-50 rounded-lg transition"
|
|
title="{% trans 'Edit' %}"
|
|
onclick="event.stopPropagation();">
|
|
<i data-lucide="edit" class="w-4 h-4"></i>
|
|
</a>
|
|
{% if user.is_px_admin %}
|
|
<a href="{% url 'complaints:template_delete' template.pk %}"
|
|
class="p-2 text-red-500 hover:bg-red-50 rounded-lg transition"
|
|
title="{% trans 'Delete' %}"
|
|
onclick="event.stopPropagation();">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="col-span-full">
|
|
<div class="section-card p-12 text-center">
|
|
<div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="file-template" class="w-8 h-8 text-slate-400"></i>
|
|
</div>
|
|
<p class="text-slate font-medium">{% trans "No templates found" %}</p>
|
|
<p class="text-slate text-sm mt-1">{% trans "Create your first template to get started" %}</p>
|
|
<a href="{% url 'complaints:template_create' %}" class="hh-btn hh-btn-primary mt-4">
|
|
<i data-lucide="plus" class="w-4 h-4"></i>
|
|
{% trans "Create Template" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %}
|