251 lines
14 KiB
HTML
251 lines
14 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load static %}
|
|
{% load hospital_filters %}
|
|
|
|
{% block title %}{{ report.name }} - Report Details - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
@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="p-6 md:p-8 bg-gradient-to-br from-light to-blue-50 min-h-screen">
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-6 animate-in">
|
|
<ol class="flex items-center gap-2 text-sm text-slate">
|
|
<li><a href="{% url 'dashboard:my_dashboard' %}" class="text-blue hover:text-navy font-medium">Dashboard</a></li>
|
|
<li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
|
|
<li><a href="{% url 'reports:builder' %}" class="text-blue hover:text-navy font-medium">Reports</a></li>
|
|
<li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
|
|
<li><a href="{% url 'reports:saved_reports' %}" class="text-blue hover:text-navy font-medium">Saved Reports</a></li>
|
|
<li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
|
|
<li class="text-navy font-semibold truncate max-w-xs">{{ report.name }}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Page Header -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6 mb-6 animate-in">
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-14 h-14 bg-gradient-to-br from-blue to-indigo-500 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-200">
|
|
<i data-lucide="file-text" class="w-8 h-8 text-white"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-navy">{{ report.name }}</h1>
|
|
<div class="flex flex-wrap items-center gap-3 mt-1">
|
|
<span class="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">
|
|
<i data-lucide="database" class="w-3 h-3"></i>
|
|
{{ report.get_data_source_display }}
|
|
</span>
|
|
{% if report.is_shared %}
|
|
<span class="inline-flex items-center gap-1 px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm font-medium">
|
|
<i data-lucide="users" class="w-3 h-3"></i>
|
|
Shared
|
|
</span>
|
|
{% endif %}
|
|
{% if report.last_run_at %}
|
|
<span class="text-sm text-slate">
|
|
<i data-lucide="clock" class="w-3 h-3 inline"></i>
|
|
Last run: {{ report.last_run_at|date:"M d, Y H:i" }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<a href="{% url 'reports:saved_reports' %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-slate-200 text-slate-700 rounded-xl font-semibold hover:bg-slate-50 transition">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>Back
|
|
</a>
|
|
<a href="{% url 'reports:export_report' report.id 'csv' %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-green-200 text-green-700 rounded-xl font-semibold hover:bg-green-50 transition">
|
|
<i data-lucide="file-text" class="w-4 h-4"></i>CSV
|
|
</a>
|
|
<a href="{% url 'reports:export_report' report.id 'excel' %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-emerald-200 text-emerald-700 rounded-xl font-semibold hover:bg-emerald-50 transition">
|
|
<i data-lucide="file-spreadsheet" class="w-4 h-4"></i>Excel
|
|
</a>
|
|
<a href="{% url 'reports:export_report' report.id 'pdf' %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-red-200 text-red-700 rounded-xl font-semibold hover:bg-red-50 transition">
|
|
<i data-lucide="file-text" class="w-4 h-4"></i>PDF
|
|
</a>
|
|
{% if report.created_by == request.user %}
|
|
<a href="{% url 'reports:delete_report' report.id %}" class="inline-flex items-center gap-2 px-4 py-2.5 bg-white border-2 border-red-200 text-red-700 rounded-xl font-semibold hover:bg-red-50 transition" onclick="return confirm('Are you sure you want to delete this report?')">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>Delete
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if report.description %}
|
|
<p class="mt-4 text-slate">{{ report.description }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Summary Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6 animate-in">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-blue to-navy rounded-xl flex items-center justify-center">
|
|
<i data-lucide="database" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-2xl font-bold text-navy">{{ summary.total_count|default:data.rows|length|default:0 }}</div>
|
|
<div class="text-xs text-slate uppercase font-semibold">Total Records</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="calendar" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-lg font-bold text-navy">{{ report.created_at|date:"M d, Y" }}</div>
|
|
<div class="text-xs text-slate uppercase font-semibold">Created</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="columns" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-2xl font-bold text-navy">{{ data.columns|length|default:0 }}</div>
|
|
<div class="text-xs text-slate uppercase font-semibold">Columns</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-2xl shadow-sm border border-blue-100 p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-amber-500 to-orange-500 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="user" class="w-6 h-6 text-white"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-lg font-bold text-navy truncate">{{ report.created_by.get_full_name|default:report.created_by.username }}</div>
|
|
<div class="text-xs text-slate uppercase font-semibold">Created By</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Table -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden animate-in">
|
|
{% if data.rows and data.rows|length > 0 %}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-slate-50 border-b border-slate-200">
|
|
<tr>
|
|
{% for column in data.columns %}
|
|
<th class="px-4 py-3 text-left text-xs font-bold text-slate-600 uppercase tracking-wider">{{ column }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
{% for row in data.rows %}
|
|
<tr class="hover:bg-blue-50 transition">
|
|
{% for column_key in data.column_keys %}
|
|
<td class="px-4 py-3 text-sm text-navy">{{ row|lookup:column_key|default:"-" }}</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% if data.rows|length > 100 %}
|
|
<div class="px-4 py-3 bg-slate-50 text-center text-sm text-slate-600">
|
|
Showing 100 of {{ data.rows|length }} records
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="text-center py-16">
|
|
<div class="w-20 h-20 bg-gradient-to-br from-slate-100 to-slate-200 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="inbox" class="w-10 h-10 text-slate-400"></i>
|
|
</div>
|
|
<p class="text-slate font-medium text-lg">No data found</p>
|
|
<p class="text-slate mt-2">The report filters may be too restrictive or no data exists for the selected criteria.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Report Configuration (Collapsible) -->
|
|
<div class="mt-6 bg-white rounded-2xl shadow-sm border border-blue-100 overflow-hidden animate-in">
|
|
<button type="button" class="w-full px-6 py-4 flex items-center justify-between text-left hover:bg-slate-50 transition" onclick="toggleConfig()">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-gradient-to-br from-slate-100 to-slate-200 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="settings" class="w-5 h-5 text-slate-600"></i>
|
|
</div>
|
|
<span class="font-bold text-navy">Report Configuration</span>
|
|
</div>
|
|
<i data-lucide="chevron-down" class="w-5 h-5 text-slate transition-transform" id="configChevron"></i>
|
|
</button>
|
|
<div id="configPanel" class="hidden border-t border-slate-100">
|
|
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<h4 class="text-sm font-bold text-slate mb-2">Filter Configuration</h4>
|
|
<pre class="bg-slate-50 rounded-xl p-4 text-xs text-slate overflow-x-auto">{{ report.filter_config|json_script:"filterConfig" }}</pre>
|
|
<script id="filterConfig" type="application/json">{{ report.filter_config }}</script>
|
|
<div class="bg-slate-50 rounded-xl p-4 text-xs text-slate">
|
|
{% for key, value in report.filter_config.items %}
|
|
<div class="flex justify-between py-1 border-b border-slate-200 last:border-0">
|
|
<span class="font-medium">{{ key }}</span>
|
|
<span>{{ value }}</span>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-slate-400 italic">No filters configured</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-sm font-bold text-slate mb-2">Report Details</h4>
|
|
<div class="bg-slate-50 rounded-xl p-4 text-xs text-slate space-y-2">
|
|
<div class="flex justify-between py-1 border-b border-slate-200">
|
|
<span class="font-medium">Data Source</span>
|
|
<span>{{ report.get_data_source_display }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200">
|
|
<span class="font-medium">Created</span>
|
|
<span>{{ report.created_at|date:"M d, Y H:i" }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-1 border-b border-slate-200">
|
|
<span class="font-medium">Last Updated</span>
|
|
<span>{{ report.updated_at|date:"M d, Y H:i" }}</span>
|
|
</div>
|
|
{% if report.last_run_at %}
|
|
<div class="flex justify-between py-1 border-b border-slate-200">
|
|
<span class="font-medium">Last Run</span>
|
|
<span>{{ report.last_run_at|date:"M d, Y H:i" }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if report.last_run_count %}
|
|
<div class="flex justify-between py-1">
|
|
<span class="font-medium">Last Run Count</span>
|
|
<span>{{ report.last_run_count }} records</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
function toggleConfig() {
|
|
const panel = document.getElementById('configPanel');
|
|
const chevron = document.getElementById('configChevron');
|
|
panel.classList.toggle('hidden');
|
|
chevron.classList.toggle('rotate-180');
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |