@kyro-cms/admin 0.1.2

package/src/pages/users/[id].astro

@@ -0,0 +1,174 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+
+const { id } = Astro.params;
+let user: any = null;
+let error: string | null = null;
+
+if (id) {
+  try {
+    const response = await fetch(`${Astro.url.origin}/api/users/${id}`);
+    if (response.ok) {
+      const data = await response.json();
+      user = data.data;
+    } else {
+      error = 'User not found';
+    }
+  } catch (e) {
+    error = 'Failed to fetch user';
+  }
+}
+
+const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'guest'];
+---
+
+<AdminLayout title={user ? user.email : 'User'}>
+  <div class="flex-1 overflow-y-auto p-8 pr-12 space-y-8">
+    {error ? (
+      <div class="surface-tile p-8">
+        <div class="text-center">
+          <p class="text-lg font-bold text-red-600">{error}</p>
+          <a href="/users" class="mt-4 inline-block text-[#0b1222] font-bold underline">← Back to users</a>
+        </div>
+      </div>
+    ) : user ? (
+      <>
+        <!-- Header -->
+        <div class="surface-tile p-6 flex items-center justify-between">
+          <div class="flex items-center gap-4">
+            <div class="w-14 h-14 rounded-full bg-[#0b1222] text-white flex items-center justify-center font-bold text-xl">
+              {user.email.charAt(0).toUpperCase()}
+            </div>
+            <div>
+              <h1 class="text-2xl font-black tracking-tighter text-[#0b1222]">{user.email}</h1>
+              <p class="text-sm text-[#64748b] font-medium">User ID: {user.id}</p>
+            </div>
+          </div>
+          <div class="flex gap-2">
+            <button id="btn-toggle-lock" class="px-4 py-2 border border-gray-200 rounded-xl text-sm font-bold text-[#64748b] hover:bg-gray-50 transition-colors">
+              {user.locked ? 'Unlock User' : 'Lock User'}
+            </button>
+            <button id="btn-delete-user" class="px-4 py-2 border border-red-200 rounded-xl text-sm font-bold text-red-600 hover:bg-red-50 transition-colors">
+              Delete
+            </button>
+          </div>
+        </div>
+
+        <!-- User Details -->
+        <div class="surface-tile p-6">
+          <h2 class="text-lg font-black text-[#0b1222] tracking-tighter mb-6">Details</h2>
+          <div class="grid grid-cols-2 gap-6">
+            <div>
+              <label class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Email</label>
+              <p class="mt-1 font-bold text-[#0b1222]" id="field-email">{user.email}</p>
+            </div>
+            <div>
+              <label class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Role</label>
+              <select id="field-role" class="mt-1 w-full px-3 py-2 border border-gray-200 rounded-lg text-sm font-bold text-[#0b1222]">
+                {roleOptions.map((role) => (
+                  <option value={role} selected={user.role === role}>{role}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Email Verified</label>
+              <p class="mt-1">
+                <span class={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${user.emailVerified ? 'bg-green-50 text-green-600' : 'bg-yellow-50 text-yellow-600'}`}>
+                  {user.emailVerified ? 'Verified' : 'Not verified'}
+                </span>
+              </p>
+            </div>
+            <div>
+              <label class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Status</label>
+              <p class="mt-1">
+                <span class={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${user.locked ? 'bg-red-50 text-red-600' : 'bg-green-50 text-green-600'}`}>
+                  {user.locked ? 'Locked' : 'Active'}
+                </span>
+              </p>
+            </div>
+            <div>
+              <label class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Last Login</label>
+              <p class="mt-1 text-sm text-[#64748b]" id="field-last-login">
+                {user.lastLogin ? new Date(user.lastLogin).toLocaleString() : 'Never'}
+              </p>
+            </div>
+            <div>
+              <label class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Failed Attempts</label>
+              <p class="mt-1 text-sm font-bold text-[#0b1222]" id="field-failed-attempts">
+                {user.failedLoginAttempts || 0}
+              </p>
+            </div>
+            <div>
+              <label class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Created</label>
+              <p class="mt-1 text-sm text-[#64748b]">
+                {user.createdAt ? new Date(user.createdAt).toLocaleString() : '—'}
+              </p>
+            </div>
+            <div>
+              <label class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Updated</label>
+              <p class="mt-1 text-sm text-[#64748b]">
+                {user.updatedAt ? new Date(user.updatedAt).toLocaleString() : '—'}
+              </p>
+            </div>
+          </div>
+
+          <div class="mt-6 flex justify-end">
+            <button id="btn-save" class="px-6 py-2 bg-[#0b1222] text-white rounded-xl text-sm font-bold hover:bg-[#1a2332] transition-colors">
+              Save Changes
+            </button>
+          </div>
+        </div>
+      </>
+    ) : (
+      <div class="surface-tile p-8 text-center">
+        <p class="text-lg font-bold text-[#64748b]">Loading...</p>
+      </div>
+    )}
+  </div>
+
+  <script is:inline>
+    document.addEventListener('DOMContentLoaded', () => {
+      const userId = window.location.pathname.split('/').pop();
+      const saveBtn = document.getElementById('btn-save');
+      const lockBtn = document.getElementById('btn-toggle-lock');
+      const deleteBtn = document.getElementById('btn-delete-user');
+      const roleSelect = document.getElementById('field-role');
+
+      if (saveBtn && roleSelect) {
+        saveBtn.addEventListener('click', async () => {
+          const role = roleSelect.value;
+          const res = await fetch(`/api/users/${userId}`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ role }),
+          });
+          if (res.ok) {
+            saveBtn.textContent = 'Saved!';
+            setTimeout(() => { saveBtn.textContent = 'Save Changes'; }, 2000);
+          }
+        });
+      }
+
+      if (lockBtn) {
+        lockBtn.addEventListener('click', async () => {
+          const isLocked = lockBtn.textContent?.includes('Unlock');
+          const res = await fetch(`/api/users/${userId}`, {
+            method: 'PATCH',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ locked: isLocked }),
+          });
+          if (res.ok) location.reload();
+        });
+      }
+
+      if (deleteBtn) {
+        deleteBtn.addEventListener('click', async () => {
+          if (confirm('Delete this user? This cannot be undone.')) {
+            const res = await fetch(`/api/users/${userId}`, { method: 'DELETE' });
+            if (res.ok) window.location.href = '/users';
+          }
+        });
+      }
+    });
+  </script>
+</AdminLayout>

package/src/pages/users/index.astro

@@ -0,0 +1,142 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+
+let users: any[] = [];
+let totalUsers = 0;
+
+try {
+  const response = await fetch(`${Astro.url.origin}/api/users?page=1&limit=100`);
+  if (response.ok) {
+    const data = await response.json();
+    users = data.docs || [];
+    totalUsers = data.totalDocs || 0;
+  }
+} catch (error) {
+  console.error('Failed to fetch users:', error);
+}
+
+const roleColors: Record<string, string> = {
+  super_admin: 'bg-red-50 text-red-600',
+  admin: 'bg-purple-50 text-purple-600',
+  editor: 'bg-blue-50 text-blue-600',
+  author: 'bg-green-50 text-green-600',
+  customer: 'bg-gray-50 text-gray-600',
+  guest: 'bg-yellow-50 text-yellow-600',
+};
+---
+
+<AdminLayout title="Users">
+  <div class="flex-1 overflow-y-auto p-8 pr-12 space-y-8">
+    <!-- Header -->
+    <div class="surface-tile p-6 flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-black tracking-tighter text-[#0b1222]">Users</h1>
+        <p class="text-sm text-[#64748b] mt-1 font-medium">
+          Manage user accounts and permissions
+          <span class="ml-2 text-[#0b1222] font-bold">· {totalUsers} users</span>
+        </p>
+      </div>
+      <a href="/users/new" class="flex items-center gap-2 px-6 py-3 bg-[#0b1222] text-white rounded-xl font-bold transition-all hover:bg-[#1a2332] active:scale-95">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 5v14M5 12h14"></path>
+        </svg>
+        Add User
+      </a>
+    </div>
+
+    <!-- Users Table -->
+    <div class="surface-tile overflow-hidden">
+      {users.length === 0 ? (
+        <div class="px-8 py-16 text-center">
+          <div class="flex flex-col items-center gap-4">
+            <div class="w-16 h-16 rounded-2xl bg-gray-50 flex items-center justify-center">
+              <svg class="w-8 h-8 text-[#9ca3af]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+            <p class="font-bold text-[#0b1222] text-base">No users yet</p>
+            <p class="text-sm text-[#64748b]">Create your first user to get started.</p>
+            <a href="/users/new" class="mt-2 inline-flex items-center gap-2 px-5 py-2.5 bg-[#0b1222] text-white rounded-lg font-bold text-sm">
+              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 5v14M5 12h14"></path>
+              </svg>
+              Add User
+            </a>
+          </div>
+        </div>
+      ) : (
+        <table class="w-full text-left">
+          <thead>
+            <tr class="text-[#64748b] font-bold text-[10px] uppercase tracking-[0.3em] border-b border-gray-100">
+              <th class="px-8 py-6">Email</th>
+              <th class="px-6 py-6">Role</th>
+              <th class="px-6 py-6">Status</th>
+              <th class="px-6 py-6">Last Login</th>
+              <th class="px-6 py-6">Created</th>
+              <th class="px-6 py-6 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-50">
+            {users.map((user) => (
+              <tr class="group hover:bg-gray-50/50 transition-colors cursor-pointer" onclick={`window.location='/users/${user.id}'`}>
+                <td class="px-8 py-5">
+                  <div class="flex items-center gap-4">
+                    <div class="w-10 h-10 rounded-full bg-[#0b1222] text-white flex items-center justify-center font-bold text-sm">
+                      {user.email.charAt(0).toUpperCase()}
+                    </div>
+                    <div>
+                      <div class="font-bold text-[#0b1222]">{user.email}</div>
+                      {user.tenantId && <div class="text-xs text-[#64748b]">Tenant: {user.tenantId}</div>}
+                    </div>
+                  </div>
+                </td>
+                <td class="px-6 py-5">
+                  <span class={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${roleColors[user.role] || 'bg-gray-50 text-gray-600'}`}>
+                    {user.role}
+                  </span>
+                </td>
+                <td class="px-6 py-5">
+                  {user.locked ? (
+                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-red-50 text-red-600">
+                      <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
+                      </svg>
+                      Locked
+                    </span>
+                  ) : (
+                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-green-50 text-green-600">
+                      <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                      </svg>
+                      Active
+                    </span>
+                  )}
+                </td>
+                <td class="px-6 py-5 text-sm text-[#64748b]">
+                  {user.lastLogin ? new Date(user.lastLogin).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : 'Never'}
+                </td>
+                <td class="px-6 py-5 text-sm text-[#64748b]">
+                  {user.createdAt ? new Date(user.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}
+                </td>
+                <td class="px-6 py-5 text-right">
+                  <div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <a href={`/users/${user.id}`} class="inline-flex items-center justify-center w-8 h-8 rounded-md text-[#64748b] hover:bg-gray-100 hover:text-[#0b1222] transition-colors" onclick="event.stopPropagation()">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
+                      </svg>
+                    </a>
+                    <button onclick={`event.stopPropagation(); if(confirm('Delete this user?')) { fetch('/api/users/${user.id}', { method: 'DELETE' }).then(() => location.reload()); }`} class="inline-flex items-center justify-center w-8 h-8 rounded-md text-[#64748b] hover:bg-red-50 hover:text-red-600 transition-colors">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                      </svg>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  </div>
+</AdminLayout>

package/src/pages/users/new.astro

@@ -0,0 +1,91 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+
+const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'guest'];
+---
+
+<AdminLayout title="New User">
+  <div class="flex-1 overflow-y-auto p-8 pr-12 space-y-8">
+    <!-- Header -->
+    <div class="surface-tile p-6 flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-black tracking-tighter text-[#0b1222]">Create User</h1>
+        <p class="text-sm text-[#64748b] mt-1 font-medium">Add a new user to the system</p>
+      </div>
+      <a href="/users" class="text-sm font-bold text-[#64748b] hover:text-[#0b1222] transition-colors">
+        ← Back to users
+      </a>
+    </div>
+
+    <!-- Form -->
+    <div class="surface-tile p-6">
+      <form id="create-user-form" class="space-y-6 max-w-2xl">
+        <div>
+          <label for="email" class="block text-sm font-bold text-[#0b1222] mb-2">Email Address</label>
+          <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[#0b1222]/20 focus:border-[#0b1222]" placeholder="user@example.com" />
+        </div>
+
+        <div>
+          <label for="password" class="block text-sm font-bold text-[#0b1222] mb-2">Password</label>
+          <input type="password" id="password" name="password" required minlength="12" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[#0b1222]/20 focus:border-[#0b1222]" placeholder="Minimum 12 characters" />
+          <p class="text-xs text-[#64748b] mt-1">Must contain uppercase, lowercase, numbers, and special characters</p>
+        </div>
+
+        <div>
+          <label for="role" class="block text-sm font-bold text-[#0b1222] mb-2">Role</label>
+          <select id="role" name="role" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[#0b1222]/20 focus:border-[#0b1222]">
+            {roleOptions.map((role) => (
+              <option value={role}>{role}</option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label for="tenantId" class="block text-sm font-bold text-[#0b1222] mb-2">Tenant ID (optional)</label>
+          <input type="text" id="tenantId" name="tenantId" class="w-full px-4 py-3 border border-gray-200 rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[#0b1222]/20 focus:border-[#0b1222]" placeholder="Leave empty for global user" />
+        </div>
+
+        <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-100">
+          <a href="/users" class="px-6 py-3 border border-gray-200 rounded-xl text-sm font-bold text-[#64748b] hover:bg-gray-50 transition-colors">
+            Cancel
+          </a>
+          <button type="submit" class="px-6 py-3 bg-[#0b1222] text-white rounded-xl text-sm font-bold hover:bg-[#1a2332] transition-colors">
+            Create User
+          </button>
+        </div>
+      </form>
+
+      <div id="form-message" class="hidden mt-4 p-4 rounded-xl text-sm font-bold"></div>
+    </div>
+  </div>
+
+  <script is:inline>
+    document.addEventListener('DOMContentLoaded', () => {
+      const form = document.getElementById('create-user-form');
+      const message = document.getElementById('form-message');
+
+      form?.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const formData = new FormData(form);
+        const body = Object.fromEntries(formData.entries());
+
+        const res = await fetch('/api/users', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+        });
+
+        const data = await res.json();
+
+        if (res.ok) {
+          message.textContent = 'User created successfully!';
+          message.className = 'mt-4 p-4 rounded-xl text-sm font-bold bg-green-50 text-green-600';
+          setTimeout(() => { window.location.href = `/users/${data.data.id}`; }, 1000);
+        } else {
+          message.textContent = data.error || 'Failed to create user';
+          message.className = 'mt-4 p-4 rounded-xl text-sm font-bold bg-red-50 text-red-600';
+        }
+      });
+    });
+  </script>
+</AdminLayout>