680 lines
42 KiB
HTML
680 lines
42 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{{ source.get_localized_name }} - {% trans "PX Source" %} - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
:root {
|
|
--hh-navy: #005696;
|
|
--hh-blue: #007bbd;
|
|
--hh-light: #eef6fb;
|
|
--hh-slate: #64748b;
|
|
}
|
|
|
|
.info-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.card-header {
|
|
background: linear-gradient(135deg, var(--hh-light), #e0f2fe);
|
|
padding: 1.25rem 1.75rem;
|
|
border-bottom: 1px solid #bae6fd;
|
|
border-radius: 1rem 1rem 0 0;
|
|
}
|
|
|
|
.info-table th {
|
|
padding: 1rem;
|
|
text-align: left;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: var(--hh-navy);
|
|
width: 35%;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
}
|
|
|
|
.info-table td {
|
|
padding: 1rem;
|
|
color: #475569;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
}
|
|
|
|
.info-table tr:last-child th,
|
|
.info-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.stat-card {
|
|
background: linear-gradient(135deg, var(--hh-navy), var(--hh-blue));
|
|
color: white;
|
|
padding: 1.5rem;
|
|
border-radius: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
@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">
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-4 animate-in">
|
|
<ol class="flex items-center gap-2 text-sm text-slate">
|
|
<li><a href="{% url 'px_sources:source_list' %}" class="text-blue hover:text-navy font-medium">{% trans "PX Sources" %}</a></li>
|
|
<li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
|
|
<li class="text-navy font-semibold">{{ source.get_localized_name }}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Page Header -->
|
|
<div class="flex flex-wrap justify-between items-start gap-4 mb-6 animate-in">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-navy flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-blue/10 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="radio" class="w-6 h-6 text-blue"></i>
|
|
</div>
|
|
{{ source.get_localized_name }}
|
|
</h1>
|
|
<div class="mt-2 flex items-center gap-3">
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 {% if source.is_active %}bg-green-100 text-green-700{% else %}bg-slate-100 text-slate-600{% endif %} rounded-full text-xs font-bold">
|
|
<i data-lucide="{% if source.is_active %}check-circle{% else %}x-circle{% endif %}" class="w-3.5 h-3.5"></i>
|
|
{% if source.is_active %}{% trans "Active" %}{% else %}{% trans "Inactive" %}{% endif %}
|
|
</span>
|
|
<span class="font-mono text-xs bg-slate-100 px-2 py-1 rounded">{{ source.code }}</span>
|
|
<span class="source-type-badge inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-100 text-blue-700 rounded-full text-xs font-bold">
|
|
<i data-lucide="tag" class="w-3.5 h-3.5"></i>
|
|
{{ source.get_source_type_display }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<a href="{% url 'px_sources:source_list' %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 border border-slate-200 text-slate-700 rounded-lg hover:bg-slate-50 transition">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
{% trans "Back" %}
|
|
</a>
|
|
{% if request.user.is_px_admin or request.user.is_hospital_admin %}
|
|
<a href="{% url 'px_sources:source_edit' source.pk %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-navy text-white rounded-lg hover:bg-blue transition shadow-lg shadow-navy/20">
|
|
<i data-lucide="edit" class="w-4 h-4"></i>
|
|
{% trans "Edit" %}
|
|
</a>
|
|
{% endif %}
|
|
{% if request.user.is_px_admin %}
|
|
<a href="{% url 'px_sources:source_delete' source.pk %}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
{% trans "Delete" %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Source Details -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<!-- Source Information -->
|
|
<div class="info-card animate-in">
|
|
<div class="card-header">
|
|
<h2 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
|
|
<i data-lucide="info" class="w-5 h-5"></i>
|
|
{% trans "Source Information" %}
|
|
</h2>
|
|
</div>
|
|
<div class="p-0">
|
|
<table class="w-full info-table">
|
|
<tbody>
|
|
<tr>
|
|
<th>{% trans "Name (English)" %}</th>
|
|
<td class="font-semibold">{{ source.get_localized_name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Name (Arabic)" %}</th>
|
|
<td dir="rtl">{{ source.name_ar|default:"-" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Description" %}</th>
|
|
<td>{{ source.description|default:"-"|linebreaks }}</td>
|
|
</tr>
|
|
{% if source.contact_email or source.contact_phone %}
|
|
<tr>
|
|
<th>{% trans "Contact" %}</th>
|
|
<td>
|
|
{% if source.contact_email %}
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="mail" class="w-4 h-4 text-slate"></i>
|
|
<a href="mailto:{{ source.contact_email }}" class="text-blue hover:underline">{{ source.contact_email }}</a>
|
|
</div>
|
|
{% endif %}
|
|
{% if source.contact_phone %}
|
|
<div class="flex items-center gap-2 mt-1">
|
|
<i data-lucide="phone" class="w-4 h-4 text-slate"></i>
|
|
<a href="tel:{{ source.contact_phone }}" class="text-blue hover:underline">{{ source.contact_phone }}</a>
|
|
</div>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
<tr>
|
|
<th>{% trans "Created" %}</th>
|
|
<td class="text-sm">{{ source.created_at|date:"Y-m-d H:i" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>{% trans "Last Updated" %}</th>
|
|
<td class="text-sm">{{ source.updated_at|date:"Y-m-d H:i" }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Usage Statistics -->
|
|
<div class="info-card animate-in">
|
|
<div class="card-header">
|
|
<h2 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
|
|
<i data-lucide="circle-help" class="w-5 h-5"></i>
|
|
{% trans "Usage Statistics (Last 30 Days)" %}
|
|
</h2>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-3 gap-4">
|
|
<div class="stat-card">
|
|
<div class="stat-value">{{ usage_stats.total }}</div>
|
|
<div class="stat-label">{% trans "Total Usage" %}</div>
|
|
</div>
|
|
<div class="stat-card" style="background: linear-gradient(135deg, #10b981, #34d399);">
|
|
<div class="stat-value">{{ usage_stats.complaints }}</div>
|
|
<div class="stat-label">{% trans "Complaints" %}</div>
|
|
</div>
|
|
<div class="stat-card" style="background: linear-gradient(135deg, #f59e0b, #fbbf24);">
|
|
<div class="stat-value">{{ usage_stats.inquiries }}</div>
|
|
<div class="stat-label">{% trans "Inquiries" %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Complaints & Inquiries Tabs -->
|
|
<div class="info-card animate-in">
|
|
<div class="card-header flex items-center justify-between">
|
|
<h2 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
|
|
<i data-lucide="layout-list" class="w-5 h-5"></i>
|
|
{% trans "Related Items" %}
|
|
</h2>
|
|
<div class="flex gap-1 bg-white rounded-lg p-1 border border-slate-200">
|
|
<button type="button" onclick="switchTab('complaints')"
|
|
id="tab-btn-complaints"
|
|
class="tab-btn px-4 py-2 rounded-md text-sm font-semibold transition-all bg-navy text-white">
|
|
<i data-lucide="file-text" class="w-4 h-4 inline mr-1"></i>
|
|
{% trans "Complaints" %} ({{ complaints_count }})
|
|
</button>
|
|
<button type="button" onclick="switchTab('inquiries')"
|
|
id="tab-btn-inquiries"
|
|
class="tab-btn px-4 py-2 rounded-md text-sm font-semibold transition-all text-slate hover:bg-slate-50">
|
|
<i data-lucide="help-circle" class="w-4 h-4 inline mr-1"></i>
|
|
{% trans "Inquiries" %} ({{ inquiries_count }})
|
|
</button>
|
|
{% if source.source_type == 'government' or source.source_type == 'external' %}
|
|
<button type="button" onclick="switchTab('ext-complaints')"
|
|
id="tab-btn-ext-complaints"
|
|
class="tab-btn px-4 py-2 rounded-md text-sm font-semibold transition-all text-slate hover:bg-slate-50">
|
|
<i data-lucide="file-plus" class="w-4 h-4 inline mr-1"></i>
|
|
{% trans "Source Complaints" %} ({{ ext_source_complaints|length }})
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="p-0">
|
|
<!-- Complaints Tab -->
|
|
<div id="tab-complaints" class="tab-panel">
|
|
{% if source_complaints %}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b-2 border-slate-200">
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Reference" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Description" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Status" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Priority" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Hospital" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Date" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
{% for complaint in source_complaints %}
|
|
<tr class="hover:bg-slate-50 transition cursor-pointer" onclick="window.location.href='{% url 'complaints:complaint_detail' complaint.pk %}'">
|
|
<td class="py-3 px-4 text-sm font-bold text-navy font-mono">{{ complaint.reference_number }}</td>
|
|
<td class="py-3 px-4 text-sm text-slate max-w-xs truncate">
|
|
{% if complaint.ai_brief_en %}
|
|
{{ complaint.ai_brief_en|truncatewords:8 }}
|
|
{% else %}
|
|
{{ complaint.description|truncatewords:8 }}
|
|
{% endif %}
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase
|
|
{% if complaint.status == 'open' %}bg-yellow-100 text-yellow-700
|
|
{% elif complaint.status == 'in_progress' %}bg-blue-100 text-blue-700
|
|
{% elif complaint.status == 'partially_resolved' %}bg-amber-100 text-amber-700
|
|
{% elif complaint.status == 'resolved' %}bg-green-100 text-green-700
|
|
{% elif complaint.status == 'closed' %}bg-slate-100 text-slate-600
|
|
{% elif complaint.status == 'cancelled' %}bg-red-100 text-red-700
|
|
{% elif complaint.status == 'contacted' %}bg-purple-100 text-purple-700
|
|
{% elif complaint.status == 'contacted_no_response' %}bg-slate-100 text-slate-600
|
|
{% else %}bg-slate-100 text-slate-600{% endif %}">
|
|
{{ complaint.get_status_display }}
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase
|
|
{% if complaint.priority == 'critical' %}bg-red-500 text-white
|
|
{% elif complaint.priority == 'high' %}bg-orange-100 text-orange-700
|
|
{% elif complaint.priority == 'medium' %}bg-yellow-100 text-yellow-700
|
|
{% else %}bg-green-100 text-green-700{% endif %}">
|
|
{{ complaint.get_priority_display }}
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-sm text-slate">{{ complaint.hospital.name|default:"-" }}</td>
|
|
<td class="py-3 px-4 text-sm text-slate">{{ complaint.created_at|date:"Y-m-d" }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12">
|
|
<div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="file-text" class="w-8 h-8 text-slate-400"></i>
|
|
</div>
|
|
<p class="text-slate font-medium">{% trans "No complaints from this source" %}</p>
|
|
<p class="text-slate text-sm mt-1">{% trans "Complaints will appear here when submitted through this source" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Inquiries Tab -->
|
|
<div id="tab-inquiries" class="tab-panel hidden">
|
|
{% if source_inquiries %}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b-2 border-slate-200">
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Reference" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Subject" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Category" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Status" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Priority" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Hospital" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Date" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
{% for inquiry in source_inquiries %}
|
|
<tr class="hover:bg-slate-50 transition cursor-pointer" onclick="window.location.href='{% url 'inquiries:inquiry_detail' inquiry.pk %}'">
|
|
<td class="py-3 px-4 text-sm font-bold text-navy font-mono">{{ inquiry.reference_number }}</td>
|
|
<td class="py-3 px-4 text-sm text-slate max-w-xs truncate">{{ inquiry.subject|truncatewords:8 }}</td>
|
|
<td class="py-3 px-4">
|
|
<span class="px-2.5 py-1 bg-slate-100 rounded-full text-[10px] font-bold text-slate">
|
|
{{ inquiry.get_category_display }}
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase
|
|
{% if inquiry.status == 'open' %}bg-yellow-100 text-yellow-700
|
|
{% elif inquiry.status == 'in_progress' %}bg-blue-100 text-blue-700
|
|
{% elif inquiry.status == 'resolved' %}bg-green-100 text-green-700
|
|
{% elif inquiry.status == 'closed' %}bg-slate-100 text-slate-600
|
|
{% elif inquiry.status == 'contacted' %}bg-purple-100 text-purple-700
|
|
{% elif inquiry.status == 'contacted_no_response' %}bg-slate-100 text-slate-600
|
|
{% else %}bg-slate-100 text-slate-600{% endif %}">
|
|
{{ inquiry.get_status_display }}
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase
|
|
{% if inquiry.priority == 'high' %}bg-orange-100 text-orange-700
|
|
{% elif inquiry.priority == 'medium' %}bg-yellow-100 text-yellow-700
|
|
{% else %}bg-green-100 text-green-700{% endif %}">
|
|
{{ inquiry.get_priority_display }}
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-sm text-slate">{{ inquiry.hospital.name|default:"-" }}</td>
|
|
<td class="py-3 px-4 text-sm text-slate">{{ inquiry.created_at|date:"Y-m-d" }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12">
|
|
<div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="help-circle" class="w-8 h-8 text-slate-400"></i>
|
|
</div>
|
|
<p class="text-slate font-medium">{% trans "No inquiries from this source" %}</p>
|
|
<p class="text-slate text-sm mt-1">{% trans "Inquiries will appear here when submitted through this source" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Source Complaints Tab (MOH/CCHI) -->
|
|
{% if source.source_type == 'government' or source.source_type == 'external' %}
|
|
<div id="tab-ext-complaints" class="tab-panel hidden">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<p class="text-sm text-slate">{% trans "External complaints registered for this source. Convert to system complaints when ready." %}</p>
|
|
<button type="button" onclick="document.getElementById('createSourceComplaintModal').classList.remove('hidden')"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-navy text-white rounded-lg text-sm font-semibold hover:bg-blue transition">
|
|
<i data-lucide="plus" class="w-4 h-4"></i> {% trans "Register Complaint" %}
|
|
</button>
|
|
</div>
|
|
{% if ext_source_complaints %}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b-2 border-slate-200">
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Reference" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Subject" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Patient" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Status" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "System Complaint" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Date" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
{% for sc in ext_source_complaints %}
|
|
<tr class="hover:bg-slate-50 transition">
|
|
<td class="py-3 px-4 text-sm font-bold text-navy font-mono">{{ sc.reference_number }}</td>
|
|
<td class="py-3 px-4 text-sm text-slate max-w-xs truncate">{{ sc.subject|truncatewords:8 }}</td>
|
|
<td class="py-3 px-4 text-sm text-slate">{{ sc.patient_name|default:"-" }}</td>
|
|
<td class="py-3 px-4">
|
|
<span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase
|
|
{% if sc.status == 'open' %}bg-yellow-100 text-yellow-700
|
|
{% elif sc.status == 'converted' %}bg-green-100 text-green-700
|
|
{% elif sc.status == 'closed' %}bg-slate-100 text-slate-600
|
|
{% else %}bg-slate-100 text-slate-600{% endif %}">
|
|
{{ sc.get_status_display }}
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-sm">
|
|
{% if sc.system_complaint %}
|
|
<a href="{% url 'complaints:complaint_detail' sc.system_complaint.pk %}" class="text-navy font-semibold hover:underline font-mono text-xs">
|
|
{{ sc.system_complaint.reference_number }}
|
|
</a>
|
|
{% else %}
|
|
<span class="text-slate-400">—</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="py-3 px-4 text-sm text-slate">{{ sc.created_at|date:"Y-m-d" }}</td>
|
|
<td class="py-3 px-4">
|
|
{% if sc.status == 'open' %}
|
|
<a href="{% url 'px_sources:convert_to_system_complaint' sc.pk %}"
|
|
class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-50 border border-green-200 text-green-700 rounded-lg text-xs font-semibold hover:bg-green-100 transition">
|
|
<i data-lucide="arrow-right-left" class="w-3 h-3"></i> {% trans "Convert" %}
|
|
</a>
|
|
{% elif sc.status == 'converted' and sc.system_complaint %}
|
|
<a href="{% url 'complaints:complaint_detail' sc.system_complaint.pk %}"
|
|
class="inline-flex items-center gap-1 px-3 py-1.5 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg text-xs font-semibold hover:bg-blue-100 transition">
|
|
<i data-lucide="external-link" class="w-3 h-3"></i> {% trans "View" %}
|
|
</a>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12">
|
|
<div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="file-plus" class="w-8 h-8 text-slate-400"></i>
|
|
</div>
|
|
<p class="text-slate font-medium">{% trans "No source complaints registered yet" %}</p>
|
|
<p class="text-slate text-sm mt-1">{% trans "Click 'Register Complaint' to create one" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Usage Records -->
|
|
<div class="info-card animate-in">
|
|
<div class="card-header">
|
|
<h2 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
|
|
<i data-lucide="activity" class="w-5 h-5"></i>
|
|
{% trans "Recent Activity" %} ({{ usage_records|length }})
|
|
</h2>
|
|
</div>
|
|
<div class="p-0">
|
|
{% if usage_records %}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b-2 border-slate-200">
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Date" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Type" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Reference" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "Hospital" %}</th>
|
|
<th class="text-left py-3 px-4 text-xs font-bold text-slate uppercase">{% trans "User" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
{% for record in usage_records %}
|
|
<tr class="hover:bg-slate-50 transition">
|
|
<td class="py-3 px-4 text-sm text-slate">{{ record.created_at|date:"Y-m-d H:i" }}</td>
|
|
<td class="py-3 px-4">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 {% if record.content_type.model == 'complaint' %}bg-red-100 text-red-700{% else %}bg-blue-100 text-blue-700{% endif %} rounded-full text-xs font-bold">
|
|
<i data-lucide="{% if record.content_type.model == 'complaint' %}file-text{% else %}help-circle{% endif %}" class="w-3 h-3"></i>
|
|
{{ record.content_type.model|title }}
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-sm font-mono text-slate">{{ record.object_id|truncatechars:12 }}</td>
|
|
<td class="py-3 px-4 text-sm text-slate">{{ record.hospital.name|default:"-" }}</td>
|
|
<td class="py-3 px-4 text-sm text-navy">{{ record.user.get_full_name|default:"-" }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12">
|
|
<div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="activity" class="w-8 h-8 text-slate-400"></i>
|
|
</div>
|
|
<p class="text-slate font-medium">{% trans "No usage records found" %}</p>
|
|
<p class="text-slate text-sm mt-1">{% trans "Activity will appear here once feedback is submitted" %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="space-y-6">
|
|
<!-- Quick Stats -->
|
|
<div class="info-card animate-in">
|
|
<div class="card-header">
|
|
<h2 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
|
|
<i data-lucide="trending-up" class="w-5 h-5"></i>
|
|
{% trans "Quick Stats" %}
|
|
</h2>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-slate text-sm">{% trans "Total Complaints" %}</span>
|
|
<span class="font-bold text-navy text-lg">{{ source.total_complaints }}</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-slate text-sm">{% trans "Total Inquiries" %}</span>
|
|
<span class="font-bold text-navy text-lg">{{ source.total_inquiries }}</span>
|
|
</div>
|
|
<div class="pt-4 border-t border-slate-200">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-slate text-sm">{% trans "Source Users" %}</span>
|
|
<span class="font-bold text-navy text-lg">{{ source_users.count }}</span>
|
|
</div>
|
|
{% if source_users %}
|
|
<div class="space-y-2 mt-3">
|
|
{% for su in source_users|slice:":5" %}
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<div class="w-8 h-8 rounded-full bg-blue/10 flex items-center justify-center">
|
|
<i data-lucide="user" class="w-4 h-4 text-blue"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="font-medium text-navy">{{ su.user.get_full_name }}</p>
|
|
<p class="text-xs text-slate">{{ su.user.email }}</p>
|
|
</div>
|
|
{% if su.is_active %}
|
|
<i data-lucide="check-circle" class="w-4 h-4 text-green-600"></i>
|
|
{% else %}
|
|
<i data-lucide="x-circle" class="w-4 h-4 text-slate-400"></i>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="info-card animate-in">
|
|
<div class="card-header">
|
|
<h2 class="text-lg font-bold text-navy flex items-center gap-2 m-0">
|
|
<i data-lucide="settings" class="w-5 h-5"></i>
|
|
{% trans "Manage" %}
|
|
</h2>
|
|
</div>
|
|
<div class="p-4 space-y-2">
|
|
{% if request.user.is_px_admin or request.user.is_hospital_admin %}
|
|
<a href="{% url 'px_sources:source_user_create' source.pk %}"
|
|
class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-50 transition text-navy font-medium">
|
|
<i data-lucide="user-plus" class="w-4 h-4"></i>
|
|
{% trans "Add Source User" %}
|
|
</a>
|
|
{% endif %}
|
|
<a href="{% url 'px_sources:source_edit' source.pk %}"
|
|
class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-50 transition text-navy font-medium">
|
|
<i data-lucide="edit" class="w-4 h-4"></i>
|
|
{% trans "Edit Source" %}
|
|
</a>
|
|
{% if source.is_active %}
|
|
<a href="{% url 'px_sources:source_toggle_status' source.pk %}"
|
|
class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-50 transition text-yellow-600 font-medium">
|
|
<i data-lucide="pause" class="w-4 h-4"></i>
|
|
{% trans "Deactivate" %}
|
|
</a>
|
|
{% else %}
|
|
<a href="{% url 'px_sources:source_toggle_status' source.pk %}"
|
|
class="flex items-center gap-2 p-3 rounded-lg hover:bg-slate-50 transition text-green-600 font-medium">
|
|
<i data-lucide="play" class="w-4 h-4"></i>
|
|
{% trans "Activate" %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Source Complaint Modal -->
|
|
{% if source.source_type == 'government' or source.source_type == 'external' %}
|
|
<div id="createSourceComplaintModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
|
|
<div class="bg-white rounded-2xl p-6 w-full max-w-lg mx-4 shadow-2xl">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-10 h-10 bg-navy/10 rounded-full flex items-center justify-center">
|
|
<i data-lucide="file-plus" class="w-5 h-5 text-navy"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-navy">{% trans "Register Source Complaint" %}</h3>
|
|
</div>
|
|
<p class="text-slate mb-4 text-sm">{% trans "Register a complaint received from this source." %}</p>
|
|
<form method="post" action="{% url 'px_sources:source_complaint_create' pk=source.pk %}">
|
|
{% csrf_token %}
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate mb-1">{% trans "Subject" %} <span class="text-red-500">*</span></label>
|
|
<input type="text" name="subject" required
|
|
class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none"
|
|
placeholder="{% trans 'Brief description of the complaint' %}">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate mb-1">{% trans "Description" %} <span class="text-red-500">*</span></label>
|
|
<textarea name="description" rows="5" required
|
|
class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none resize-none"
|
|
placeholder="{% trans 'Full details of the complaint' %}"></textarea>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate mb-1">{% trans "Patient Name" %}</label>
|
|
<input type="text" name="patient_name"
|
|
class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none"
|
|
placeholder="{% trans 'Patient name' %}">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate mb-1">{% trans "Contact Phone" %}</label>
|
|
<input type="text" name="contact_phone"
|
|
class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none"
|
|
placeholder="{% trans 'Phone number' %}">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-slate mb-1">{% trans "Contact Email" %}</label>
|
|
<input type="email" name="contact_email"
|
|
class="w-full border border-slate-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-navy/20 outline-none"
|
|
placeholder="{% trans 'Email address' %}">
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-3 mt-6">
|
|
<button type="button" onclick="document.getElementById('createSourceComplaintModal').classList.add('hidden')"
|
|
class="flex-1 px-4 py-2.5 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-slate-50 transition">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button type="submit" class="flex-1 px-4 py-2.5 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center justify-center gap-2">
|
|
<i data-lucide="check" class="w-4 h-4"></i> {% trans "Create" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
|
|
function switchTab(tab) {
|
|
document.querySelectorAll('.tab-panel').forEach(p => p.classList.add('hidden'));
|
|
document.querySelectorAll('.tab-btn').forEach(b => {
|
|
b.classList.remove('bg-navy', 'text-white');
|
|
b.classList.add('text-slate', 'hover:bg-slate-50');
|
|
});
|
|
document.getElementById('tab-' + tab).classList.remove('hidden');
|
|
var btn = document.getElementById('tab-btn-' + tab);
|
|
btn.classList.add('bg-navy', 'text-white');
|
|
btn.classList.remove('text-slate', 'hover:bg-slate-50');
|
|
}
|
|
</script>
|
|
{% endblock %}
|