feat: fancy admin panel

assets/css/admin.css

@@ -1,10 +1,58 @@
 .admin-panel {
   display: flex;
-  gap: 16px;
+  gap: 32px;
   margin-top: 16px;
 }
 
-.admin-panel ul {
+.admin-panel .menu {
   padding: 0;
   margin: 0;
+  list-style-type: none;
+}
+
+.admin-panel .menu li {
+  padding: 10px;
+  background-color: #20232f;
+}
+
+.admin-panel .menu li:first-child {
+  border-radius: 8px 8px 0 0;
+}
+
+.admin-panel .menu li:not(:first-child) {
+  border-top: 1px solid #353544;
+}
+
+.admin-panel .menu li:last-child {
+  border-radius: 0 0 8px 8px;
+}
+
+.admin-panel h3 {
+  margin-top: 0;
+}
+
+.admin-panel .stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.admin-panel .stat {
+  background-color: #20232f;
+  padding: 16px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  width: min-content;
+}
+
+.admin-panel .stat .value {
+  font-size: 48px;
+  font-weight: bold;
+}
+
+.admin-panel .stat .name {
+  text-align: center;
 }

lib/comfycamp/accounts.ex

@@ -33,6 +33,14 @@ defmodule Comfycamp.Accounts do
     Repo.all(User)
   end
 
+  def count_users() do
+    Repo.one(from u in "users", select: count(u.id))
+  end
+
+  def count_unapproved_users() do
+    Repo.one(from u in "users", select: count(u.id), where: not u.is_approved)
+  end
+
   @doc """
   Gets a user by email and password.
 

lib/comfycamp_web/components/layouts/admin.html.heex

@@ -2,12 +2,15 @@
 
 <main>
   <div class="limiter">
-    <.link href={~p"/"}>
-      Главная страница
-    </.link>
     <h1>Панель администратора</h1>
+    <.back navigate={~p"/"}>Главная страница</.back>
     <div class="admin-panel">
-      <ul>
+      <ul class="menu">
+        <li>
+          <.link href={~p"/admin"}>
+            Управление
+          </.link>
+        </li>
         <li>
           <.link href={~p"/admin/notes"}>
             Заметки

lib/comfycamp_web/controllers/admin_page_controller.ex

@@ -1,10 +1,18 @@
 defmodule ComfycampWeb.AdminPageController do
   use ComfycampWeb, :controller
+  alias Comfycamp.Accounts
 
   def home(conn, _params) do
+    user_count = Accounts.count_users()
+    unapproved_user_count = Accounts.count_unapproved_users()
+
     conn
     |> put_layout(html: :admin)
-    |> render(:home, page_title: "Админка")
+    |> render(:home,
+      page_title: "Админка",
+      user_count: user_count,
+      unapproved_user_count: unapproved_user_count
+    )
   end
 
   def services(conn, _params) do

lib/comfycamp_web/controllers/admin_page_html.ex

@@ -3,7 +3,31 @@ defmodule ComfycampWeb.AdminPageHTML do
 
   def home(assigns) do
     ~H"""
-    Добро пожаловать, админ.
+    <div>
+      <h3>Управление сайтом</h3>
+      <div class="stats">
+        <.stat name="Всего пользователей" value={@user_count} />
+        <.stat
+          name="Неодобренных пользователей"
+          value={@unapproved_user_count}
+        />
+      </div>
+    </div>
+    """
+  end
+
+  @doc """
+  Card for statistical data.
+  """
+  attr :name, :string, required: true
+  attr :value, :any, required: true
+
+  def stat(assigns) do
+    ~H"""
+    <div class="stat">
+      <div class="value"><%= @value %></div>
+      <div class="name"><%= @name %></div>
+    </div>
     """
   end
 end

lib/comfycamp_web/controllers/notes_editor_html.ex

@@ -4,6 +4,7 @@ defmodule ComfycampWeb.NotesEditorHTML do
   def index(assigns) do
     ~H"""
     <div>
+      <h3>Заметки</h3>
       <.link href={~p"/admin/notes/new"}>
         Создать заметку
       </.link>
@@ -26,8 +27,8 @@ defmodule ComfycampWeb.NotesEditorHTML do
   def show(assigns) do
     ~H"""
     <div>
-      <.back navigate={~p"/admin/notes"}>Назад</.back>
       <h3><%= @note.title %></h3>
+      <.back navigate={~p"/admin/notes"}>Назад</.back>
 
       <.link href={~p"/admin/notes/#{@note}/edit"}>
         Редактировать
@@ -44,7 +45,7 @@ defmodule ComfycampWeb.NotesEditorHTML do
   def new(assigns) do
     ~H"""
     <div>
-      <h2>Новая заметка</h2>
+      <h3>Новая заметка</h3>
       <.note_form changeset={@changeset} action={~p"/admin/notes"} />
     </div>
     """
@@ -53,7 +54,7 @@ defmodule ComfycampWeb.NotesEditorHTML do
   def edit(assigns) do
     ~H"""
     <div>
-      <h2>Редактировать заметку</h2>
+      <h3>Редактировать заметку</h3>
       <.note_form changeset={@changeset} action={~p"/admin/notes/#{@changeset.data.id}"} />
     </div>
     """