@kyro-cms/admin 0.3.2 → 0.3.4

package/src/components/AuditLogsPage.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
-import { apiGet } from "../lib/api";
+import { fetchWithAuth } from "../lib/api";
 import { Modal } from "./ui/Modal";
 
 interface AuditLog {
@@ -143,7 +143,7 @@ function MetadataRow({ label, value }: { label: string; value: unknown }) {
     typeof value === "object" ? JSON.stringify(value) : String(value);
   return (
     <div className="flex items-start gap-3 py-2 px-4 border-b border-[var(--kyro-border)] last:border-0 bg-[var(--kyro-surface-accent)]">
-      <span className="text-[10px] font-bold uppercase tracking-wider text-[var(--kyro-text-muted)] w-24 shrink-0 pt-0.5">
+      <span className="text-[10px] font-bold  tracking-wider text-[var(--kyro-text-muted)] w-24 shrink-0 pt-0.5">
         {label}
       </span>
       <span className="text-xs font-mono text-[var(--kyro-text-primary)] break-all">
@@ -177,7 +177,7 @@ export function AuditLogsPage() {
         if (action) params.set("action", action);
         if (successFilter) params.set("success", successFilter);
 
-        const res = await fetch(`/api/auth/audit-logs?${params}`);
+        const res = await fetchWithAuth(`/api/auth/audit-logs?${params}`);
         if (!res.ok) throw new Error("Failed to fetch");
         const data: AuditLogsResponse = await res.json();
         setLogs(data.docs);
@@ -206,11 +206,11 @@ export function AuditLogsPage() {
   };
 
   return (
-    <div className="flex-1 overflow-y-auto p-8 pr-12 space-y-6">
+    <div className="flex-1 overflow-y-auto pr-12 space-y-6">
       {/* Header */}
       <div className="surface-tile p-6 flex items-center justify-between gap-8">
         <div>
-          <h1 className="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+          <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
             Audit Logs
           </h1>
           <p className="text-sm text-[var(--kyro-text-secondary)] mt-1 font-medium">
@@ -320,8 +320,8 @@ export function AuditLogsPage() {
             },
           ].map(({ label, value, color }) => (
             <div key={label} className="surface-tile p-4">
-              <div className={`text-2xl font-black ${color}`}>{value}</div>
-              <div className="text-[10px] font-bold text-[var(--kyro-text-secondary)] uppercase tracking-wider mt-1">
+              <div className={`text-2xl font-bold ${color}`}>{value}</div>
+              <div className="text-[10px] font-bold text-[var(--kyro-text-secondary)]  tracking-wider mt-1">
                 {label}
               </div>
             </div>
@@ -358,7 +358,7 @@ export function AuditLogsPage() {
                   />
                 </svg>
               </div>
-              <p className="font-bold text-[var(--kyro-text-primary)] text-base">
+              <p className="font-medium text-[var(--kyro-text-primary)] text-base">
                 No audit logs found
               </p>
               <p className="text-sm text-[var(--kyro-text-secondary)]">
@@ -371,7 +371,7 @@ export function AuditLogsPage() {
         ) : (
           <table className="w-full text-left">
             <thead>
-              <tr className="text-[var(--kyro-text-secondary)] font-bold text-[10px] uppercase tracking-[0.2em] border-b border-[var(--kyro-border)]">
+              <tr className="text-[var(--kyro-text-secondary)] font-bold text-[10px]  tracking-[0.2em] border-b border-[var(--kyro-border)]">
                 <th className="px-6 py-5 w-8"></th>
                 <th className="px-6 py-5">Action</th>
                 <th className="px-6 py-5">User</th>
@@ -405,16 +405,16 @@ export function AuditLogsPage() {
                       {log.userEmail ? (
                         <div className="flex items-center gap-2.5">
                           <div
-                            className={`w-7 h-7 rounded-lg ${getAvatarColor(log.userEmail)} text-[var(--kyro-text-primary)] text-[10px] font-black flex items-center justify-center shrink-0`}
+                            className={`w-7 h-7 rounded-lg ${getAvatarColor(log.userEmail)} text-[var(--kyro-text-primary)] text-[10px] font-bold flex items-center justify-center shrink-0`}
                           >
                             {getInitials(log.userEmail)}
                           </div>
                           <div>
-                            <div className="text-sm font-bold text-[var(--kyro-text-primary)] leading-none">
+                            <div className="text-sm font-medium text-[var(--kyro-text-primary)] leading-none">
                               {log.userEmail.split("@")[0]}
                             </div>
                             {log.role && (
-                              <div className="text-[10px] font-bold text-[var(--kyro-text-muted)] mt-0.5 uppercase tracking-wider">
+                              <div className="text-[10px] font-bold text-[var(--kyro-text-muted)] mt-0.5  tracking-wider">
                                 {log.role}
                               </div>
                             )}
@@ -427,7 +427,7 @@ export function AuditLogsPage() {
                       )}
                     </td>
                     <td className="px-6 py-4">
-                      <div className="text-sm font-bold text-[var(--kyro-text-primary)]">
+                      <div className="text-sm font-medium text-[var(--kyro-text-primary)]">
                         {log.resource}
                       </div>
                       {log.resourceId && (
@@ -497,11 +497,10 @@ export function AuditLogsPage() {
               type="button"
               onClick={() => fetchLogs(page - 1)}
               disabled={page <= 1}
-              className={`px-4 py-2 rounded-xl text-sm font-bold transition-all ${
-                page <= 1
-                  ? "opacity-30 pointer-events-none text-[var(--kyro-text-muted)]"
-                  : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] border border-[var(--kyro-border)]"
-              }`}
+              className={`px-4 py-2 rounded-xl text-sm font-bold transition-all ${page <= 1
+                ? "opacity-30 pointer-events-none text-[var(--kyro-text-muted)]"
+                : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] border border-[var(--kyro-border)]"
+                }`}
             >
               ← Prev
             </button>
@@ -512,11 +511,10 @@ export function AuditLogsPage() {
                   type="button"
                   key={p}
                   onClick={() => fetchLogs(p)}
-                  className={`px-3.5 py-2 rounded-xl text-sm font-bold transition-all ${
-                    p === page
-                      ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
-                      : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface)] border border-[var(--kyro-border)]"
-                  }`}
+                  className={`px-3.5 py-2 rounded-xl text-sm font-bold transition-all ${p === page
+                    ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
+                    : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface)] border border-[var(--kyro-border)]"
+                    }`}
                 >
                   {p}
                 </button>
@@ -526,11 +524,10 @@ export function AuditLogsPage() {
               type="button"
               onClick={() => fetchLogs(page + 1)}
               disabled={page >= totalPages}
-              className={`px-4 py-2 rounded-xl text-sm font-bold transition-all ${
-                page >= totalPages
-                  ? "opacity-30 pointer-events-none text-[var(--kyro-text-muted)]"
-                  : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] border border-[var(--kyro-border)]"
-              }`}
+              className={`px-4 py-2 rounded-xl text-sm font-bold transition-all ${page >= totalPages
+                ? "opacity-30 pointer-events-none text-[var(--kyro-text-muted)]"
+                : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] border border-[var(--kyro-border)]"
+                }`}
             >
               Next →
             </button>
@@ -549,18 +546,17 @@ export function AuditLogsPage() {
           <div className="space-y-0">
             {/* Status banner */}
             <div
-              className={`-mx-6 -mt-4 px-6 py-4 mb-6 rounded-t-xl flex items-center gap-3 ${
-                selectedLog.success
-                  ? "bg-green-500/5 border-b border-green-500/10"
-                  : "bg-red-500/5 border-b border-red-500/10"
-              }`}
+              className={`px-4 py-4 mb-6 rounded-lg flex items-center gap-3 ${selectedLog.success
+                ? "bg-green-500/5 border-b border-green-500/10"
+                : "bg-red-500/5 border-b border-red-500/10"
+                }`}
             >
               <span
                 className={`w-2.5 h-2.5 rounded-full shrink-0 ${selectedLog.success ? "bg-green-500" : "bg-red-500"}`}
               />
               <div>
                 <div
-                  className={`text-sm font-black ${selectedLog.success ? "text-green-500" : "text-red-500"}`}
+                  className={`text-sm font-bold ${selectedLog.success ? "text-green-500" : "text-red-500"}`}
                 >
                   {selectedLog.success ? "Successful" : "Failed"}
                 </div>
@@ -586,7 +582,7 @@ export function AuditLogsPage() {
             {/* Error message */}
             {selectedLog.error && (
               <div className="mt-4 -mx-6 px-6 py-4 bg-red-500/5 border-y border-red-500/10">
-                <div className="text-[10px] font-bold uppercase tracking-wider text-red-400 mb-2">
+                <div className="text-[10px] font-bold  tracking-wider text-red-400 mb-2">
                   Error
                 </div>
                 <div className="text-sm font-mono text-red-300">
@@ -598,7 +594,7 @@ export function AuditLogsPage() {
             {/* Changes */}
             {selectedLog.changes && selectedLog.changes.length > 0 && (
               <div className="mt-4">
-                <div className="text-[10px] font-bold uppercase tracking-wider text-[var(--kyro-text-muted)] mb-3">
+                <div className="text-[10px] font-bold  tracking-wider text-[var(--kyro-text-muted)] mb-3">
                   Changes ({selectedLog.changes.length})
                 </div>
                 <div className="rounded-xl border border-[var(--kyro-border)] overflow-hidden">
@@ -607,7 +603,7 @@ export function AuditLogsPage() {
                       key={i}
                       className="flex items-start gap-4 px-4 py-3 text-xs font-mono border-b border-[var(--kyro-border)] last:border-0 hover:bg-[var(--kyro-surface-accent)] transition-colors"
                     >
-                      <span className="text-[10px] font-bold uppercase tracking-wider text-[var(--kyro-text-muted)] w-24 shrink-0 pt-0.5">
+                      <span className="text-[10px] font-bold  tracking-wider text-[var(--kyro-text-muted)] w-24 shrink-0 pt-0.5">
                         {change.field}
                       </span>
                       <span className="text-red-400 line-through flex-1 truncate">
@@ -633,7 +629,7 @@ export function AuditLogsPage() {
             {selectedLog.metadata &&
               Object.keys(selectedLog.metadata).length > 0 && (
                 <div className="mt-4">
-                  <div className="text-[10px] font-bold uppercase tracking-wider text-[var(--kyro-text-muted)] mb-3">
+                  <div className="text-[10px] font-bold  tracking-wider text-[var(--kyro-text-muted)] mb-3">
                     Metadata
                   </div>
                   <div className="border border-[var(--kyro-border)] overflow-hidden">
@@ -653,7 +649,7 @@ export function AuditLogsPage() {
             {/* User Agent */}
             {selectedLog.userAgent && (
               <div className="mt-4">
-                <div className="text-[10px] font-bold uppercase tracking-wider text-[var(--kyro-text-muted)] mb-2">
+                <div className="text-[10px] font-bold  tracking-wider text-[var(--kyro-text-muted)] mb-2">
                   User Agent
                 </div>
                 <div className="text-xs font-mono text-[var(--kyro-text-secondary)] bg-[var(--kyro-bg-secondary)] rounded-lg px-3 py-2 border border-[var(--kyro-border)]">

package/src/components/AuthBridge.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import { useAuthStore } from "../lib/stores";
+
+/**
+ * AuthBridge
+ *
+ * This component is the critical link between the vanilla-JS auth flow
+ * (which runs in AdminLayout.astro and fires `kyro:auth-ready`) and the
+ * React Zustand store (`useAuthStore`).
+ *
+ * It:
+ *  1. Checks `window.__kyroAuth` immediately in case the event already fired
+ *     before this component mounted (race condition on fast networks).
+ *  2. Listens for the `kyro:auth-ready` custom event and populates the store.
+ *
+ * Once the store is hydrated, every React component that calls
+ * `useAuthStore()` will automatically re-render with the correct permissions.
+ */
+export function AuthBridge() {
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  
+  useEffect(() => {
+    const { setUser, setLoading } = useAuthStore.getState();
+
+    function populate(detail: { user: unknown; permissions: unknown }) {
+      if (detail?.user) {
+        setUser(detail.user, detail.permissions ?? null);
+      } else {
+        // Unauthenticated – set loading to false so components don't hang
+        setLoading(false);
+      }
+    }
+
+    // Check if the event already fired before this component mounted
+    const cached = (window as { __kyroAuth?: { user: unknown; permissions: unknown; verified: boolean } }).__kyroAuth;
+    if (cached?.verified && cached?.user) {
+      populate({ user: cached.user, permissions: cached.permissions ?? null });
+      return; // No need to register the event listener
+    }
+
+    // Otherwise wait for the event
+    const handler = (event: Event) => {
+      populate((event as CustomEvent).detail);
+    };
+
+    window.addEventListener("kyro:auth-ready", handler);
+    return () => window.removeEventListener("kyro:auth-ready", handler);
+  }, []);
+
+  return null;
+}