sanasto-wiki/app/views/admin/dashboard/index.html.erb

<% content_for :title, "Dashboard" %>

<div class="space-y-6">
  <div>
    <h2 class="text-3xl font-bold text-gray-900">Dashboard</h2>
    <p class="mt-1 text-sm text-gray-600">Overview of Sanasto Wiki statistics</p>
  </div>

  <!-- Statistics Cards -->
  <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
    <!-- Users -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
            </svg>
          </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"><%= @user_count %></dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-5 py-3">
        <div class="text-sm">
          <span class="font-medium text-gray-700"><%= @admin_count %></span> admins,
          <span class="font-medium text-gray-700"><%= @reviewer_count %></span> reviewers,
          <span class="font-medium text-gray-700"><%= @contributor_count %></span> contributors
        </div>
      </div>
    </div>

    <!-- Entries -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
            </svg>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-gray-500 truncate">Total Entries</dt>
              <dd class="text-3xl font-semibold text-gray-900"><%= @entry_count %></dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-5 py-3">
        <div class="text-sm">
          <span class="font-medium text-green-700"><%= @verified_count %></span> verified,
          <span class="font-medium text-amber-700"><%= @unverified_count %></span> unverified
        </div>
      </div>
    </div>

    <!-- Suggestions -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-gray-500 truncate">Suggestions</dt>
              <dd class="text-3xl font-semibold text-gray-900"><%= @pending_suggestions_count %></dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-5 py-3">
        <div class="text-sm">
          <span class="font-medium text-green-700"><%= @accepted_suggestions_count %></span> accepted,
          <span class="font-medium text-red-700"><%= @rejected_suggestions_count %></span> rejected
        </div>
      </div>
    </div>

    <!-- Invitations -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
      <div class="p-5">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <svg class="h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
            </svg>
          </div>
          <div class="ml-5 w-0 flex-1">
            <dl>
              <dt class="text-sm font-medium text-gray-500 truncate">Pending Invites</dt>
              <dd class="text-3xl font-semibold text-gray-900"><%= @pending_invitations %></dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="bg-gray-50 px-5 py-3">
        <div class="text-sm">
          <%= link_to "Send invitation", new_admin_invitation_path, class: "font-medium text-blue-600 hover:text-blue-500" %>
        </div>
      </div>
    </div>
  </div>

  <!-- Language Completion -->
  <div class="bg-white shadow rounded-lg">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900">Language Completion</h3>
      <div class="mt-5">
        <div class="space-y-4">
          <% supported_languages.each do |language| %>
            <div>
              <div class="flex items-center justify-between">
                <span class="text-sm font-medium text-gray-700"><%= language.native_name %></span>
                <span class="text-sm font-medium text-gray-700"><%= @language_completion[language] %>%</span>
              </div>
              <div class="mt-1 w-full bg-gray-200 rounded-full h-2">
                <div class="bg-blue-600 h-2 rounded-full" style="width: <%= @language_completion[language] %>%"></div>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>

  <!-- Recent Activity -->
  <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
    <!-- Recent Users -->
    <div class="bg-white shadow rounded-lg">
      <div class="px-4 py-5 sm:p-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Recent Users</h3>
        <div class="flow-root">
          <ul class="-my-5 divide-y divide-gray-200">
            <% @recent_users.each do |user| %>
              <li class="py-4">
                <div class="flex items-center space-x-4">
                  <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-900 truncate">
                      <%= user.name || user.email %>
                    </p>
                    <p class="text-sm text-gray-500 truncate">
                      <%= user.email %>
                    </p>
                  </div>
                  <div>
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                      <%= user.role %>
                    </span>
                  </div>
                </div>
              </li>
            <% end %>
          </ul>
        </div>
        <div class="mt-6">
          <%= link_to "View all users →", admin_users_path, class: "text-sm font-medium text-blue-600 hover:text-blue-500" %>
        </div>
      </div>
    </div>

    <!-- Recent Entries -->
    <div class="bg-white shadow rounded-lg">
      <div class="px-4 py-5 sm:p-6">
        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Recent Entries</h3>
        <div class="flow-root">
          <ul class="-my-5 divide-y divide-gray-200">
            <% @recent_entries.each do |entry| %>
              <li class="py-4">
                <div class="flex items-center space-x-4">
                  <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-gray-900 truncate">
                      <%= entry.fi || entry.en || entry.sv || "(No translation)" %>
                    </p>
                    <p class="text-sm text-gray-500 truncate">
                      <%= entry.category.humanize %>
                    </p>
                  </div>
                  <div>
                    <% if entry.verified? %>
                      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                        verified
                      </span>
                    <% end %>
                  </div>
                </div>
              </li>
            <% end %>
          </ul>
        </div>
        <div class="mt-6">
          <%= link_to "View all entries →", entries_path, class: "text-sm font-medium text-blue-600 hover:text-blue-500" %>
        </div>
      </div>
    </div>
  </div>
</div>