@kyro-cms/admin 0.11.4 → 0.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "engines": {
     "node": ">=22"
   },

package/src/components/AutoForm.tsx

@@ -167,6 +167,7 @@ export function AutoForm({
   const scheduleRef = useRef<HTMLDivElement>(null);
   const [showSchedulePicker, setShowSchedulePicker] = useState(false);
   const [localSaveStatus, setLocalSaveStatus] = useState<"idle" | "saving" | "saved" | "error">("idle");
+  const [isDuplicating, setIsDuplicating] = useState(false);
   const [now, setNow] = useState(Date.now());
   const disabled = propDisabled;
   const [clientLoading, setClientLoading] = useState(false);
@@ -401,37 +402,54 @@ export function AutoForm({
   };
 
   const handleDuplicate = () => {
+    if (!formData.id) {
+      toast.error("Please save the document before duplicating.");
+      return;
+    }
+
+    const performDuplicate = async () => {
+      try {
+        setIsDuplicating(true);
+        const response = await fetchWithAuth(`/api/${collectionSlug}/${formData.id}/duplicate`, {
+          method: "POST",
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          onActionSuccess?.("Document duplicated successfully");
+          if (result.data?.id) {
+            window.location.href = `${ADMIN_BASE}/${collectionSlug}/${result.data.id}`;
+          } else {
+            window.location.href = `${ADMIN_BASE}/${collectionSlug}`;
+          }
+        } else {
+          const err = await response.json();
+          toast.error(err.error || "Failed to duplicate");
+        }
+      } catch (e) {
+        toast.error("Failed to duplicate document");
+      } finally {
+        setIsDuplicating(false);
+      }
+    };
+
+    if (hasUnsavedChanges) {
+      confirm({
+        title: "Unsaved Changes",
+        message: "You have unsaved changes. Please save the document before duplicating.",
+        onConfirm: async () => {
+          await handleSaveDraft();
+          await performDuplicate();
+        },
+      });
+      return;
+    }
+
     confirm({
       title: "Duplicate Document",
       message: "Are you sure you want to duplicate this document?",
       onConfirm: async () => {
-        try {
-          const { id, createdAt, updatedAt, ...duplicateData } = formData;
-          const normalizedData = normalizeUploadFields(duplicateData) as Record<string, unknown>;
-          const response = await fetchWithAuth(`/api/${collectionSlug}`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              ...normalizedData,
-              title: `${duplicateData.title || duplicateData.name || "Copy"} (Copy)`,
-              slug: `${duplicateData.slug || "copy"}-${Date.now()}`,
-              status: "draft",
-            }),
-          });
-
-          if (response.ok) {
-            const result = await response.json();
-            onActionSuccess?.("Document duplicated successfully");
-            if (result.data?.id) {
-              window.location.href = `${ADMIN_BASE}/${collectionSlug}/${result.data.id}`;
-            }
-          } else {
-            const error = await response.json();
-            toast.error(error.error || "Failed to duplicate document");
-          }
-        } catch (err) {
-          toast.error("Failed to duplicate document");
-        }
+        await performDuplicate();
       },
     });
   };
@@ -532,6 +550,7 @@ export function AutoForm({
       toast.error("Failed to save document");
       setTimeout(() => setLocalSaveStatus("idle"), 3000);
     } finally {
+      window.dispatchEvent(new CustomEvent("kyro:global-save-end"));
       autoSaveSkipRef.current = false;
     }
   };
@@ -987,6 +1006,7 @@ export function AutoForm({
           documentStatus={documentStatus || "draft"}
           hasUnpublishedChanges={hasUnpublishedChanges}
           localSaveStatus={localSaveStatus}
+          isDuplicating={isDuplicating}
           handleCreateNew={handleCreateNew}
           handleDuplicate={handleDuplicate}
           handleUnpublish={handleUnpublish}

package/src/components/CreateView.tsx

@@ -57,6 +57,7 @@ export function CreateView({
         action={{
           label: saving ? "Creating..." : `Create ${collection.singularLabel || label}`,
           onClick: () => handleSubmit(),
+          disabled: saving,
         }}
 
       />

package/src/components/DashboardMetrics.tsx

@@ -0,0 +1,280 @@
+import React, { useEffect, useState } from "react";
+import { apiGet } from "../lib/api";
+
+interface MetricsData {
+  totalDocuments: number;
+  totalMedia: number;
+  totalUsers: number;
+  totalWebhooks: number;
+  totalApiKeys: number;
+  totalStoredRecords: number;
+  collectionCounts: Record<string, number>;
+  collections: number;
+
+  timestamp: string;
+}
+
+function formatNumber(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return n.toLocaleString();
+}
+
+function SkeletonCard() {
+  return (
+    <div className="p-5 bg-[var(--kyro-surface-accent)] rounded-xl border border-[var(--kyro-border)] animate-pulse">
+      <div className="w-10 h-10 rounded-lg bg-[var(--kyro-bg-secondary)] mb-3" />
+      <div className="h-7 w-16 bg-[var(--kyro-bg-secondary)] rounded mb-2" />
+      <div className="h-4 w-24 bg-[var(--kyro-bg-secondary)] rounded" />
+    </div>
+  );
+}
+
+function MetricCard({
+  icon,
+  iconBg,
+  iconColor,
+  value,
+  label,
+  subtext,
+}: {
+  icon: React.ReactNode;
+  iconBg: string;
+  iconColor: string;
+  value: string | number;
+  label: string;
+  subtext?: string;
+}) {
+  return (
+    <div className="kyro-metric-card group p-5 bg-[var(--kyro-surface-accent)] rounded-lg border border-transparent hover:border-[var(--kyro-border)] transition-all hover:shadow-xs">
+      <div
+        className="w-10 h-10 rounded-lg flex items-center justify-center mb-3"
+        style={{ background: iconBg, color: iconColor }}
+      >
+        {icon}
+      </div>
+      <h4 className="text-2xl font-bold text-[var(--kyro-text-primary)] tracking-tight mb-0.5">
+        {typeof value === "number" ? formatNumber(value) : value}
+      </h4>
+      <p className="text-xs font-medium text-[var(--kyro-text-secondary)]">
+        {label}
+      </p>
+      {subtext && (
+        <p className="text-[10px] text-[var(--kyro-text-muted)] mt-1">
+          {subtext}
+        </p>
+      )}
+    </div>
+  );
+}
+
+
+
+export function DashboardMetrics() {
+  const [data, setData] = useState<MetricsData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    apiGet<MetricsData>("/api/metrics", { autoToast: false })
+      .then((res) => {
+        setData(res);
+        setError(null);
+      })
+      .catch((err) => {
+        console.error("Failed to load metrics:", err);
+        setError("Unable to load metrics");
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (error) {
+    return (
+      <div className="surface-tile overflow-hidden">
+        <div className="p-6 border-b border-[var(--kyro-border)]">
+          <h2 className="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]">
+            CMS Metrics
+          </h2>
+        </div>
+        <div className="p-6">
+          <p className="text-sm text-[var(--kyro-text-muted)]">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="surface-tile overflow-hidden">
+      <div className="p-6 border-b border-[var(--kyro-border)]">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)] flex items-center gap-2">
+              <svg
+                className="w-5 h-5 text-[var(--kyro-primary)]"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+                />
+              </svg>
+              CMS Metrics
+            </h2>
+            <p className="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">
+              Real-time content, performance, and system health overview
+            </p>
+          </div>
+          {data && (
+            <span className="text-[10px] text-[var(--kyro-text-muted)] font-mono">
+              {new Date(data.timestamp).toLocaleTimeString()}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Primary Metrics */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 p-6">
+        {loading ? (
+          <>
+            <SkeletonCard />
+            <SkeletonCard />
+            <SkeletonCard />
+            <SkeletonCard />
+            <SkeletonCard />
+          </>
+        ) : data ? (
+          <>
+            <MetricCard
+              icon={
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                  />
+                </svg>
+              }
+              iconBg="rgba(99, 102, 241, 0.1)"
+              iconColor="#6366f1"
+              value={data.totalDocuments}
+              label="Documents"
+              subtext={`Across ${data.collections} collection${data.collections !== 1 ? "s" : ""}`}
+            />
+
+            {data.totalMedia !== undefined && (
+              <MetricCard
+                icon={
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                    />
+                  </svg>
+                }
+                iconBg="rgba(168, 85, 247, 0.1)"
+                iconColor="#a855f7"
+                value={data.totalMedia}
+                label="Media Files"
+                subtext="Images, videos & docs"
+              />
+            )}
+
+            {data.totalUsers !== undefined && (
+              <MetricCard
+                icon={
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+                    />
+                  </svg>
+                }
+                iconBg="rgba(14, 165, 233, 0.1)"
+                iconColor="#0ea5e9"
+                value={data.totalUsers}
+                label="Team Members"
+                subtext="Active user accounts"
+              />
+            )}
+
+            {data.totalWebhooks !== undefined && (
+              <MetricCard
+                icon={
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M13 10V3L4 14h7v7l9-11h-7z"
+                    />
+                  </svg>
+                }
+                iconBg="rgba(34, 197, 94, 0.1)"
+                iconColor="#22c55e"
+                value={data.totalWebhooks}
+                label="Webhooks"
+                subtext="Active integrations"
+              />
+            )}
+
+            {data.totalApiKeys !== undefined && (
+              <MetricCard
+                icon={
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+                    />
+                  </svg>
+                }
+                iconBg="rgba(245, 158, 11, 0.1)"
+                iconColor="#f59e0b"
+                value={data.totalApiKeys}
+                label="API Keys"
+                subtext="Developer access tokens"
+              />
+            )}
+          </>
+        ) : null}
+      </div>
+
+
+    </div>
+  );
+}

package/src/components/DetailView.tsx

@@ -45,8 +45,9 @@ export function DetailView({
   const [originalData, setOriginalData] = useState<Record<string, unknown>>({});
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [isDuplicating, setIsDuplicating] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
   const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle");
-  const [deleting, setDeleting] = useState(false);
   const [status, setStatus] = useState<DocumentStatus>("draft");
   const [createdAt, setCreatedAt] = useState<string | null>(null);
   const [updatedAt, setUpdatedAt] = useState<string | null>(null);
@@ -213,15 +214,18 @@ export function DetailView({
 
   const handleDuplicate = async () => {
     try {
-      setSaving(true);
-      await apiPost(`/api/${slug}/${documentId}/duplicate`, undefined, { autoToast: false });
+      setIsDuplicating(true);
+      const response = await apiPost(`/api/${slug}/${documentId}/duplicate`, undefined, { autoToast: false }) as { data?: { id?: string } };
       toast.success("Document duplicated");
-    } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : "Failed to duplicate document";
-      onError(message);
-      toast.error(message);
+      if (response?.data?.id) {
+        window.location.href = `${adminPath}/${slug}/${response.data.id}`;
+      } else {
+        window.location.href = `${adminPath}/${slug}`;
+      }
+    } catch (e) {
+      toast.error((e as Error).message || "Failed to duplicate document");
     } finally {
-      setSaving(false);
+      setIsDuplicating(false);
     }
   };
 
@@ -232,15 +236,11 @@ export function DetailView({
       variant: "danger",
       onConfirm: async () => {
         try {
-          setDeleting(true);
-          await apiDelete(`/api/${slug}/${documentId}`, { autoToast: false });
-          onDelete?.();
-          toast.error("Document deleted");
-        } catch (err: unknown) {
-          const message = err instanceof Error ? err.message : "Failed to delete document";
-          toast.error(message);
-        } finally {
-          setDeleting(false);
+          setIsDeleting(true);
+          await apiDelete(`/api/${slug}/${documentId}`);
+          window.location.href = `${adminPath}/${slug}`;
+        } catch (e) {
+          setIsDeleting(false);
         }
       }
     });
@@ -350,9 +350,10 @@ export function DetailView({
                   <button
                     type="button"
                     onClick={handleDeleteTrigger}
-                    className="kyro-btn kyro-btn-lg kyro-btn-ghost text-[var(--kyro-error)]"
+                    disabled={isDeleting || saving}
+                    className="kyro-btn kyro-btn-sm text-[var(--kyro-danger)] hover:bg-[var(--kyro-danger)]/10 w-full justify-start mt-2"
                   >
-                    Delete
+                    {isDeleting ? "Deleting..." : "Delete Document"}
                   </button>
                 )}
                 <SplitButton
@@ -436,9 +437,10 @@ export function DetailView({
                 <button
                   type="button"
                   onClick={handleDuplicate}
+                  disabled={isDuplicating || saving}
                   className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start"
                 >
-                  Duplicate Document
+                  {isDuplicating ? "Duplicating..." : "Duplicate Document"}
                 </button>
                 <button
                   type="button"