227 lines
11 KiB
HTML
227 lines
11 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans "Import Call Records" %} - PX360{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
function updateFileName() {
|
|
const input = document.getElementById('csvFile');
|
|
const fileName = document.getElementById('fileName');
|
|
const importButton = document.getElementById('importButton');
|
|
|
|
if (input.files && input.files[0]) {
|
|
fileName.textContent = 'Selected: ' + input.files[0].name;
|
|
// Enable the import button
|
|
importButton.disabled = false;
|
|
importButton.classList.remove('bg-slate-300', 'text-slate-500', 'cursor-not-allowed');
|
|
importButton.classList.add('bg-navy', 'text-white', 'hover:bg-blue');
|
|
} else {
|
|
fileName.textContent = '';
|
|
// Disable the import button
|
|
importButton.disabled = true;
|
|
importButton.classList.add('bg-slate-300', 'text-slate-500', 'cursor-not-allowed');
|
|
importButton.classList.remove('bg-navy', 'text-white', 'hover:bg-blue');
|
|
}
|
|
}
|
|
|
|
// Drag and drop support
|
|
const dropZone = document.getElementById('dropZone');
|
|
const csvFile = document.getElementById('csvFile');
|
|
|
|
if (dropZone && csvFile) {
|
|
dropZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.add('border-blue', 'bg-blue-50');
|
|
});
|
|
|
|
dropZone.addEventListener('dragleave', () => {
|
|
dropZone.classList.remove('border-blue', 'bg-blue-50');
|
|
});
|
|
|
|
dropZone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('border-blue', 'bg-blue-50');
|
|
|
|
const files = e.dataTransfer.files;
|
|
if (files.length > 0 && files[0].name.endsWith('.csv')) {
|
|
csvFile.files = files;
|
|
updateFileName();
|
|
} else {
|
|
alert('Please upload a CSV file');
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Header -->
|
|
<div class="mb-6">
|
|
<div class="flex items-center gap-2 text-sm text-slate mb-2">
|
|
<a href="{% url 'callcenter:call_records_list' %}" class="hover:text-navy">{% trans "Call Records" %}</a>
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
<span class="font-bold text-navy">{% trans "Import CSV" %}</span>
|
|
</div>
|
|
<h1 class="text-2xl font-bold text-navy">{% trans "Import Call Records" %}</h1>
|
|
<p class="text-slate text-sm mt-1">{% trans "Upload call records from your call recording system" %}</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- Upload Form -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<h2 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="upload" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Upload CSV File" %}
|
|
</h2>
|
|
|
|
<form method="post" enctype="multipart/form-data" id="importForm">
|
|
{% csrf_token %}
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-semibold text-slate mb-2">
|
|
{% trans "CSV File" %} <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="border-2 border-dashed border-slate-200 rounded-xl p-8 text-center hover:border-blue transition" id="dropZone">
|
|
<input type="file" name="csv_file" id="csvFile" accept=".csv" required
|
|
class="hidden" onchange="updateFileName()">
|
|
<label for="csvFile" class="cursor-pointer">
|
|
<div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="file-spreadsheet" class="w-8 h-8 text-blue"></i>
|
|
</div>
|
|
<p class="text-sm font-semibold text-navy mb-1">{% trans "Click to upload or drag and drop" %}</p>
|
|
<p class="text-xs text-slate">{% trans "CSV file (max. 100MB)" %}</p>
|
|
<p id="fileName" class="text-xs text-blue mt-2 font-medium"></p>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
|
|
<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-semibold text-blue-800 mb-1">{% trans "Important Notes" %}</p>
|
|
<ul class="text-xs text-blue-700 space-y-1">
|
|
<li>• {% trans "File must be in CSV format with exact headers" %}</li>
|
|
<li>• {% trans "Duplicate records (by Media ID) will be skipped" %}</li>
|
|
<li>• {% trans "Invalid records will be skipped with error reporting" %}</li>
|
|
<li>• {% trans "Large files may take a few moments to process" %}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button type="submit" id="importButton" disabled
|
|
class="px-6 py-3 bg-slate-300 text-slate-500 rounded-xl font-semibold cursor-not-allowed transition flex items-center gap-2">
|
|
<i data-lucide="upload" class="w-5 h-5"></i>
|
|
{% trans "Import Records" %}
|
|
</button>
|
|
<a href="{% url 'callcenter:call_records_list' %}"
|
|
class="px-6 py-3 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition">
|
|
{% trans "Cancel" %}
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- CSV Format Guide -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100">
|
|
<h2 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="file-text" class="w-5 h-5 text-blue"></i>
|
|
{% trans "CSV Format Guide" %}
|
|
</h2>
|
|
|
|
<p class="text-sm text-slate mb-4">
|
|
{% trans "Your CSV file must contain the following headers:" %}
|
|
</p>
|
|
|
|
<div class="bg-slate-50 rounded-xl p-4 mb-6 max-h-80 overflow-y-auto">
|
|
<code class="text-xs text-slate font-mono">
|
|
{% for header in sample_headers %}
|
|
<span class="inline-block px-2 py-1 bg-white border border-slate-200 rounded mr-1 mb-1">{{ header }}</span>
|
|
{% endfor %}
|
|
</code>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<h3 class="text-sm font-bold text-navy">{% trans "Required Fields" %}</h3>
|
|
<ul class="text-sm text-slate space-y-2">
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
|
|
<span><strong>Media ID</strong> - {% trans "Unique identifier (UUID format)" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
|
|
<span><strong>Call Start</strong> - {% trans "Call start date/time (MM/DD/YYYY H:MM AM/PM)" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
|
|
<span><strong>First Name</strong> - {% trans "Caller first name" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
|
|
<span><strong>Last Name</strong> - {% trans "Caller last name" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
|
|
<span><strong>Department</strong> - {% trans "Department name" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
|
|
<span><strong>Length</strong> - {% trans "Call duration (HH:MM:SS)" %}</span>
|
|
</li>
|
|
<li class="flex items-start gap-2">
|
|
<i data-lucide="check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0"></i>
|
|
<span><strong>File Name</strong> - {% trans "Recording file name" %}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mt-6 pt-6 border-t border-slate-200">
|
|
<a href="{% url 'callcenter:export_call_records_template' %}"
|
|
class="inline-flex items-center gap-2 text-blue font-semibold hover:underline text-sm">
|
|
<i data-lucide="download" class="w-4 h-4"></i>
|
|
{% trans "Download sample CSV template" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Example Table -->
|
|
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 mt-6">
|
|
<h2 class="text-lg font-bold text-navy mb-4 flex items-center gap-2">
|
|
<i data-lucide="table" class="w-5 h-5 text-blue"></i>
|
|
{% trans "Example Data Format" %}
|
|
</h2>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-slate-50 border-b border-slate-200">
|
|
<tr>
|
|
<th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">Media ID</th>
|
|
<th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">Call Start</th>
|
|
<th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">First Name</th>
|
|
<th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">Last Name</th>
|
|
<th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">Department</th>
|
|
<th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">Length</th>
|
|
<th class="text-left text-xs font-bold text-slate uppercase tracking-wider py-3 px-4">File Name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr>
|
|
<td class="py-3 px-4 font-mono text-xs text-slate">aade2430-2eb0-4e05-93eb-9567e2be07ae</td>
|
|
<td class="py-3 px-4 text-slate">10/30/2025 7:57:48 PM</td>
|
|
<td class="py-3 px-4 text-navy">Patient</td>
|
|
<td class="py-3 px-4 text-navy">Relation</td>
|
|
<td class="py-3 px-4 text-slate">Patient Relation</td>
|
|
<td class="py-3 px-4 font-mono text-slate">00:01:11</td>
|
|
<td class="py-3 px-4 text-slate text-xs">2025-10-30\x1379 19.57.48.467.mp3</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|