@kyro-cms/admin 0.3.1 → 0.3.4

package/src/pages/roles/index.astro

@@ -1,112 +1,219 @@
 ---
-import AdminLayout from '../../layouts/AdminLayout.astro';
+import AdminLayout from "../../layouts/AdminLayout.astro";
+
+import { adminPath, apiPath } from "../../lib/paths";
 
 const defaultRoles = [
-  { name: 'super_admin', level: 100, inherits: ['admin'], description: 'Full system access across all tenants', color: 'bg-red-500/10 text-red-500 border-red-500/20' },
-  { name: 'admin', level: 90, inherits: ['editor'], description: 'Full tenant access with all content permissions', color: 'bg-purple-500/10 text-purple-500 border-purple-500/20' },
-  { name: 'editor', level: 70, inherits: ['author'], description: 'Edit and publish all content', color: 'bg-blue-500/10 text-blue-500 border-blue-500/20' },
-  { name: 'author', level: 50, inherits: ['customer'], description: 'Create and edit own content', color: 'bg-green-500/10 text-green-500 border-green-500/20' },
-  { name: 'customer', level: 30, inherits: [], description: 'Access own data and make purchases', color: 'bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] border-[var(--kyro-border)]' },
-  { name: 'guest', level: 10, inherits: [], description: 'Public read-only access', color: 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20' },
+  {
+    name: "super_admin",
+    level: 100,
+    inherits: ["admin"],
+    description: "Full system access across all tenants",
+    color: "bg-red-500/10 text-red-500 border-red-500/20",
+  },
+  {
+    name: "admin",
+    level: 90,
+    inherits: ["editor"],
+    description: "Full tenant access with all content permissions",
+    color: "bg-purple-500/10 text-purple-500 border-purple-500/20",
+  },
+  {
+    name: "editor",
+    level: 70,
+    inherits: ["author"],
+    description: "Edit and publish all content",
+    color: "bg-blue-500/10 text-blue-500 border-blue-500/20",
+  },
+  {
+    name: "author",
+    level: 50,
+    inherits: ["customer"],
+    description: "Create and edit own content",
+    color: "bg-green-500/10 text-green-500 border-green-500/20",
+  },
+  {
+    name: "customer",
+    level: 30,
+    inherits: [],
+    description: "Access own data and make purchases",
+    color:
+      "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] border-[var(--kyro-border)]",
+  },
+  {
+    name: "guest",
+    level: 10,
+    inherits: [],
+    description: "Public read-only access",
+    color: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
+  },
 ];
 
 const permissions: Record<string, string[]> = {
-  super_admin: ['*'],
-  admin: ['users:*', 'roles:*', 'content:*', 'settings:*', 'audit:read'],
-  editor: ['content:*', 'media:*', 'comments:*'],
-  author: ['content:create', 'content:read', 'content:update:own', 'media:*'],
-  customer: ['content:read', 'orders:*', 'profile:*'],
-  guest: ['content:read'],
+  super_admin: ["*"],
+  admin: ["users:*", "roles:*", "content:*", "settings:*", "audit:read"],
+  editor: ["content:*", "media:*", "comments:*"],
+  author: ["content:create", "content:read", "content:update:own", "media:*"],
+  customer: ["content:read", "orders:*", "profile:*"],
+  guest: ["content:read"],
 };
 ---
 
 <AdminLayout title="Roles">
-  <div class="flex-1 overflow-y-auto p-8 pr-12 space-y-8">
+  <div class="flex-1 overflow-y-auto pr-12 space-y-8">
     <!-- Header -->
     <div class="surface-tile p-6">
-      <h1 class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">Roles & Permissions</h1>
-      <p class="text-sm text-[var(--kyro-text-secondary)] mt-1 font-medium italic">
+      <h1
+        class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
+      >
+        Roles & Permissions
+      </h1>
+      <p class="text-sm text-[var(--kyro-text-secondary)] mt-1 font-regular">
         Role-based access control with hierarchical permissions
       </p>
     </div>
 
     <!-- Role Hierarchy -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {defaultRoles.map((role) => (
-        <div class={`surface-tile p-6 border-2 ${role.color.split(' ').slice(2).join(' ')} rounded-2xl`}>
-          <div class="flex items-center justify-between mb-4">
-            <h3 class="text-xl font-black text-[var(--kyro-text-primary)] tracking-tighter">{role.name}</h3>
-            <span class={`px-3 py-1 rounded-lg text-xs font-bold ${role.color.split(' ').slice(0, 2).join(' ')}`}>
-              Level {role.level}
-            </span>
-          </div>
-          <p class="text-sm text-[var(--kyro-text-secondary)] mb-4">{role.description}</p>
-          {role.inherits.length > 0 && (
-            <div class="mb-4">
-              <span class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-[0.1em] opacity-50">Inherits:</span>
-              <div class="flex gap-2 mt-2">
-                {role.inherits.map((parent) => (
-                  <span class="px-2 py-1 bg-[var(--kyro-surface-accent)] rounded text-xs font-bold text-[var(--kyro-text-secondary)]">{parent}</span>
+      {
+        defaultRoles.map((role) => (
+          <div
+            class={`surface-tile p-6 border-2 ${role.color.split(" ").slice(2).join(" ")} rounded-2xl`}
+          >
+            <div class="flex items-center justify-between mb-4">
+              <h3 class="text-xl font-bold text-[var(--kyro-text-primary)] tracking-tighter">
+                {role.name}
+              </h3>
+              <span
+                class={`px-3 py-1 rounded-lg text-xs font-bold ${role.color.split(" ").slice(0, 2).join(" ")}`}
+              >
+                Level {role.level}
+              </span>
+            </div>
+            <p class="text-sm text-[var(--kyro-text-secondary)] mb-4">
+              {role.description}
+            </p>
+            {role.inherits.length > 0 && (
+              <div class="mb-4">
+                <span class="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-[0.1em] opacity-50">
+                  Inherits:
+                </span>
+                <div class="flex gap-2 mt-2">
+                  {role.inherits.map((parent) => (
+                    <span class="px-2 py-1 bg-[var(--kyro-surface-accent)] rounded text-xs font-bold text-[var(--kyro-text-secondary)]">
+                      {parent}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+            <div>
+              <span class="text-xs font-bold text-[var(--kyro-text-secondary)]  tracking-[0.1em] opacity-50">
+                Permissions:
+              </span>
+              <div class="flex flex-wrap gap-1.5 mt-2">
+                {(permissions[role.name] || []).map((perm) => (
+                  <span class="px-2 py-0.5 bg-[var(--kyro-surface-accent)] rounded text-[10px] font-medium text-[var(--kyro-text-primary)]">
+                    {perm}
+                  </span>
                 ))}
               </div>
             </div>
-          )}
-          <div>
-            <span class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-[0.1em] opacity-50">Permissions:</span>
-            <div class="flex flex-wrap gap-1.5 mt-2">
-              {(permissions[role.name] || []).map((perm) => (
-                <span class="px-2 py-0.5 bg-[var(--kyro-surface-accent)] rounded text-[10px] font-bold text-[var(--kyro-text-primary)]">{perm}</span>
-              ))}
-            </div>
           </div>
-        </div>
-      ))}
+        ))
+      }
     </div>
 
     <!-- Permission Matrix -->
     <div class="surface-tile overflow-hidden">
-      <div class="p-6 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]">
-        <h2 class="text-xl font-black text-[var(--kyro-text-primary)] tracking-tighter">Permission Matrix</h2>
+      <div
+        class="p-6 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]"
+      >
+        <h2
+          class="text-xl font-bold text-[var(--kyro-text-primary)] tracking-tighter"
+        >
+          Permission Matrix
+        </h2>
       </div>
       <table class="w-full text-left">
         <thead>
-          <tr class="text-[var(--kyro-text-secondary)] font-bold text-[10px] uppercase tracking-[0.3em] border-b border-[var(--kyro-border)]">
+          <tr
+            class="text-[var(--kyro-text-secondary)] font-bold text-[10px] tracking-[0.3em] border-b border-[var(--kyro-border)]"
+          >
             <th class="px-6 py-4">Resource</th>
-            {defaultRoles.map((role) => (
-              <th class="px-4 py-4 text-center">{role.name}</th>
-            ))}
+            {
+              defaultRoles.map((role) => (
+                <th class="px-4 py-4 text-center">{role.name}</th>
+              ))
+            }
           </tr>
         </thead>
         <tbody class="divide-y divide-[var(--kyro-border)]">
-          {[
-            { resource: 'Users', actions: ['create', 'read', 'update', 'delete'] },
-            { resource: 'Roles', actions: ['create', 'read', 'update', 'delete'] },
-            { resource: 'Content', actions: ['create', 'read', 'update', 'delete', 'publish'] },
-            { resource: 'Media', actions: ['create', 'read', 'update', 'delete'] },
-            { resource: 'Settings', actions: ['read', 'update'] },
-            { resource: 'Audit Logs', actions: ['read'] },
-          ].map((row) => (
-            <tr class="hover:bg-[var(--kyro-surface-accent)] transition-colors">
-              <td class="px-6 py-4 font-bold text-[var(--kyro-text-primary)]">{row.resource}</td>
-              {defaultRoles.map((role) => {
-                const hasAll = permissions[role.name]?.includes('*');
-                const hasResource = permissions[role.name]?.some(p => p.startsWith(row.resource.toLowerCase() + ':') || p === '*');
-                return (
-                  <td class="px-4 py-4 text-center">
-                    {hasAll || hasResource ? (
-                      <svg class="w-5 h-5 text-green-500 mx-auto" 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>
-                    ) : (
-                      <svg class="w-5 h-5 text-[var(--kyro-border)] mx-auto" fill="currentColor" viewBox="0 0 20 20">
-                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
-                      </svg>
-                    )}
-                  </td>
-                );
-              })}
-            </tr>
-          ))}
+          {
+            [
+              {
+                resource: "Users",
+                actions: ["create", "read", "update", "delete"],
+              },
+              {
+                resource: "Roles",
+                actions: ["create", "read", "update", "delete"],
+              },
+              {
+                resource: "Content",
+                actions: ["create", "read", "update", "delete", "publish"],
+              },
+              {
+                resource: "Media",
+                actions: ["create", "read", "update", "delete"],
+              },
+              { resource: "Settings", actions: ["read", "update"] },
+              { resource: "Audit Logs", actions: ["read"] },
+            ].map((row) => (
+              <tr class="hover:bg-[var(--kyro-surface-accent)] transition-colors">
+                <td class="px-6 py-4 font-medium text-[var(--kyro-text-primary)]">
+                  {row.resource}
+                </td>
+                {defaultRoles.map((role) => {
+                  const hasAll = permissions[role.name]?.includes("*");
+                  const hasResource = permissions[role.name]?.some(
+                    (p) =>
+                      p.startsWith(row.resource.toLowerCase() + ":") ||
+                      p === "*",
+                  );
+                  return (
+                    <td class="px-4 py-4 text-center">
+                      {hasAll || hasResource ? (
+                        <svg
+                          class="w-5 h-5 text-green-500 mx-auto"
+                          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>
+                      ) : (
+                        <svg
+                          class="w-5 h-5 text-[var(--kyro-border)] mx-auto"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                            clip-rule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))
+          }
         </tbody>
       </table>
     </div>

package/src/pages/sessions.astro

@@ -0,0 +1,8 @@
+---
+import AdminLayout from "../layouts/AdminLayout.astro";
+import { SessionsManager } from "../components/SessionsManager";
+---
+
+<AdminLayout title="Sessions">
+  <SessionsManager client:only="react" />
+</AdminLayout>

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

@@ -1,161 +1,139 @@
 ---
-import AdminLayout from '../../layouts/AdminLayout.astro';
-import { globals } from '@/lib/config';
-import { AutoForm } from '@/components/AutoForm';
+import AdminLayout from "../../layouts/AdminLayout.astro";
+import { globals } from "../../lib/config";
+import { AutoForm } from "../../components/AutoForm";
+
+import { adminPath, apiPath } from "../../lib/paths";
 
 const { slug } = Astro.params;
 
 // Validate global exists
 if (!slug || !globals[slug]) {
-  return Astro.redirect('/');
+  return Astro.redirect(adminPath);
 }
 
 const config = globals[slug];
+const hasVersioning = !!config.versions;
 
-// Fetch current settings data from API
+// Fetch current settings data from API (authenticated)
 let data: any = {};
 try {
-  const response = await fetch(`${Astro.url.origin}/api/globals/${slug}`, {
-    headers: Astro.request.headers,
-    credentials: 'include'
-  });
+  const fetchUrl = new URL(`${apiPath}/globals/${slug}`, Astro.url.origin);
+  if (hasVersioning) {
+    fetchUrl.searchParams.set("draft", "true");
+  }
+  
+  const response = await fetch(
+    fetchUrl.toString(),
+    {
+      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);
+  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.`;
+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>
+<AdminLayout title={`Settings - ${title}`}>
+  <div class="flex-1 overflow-y-auto">
+    { !hasVersioning && (
+      <!-- Standard Header (Only if no versioning/AutoForm header) -->
+      <div class="surface-tile p-8 pb-0 mb-6">
+        <div class="flex items-center justify-between mb-8">
+          <div>
+            <h1
+              class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
+            >
+              Settings
+            </h1>
+            <p
+              class="text-sm text-[var(--kyro-text-secondary)] mt-1 font-regular"
+            >
+              Global system configurations
+            </p>
+          </div>
+          <button
+            type="button"
+            id="settings-save-btn"
+            class="px-6 py-2.5 text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full transition-all hover:opacity-90 active:scale-95 shadow-lg shadow-black/10"
+          >
+            Save Changes
+          </button>
         </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>
-          ))
-        }
+        <!-- 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={`${adminPath}/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>
-    </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 class={hasVersioning ? "" : "surface-tile p-10 pt-4 mb-6 rounded-4xl"}>
+      { !hasVersioning && (
+        <div class="mb-8">
+          <h2
+            class="text-xl font-bold 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>
-      </div>
-
+      )}
       <form id="settings-form">
+        <input type="hidden" id="form-slug" value={slug} />
         <AutoForm
           client:only="react"
           config={config}
           globalSlug={slug}
           data={data}
-          layout="single"
+          layout={hasVersioning ? "split" : "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 || '';
+  <script>
+    console.log("[Astro] Settings page script running");
+    document.getElementById("settings-save-btn")?.addEventListener("click", () => {
+      console.log("[Astro] Header save clicked");
+      const btn = document.getElementById("btn-save");
       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');
-        }
+        console.log("[Astro] Triggering hidden button click");
+        btn.click();
+      } else {
+        console.error("[Astro] Hidden save button not found!");
       }
     });
   </script>

package/src/pages/settings/index.astro

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