フロントエンドプレイアブル

app/views/users/index.html.erb

@@ -0,0 +1,82 @@
+<% content_for :title, "ユーザー管理" %>
+
+<div class="mb-6">
+  <h1 class="text-3xl font-bold text-gray-900">ユーザー管理</h1>
+  <p class="mt-2 text-sm text-gray-600">登録されているユーザーの一覧と管理</p>
+</div>
+
+<div class="bg-white shadow overflow-hidden sm:rounded-lg">
+  <table class="min-w-full divide-y divide-gray-200">
+    <thead class="bg-gray-50">
+      <tr>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+          ユーザー名
+        </th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+          メールアドレス
+        </th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+          権限
+        </th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+          登録日
+        </th>
+        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+          操作
+        </th>
+      </tr>
+    </thead>
+    <tbody class="bg-white divide-y divide-gray-200">
+      <% @users.each do |user| %>
+        <tr>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <div class="flex items-center">
+              <div class="text-sm font-medium text-gray-900">
+                <%= user.username %>
+              </div>
+            </div>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <div class="text-sm text-gray-900"><%= user.email %></div>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <% if user.admin? %>
+              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
+                管理者
+              </span>
+            <% else %>
+              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
+                一般ユーザー
+              </span>
+            <% end %>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+            <%= user.created_at.strftime("%Y年%m月%d日") %>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
+            <%= link_to "詳細", user_path(user), class: "text-indigo-600 hover:text-indigo-900" %>
+            <%= link_to "編集", edit_user_path(user), class: "text-blue-600 hover:text-blue-900" %>
+            <% if user != current_user %>
+              <%= button_to "#{user.admin? ? '管理者解除' : '管理者に昇格'}", 
+                            toggle_admin_user_path(user), 
+                            method: :patch,
+                            class: "inline text-yellow-600 hover:text-yellow-900",
+                            data: { confirm: "#{user.admin? ? '管理者権限を削除' : '管理者権限を付与'}しますか?" } %>
+              <%= button_to "削除", 
+                            user_path(user), 
+                            method: :delete,
+                            class: "inline text-red-600 hover:text-red-900",
+                            data: { confirm: "#{user.username}を削除しますか?" } %>
+            <% end %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<div class="mt-6">
+  <p class="text-sm text-gray-600">
+    合計: <%= @users.count %>ユーザー
+  </p>
+</div>