@kyro-cms/admin 0.12.3 → 0.12.5

package/src/pages/audit/index.astro

@@ -1,10 +1,11 @@
 ---
 import AdminLayout from '../../layouts/AdminLayout.astro';
+import i18next from '../../lib/i18n';
 import { AuditLogsPage } from '../../components/AuditLogsPage';
 
 import { adminPath, apiPath } from '../../lib/paths';
 ---
 
-<AdminLayout title="Audit Logs">
+<AdminLayout title={i18next.t("pages." + "Audit Logs".replace(/ /g, ""), { defaultValue: "Audit Logs" })}> 
   <AuditLogsPage client:only="react" />
 </AdminLayout>

package/src/pages/graphql-explorer.astro

@@ -1,5 +1,6 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
+import i18next from '../lib/i18n';
 import { GraphQLPlayground } from "../components/GraphQLPlayground";
 import { apiPath } from "../lib/paths";
 import { getGlobal } from "../lib/globals";
@@ -9,7 +10,7 @@ const apiAccess = accessSettings?.apiAccess || {};
 const graphqlEnabled = apiAccess.graphqlEnabled !== false;
 ---
 
-<AdminLayout title="GraphQL Explorer">
+<AdminLayout title={i18next.t("pages." + "GraphQL Explorer".replace(/ /g, ""), { defaultValue: "GraphQL Explorer" })}> 
   <div class="flex-1 overflow-hidden h-[calc(100vh-64px)] md:h-[calc(100vh-80px)]">
     {graphqlEnabled ? (
       <GraphQLPlayground

package/src/pages/graphql.astro

@@ -1,5 +1,6 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
+import i18next from '../lib/i18n';
 import { GraphQLPlayground } from "../components/GraphQLPlayground";
 import { apiPath } from "../lib/paths";
 import { getGlobal } from "../lib/globals";
@@ -13,7 +14,7 @@ const params = new URL(url).searchParams;
 const initialQuery = params.get("query") || "";
 ---
 
-<AdminLayout title="GraphQL Playground">
+<AdminLayout title={i18next.t("pages." + "GraphQL Playground".replace(/ /g, ""), { defaultValue: "GraphQL Playground" })}> 
   <div class="flex-1 overflow-hidden h-[calc(100vh-64px)] md:h-[calc(100vh-80px)]">
     {graphqlEnabled ? (
       <GraphQLPlayground

package/src/pages/health.astro

@@ -0,0 +1,9 @@
+---
+import AdminLayout from "../layouts/AdminLayout.astro";
+import i18next from '../lib/i18n';
+import { ApiHealth } from "../components/ApiHealth";
+---
+
+<AdminLayout title={i18next.t("pages." + "API Health".replace(/ /g, ""), { defaultValue: "API Health" })}> 
+  <ApiHealth client:only="react" />
+</AdminLayout>

package/src/pages/index.astro

@@ -1,9 +1,10 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
+import i18next from '../lib/i18n';
 import { collections } from "../lib/config";
 const authCollections = ["users", "audit_logs"];
 import { adminPath, apiPath } from "../lib/paths";
-import { DashboardMetrics } from "../components/DashboardMetrics";
+import { DashboardMetrics, RevenueChart } from "../components/DashboardMetrics";
 
 const authItems = authCollections.map((slug) => ({
   slug,
@@ -12,7 +13,7 @@ const authItems = authCollections.map((slug) => ({
 }));
 ---
 
-<AdminLayout title="Dashboard">
+<AdminLayout title={i18next.t("pages." + "Dashboard".replace(/ /g, ""), { defaultValue: "Dashboard" })}> 
   <div class="flex-1 overflow-y-auto space-y-8">
     <!-- Header -->
     <div class="surface-tile p-6 flex items-center justify-between gap-8">
@@ -50,7 +51,8 @@ const authItems = authCollections.map((slug) => ({
     </div>
 
     <!-- CMS Metrics -->
-    <DashboardMetrics client:load />
+    <DashboardMetrics client:load isEcommerce={!!collections['orders'] || !!collections['products']} />
+    {(!!collections['orders'] || !!collections['products']) && <RevenueChart client:load />}
 
     <!-- Quick Links Section -->
     <div class="surface-tile overflow-hidden mt-8">
@@ -151,8 +153,7 @@ const authItems = authCollections.map((slug) => ({
         </a>
 
         <a
-          href={`${apiPath}/health`}
-          target="_blank"
+          href={`${adminPath}/health`}
           class="p-5 bg-[var(--kyro-surface-accent)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-all border border-transparent hover:border-[var(--kyro-border)] group"
         >
           <div class="w-10 h-10 rounded-lg bg-green-500/10 text-green-500 flex items-center justify-center mb-3">

package/src/pages/keys.astro

@@ -1,11 +1,12 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
+import i18next from '../lib/i18n';
 import { ApiKeysManager } from "../components/ApiKeysManager";
 
 import { adminPath, apiPath } from '../lib/paths';
 
 ---
 
-<AdminLayout title="API Keys">
+<AdminLayout title={i18next.t("pages." + "API Keys".replace(/ /g, ""), { defaultValue: "API Keys" })}> 
   <ApiKeysManager client:only="react" />
 </AdminLayout>

package/src/pages/marketplace.astro

@@ -1,11 +1,12 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
+import i18next from '../lib/i18n';
 import { MarketplaceManager } from "../components/MarketplaceManager";
 
 import { adminPath, apiPath } from '../lib/paths';
 
 ---
 
-<AdminLayout title="Marketplace">
+<AdminLayout title={i18next.t("pages." + "Marketplace".replace(/ /g, ""), { defaultValue: "Marketplace" })}> 
   <MarketplaceManager client:only="react" />
 </AdminLayout>

package/src/pages/media.astro

@@ -1,12 +1,13 @@
 ---
 import AdminLayout from '../layouts/AdminLayout.astro';
+import i18next from '../lib/i18n';
 import { MediaGallery } from '../components/MediaGallery';
 
 import { adminPath, apiPath } from '../lib/paths';
 
 ---
 
-<AdminLayout title="Media Library">
+<AdminLayout title={i18next.t("pages." + "Media Library".replace(/ /g, ""), { defaultValue: "Media Library" })}> 
   <div class="flex-1 flex flex-col h-full min-h-0 overflow-hidden -m-4 md:m-0">
     <MediaGallery client:load />
   </div>

package/src/pages/plugins.astro

@@ -1,8 +1,9 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
+import i18next from '../lib/i18n';
 import { PluginsManager } from "../components/PluginsManager";
 ---
 
-<AdminLayout title="Plugins">
+<AdminLayout title={i18next.t("pages." + "Plugins".replace(/ /g, ""), { defaultValue: "Plugins" })}> 
   <PluginsManager client:only="react" />
 </AdminLayout>

package/src/pages/rest-playground.astro

@@ -1,5 +1,6 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
+import i18next from '../lib/i18n';
 import { RestPlayground } from "../components/RestPlayground";
 import { apiPath } from "../lib/paths";
 
@@ -10,7 +11,7 @@ const collectionsData = await collectionsResponse.json();
 const collections = collectionsData.collections || [];
 ---
 
-<AdminLayout title="REST Playground">
+<AdminLayout title={i18next.t("pages." + "REST Playground".replace(/ /g, ""), { defaultValue: "REST Playground" })}> 
   <div class="flex-1 overflow-hidden h-[calc(100vh-64px)] md:h-[calc(100vh-80px)]">
     <RestPlayground client:load collections={collections} />
   </div>

package/src/pages/roles/index.astro

@@ -1,7 +1,6 @@
 ---
 import AdminLayout from "../../layouts/AdminLayout.astro";
-
-import { adminPath, apiPath } from "../../lib/paths";
+import i18next from "../../lib/i18n";
 
 const defaultRoles = [
   {
@@ -37,8 +36,7 @@ const defaultRoles = [
     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)]",
+    color: "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] border-[var(--kyro-border)]",
   },
   {
     name: "guest",
@@ -59,15 +57,11 @@ const permissions: Record<string, string[]> = {
 };
 ---
 
-<AdminLayout title="Roles">
-  <div class="flex-1 overflow-y-auto  space-y-8">
+<AdminLayout title={i18next.t("pages." + "Roles".replace(/ /g, ""), { defaultValue: "Roles" })}>
+  <div class="flex-1 overflow-y-auto space-y-8">
     <!-- Header -->
     <div class="surface-tile p-6">
-      <h1
-        class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
-      >
-        Roles & Permissions
-      </h1>
+      <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>
@@ -77,22 +71,14 @@ const permissions: Record<string, string[]> = {
     <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={`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(" ")}`}
-              >
+              <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>
+            <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">
@@ -126,14 +112,8 @@ const permissions: Record<string, string[]> = {
 
     <!-- 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-bold 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>
@@ -141,11 +121,7 @@ const permissions: Record<string, string[]> = {
             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)]">
@@ -171,24 +147,16 @@ const permissions: Record<string, string[]> = {
               { 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>
+                <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 === "*",
+                    (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"
-                        >
+                        <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"
@@ -196,11 +164,7 @@ const permissions: Record<string, string[]> = {
                           />
                         </svg>
                       ) : (
-                        <svg
-                          class="w-5 h-5 text-[var(--kyro-border)] mx-auto"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                        >
+                        <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"

package/src/pages/sessions.astro

@@ -1,8 +1,9 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
+import i18next from '../lib/i18n';
 import { SessionsManager } from "../components/SessionsManager";
 ---
 
-<AdminLayout title="Sessions">
+<AdminLayout title={i18next.t("pages." + "Sessions".replace(/ /g, ""), { defaultValue: "Sessions" })}> 
   <SessionsManager client:only="react" />
 </AdminLayout>

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

@@ -1,11 +1,13 @@
 ---
 import AdminLayout from "../../layouts/AdminLayout.astro";
+import i18next from '../../lib/i18n';
 import { globals } from "../../lib/config";
 import { SettingsPage } from "../../components/SettingsPage";
+import { getGlobal } from "../../lib/globals";
 
 import { adminPath } from "../../lib/paths";
 
-const { slug } = Astro.params;
+const slug = Astro.props.slug || Astro.params.slug || Astro.params.id;
 
 // Validate global exists
 if (!slug || !globals[slug]) {
@@ -13,6 +15,7 @@ if (!slug || !globals[slug]) {
 }
 
 const config = globals[slug];
+const data = (await getGlobal(slug, { request: Astro.request })) || {};
 const hasVersioning = !!config.versions;
 
 const activeSlug = slug;
@@ -20,14 +23,13 @@ const allGlobals = Object.values(globals);
 
 const title = config.label || slug;
 const description =
-  config.admin?.description ||
+  (config as any).admin?.description ||
   `Manage your ${title.toLowerCase()} configurations.`;
 ---
 
 <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>
@@ -94,6 +96,7 @@ const description =
           config={config}
           globalSlug={slug}
           layout={hasVersioning ? "split" : "single"}
+          data={data}
         />
         <input type="hidden" id="form-data" name="form-data" value="{}" />
       </form>
@@ -101,34 +104,46 @@ const description =
   </div>
 
   <script>
-    console.log("[Astro] Settings page script running");
-    const saveBtn = document.getElementById("settings-save-btn");
-    
-    saveBtn?.addEventListener("click", () => {
-      console.log("[Astro] Header save clicked");
-      const btn = document.getElementById("btn-save");
-      if (btn) {
-        console.log("[Astro] Triggering hidden button click");
-        btn.click();
-      } else {
-        console.error("[Astro] Hidden save button not found!");
-      }
-    });
+    const initSettingsPage = () => {
+      console.log("[Astro] Settings page init");
+      const saveBtn = document.getElementById("settings-save-btn");
+      
+      saveBtn?.addEventListener("click", () => {
+        console.log("[Astro] Header save clicked");
+        const btn = document.getElementById("btn-save");
+        if (btn) {
+          console.log("[Astro] Triggering hidden button click");
+          btn.click();
+        } else {
+          console.error("[Astro] Hidden save button not found!");
+        }
+      });
+    };
 
-    window.addEventListener("kyro:global-save-start", () => {
-      if (saveBtn) {
-        saveBtn.disabled = true;
-        saveBtn.innerHTML = `<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>Saving...`;
-        saveBtn.classList.add("opacity-50", "cursor-wait");
-      }
-    });
+    document.addEventListener("astro:page-load", initSettingsPage);
 
-    window.addEventListener("kyro:global-save-end", () => {
-      if (saveBtn) {
-        saveBtn.disabled = false;
-        saveBtn.innerHTML = "Save Changes";
-        saveBtn.classList.remove("opacity-50", "cursor-wait");
-      }
-    });
+    // Global listeners should only be attached once
+    // @ts-ignore
+    if (!window.__kyroSettingsGlobalListenersAttached) {
+      window.addEventListener("kyro:global-save-start", () => {
+        const saveBtn = document.getElementById("settings-save-btn");
+        if (saveBtn) {
+          saveBtn.setAttribute("disabled", "true");
+          saveBtn.innerHTML = `<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>Saving...`;
+          saveBtn.classList.add("opacity-50", "cursor-wait");
+        }
+      });
+
+      window.addEventListener("kyro:global-save-end", () => {
+        const saveBtn = document.getElementById("settings-save-btn");
+        if (saveBtn) {
+          saveBtn.removeAttribute("disabled");
+          saveBtn.innerHTML = "Save Changes";
+          saveBtn.classList.remove("opacity-50", "cursor-wait");
+        }
+      });
+      // @ts-ignore
+      window.__kyroSettingsGlobalListenersAttached = true;
+    }
   </script>
 </AdminLayout>

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

@@ -1,5 +1,6 @@
 ---
 import AdminLayout from "../../layouts/AdminLayout.astro";
+import i18next from '../../lib/i18n';
 import { UserDetail } from "../../components/users/UserDetail";
 
 import { adminPath, apiPath } from "../../lib/paths";

package/src/pages/users/index.astro

@@ -1,5 +1,6 @@
 ---
 import AdminLayout from "../../layouts/AdminLayout.astro";
+import i18next from '../../lib/i18n';
 import { UsersList } from "../../components/users/UsersList";
 
 import { adminPath, apiPath } from "../../lib/paths";
@@ -25,7 +26,7 @@ try {
 }
 ---
 
-<AdminLayout title="Users">
+<AdminLayout title={i18next.t("pages." + "Users".replace(/ /g, ""), { defaultValue: "Users" })}> 
   <UsersList
     client:load
     initialUsers={users}

package/src/pages/users/new.astro

@@ -1,11 +1,12 @@
 ---
 import AdminLayout from "../../layouts/AdminLayout.astro";
+import i18next from '../../lib/i18n';
 import { UserForm } from "../../components/users/UserForm";
 
 import { adminPath, apiPath } from "../../lib/paths";
 ---
 
-<AdminLayout title="New User">
+<AdminLayout title={i18next.t("pages." + "New User".replace(/ /g, ""), { defaultValue: "New User" })}> 
   <UserForm
     client:load
     mode="create"

package/src/pages/webhooks.astro

@@ -1,11 +1,12 @@
 ---
 import AdminLayout from "../layouts/AdminLayout.astro";
+import i18next from '../lib/i18n';
 import { WebhookManager } from "../components/WebhookManager";
 
 import { adminPath, apiPath } from '../lib/paths';
 
 ---
 
-<AdminLayout title="Webhooks">
+<AdminLayout title={i18next.t("pages." + "Webhooks".replace(/ /g, ""), { defaultValue: "Webhooks" })}> 
   <WebhookManager client:only="react" />
 </AdminLayout>

package/src/pages/index_ALT.astro

@@ -1,3 +0,0 @@
-import { adminPath, apiPath } from '../lib/paths';
-return Astro.redirect(adminPath);
----