@kyro-cms/admin 0.12.20 → 0.12.22

package/src/pages/index.astro

@@ -5,18 +5,64 @@ import { collections } from "../lib/config";
 const authCollections = ["users", "audit_logs"];
 import { adminPath, apiPath } from "../lib/paths";
 import { DashboardMetrics, RevenueChart } from "../components/DashboardMetrics";
+import { CustomerDashboard } from "../components/CustomerDashboard";
+import { AuthorDashboard } from "../components/AuthorDashboard";
+import { DashboardQuickSections } from "../components/DashboardQuickSections";
 
-const authItems = authCollections.map((slug) => ({
-  slug,
-  label: collections[slug]?.label || slug,
-  icon: slug === "users" ? "users" : "file-text",
-}));
+import { getAuthServer } from "../lib/auth-server";
+
+const { user: serverUser, permissions: serverPermissions } = await getAuthServer(Astro.request);
+const serverRole = serverUser?.role || "";
+const isServerSuperAdmin = serverRole === "super_admin";
+const isServerAdmin = serverRole === "admin" || isServerSuperAdmin;
+const isServerCustomer = serverRole === "customer";
+const isServerAuthor = serverRole === "author";
+
+// Serialize collections for client-side role-based dashboards
+const serializedCollections = JSON.parse(JSON.stringify(
+  Object.fromEntries(
+    Object.entries(collections).map(([slug, config]) => [slug, { label: (config as any).label || slug, slug }])
+  )
+));
+
+const permittedQuickLinks = Object.entries(collections)
+  .filter(([slug]) => !["users", "audit_logs", "media"].includes(slug))
+  .filter(([slug]) => {
+    if (!serverUser) return true;
+    return isServerAdmin || serverPermissions?.collections?.[slug]?.create === true;
+  })
+  .slice(0, 6);
+
+const canSeeAudit = !serverUser || isServerAdmin || serverPermissions?.collections?.audit_logs?.read === true;
+const canSeeLockedUsers = !serverUser || isServerAdmin || serverPermissions?.collections?.users?.read === true;
+const canSeeRoles = !serverUser || isServerSuperAdmin;
+const canSeeHealth = !serverUser || isServerAdmin;
+const hasAnySecurityAction = canSeeAudit || canSeeLockedUsers || canSeeRoles || canSeeHealth;
 ---
 
 <AdminLayout title={i18next.t("pages." + "Dashboard".replace(/ /g, ""), { defaultValue: "Dashboard" })}>
   <div class="flex-1 overflow-y-auto space-y-8">
+    {/* ── Role-Based Dashboard Fork ── */}
+    {isServerCustomer ? (
+      <CustomerDashboard
+          client:load
+          collections={serializedCollections}
+          userName={serverUser?.name || serverUser?.email || ""}
+          userAvatar={serverUser?.avatar || ""}
+          userId={serverUser?.id || ""}
+        />
+    ) : isServerAuthor ? (
+     <AuthorDashboard
+          client:load
+          collections={serializedCollections}
+          userName={serverUser?.name || serverUser?.email || ""}
+          userAvatar={serverUser?.avatar || ""}
+          userId={serverUser?.id || ""}
+        />
+    ) : (
+    <>
     <!-- Header -->
-    <div class="surface-tile p-6 flex items-center justify-between gap-8">
+    <div class="surface-tile p-6 flex items-center justify-between rounded-lg gap-8 rounded-lg">
       <div class="relative flex-1 max-w-2xl">
         <div class="absolute inset-y-0 left-6 flex items-center pointer-events-none text-[var(--kyro-text-muted)]">
           <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -51,128 +97,179 @@ const authItems = authCollections.map((slug) => ({
     </div>
 
     <!-- CMS Metrics -->
-    <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">
-      <div class="flex items-center justify-between p-6 border-b border-[var(--kyro-border)]">
-        <div class="flex-1">
-          <h2 class="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)] flex items-center gap-2">
-            Quick Links
-          </h2>
-          <p class="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">Create new collection documents</p>
+    <DashboardMetrics client:only="react" isEcommerce={!!collections["orders"] || !!collections["products"]} />
+    {(!!collections["orders"] || !!collections["products"]) && <RevenueChart client:only="react" />}
+
+
+    <!-- Role-filtered Quick Actions & Explore Content -->
+    <DashboardQuickSections
+      client:only="react"
+      collections={serializedCollections}
+      serverUserRole={serverRole}
+      serverPermissions={serverPermissions}
+    />
+
+        <!-- Security Quick Actions -->
+    {hasAnySecurityAction && (
+      <div id="dashboard-security-section" class="surface-tile overflow-hidden rounded-lg rounded-lg mt-6">
+        <div class="p-6 border-b border-[var(--kyro-border)]">
+          <h2 class="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]">Security & Monitoring</h2>
+          <p class="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">
+            Rate limiting, audit logs, and account lockout settings
+          </p>
         </div>
-      </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-6">
+          {canSeeAudit && (
+            <a
+              href={`${adminPath}/audit`}
+              data-sec-card="audit"
+              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-orange-500/10 text-orange-500 flex items-center justify-center mb-3">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                  ></path>
+                </svg>
+              </div>
+              <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">Audit Logs</h4>
+              <p class="text-xs text-[var(--kyro-text-secondary)]">View last 30 days</p>
+            </a>
+          )}
 
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4">
-        {
-          Object.entries(collections)
-            .filter(([slug]) => !["users", "audit_logs", "media"].includes(slug))
-            .slice(0, 6)
-            .map(([slug, config]: [string, any]) => (
-              <a
-                href={`${adminPath}/${slug}/new`}
-                class="group p-4 bg-[var(--kyro-surface-accent)] rounded-xl hover:bg-[var(--kyro-surface)] transition-all border border-transparent hover:border-[var(--kyro-border)] shadow-sm hover:shadow-md"
-              >
-                <div class="flex items-center gap-3">
-                  <div class="w-8 h-8 rounded-lg flex items-center justify-center bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] group-hover:bg-[var(--kyro-surface-accent)] group-hover:text-[var(--kyro-primary)] transition-all">
-                    <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="M12 5v14M5 12h14" />
-                    </svg>
-                  </div>
-                  <span class="text-sm font-medium text-[var(--kyro-text-primary)]">New {config.label || slug}</span>
-                </div>
-              </a>
-            ))
-        }
-      </div>
-    </div>
+          {canSeeLockedUsers && (
+            <a
+              href={`${adminPath}/users?locked=true`}
+              data-sec-card="locked-users"
+              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-red-500/10 text-red-500 flex items-center justify-center mb-3">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                  ></path>
+                </svg>
+              </div>
+              <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">Locked Accounts</h4>
+              <p class="text-xs text-[var(--kyro-text-secondary)]">Manage lockouts</p>
+            </a>
+          )}
 
-    <!-- Security Quick Actions -->
-    <div class="surface-tile overflow-hidden">
-      <div class="p-6 border-b border-[var(--kyro-border)]">
-        <h2 class="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]">Security & Monitoring</h2>
-        <p class="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">
-          Rate limiting, audit logs, and account lockout settings
-        </p>
-      </div>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-6">
-        <a
-          href={`${adminPath}/audit`}
-          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-orange-500/10 text-orange-500 flex items-center justify-center mb-3">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-              ></path>
-            </svg>
-          </div>
-          <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">Audit Logs</h4>
-          <p class="text-xs text-[var(--kyro-text-secondary)]">View last 30 days</p>
-        </a>
-
-        <a
-          href={`${adminPath}/users?locked=true`}
-          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-red-500/10 text-red-500 flex items-center justify-center mb-3">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-              ></path>
-            </svg>
-          </div>
-          <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">Locked Accounts</h4>
-          <p class="text-xs text-[var(--kyro-text-secondary)]">Manage lockouts</p>
-        </a>
-
-        <a
-          href={`${adminPath}/roles`}
-          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-indigo-500/10 text-indigo-500 flex items-center justify-center mb-3">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-              ></path>
-            </svg>
-          </div>
-          <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">Permissions</h4>
-          <p class="text-xs text-[var(--kyro-text-secondary)]">RBAC settings</p>
-        </a>
-
-        <a
-          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">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-            </svg>
-          </div>
-          <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">API Health</h4>
-          <p class="text-xs text-[var(--kyro-text-secondary)]">System status</p>
-        </a>
+          {canSeeRoles && (
+            <a
+              href={`${adminPath}/roles`}
+              data-sec-card="roles"
+              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-indigo-500/10 text-indigo-500 flex items-center justify-center mb-3">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+                  ></path>
+                </svg>
+              </div>
+              <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">Permissions</h4>
+              <p class="text-xs text-[var(--kyro-text-secondary)]">RBAC settings</p>
+            </a>
+          )}
+
+          {canSeeHealth && (
+            <a
+              href={`${adminPath}/health`}
+              data-sec-card="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">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+              </div>
+              <h4 class="font-medium text-[var(--kyro-text-primary)] mb-1">API Health</h4>
+              <p class="text-xs text-[var(--kyro-text-secondary)]">System status</p>
+            </a>
+          )}
+        </div>
       </div>
-    </div>
+    )}
 
     <script is:inline define:vars={{ apiPath, adminPath }}>
       (function () {
+        function pruneDashboardRBAC(user, permissions) {
+          if (!user) {
+            user = window.__kyroAuth?.user;
+            permissions = window.__kyroAuth?.permissions;
+          }
+          if (!user) return;
+
+          var userRole = user.role || "";
+          var isSuperAdmin = userRole === "super_admin";
+          var isAdmin = userRole === "admin" || isSuperAdmin;
+
+          // Prune Quick Links
+          var quickLinkItems = document.querySelectorAll("[data-quick-link]");
+          var visibleQuickLinks = 0;
+          quickLinkItems.forEach(function (el) {
+            var slug = el.getAttribute("data-quick-link");
+            var hasCreate = isAdmin || (permissions && permissions.collections && permissions.collections[slug] && permissions.collections[slug].create === true);
+            if (!hasCreate) {
+              el.style.display = "none";
+            } else {
+              el.style.display = "";
+              visibleQuickLinks++;
+            }
+          });
+          var quickLinksSection = document.getElementById("dashboard-quick-links-section");
+          if (quickLinksSection) {
+            quickLinksSection.style.display = visibleQuickLinks > 0 ? "" : "none";
+          }
+
+          // Prune Security Cards
+          var secCards = document.querySelectorAll("[data-sec-card]");
+          var visibleSecCards = 0;
+          secCards.forEach(function (el) {
+            var card = el.getAttribute("data-sec-card");
+            var hasAccess = false;
+            if (card === "audit") {
+              hasAccess = isAdmin || (permissions && permissions.collections && permissions.collections.audit_logs && permissions.collections.audit_logs.read === true);
+            } else if (card === "locked-users") {
+              hasAccess = isAdmin || (permissions && permissions.collections && permissions.collections.users && permissions.collections.users.read === true);
+            } else if (card === "roles") {
+              hasAccess = isSuperAdmin;
+            } else if (card === "health") {
+              hasAccess = isAdmin;
+            }
+            if (!hasAccess) {
+              el.style.display = "none";
+            } else {
+              el.style.display = "";
+              visibleSecCards++;
+            }
+          });
+          var secSection = document.getElementById("dashboard-security-section");
+          if (secSection) {
+            secSection.style.display = visibleSecCards > 0 ? "" : "none";
+          }
+        }
+
+        window.addEventListener("kyro:auth-ready", function (e) {
+          var detail = e.detail || {};
+          pruneDashboardRBAC(detail.user, detail.permissions);
+        });
+
+        pruneDashboardRBAC();
         var searchInput = document.getElementById("header-search-input");
         var searchResults = document.getElementById("header-search-results");
         if (!searchInput || !searchResults) return;
@@ -245,5 +342,7 @@ const authItems = authCollections.map((slug) => ({
         });
       })();
     </script>
+    </>
+    )}
   </div>
 </AdminLayout>

package/src/pages/keys.astro

@@ -3,8 +3,10 @@ import AdminLayout from "../layouts/AdminLayout.astro";
 import i18next from '../lib/i18n';
 import { ApiKeysManager } from "../components/ApiKeysManager";
 
-import { adminPath, apiPath } from '../lib/paths';
+import { requireAuthServer } from '../lib/auth-server';
 
+const redirect = await requireAuthServer(Astro.request, { requireAdmin: true });
+if (redirect) return redirect;
 ---
 
 <AdminLayout title={i18next.t("pages." + "API Keys".replace(/ /g, ""), { defaultValue: "API Keys" })}> 

package/src/pages/media.astro

@@ -3,8 +3,10 @@ import AdminLayout from '../layouts/AdminLayout.astro';
 import i18next from '../lib/i18n';
 import { MediaGallery } from '../components/MediaGallery';
 
-import { adminPath, apiPath } from '../lib/paths';
+import { requireAuthServer } from '../lib/auth-server';
 
+const redirect = await requireAuthServer(Astro.request, { collectionRead: 'media' });
+if (redirect) return redirect;
 ---
 
 <AdminLayout title={i18next.t("pages." + "Media Library".replace(/ /g, ""), { defaultValue: "Media Library" })}> 

package/src/pages/preview/[collection]/[id].astro

@@ -18,13 +18,10 @@ let error = null;
 
 if (id) {
   try {
-    const response = await fetch(
-      `${Astro.url.origin}${apiPath}/${collection}/${id}`,
-      {
-        headers: Astro.request.headers,
-        credentials: "include",
-      },
-    );
+    const response = await fetch(`${Astro.url.origin}${apiPath}/${collection}/${id}`, {
+      headers: Astro.request.headers,
+      credentials: "include",
+    });
     if (response.ok) {
       const result = await response.json();
       doc = result.data || null;
@@ -44,34 +41,19 @@ const pageTitle = doc
 <AdminLayout title={pageTitle}>
   <Fragment set:html={`<style>${richTextStyles}</style>`} />
   <div class="flex-1 overflow-y-auto space-y-6">
-    <div class="surface-tile p-6 flex items-center justify-between">
+    <div class="surface-tile p-6 flex items-center justify-between rounded-lg">
       <div class="flex items-center gap-4">
         <a
           href={`${adminPath}/${collection}/${id}`}
           class="inline-flex items-center justify-center w-10 h-10 rounded-xl border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] 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.5"
-              d="M15 19l-7-7 7-7"></path>
+          <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="M15 19l-7-7 7-7"></path>
           </svg>
         </a>
         <div>
-          <h1
-            class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]"
-          >
-            Preview Mode
-          </h1>
-          <p class="text-sm text-[var(--kyro-text-secondary)] mt-0.5">
-            Showing draft content
-          </p>
+          <h1 class="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">Preview Mode</h1>
+          <p class="text-sm text-[var(--kyro-text-secondary)] mt-0.5">Showing draft content</p>
         </div>
       </div>
       <div class="flex items-center gap-3">
@@ -110,51 +92,32 @@ const pageTitle = doc
                   {field.label || field.name}
                 </h3>
                 <div class="text-sm text-[var(--kyro-text-primary)]">
-                  {field.type === "text" && (
-                    <p class="whitespace-pre-wrap">{value}</p>
-                  )}
-                  {field.type === "textarea" && (
-                    <p class="whitespace-pre-wrap">{value}</p>
-                  )}
-                  {field.type === "richtext" && (
-                    <div set:html={renderRichText(value)} />
-                  )}
+                  {field.type === "text" && <p class="whitespace-pre-wrap">{value}</p>}
+                  {field.type === "textarea" && <p class="whitespace-pre-wrap">{value}</p>}
+                  {field.type === "richtext" && <div set:html={renderRichText(value)} />}
                   {field.type === "markdown" && (
                     <div class="prose prose-sm max-w-none">
-                      <pre class="whitespace-pre-wrap bg-transparent p-0">
-                        {value}
-                      </pre>
+                      <pre class="whitespace-pre-wrap bg-transparent p-0">{value}</pre>
                     </div>
                   )}
                   {field.type === "number" && <p>{value}</p>}
                   {field.type === "boolean" && (
-                    <span class={value ? "text-green-400" : "text-red-400"}>
-                      {value ? "Yes" : "No"}
-                    </span>
+                    <span class={value ? "text-green-400" : "text-red-400"}>{value ? "Yes" : "No"}</span>
                   )}
                   {field.type === "select" && (
-                    <span class="px-2 py-1 bg-[var(--kyro-surface-accent)] rounded text-xs">
-                      {value}
-                    </span>
-                  )}
-                  {field.type === "date" && (
-                    <p>{new Date(value).toLocaleString()}</p>
+                    <span class="px-2 py-1 bg-[var(--kyro-surface-accent)] rounded text-xs">{value}</span>
                   )}
+                  {field.type === "date" && <p>{new Date(value).toLocaleString()}</p>}
                   {field.type === "upload" && value.url && (
                     <div>
-                      {value.url.match(
-                        /\.(jpe?g|png|gif|webp|avif|svg)(\?|$)/i,
-                      ) ? (
+                      {value.url.match(/\.(jpe?g|png|gif|webp|avif|svg)(\?|$)/i) ? (
                         <img
                           src={value.url}
                           alt={value.filename || "Image"}
                           class="max-w-md rounded-lg border border-[var(--kyro-border)]"
                         />
                       ) : (
-                        <a
-                          href={value.url}
-                          class="text-blue-400 hover:underline"
-                        >
+                        <a href={value.url} class="text-blue-400 hover:underline">
                           {value.filename || "Download"}
                         </a>
                       )}
@@ -164,9 +127,7 @@ const pageTitle = doc
                     <div class="grid grid-cols-4 gap-3">
                       {value.map((item: any, idx: number) =>
                         item?.url ? (
-                          item.url.match(
-                            /\.(jpe?g|png|gif|webp|avif|svg)(\?|$)/i,
-                          ) ? (
+                          item.url.match(/\.(jpe?g|png|gif|webp|avif|svg)(\?|$)/i) ? (
                             <img
                               src={item.url}
                               alt={item.filename || `Image ${idx + 1}`}
@@ -189,14 +150,8 @@ const pageTitle = doc
                             .filter(([, v]) => v !== undefined)
                             .map(([k, v]) => (
                               <div class="flex gap-2">
-                                <span class="text-[var(--kyro-text-muted)]">
-                                  {k}:
-                                </span>
-                                <span>
-                                  {typeof v === "object"
-                                    ? JSON.stringify(v)
-                                    : String(v)}
-                                </span>
+                                <span class="text-[var(--kyro-text-muted)]">{k}:</span>
+                                <span>{typeof v === "object" ? JSON.stringify(v) : String(v)}</span>
                               </div>
                             ))}
                         </div>
@@ -205,10 +160,7 @@ const pageTitle = doc
                   )}
                   {field.type === "relationship" && (
                     <p class="text-[var(--kyro-text-secondary)]">
-                      {value.title ||
-                        value.name ||
-                        value.slug ||
-                        JSON.stringify(value)}
+                      {value.title || value.name || value.slug || JSON.stringify(value)}
                     </p>
                   )}
                   {field.type === "json" && (
@@ -217,9 +169,7 @@ const pageTitle = doc
                     </pre>
                   )}
                   {field.type === "code" && (
-                    <pre class="text-xs bg-[var(--kyro-surface-accent)] p-3 rounded overflow-x-auto">
-                      {value}
-                    </pre>
+                    <pre class="text-xs bg-[var(--kyro-surface-accent)] p-3 rounded overflow-x-auto">{value}</pre>
                   )}
                   {(!field.type || ["text", "string"].includes(field.type)) && (
                     <p>{typeof value === "object" ? JSON.stringify(value) : value}</p>