222 lines
9.2 KiB
HTML
222 lines
9.2 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n static %}
|
|
|
|
{% block title %}{% trans "Import Government Tickets" %} - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.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);
|
|
}
|
|
.form-section {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
border: 2px solid #e2e8f0;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
.form-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;
|
|
}
|
|
.hh-btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: #005696;
|
|
color: white;
|
|
border-radius: 0.75rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
.hh-btn-primary:hover {
|
|
background: #007bbd;
|
|
}
|
|
.hh-btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: white;
|
|
color: #64748b;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 0.75rem;
|
|
font-weight: 600;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.preview-table th {
|
|
background: linear-gradient(to right, #f8fafc, #f1f5f9);
|
|
font-weight: 600;
|
|
color: #005696;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
padding: 0.75rem 1rem;
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.preview-table td {
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
font-size: 0.875rem;
|
|
}
|
|
.preview-table tbody tr:hover {
|
|
background-color: #f8fafc;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="px-6 py-4">
|
|
<!-- Page Header -->
|
|
<div class="page-header-gradient">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">{% trans "Import Government Tickets" %}</h1>
|
|
<p class="text-blue-100 text-sm">{% trans "Upload Excel file to import tickets from government sources" %}</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<a href="{% url 'complaints:government_ticket_list' %}" class="hh-btn hh-btn-secondary">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>{% trans "Back to List" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload Form -->
|
|
<div class="form-section mb-6">
|
|
<div class="form-section-header">
|
|
<i data-lucide="upload" class="w-5 h-5 text-navy"></i>
|
|
<h5 class="text-lg font-semibold text-gray-800">{% trans "Upload File" %}</h5>
|
|
</div>
|
|
<div class="p-6">
|
|
<form method="post" enctype="multipart/form-data" class="space-y-4">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="action" value="preview">
|
|
|
|
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4 rounded-r-lg">
|
|
<div class="flex items-start">
|
|
<i data-lucide="info" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-semibold text-blue-800">{% trans "Instructions" %}</h3>
|
|
<div class="text-sm text-blue-700 mt-1 space-y-1">
|
|
<p>{% trans "Upload an Excel file (.xlsx) with the following columns:" %}</p>
|
|
<ul class="list-disc list-inside space-y-0.5">
|
|
<li>{% trans "رقم التذكرة (Ticket Number) - Required" %}</li>
|
|
<li>{% trans "اسم المشتكي (Complainant Name) - Required" %}</li>
|
|
<li>{% trans "رقم الهوية (National ID)" %}</li>
|
|
<li>{% trans "رقم التواصل (Contact Number)" %}</li>
|
|
<li>{% trans "الموقع (Location)" %}</li>
|
|
<li>{% trans "القسم الرئيسي (Main Section)" %}</li>
|
|
<li>{% trans "القسم الفرعي (Subsection)" %}</li>
|
|
<li>{% trans "تاريخ إنشاء التذكرة (Creation Date)" %}</li>
|
|
<li>{% trans "وقت إنشاء التذكرة (Creation Time)" %}</li>
|
|
<li>{% trans "تصنيف الشكوى (Classification)" %}</li>
|
|
<li>{% trans "محتوى الشكوى (Content) - Required" %}</li>
|
|
<li>{% trans "حالة الشكوى (Status)" %}</li>
|
|
<li>{% trans "اسم الموظف (Assigned Staff)" %}</li>
|
|
</ul>
|
|
<p class="mt-2">{% trans "Note: The header row should be on the second row (row 2) of the Excel file." %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-2">{% trans "Select Excel File" %}</label>
|
|
<input type="file" name="file" accept=".xlsx,.xls" required
|
|
class="block w-full text-sm text-gray-900 border border-gray-200 rounded-lg cursor-pointer bg-white focus:outline-none focus:ring-2 focus:ring-navy focus:border-navy p-2">
|
|
</div>
|
|
|
|
<div class="flex gap-3">
|
|
<button type="submit" class="hh-btn hh-btn-primary">
|
|
<i data-lucide="eye" class="w-4 h-4"></i>{% trans "Preview" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview Section -->
|
|
{% if preview_data %}
|
|
<div class="form-section mb-6">
|
|
<div class="form-section-header">
|
|
<i data-lucide="eye" class="w-5 h-5 text-navy"></i>
|
|
<h5 class="text-lg font-semibold text-gray-800">{% trans "Preview (First 5 Rows)" %}</h5>
|
|
</div>
|
|
<div class="overflow-x-auto p-4">
|
|
<table class="min-w-full preview-table">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Ticket #" %}</th>
|
|
<th>{% trans "Complainant" %}</th>
|
|
<th>{% trans "National ID" %}</th>
|
|
<th>{% trans "Contact" %}</th>
|
|
<th>{% trans "Department" %}</th>
|
|
<th>{% trans "Received Date" %}</th>
|
|
<th>{% trans "Classification" %}</th>
|
|
<th>{% trans "Content" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in preview_data %}
|
|
<tr>
|
|
<td class="font-mono text-navy">{{ row.ticket_number|default:"-" }}</td>
|
|
<td>{{ row.complainant_name|default:"-" }}</td>
|
|
<td>{{ row.national_id|default:"-" }}</td>
|
|
<td>{{ row.contact_number|default:"-" }}</td>
|
|
<td>{{ row.main_section|default:"-" }}</td>
|
|
<td>{{ row.received_date|default:"-" }}</td>
|
|
<td>{{ row.classification|default:"-" }}</td>
|
|
<td class="max-w-xs truncate">{{ row.content|default:"-" }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="p-4 border-t border-gray-200">
|
|
<form method="post" class="flex gap-3">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="action" value="import">
|
|
<button type="submit" class="hh-btn hh-btn-primary">
|
|
<i data-lucide="check" class="w-4 h-4"></i>{% trans "Confirm Import" %}
|
|
</button>
|
|
<a href="{% url 'complaints:government_ticket_import' %}" class="hh-btn hh-btn-secondary">
|
|
<i data-lucide="x" class="w-4 h-4"></i>{% trans "Cancel" %}
|
|
</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Errors -->
|
|
{% if errors %}
|
|
<div class="form-section">
|
|
<div class="form-section-header">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-600"></i>
|
|
<h5 class="text-lg font-semibold text-red-800">{% trans "Errors" %}</h5>
|
|
</div>
|
|
<div class="p-4">
|
|
<ul class="space-y-2">
|
|
{% for error in errors %}
|
|
<li class="text-sm text-red-600">{{ error }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|