@kyro-cms/admin 0.1.9 → 0.2.0

package/README.md

@@ -2,10 +2,13 @@
 
 Admin dashboard for Kyro CMS — a React-based admin interface built with Astro.
 
+Uses `@kyro-cms/utils` for API calls, date formatting, and validation.
+
 ## Features
 
 - **Multi-Database Support** — SQLite, PostgreSQL, MySQL, MongoDB
 - **Authentication** — JWT-based login/logout with auto-selecting auth adapter
+- **Shared Utilities** — Uses @kyro-cms/utils for consistent API handling
 - **Collection Management** — Create, edit, and manage content collections
 - **User Management** — Manage users, roles, and permissions
 - **Settings** — Configure CMS settings, globals, and plugins

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -47,8 +47,8 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@graphiql/react": "^0.37.3",
-    "@kyro-cms/core": "workspace:*",
-    "@kyro-cms/utils": "workspace:*",
+    "@kyro-cms/core": "^0.2.0",
+    "@kyro-cms/utils": "^0.2.0",
     "@platejs/dnd": "^53.0.0",
     "@portabletext/editor": "^6.6.3",
     "@portabletext/react": "^6.0.3",
@@ -93,4 +93,4 @@
   "peerDependencies": {
     "@kyro-cms/core": "^0.1.2"
   }
-}
+}

package/src/components/Admin.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { apiPost } from "@kyro-cms/utils/lib/api";
 import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core/client";
 import { ListView } from "./ListView";
 import { DetailView } from "./DetailView";
@@ -141,7 +142,7 @@ export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
 
   const handleLogout = async () => {
     try {
-      await fetch("/api/auth/logout", { method: "POST" });
+      await apiPost("/api/auth/logout");
     } catch {
     } finally {
       localStorage.removeItem("kyro_token");

package/src/components/ApiKeysManager.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { apiGet, apiPost, apiDelete } from "@kyro-cms/utils/lib/api";
 import {
   Key,
   Plus,
@@ -44,17 +45,14 @@ export function ApiKeysManager() {
   const loadKeys = async () => {
     setLoading(true);
     try {
-      const res = await fetch("/api/keys");
-      if (res.ok) {
-        const data = await res.json();
-        setKeys(
-          data.map((k: any) => ({
-            ...k,
-            key: k.key,
-            keyPrefix: k.keyPrefix || k.key?.substring(0, 8) || "",
-          })),
-        );
-      }
+      const data = await apiGet("/api/keys");
+      setKeys(
+        data.map((k: any) => ({
+          ...k,
+          key: k.key,
+          keyPrefix: k.keyPrefix || k.key?.substring(0, 8) || "",
+        })),
+      );
     } catch (e) {
       console.error(e);
     } finally {
@@ -73,23 +71,12 @@ export function ApiKeysManager() {
     }
 
     try {
-      const res = await fetch("/api/keys", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name: newKeyName }),
-      });
-
-      if (res.ok) {
-        const created = await res.json();
-        setNewKey(created);
-        setShowCreateModal(false);
-        setNewKeyName("");
-        setCreateError("");
-        loadKeys();
-      } else {
-        const error = await res.json();
-        setCreateError(error.error || "Failed to create API key");
-      }
+      const created = await apiPost("/api/keys", { name: newKeyName });
+      setNewKey(created);
+      setShowCreateModal(false);
+      setNewKeyName("");
+      setCreateError("");
+      loadKeys();
     } catch (e) {
       console.error(e);
       setCreateError("Failed to create API key");
@@ -105,13 +92,8 @@ export function ApiKeysManager() {
     if (!deleteKeyId) return;
 
     try {
-      const res = await fetch(`/api/keys/${deleteKeyId}`, { method: "DELETE" });
-      if (res.ok) {
-        loadKeys();
-      } else {
-        setAlertMessage("Failed to delete API key");
-        setShowAlertModal(true);
-      }
+      await apiDelete(`/api/keys/${deleteKeyId}`);
+      loadKeys();
     } catch (e) {
       console.error(e);
       setAlertMessage("Failed to delete API key");
@@ -136,7 +118,8 @@ export function ApiKeysManager() {
             <h1 className="text-4xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
               API <span className="text-[var(--kyro-primary)]">Keys</span>
             </h1>
-            <button type="button"
+            <button
+              type="button"
               onClick={() => setShowHelpModal(true)}
               className="p-2 rounded-lg text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)] transition-all"
               title="Learn how API keys work"
@@ -148,7 +131,8 @@ export function ApiKeysManager() {
             Secure tokens for authenticating API requests.
           </p>
         </div>
-        <button type="button"
+        <button
+          type="button"
           onClick={() => {
             setNewKeyName("");
             setCreateError("");
@@ -187,7 +171,8 @@ export function ApiKeysManager() {
                 -H "Authorization: ApiKey kyro_xxx"
               </div>
             </div>
-            <button type="button"
+            <button
+              type="button"
               onClick={() => {
                 navigator.clipboard.writeText(
                   'curl -X GET https://yoursite.com/api/posts -H "Authorization: ApiKey YOUR_KEY"',
@@ -276,7 +261,8 @@ export function ApiKeysManager() {
                 <code className="flex-1 p-4 bg-[var(--kyro-bg)] border border-green-500/30 rounded-xl font-mono text-sm break-all">
                   {newKey.key}
                 </code>
-                <button type="button"
+                <button
+                  type="button"
                   onClick={() => copyToClipboard(newKey.key!, newKey.id)}
                   className="p-4 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl hover:opacity-90 flex-shrink-0"
                   title="Copy to clipboard"
@@ -290,7 +276,8 @@ export function ApiKeysManager() {
               </div>
             </div>
           </div>
-          <button type="button"
+          <button
+            type="button"
             onClick={() => setNewKey(null)}
             className="mt-6 text-sm font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
           >
@@ -319,7 +306,8 @@ export function ApiKeysManager() {
             <p className="text-sm text-[var(--kyro-text-secondary)] opacity-60 mb-6">
               Create your first API key to authenticate with the API.
             </p>
-            <button type="button"
+            <button
+              type="button"
               onClick={() => setShowCreateModal(true)}
               className="px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-black text-sm hover:opacity-90 transition-all"
             >
@@ -363,7 +351,8 @@ export function ApiKeysManager() {
                     </div>
                   </div>
                   <div className="flex items-center gap-2">
-                    <button type="button"
+                    <button
+                      type="button"
                       onClick={() =>
                         copyToClipboard(
                           key.key || `${key.keyPrefix}...`,
@@ -381,7 +370,8 @@ export function ApiKeysManager() {
                         {copiedId === key.id ? "Copied!" : "Copy"}
                       </span>
                     </button>
-                    <button type="button"
+                    <button
+                      type="button"
                       onClick={() => handleDeleteKey(key.id)}
                       className="p-3 text-red-500 bg-red-500/10 rounded-xl hover:bg-red-500/20"
                       title="Delete API key"
@@ -433,13 +423,15 @@ export function ApiKeysManager() {
           </div>
         </ModalContent>
         <ModalActions>
-          <button type="button"
+          <button
+            type="button"
             onClick={() => setShowCreateModal(false)}
             className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)] transition-colors"
           >
             Cancel
           </button>
-          <button type="button"
+          <button
+            type="button"
             onClick={handleCreateKey}
             className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
           >
@@ -468,13 +460,15 @@ export function ApiKeysManager() {
           </div>
         </ModalContent>
         <ModalActions>
-          <button type="button"
+          <button
+            type="button"
             onClick={() => setShowDeleteModal(false)}
             className="px-4 py-2 rounded-lg font-medium text-sm border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)] transition-colors"
           >
             Keep Key
           </button>
-          <button type="button"
+          <button
+            type="button"
             onClick={confirmDeleteKey}
             className="px-4 py-2 rounded-lg font-medium text-sm bg-red-500 text-white hover:bg-red-600 transition-colors"
           >
@@ -529,7 +523,8 @@ export function ApiKeysManager() {
           </div>
         </ModalContent>
         <ModalActions>
-          <button type="button"
+          <button
+            type="button"
             onClick={() => setShowHelpModal(false)}
             className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
           >
@@ -550,7 +545,8 @@ export function ApiKeysManager() {
           </p>
         </ModalContent>
         <ModalActions>
-          <button type="button"
+          <button
+            type="button"
             onClick={() => setShowAlertModal(false)}
             className="px-4 py-2 rounded-lg font-medium text-sm bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-colors"
           >

package/src/components/AuditLogsPage.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
+import { apiGet } from "@kyro-cms/utils/lib/api";
 import { Modal } from "./ui/Modal";
 
 interface AuditLog {
@@ -283,7 +284,8 @@ export function AuditLogsPage() {
         </select>
 
         {(search || action || successFilter) && (
-          <button type="button"
+          <button
+            type="button"
             onClick={() => {
               setSearch("");
               setAction("");
@@ -491,7 +493,8 @@ export function AuditLogsPage() {
             </span>
           </p>
           <div className="flex items-center gap-2">
-            <button type="button"
+            <button
+              type="button"
               onClick={() => fetchLogs(page - 1)}
               disabled={page <= 1}
               className={`px-4 py-2 rounded-xl text-sm font-bold transition-all ${
@@ -505,7 +508,8 @@ export function AuditLogsPage() {
             {Array.from({ length: Math.min(totalPages, 7) }, (_, i) => {
               const p = i + 1;
               return (
-                <button type="button"
+                <button
+                  type="button"
                   key={p}
                   onClick={() => fetchLogs(p)}
                   className={`px-3.5 py-2 rounded-xl text-sm font-bold transition-all ${
@@ -518,7 +522,8 @@ export function AuditLogsPage() {
                 </button>
               );
             })}
-            <button type="button"
+            <button
+              type="button"
               onClick={() => fetchLogs(page + 1)}
               disabled={page >= totalPages}
               className={`px-4 py-2 rounded-xl text-sm font-bold transition-all ${

package/src/components/BrandingHub.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { apiGet, apiPatch } from "@kyro-cms/utils/lib/api";
 import {
   Palette,
   Tag,
@@ -24,17 +25,14 @@ export function BrandingHub() {
   useEffect(() => {
     const fetchBranding = async () => {
       try {
-        const res = await fetch("/api/globals/site");
-        if (res.ok) {
-          const result = await res.json();
-          const data = result.data || result;
-          if (data && Object.keys(data).length > 0) {
-            if (data.siteName) setSiteName(data.siteName);
-            if (data.adminTitle) setAdminTitle(data.adminTitle);
-            if (data.primaryColor) setPrimaryColor(data.primaryColor);
-            if (data.dashboardGreeting)
-              setDashboardGreeting(data.dashboardGreeting);
-          }
+        const result = await apiGet("/api/globals/site");
+        const data = result.data || result;
+        if (data && Object.keys(data).length > 0) {
+          if (data.siteName) setSiteName(data.siteName);
+          if (data.adminTitle) setAdminTitle(data.adminTitle);
+          if (data.primaryColor) setPrimaryColor(data.primaryColor);
+          if (data.dashboardGreeting)
+            setDashboardGreeting(data.dashboardGreeting);
         }
       } catch (err) {
         console.error("Failed to load branding:", err);
@@ -46,26 +44,18 @@ export function BrandingHub() {
   const handleSave = async () => {
     setSaving(true);
     try {
-      const res = await fetch("/api/globals/site", {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          siteName,
-          adminTitle,
-          primaryColor,
-          dashboardGreeting,
-        }),
+      await apiPatch("/api/globals/site", {
+        siteName,
+        adminTitle,
+        primaryColor,
+        dashboardGreeting,
       });
-      if (res.ok) {
-        setSaved(true);
-        setTimeout(() => setSaved(false), 3000);
-        document.documentElement.style.setProperty(
-          "--kyro-primary",
-          primaryColor,
-        );
-      } else {
-        throw new Error("Failed to save");
-      }
+      setSaved(true);
+      setTimeout(() => setSaved(false), 3000);
+      document.documentElement.style.setProperty(
+        "--kyro-primary",
+        primaryColor,
+      );
     } catch (e) {
       console.error(e);
     } finally {
@@ -96,7 +86,8 @@ export function BrandingHub() {
           </p>
         </div>
         <div className="flex items-center gap-3">
-          <button type="button"
+          <button
+            type="button"
             onClick={handleSave}
             disabled={saving}
             className={`flex items-center gap-2 px-8 py-3 rounded-2xl font-black text-sm shadow-xl transition-all active:scale-95 ${
@@ -187,7 +178,8 @@ export function BrandingHub() {
               </label>
               <div className="grid grid-cols-6 gap-3">
                 {colors.map((c) => (
-                  <button type="button"
+                  <button
+                    type="button"
                     key={c.name}
                     onClick={() => setPrimaryColor(c.hex)}
                     className={`aspect-square rounded-xl transition-all border-4 ${primaryColor === c.hex ? "border-white ring-2 ring-[var(--kyro-primary)]" : "border-transparent opacity-60 hover:opacity-100"}`}

package/src/components/CreateView.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { apiPost } from "@kyro-cms/utils/lib/api";
 import type { KyroConfig, CollectionConfig } from "@kyro-cms/core/client";
 import { AutoForm } from "./AutoForm";
 import { Spinner } from "./ui/Spinner";
@@ -28,17 +29,7 @@ export function CreateView({
     e.preventDefault();
     try {
       setSaving(true);
-      const response = await fetch(`/api/${collection.slug}`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(data),
-      });
-
-      if (!response.ok) {
-        const error = await response.json();
-        throw new Error(error.message || "Failed to create");
-      }
-
+      await apiPost(`/api/${collection.slug}`, data);
       onSuccess();
     } catch (err) {
       onError(err instanceof Error ? err.message : "Failed to create");
@@ -64,14 +55,16 @@ export function CreateView({
         </button>
         <h2 className="kyro-detail-title">Create {label}</h2>
         <div className="kyro-detail-actions">
-          <button type="button"
+          <button
+            type="button"
             className="kyro-btn kyro-btn-secondary kyro-btn-md"
             onClick={onCancel}
             disabled={saving}
           >
             Cancel
           </button>
-          <button type="button"
+          <button
+            type="button"
             className="kyro-btn kyro-btn-primary kyro-btn-md"
             onClick={handleSubmit}
             disabled={saving}

package/src/components/DetailView.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
+import { apiGet, apiPatch, apiPost, apiDelete } from "@kyro-cms/utils/lib/api";
 import type {
   KyroConfig,
   CollectionConfig,
@@ -107,9 +108,7 @@ export function DetailView({
   const loadDocument = async () => {
     try {
       setLoading(true);
-      const response = await fetch(`/api/${slug}/${documentId}`);
-      if (!response.ok) throw new Error("Failed to load document");
-      const result = await response.json();
+      const result = await apiGet(`/api/${slug}/${documentId}`);
       const docData = result.data || {};
       setData(docData);
       setOriginalData(docData);
@@ -127,9 +126,7 @@ export function DetailView({
   const loadGlobal = async () => {
     try {
       setLoading(true);
-      const response = await fetch(`/api/globals/${slug}`);
-      if (!response.ok) throw new Error("Failed to load global");
-      const result = await response.json();
+      const result = await apiGet(`/api/globals/${slug}`);
       const globalData = result.data || {};
       setData(globalData);
       setOriginalData(globalData);
@@ -151,13 +148,7 @@ export function DetailView({
             ? `/api/globals/${slug}`
             : `/api/${slug}/${documentId}`;
 
-        const response = await fetch(endpoint, {
-          method: "PATCH",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(data),
-        });
-
-        if (!response.ok) throw new Error("Failed to save");
+        await apiPatch(endpoint, data);
 
         if (!isAutosave) {
           setOriginalData(data);
@@ -193,10 +184,7 @@ export function DetailView({
   const handlePublish = async () => {
     try {
       setSaving(true);
-      const response = await fetch(`/api/${slug}/${documentId}/publish`, {
-        method: "POST",
-      });
-      if (!response.ok) throw new Error("Failed to publish");
+      await apiPost(`/api/${slug}/${documentId}/publish`);
       setStatus("published");
       setPublishedAt(new Date().toISOString());
       addToast("success", "Published successfully");
@@ -211,10 +199,7 @@ export function DetailView({
   const handleUnpublish = async () => {
     try {
       setSaving(true);
-      const response = await fetch(`/api/${slug}/${documentId}/unpublish`, {
-        method: "POST",
-      });
-      if (!response.ok) throw new Error("Failed to unpublish");
+      await apiPost(`/api/${slug}/${documentId}/unpublish`);
       setStatus("draft");
     } catch {
       onError("Failed to unpublish");
@@ -225,10 +210,7 @@ export function DetailView({
 
   const handleDuplicate = async () => {
     try {
-      const response = await fetch(`/api/${slug}/${documentId}/duplicate`, {
-        method: "POST",
-      });
-      if (!response.ok) throw new Error("Failed to duplicate");
+      await apiPost(`/api/${slug}/${documentId}/duplicate`);
       onError("Document duplicated successfully");
     } catch {
       onError("Failed to duplicate document");
@@ -238,11 +220,7 @@ export function DetailView({
   const handleDelete = async () => {
     try {
       setDeleting(true);
-      const response = await fetch(`/api/${slug}/${documentId}`, {
-        method: "DELETE",
-      });
-
-      if (!response.ok) throw new Error("Failed to delete");
+      await apiDelete(`/api/${slug}/${documentId}`);
       onDelete?.();
     } catch {
       onError("Failed to delete document");