@kyro-cms/admin 0.1.5 → 0.1.7

package/src/pages/settings/[slug].astro

@@ -0,0 +1,162 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+import { globals } from '@/lib/config';
+import { AutoForm } from '@/components/AutoForm';
+
+const { slug } = Astro.params;
+
+// Validate global exists
+if (!slug || !globals[slug]) {
+  return Astro.redirect('/');
+}
+
+const config = globals[slug];
+
+// Fetch current settings data from API
+let data: any = {};
+try {
+  const response = await fetch(`${Astro.url.origin}/api/globals/${slug}`, {
+    headers: Astro.request.headers,
+    credentials: 'include'
+  });
+  if (response.ok) {
+    const result = await response.json();
+    data = result.data || {};
+  }
+} catch (error) {
+  console.error('Failed to fetch settings:', error);
+}
+
+const activeSlug = slug;
+const allGlobals = Object.values(globals);
+
+const title = config.label || slug;
+const description = config.admin?.description || `Manage your ${title.toLowerCase()} configurations.`;
+---
+
+<AdminLayout title="Settings">
+  <div class="flex-1 overflow-y-auto p-8 space-y-6">
+    <!-- Header -->
+    <div class="surface-tile p-8 pb-0">
+      <div class="flex items-center justify-between mb-8">
+        <div>
+          <h1 class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+            Settings
+          </h1>
+          <p class="text-sm text-[var(--kyro-text-secondary)] mt-1 font-medium italic">
+            Global system configurations
+          </p>
+        </div>
+        <button
+          type="submit"
+          form="settings-form"
+          id="btn-save"
+          class="px-8 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold transition-all hover:opacity-90 active:scale-95 shadow-lg shadow-black/10"
+        >
+          Save Changes
+        </button>
+      </div>
+
+      <!-- Tabs Bar -->
+      <div class="flex items-center gap-8 border-b border-[var(--kyro-border)] overflow-x-auto no-scrollbar">
+        {
+          allGlobals.map((g) => (
+            <a
+              href={`/settings/${g.slug}`}
+              class={`pb-4 text-sm font-bold transition-all border-b-2 whitespace-nowrap ${
+                activeSlug === g.slug
+                  ? "text-[var(--kyro-text-primary)] border-[var(--kyro-text-primary)]"
+                  : "text-[var(--kyro-text-secondary)] border-transparent hover:text-[var(--kyro-text-primary)]"
+              }`}
+            >
+              {g.label || g.slug}
+            </a>
+          ))
+        }
+      </div>
+    </div>
+
+    <!-- Form Section -->
+    <div class="surface-tile p-10 pt-4">
+      <div class="mb-8">
+        <h2 class="text-xl font-black text-[var(--kyro-text-primary)] tracking-tight">{config.label || slug}</h2>
+        <p class="text-sm text-[var(--kyro-text-secondary)] mt-1">{description}</p>
+      </div>
+       <!-- Toast container -->
+       <div id="toast-container" class="hidden fixed bottom-6 right-6 z-50">
+        <div class="flex items-center gap-3 px-5 py-4 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl shadow-2xl">
+          <span id="toast-message"></span>
+          <button onclick="document.getElementById('toast-container').classList.add('hidden')" class="opacity-50 hover:opacity-100 ml-2">
+            <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="M6 18L18 6M6 6l12 12"></path></svg>
+          </button>
+        </div>
+      </div>
+
+      <form id="settings-form">
+        <AutoForm
+          client:only="react"
+          config={config}
+          globalSlug={slug}
+          data={data}
+          layout="single"
+        />
+        <input type="hidden" id="form-data" name="form-data" value="{}" />
+      </form>
+    </div>
+  </div>
+
+  <script define:vars={{ slug }}>
+    function showToast(message, isError = false) {
+      const container = document.getElementById('toast-container');
+      const msg = document.getElementById('toast-message');
+      if (container && msg) {
+        msg.textContent = message;
+        container.classList.remove('hidden');
+        if (!isError) {
+          setTimeout(() => container.classList.add('hidden'), 3000);
+        }
+      }
+    }
+
+    document.getElementById('settings-form')?.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const btn = document.getElementById('btn-save');
+      const originalText = btn?.textContent || '';
+      if (btn) {
+        btn.textContent = 'Saving...';
+        btn.setAttribute('disabled', 'true');
+      }
+
+      // Read data from the hidden input that AutoForm writes to internally
+      const hiddenInput = document.getElementById('form-data');
+      let payload = {};
+      if (hiddenInput && hiddenInput.value) {
+        try { payload = JSON.parse(hiddenInput.value); } catch(e) {}
+      }
+
+      try {
+        const response = await fetch(`/api/globals/${slug}`, {
+          method: 'PATCH',
+          credentials: 'include',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+        });
+
+        if (response.ok) {
+          showToast('Settings saved successfully');
+        } else {
+          const error = await response.json();
+          showToast(error.error || 'Failed to save settings', true);
+        }
+      } catch (error) {
+        showToast('An error occurred while saving', true);
+      } finally {
+        if (btn) {
+          btn.textContent = originalText;
+          btn.removeAttribute('disabled');
+        }
+      }
+    });
+  </script>
+</AdminLayout>

package/src/pages/settings/index.astro

@@ -0,0 +1,9 @@
+---
+import { globals } from '@/lib/config';
+
+const firstGlobal = Object.values(globals)[0];
+if (firstGlobal) {
+  return Astro.redirect(`/settings/${firstGlobal.slug}`);
+}
+return Astro.redirect('/');
+---

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

@@ -7,7 +7,10 @@ let error: string | null = null;
 
 if (id) {
   try {
-    const response = await fetch(`${Astro.url.origin}/api/users/${id}`);
+    const response = await fetch(`${Astro.url.origin}/api/users/${id}`, {
+      headers: Astro.request.headers,
+      credentials: 'include'
+    });
     if (response.ok) {
       const data = await response.json();
       user = data.data;
@@ -27,8 +30,8 @@ const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'gu
     {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>
+          <p class="text-lg font-bold text-red-500">{error}</p>
+          <a href="/users" class="mt-4 inline-block text-[var(--kyro-text-primary)] font-bold underline">← Back to users</a>
         </div>
       </div>
     ) : user ? (
@@ -36,16 +39,16 @@ const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'gu
         <!-- 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">
+            <div class="w-14 h-14 rounded-full bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] 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>
+              <h1 class="text-2xl font-black tracking-tighter text-[var(--kyro-text-primary)]">{user.email}</h1>
+              <p class="text-sm text-[var(--kyro-text-secondary)] 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">
+            <button id="btn-toggle-lock" class="px-4 py-2 border border-[var(--kyro-border)] rounded-xl text-sm font-bold text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] 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">
@@ -56,45 +59,45 @@ const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'gu
 
         <!-- User Details -->
         <div class="surface-tile p-6">
-          <h2 class="text-lg font-black text-[#0b1222] tracking-tighter mb-6">Details</h2>
+          <h2 class="text-lg font-black text-[var(--kyro-text-primary)] 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>
+              <label class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-wider">Email</label>
+              <p class="mt-1 font-bold text-[var(--kyro-text-primary)]" 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]">
+              <label class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-wider">Role</label>
+              <select id="field-role" class="mt-1 w-full px-3 py-2 border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] rounded-lg text-sm font-bold text-[var(--kyro-text-primary)]">
                 {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>
+              <label class="text-xs font-bold text-[var(--kyro-text-secondary)] 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'}`}>
+                <span class={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${user.emailVerified ? 'bg-green-500/10 text-green-500' : 'bg-yellow-500/10 text-yellow-500'}`}>
                   {user.emailVerified ? 'Verified' : 'Not verified'}
                 </span>
               </p>
             </div>
             <div>
-              <label class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Status</label>
+              <label class="text-xs font-bold text-[var(--kyro-text-secondary)] 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'}`}>
+                <span class={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${user.locked ? 'bg-red-500/10 text-red-500' : 'bg-green-500/10 text-green-500'}`}>
                   {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">
+              <label class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-wider">Last Login</label>
+              <p class="mt-1 text-sm text-[var(--kyro-text-secondary)]" 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">
+              <label class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-wider">Failed Attempts</label>
+              <p class="mt-1 text-sm font-bold text-[var(--kyro-text-primary)]" id="field-failed-attempts">
                 {user.failedLoginAttempts || 0}
               </p>
             </div>
@@ -139,6 +142,7 @@ const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'gu
           const role = roleSelect.value;
           const res = await fetch(`/api/users/${userId}`, {
             method: 'PATCH',
+            credentials: 'include',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ role }),
           });
@@ -154,6 +158,7 @@ const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'gu
           const isLocked = lockBtn.textContent?.includes('Unlock');
           const res = await fetch(`/api/users/${userId}`, {
             method: 'PATCH',
+            credentials: 'include',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ locked: isLocked }),
           });
@@ -164,7 +169,10 @@ const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'gu
       if (deleteBtn) {
         deleteBtn.addEventListener('click', async () => {
           if (confirm('Delete this user? This cannot be undone.')) {
-            const res = await fetch(`/api/users/${userId}`, { method: 'DELETE' });
+            const res = await fetch(`/api/users/${userId}`, { 
+              method: 'DELETE',
+              credentials: 'include'
+            });
             if (res.ok) window.location.href = '/users';
           }
         });

package/src/pages/users/index.astro

@@ -5,7 +5,10 @@ let users: any[] = [];
 let totalUsers = 0;
 
 try {
-  const response = await fetch(`${Astro.url.origin}/api/users?page=1&limit=100`);
+  const response = await fetch(`${Astro.url.origin}/api/users?page=1&limit=100`, {
+    headers: Astro.request.headers,
+    credentials: 'include'
+  });
   if (response.ok) {
     const data = await response.json();
     users = data.docs || [];
@@ -15,6 +18,8 @@ try {
   console.error('Failed to fetch users:', error);
 }
 
+users = users || [];
+
 const roleColors: Record<string, string> = {
   super_admin: 'bg-red-50 text-red-600',
   admin: 'bg-purple-50 text-purple-600',
@@ -30,13 +35,13 @@ const roleColors: Record<string, string> = {
     <!-- 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">
+        <h1 class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">Users</h1>
+        <p class="text-sm text-[var(--kyro-text-secondary)] mt-1 font-medium">
           Manage user accounts and permissions
-          <span class="ml-2 text-[#0b1222] font-bold">· {totalUsers} users</span>
+          <span class="ml-2 text-[var(--kyro-text-primary)] 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">
+      <a href="/users/new" class="flex items-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold transition-all hover:opacity-90 active:scale-95 shadow-lg">
         <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>
@@ -49,14 +54,14 @@ const roleColors: Record<string, string> = {
       {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">
+            <div class="w-16 h-16 rounded-2xl bg-[var(--kyro-surface-accent)] flex items-center justify-center">
+              <svg class="w-8 h-8 text-[var(--kyro-text-muted)]" 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">
+            <p class="font-bold text-[var(--kyro-text-primary)] text-base">No users yet</p>
+            <p class="text-sm text-[var(--kyro-text-secondary)]">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-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm shadow-md">
               <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>
@@ -67,7 +72,7 @@ const roleColors: Record<string, string> = {
       ) : (
         <table class="w-full text-left">
           <thead>
-            <tr class="text-[#64748b] font-bold text-[10px] uppercase tracking-[0.3em] border-b border-gray-100">
+            <tr class="text-[var(--kyro-text-secondary)] font-bold text-[10px] uppercase tracking-[0.3em] border-b border-[var(--kyro-border)]">
               <th class="px-8 py-6">Email</th>
               <th class="px-6 py-6">Role</th>
               <th class="px-6 py-6">Status</th>
@@ -76,17 +81,17 @@ const roleColors: Record<string, string> = {
               <th class="px-6 py-6 text-right">Actions</th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-gray-50">
+          <tbody class="divide-y divide-[var(--kyro-border)]">
             {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 class="w-10 h-10 rounded-full bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center font-bold text-sm">
+                      {user.email ? 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 class="font-bold text-[var(--kyro-text-primary)]">{user.email}</div>
+                      {user.tenantId && <div class="text-xs text-[var(--kyro-text-secondary)]">Tenant: {user.tenantId}</div>}
                     </div>
                   </div>
                 </td>
@@ -125,7 +130,7 @@ const roleColors: Record<string, string> = {
                         <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">
+                    <button onclick={`event.stopPropagation(); if(confirm('Delete this user?')) { fetch('/api/users/${user.id}', { method: 'DELETE', credentials: 'include' }).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>

package/src/pages/users/new.astro

@@ -9,10 +9,10 @@ const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'gu
     <!-- 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>
+        <h1 class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">Create User</h1>
+        <p class="text-sm text-[var(--kyro-text-secondary)] 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">
+      <a href="/users" class="text-sm font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors">
         ← Back to users
       </a>
     </div>
@@ -21,19 +21,19 @@ const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'gu
     <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" />
+          <label for="email" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2">Email Address</label>
+          <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]" 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>
+          <label for="password" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2">Password</label>
+          <input type="password" id="password" name="password" required minlength="12" class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]" placeholder="Minimum 12 characters" />
+          <p class="text-xs text-[var(--kyro-text-secondary)] 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]">
+          <label for="role" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2">Role</label>
+          <select id="role" name="role" class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]">
             {roleOptions.map((role) => (
               <option value={role}>{role}</option>
             ))}
@@ -41,15 +41,15 @@ const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'gu
         </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" />
+          <label for="tenantId" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2">Tenant ID (optional)</label>
+          <input type="text" id="tenantId" name="tenantId" class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]" 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">
+        <div class="flex items-center justify-end gap-3 pt-4 border-t border-[var(--kyro-border)]">
+          <a href="/users" class="px-6 py-3 border border-[var(--kyro-border)] rounded-xl text-sm font-bold text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] 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">
+          <button type="submit" class="px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-sm font-bold hover:bg-opacity-90 transition-colors shadow-lg shadow-black/10">
             Create User
           </button>
         </div>
@@ -71,6 +71,7 @@ const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'gu
 
         const res = await fetch('/api/users', {
           method: 'POST',
+          credentials: 'include',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(body),
         });
@@ -79,11 +80,11 @@ const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'gu
 
         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';
+          message.className = 'mt-4 p-4 rounded-xl text-sm font-bold bg-green-500/10 text-green-500';
           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';
+          message.className = 'mt-4 p-4 rounded-xl text-sm font-bold bg-red-500/10 text-red-500';
         }
       });
     });