coi/app/dashboard/templates/dashboard/index.html

{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-4">Welcome to the Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold text-gray-700">Total Users</h2>
            <p class="text-gray-600 text-lg mt-2">{{ total_users }}</p>
        </div>
        <!-- Card 2 -->
        <div class="bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold text-gray-700">Reports Generated</h2>
            <p class="text-gray-600 text-lg mt-2">{{ total_reports }}</p>
        </div>
        <!-- Card 3 -->
        <div class="bg-white p-6 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold text-gray-700">Active Sessions</h2>
            <p class="text-gray-600 text-lg mt-2">{{ total_sessions }}</p>
        </div>
    </div>

    <div class="mt-8">
        <h2 class="text-2xl font-bold text-gray-800 mb-4">Latest Reports</h2>
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <table class="w-full border-collapse border border-gray-200">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="border border-gray-200 px-4 py-2 text-left">Date</th>
                        <th class="border border-gray-200 px-4 py-2 text-left">Report Name</th>
                        <th class="border border-gray-200 px-4 py-2 text-left">File</th>
                        <th class="border border-gray-200 px-4 py-2 text-left">User</th>
                    </tr>
                </thead>
                <tbody>
  {% for report in latest_reports %}
    <tr class="hover:bg-gray-50">
      <td class="border border-gray-200 px-4 py-2">{{ report.created_at|date:"d/m/Y H:i" }}</td>
      <td class="border border-gray-200 px-4 py-2">{{ report.name }}</td>
      <td class="border border-gray-200 px-4 py-2">
        {% if report.file %}
        <a href="{{ report.file.url }}" target="_blank" class="text-blue-600 underline">View</a>
        {% else %}
        <span class="text-gray-400">No file</span>
        {% endif %}
      </td>
      <td class="border border-gray-200 px-4 py-2">{{ report.created_by.username }}</td>
    </tr>
  {% empty %}
    <tr>
      <td colspan="3" class="text-center text-gray-500 py-2">No reports found.</td>
    </tr>
  {% endfor %}
</tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}