{% extends "base.html" %} {% block title %}Dashboard{% endblock %} {% block
content %}
<div x-data="dashboardData()" x-init="loadStats()">
  <div class="px-4 sm:px-0">
    <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
    <p class="mt-2 text-sm text-gray-700">System overview and statistics</p>
  </div>

  <!-- Stats Grid -->
  <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
    <!-- Total Users -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <i class="fas fa-users text-4xl text-indigo-600"></i>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-gray-500 truncate">
                Total Users
              </dt>
              <dd
                class="text-3xl font-semibold text-gray-900"
                x-text="stats.users?.total || 0"
              ></dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-5 py-3">
        <div class="text-sm">
          <span class="text-gray-600">Admins: </span>
          <span
            class="font-medium text-gray-900"
            x-text="stats.users?.admins || 0"
          ></span>
        </div>
      </div>
    </div>

    <!-- Recent Users -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <i class="fas fa-user-plus text-4xl text-green-600"></i>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-gray-500 truncate">
                New Users (7d)
              </dt>
              <dd
                class="text-3xl font-semibold text-gray-900"
                x-text="stats.users?.recent || 0"
              ></dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-5 py-3">
        <a
          href="/admin/users"
          class="text-sm font-medium text-indigo-600 hover:text-indigo-500"
        >
          View all users <span aria-hidden="true">&rarr;</span>
        </a>
      </div>
    </div>

    <!-- Total Collections -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <i class="fas fa-database text-4xl text-purple-600"></i>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-gray-500 truncate">
                Collections
              </dt>
              <dd
                class="text-3xl font-semibold text-gray-900"
                x-text="stats.collections?.total || 0"
              ></dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-5 py-3">
        <a
          href="/admin/collections"
          class="text-sm font-medium text-indigo-600 hover:text-indigo-500"
        >
          Manage collections <span aria-hidden="true">&rarr;</span>
        </a>
      </div>
    </div>

    <!-- Total Backups -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <i class="fas fa-hdd text-4xl text-blue-600"></i>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-gray-500 truncate">
                Backups
              </dt>
              <dd
                class="text-3xl font-semibold text-gray-900"
                x-text="stats.backups?.total || 0"
              ></dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-5 py-3">
        <a
          href="/admin/backups"
          class="text-sm font-medium text-indigo-600 hover:text-indigo-500"
        >
          Manage backups <span aria-hidden="true">&rarr;</span>
        </a>
      </div>
    </div>

    <!-- Total Files -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <i class="fas fa-file text-4xl text-orange-600"></i>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-gray-500 truncate">
                Files
              </dt>
              <dd
                class="text-3xl font-semibold text-gray-900"
                x-text="stats.files?.total || 0"
              ></dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-5 py-3">
        <div class="text-sm">
          <span class="text-gray-600">Storage: </span>
          <span
            class="font-medium text-gray-900"
            x-text="formatBytes(stats.files?.total_size || 0)"
          ></span>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick Actions -->
  <div class="mt-8">
    <h2 class="text-lg font-medium text-gray-900 mb-4">Quick Actions</h2>
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
      <ul role="list" class="divide-y divide-gray-200">
        <li>
          <a href="/admin/users" class="block hover:bg-gray-50">
            <div class="px-4 py-4 sm:px-6">
              <div class="flex items-center">
                <i class="fas fa-users text-indigo-600 text-xl mr-4"></i>
                <div class="min-w-0 flex-1">
                  <p class="text-sm font-medium text-indigo-600">
                    Manage Users
                  </p>
                  <p class="text-sm text-gray-500">
                    View, edit, and manage user accounts
                  </p>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a href="/admin/collections" class="block hover:bg-gray-50">
            <div class="px-4 py-4 sm:px-6">
              <div class="flex items-center">
                <i class="fas fa-database text-indigo-600 text-xl mr-4"></i>
                <div class="min-w-0 flex-1">
                  <p class="text-sm font-medium text-indigo-600">
                    Manage Collections
                  </p>
                  <p class="text-sm text-gray-500">
                    View and manage collections
                  </p>
                </div>
                <i class="fas fa-chevron-right text-gray-400"></i>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a href="/docs" target="_blank" class="block hover:bg-gray-50">
            <div class="px-4 py-4 sm:px-6">
              <div class="flex items-center">
                <i class="fas fa-book text-indigo-600 text-xl mr-4"></i>
                <div class="min-w-0 flex-1">
                  <p class="text-sm font-medium text-indigo-600">
                    API Documentation
                  </p>
                  <p class="text-sm text-gray-500">
                    View API documentation and test endpoints
                  </p>
                </div>
                <i class="fas fa-external-link-alt text-gray-400"></i>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Recent Backups -->
  <div class="mt-8" x-show="stats.backups?.recent && stats.backups.recent.length > 0">
    <h2 class="text-lg font-medium text-gray-900 mb-4">Recent Backups</h2>
    <div class="bg-white shadow overflow-hidden sm:rounded-lg">
      <ul role="list" class="divide-y divide-gray-200">
        <template x-for="backup in stats.backups?.recent || []" :key="backup.id">
          <li class="px-4 py-4 sm:px-6">
            <div class="flex items-center justify-between">
              <div class="flex items-center min-w-0 flex-1">
                <i class="fas fa-hdd text-blue-600 text-xl mr-4"></i>
                <div class="min-w-0 flex-1">
                  <p class="text-sm font-medium text-gray-900 truncate" x-text="backup.filename"></p>
                  <p class="text-sm text-gray-500">
                    <span x-text="formatBytes(backup.size)"></span>
                    <span class="mx-2">•</span>
                    <span x-text="formatDate(backup.created)"></span>
                  </p>
                </div>
              </div>
              <a :href="`/admin/backups`" class="text-sm font-medium text-indigo-600 hover:text-indigo-500">
                View <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
          </li>
        </template>
      </ul>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  function dashboardData() {
    return {
      stats: {},
      async loadStats() {
        try {
          this.stats = await apiRequest("/admin/stats");
        } catch (error) {
          console.error("Failed to load stats:", error);
        }
      },
      formatBytes(bytes) {
        if (!bytes || bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
      },
      formatDate(dateString) {
        if (!dateString) return '';
        const date = new Date(dateString);
        const now = new Date();
        const diff = Math.floor((now - date) / 1000);

        if (diff < 60) return 'just now';
        if (diff < 3600) return Math.floor(diff / 60) + ' minutes ago';
        if (diff < 86400) return Math.floor(diff / 3600) + ' hours ago';
        if (diff < 604800) return Math.floor(diff / 86400) + ' days ago';

        return date.toLocaleDateString();
      }
    };
  }
</script>
{% endblock %}