@kyro-cms/admin 0.3.2 → 0.3.5

package/src/components/DetailView.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import { apiGet, apiPatch, apiPost, apiDelete } from "../lib/api";
 import type {
   KyroConfig,
@@ -7,9 +7,13 @@ import type {
 } from "@kyro-cms/core/client";
 import { AutoForm } from "./AutoForm";
 import { ActionBar, type DocumentStatus, type SaveStatus } from "./ActionBar";
-import { ConfirmModal } from "./ui/Modal";
 import { Spinner } from "./ui/Spinner";
 import { useToast } from "./ui/Toast";
+import { useUIStore } from "../lib/stores";
+import { PageHeader } from "./ui/PageHeader";
+import { Badge } from "./ui/Badge";
+import { adminPath } from "../lib/paths";
+
 
 interface DetailViewProps {
   config: KyroConfig;
@@ -21,8 +25,6 @@ interface DetailViewProps {
   onDelete?: () => void;
   onError: (message: string) => void;
   mode?: "collection" | "global";
-  autosave?: boolean;
-  autosaveDelay?: number;
 }
 
 export function DetailView({
@@ -35,26 +37,21 @@ export function DetailView({
   onDelete,
   onError,
   mode = "collection",
-  autosave = true,
-  autosaveDelay = 2000,
 }: DetailViewProps) {
   const { addToast } = useToast();
+  const { confirm, alert } = useUIStore();
   const [data, setData] = useState<Record<string, unknown>>({});
   const [originalData, setOriginalData] = useState<Record<string, unknown>>({});
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [saveStatus, setSaveStatus] = useState<SaveStatus>("idle");
   const [deleting, setDeleting] = useState(false);
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [status, setStatus] = useState<DocumentStatus>("draft");
   const [createdAt, setCreatedAt] = useState<string | null>(null);
   const [updatedAt, setUpdatedAt] = useState<string | null>(null);
   const [publishedAt, setPublishedAt] = useState<string | null>(null);
   const [justSaved, setJustSaved] = useState(false);
 
-  const autosaveTimerRef = useRef<NodeJS.Timeout | null>(null);
-  const hasChangesRef = useRef(false);
-
   const fields = global?.fields || collection?.fields || [];
   const label = global?.label || collection?.label || "Document";
   const slug = global?.slug || collection?.slug || "";
@@ -80,39 +77,23 @@ export function DetailView({
     } else if (documentId) {
       loadDocument();
     }
-  }, [documentId, mode]);
-
-  useEffect(() => {
-    hasChangesRef.current = hasChanges;
-  }, [hasChanges]);
-
-  useEffect(() => {
-    if (autosave && hasChanges && !loading) {
-      if (autosaveTimerRef.current) {
-        clearTimeout(autosaveTimerRef.current);
-      }
-      autosaveTimerRef.current = setTimeout(() => {
-        if (hasChangesRef.current) {
-          handleSave(true);
-        }
-      }, autosaveDelay);
-    }
+  }, [documentId, mode, slug]);
 
-    return () => {
-      if (autosaveTimerRef.current) {
-        clearTimeout(autosaveTimerRef.current);
-      }
-    };
-  }, [data, autosave, autosaveDelay]);
 
   const loadDocument = async () => {
     try {
       setLoading(true);
-      const result = await apiGet(`/api/${slug}/${documentId}`);
+      const result = (await apiGet(`/api/${slug}/${documentId}`, { autoToast: false }) as {
+        data?: Record<string, unknown>;
+        status?: string;
+        createdAt?: string;
+        updatedAt?: string;
+        publishedAt?: string;
+      });
       const docData = result.data || {};
       setData(docData);
       setOriginalData(docData);
-      setStatus(result.status || "draft");
+      setStatus((result.status || "draft") as DocumentStatus);
       setCreatedAt(result.createdAt || null);
       setUpdatedAt(result.updatedAt || null);
       setPublishedAt(result.publishedAt || null);
@@ -126,7 +107,11 @@ export function DetailView({
   const loadGlobal = async () => {
     try {
       setLoading(true);
-      const result = await apiGet(`/api/globals/${slug}`);
+      const result = (await apiGet(`/api/globals/${slug}`, { autoToast: false }) as {
+        data?: Record<string, unknown>;
+        createdAt?: string;
+        updatedAt?: string;
+      });
       const globalData = result.data || {};
       setData(globalData);
       setOriginalData(globalData);
@@ -148,12 +133,15 @@ export function DetailView({
             ? `/api/globals/${slug}`
             : `/api/${slug}/${documentId}`;
 
-        await apiPatch(endpoint, data);
+        const result = (await apiPatch(endpoint, data) as { data?: Record<string, unknown> });
+        const savedData = (result && (result.data || result)) || data;
 
         if (!isAutosave) {
-          setOriginalData(data);
+          setOriginalData(savedData);
           onSave();
         }
+
+        setData(savedData);
         setSaveStatus("saved");
         setUpdatedAt(new Date().toISOString());
 
@@ -162,7 +150,7 @@ export function DetailView({
         setTimeout(() => setJustSaved(false), 3000);
 
         if (!isAutosave) {
-          addToast("success", "Saved successfully");
+          addToast?.("success", "Saved successfully");
         }
 
         setTimeout(() => {
@@ -172,7 +160,7 @@ export function DetailView({
         setSaveStatus("error");
         if (!isAutosave) {
           onError("Failed to save changes");
-          addToast("error", "Failed to save changes");
+          addToast?.("error", "Failed to save changes");
         }
       } finally {
         setSaving(false);
@@ -187,10 +175,10 @@ export function DetailView({
       await apiPost(`/api/${slug}/${documentId}/publish`);
       setStatus("published");
       setPublishedAt(new Date().toISOString());
-      addToast("success", "Published successfully");
+      addToast?.("success", "Published successfully");
     } catch {
       onError("Failed to publish");
-      addToast("error", "Failed to publish");
+      addToast?.("error", "Failed to publish");
     } finally {
       setSaving(false);
     }
@@ -210,24 +198,36 @@ export function DetailView({
 
   const handleDuplicate = async () => {
     try {
-      await apiPost(`/api/${slug}/${documentId}/duplicate`);
+      console.log(`[Duplicate] Calling /api/${slug}/${documentId}/duplicate`);
+      const result = await apiPost(`/api/${slug}/${documentId}/duplicate`);
+      console.log("[Duplicate] Success:", result);
       onError("Document duplicated successfully");
-    } catch {
-      onError("Failed to duplicate document");
+} catch (err: unknown) {
+       console.error("[Duplicate] Error:", err);
+       const message = err instanceof Error ? err.message : "Failed to duplicate document";
+       onError(message);
     }
   };
 
-  const handleDelete = async () => {
-    try {
-      setDeleting(true);
-      await apiDelete(`/api/${slug}/${documentId}`);
-      onDelete?.();
-    } catch {
-      onError("Failed to delete document");
-    } finally {
-      setDeleting(false);
-      setShowDeleteConfirm(false);
-    }
+  const handleDeleteTrigger = () => {
+    confirm({
+      title: `Delete ${label}?`,
+      message: "This action cannot be undone.",
+      variant: "danger",
+      onConfirm: async () => {
+        try {
+          setDeleting(true);
+          await apiDelete(`/api/${slug}/${documentId}`);
+          onDelete?.();
+} catch (err: unknown) {
+           console.error("[Delete] Error:", err);
+           const message = err instanceof Error ? err.message : "Failed to delete document";
+           alert({ title: "Error", message });
+        } finally {
+          setDeleting(false);
+        }
+      }
+    });
   };
 
   if (loading) {
@@ -245,7 +245,33 @@ export function DetailView({
 
   return (
     <div className="kyro-detail">
+      <PageHeader
+        back={{ onClick: onBack }}
+        breadcrumbs={[
+          { label: mode === "global" ? "Globals" : "Collections" },
+          {
+            label: label,
+            href: mode === "collection" ? `${adminPath}/${slug}` : undefined
+          },
+          { label: mode === "global" ? "Edit" : documentId ? "Edit" : "New" }
+        ]}
+        title={
+          (mode === "global" ? label : (data[collection?.admin?.useAsTitle || "title"] as string || data.name as string || documentId || `New ${collection?.singularLabel || label}`))
+        }
+        metadata={[
+          <Badge
+            key="status"
+            variant={status === "published" ? "success" : "warning"}
+            dot
+            className="text-[10px] font-bold "
+          >
+            {status}
+          </Badge>
+        ]}
+      />
+
       {!isSingleLayout && (
+
         <ActionBar
           status={status}
           saveStatus={saveStatus}
@@ -254,11 +280,13 @@ export function DetailView({
           onPublish={handlePublish}
           onUnpublish={status === "published" ? handleUnpublish : undefined}
           onDuplicate={handleDuplicate}
-          onViewHistory={() => {}}
+          onViewHistory={() => {
+            window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
+          }}
           onPreview={() =>
             window.open(`/preview/${slug}/${documentId}`, "_blank")
           }
-          onDelete={() => setShowDeleteConfirm(true)}
+          onDelete={handleDeleteTrigger}
           publishedAt={publishedAt}
           updatedAt={updatedAt}
         />
@@ -274,7 +302,7 @@ export function DetailView({
         <div className="space-y-8 min-w-0">
           <div className="surface-tile p-8">
             <div className="flex items-center justify-between mb-8 px-1">
-              <h2 className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">
+              <h2 className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
                 Core Configuration
               </h2>
               <div className="h-px flex-1 bg-[var(--kyro-border)] ml-6 opacity-30" />
@@ -288,8 +316,10 @@ export function DetailView({
               data={data}
               onChange={setData}
               layout={isSingleLayout ? "single" : "split"}
-              onActionSuccess={(message) => addToast("success", message)}
-              onActionError={(message) => addToast("error", message)}
+              globalSlug={mode === "global" ? slug : undefined}
+              collectionSlug={mode === "collection" ? slug : undefined}
+              onActionSuccess={(message) => addToast?.("success", message)}
+              onActionError={(message) => addToast?.("error", message)}
               documentStatus={status}
               justSaved={justSaved}
             />
@@ -298,8 +328,8 @@ export function DetailView({
                 {mode === "collection" && documentId && (
                   <button
                     type="button"
-                    onClick={() => setShowDeleteConfirm(true)}
-                    className="px-6 py-3 text-red-500 rounded-2xl font-black text-sm hover:bg-red-500/10 active:scale-95 transition-all text-left"
+                    onClick={handleDeleteTrigger}
+                    className="kyro-btn kyro-btn-lg kyro-btn-ghost text-[var(--kyro-error)]"
                   >
                     Delete
                   </button>
@@ -308,7 +338,7 @@ export function DetailView({
                   type="button"
                   onClick={() => handleSave(false)}
                   disabled={saving}
-                  className="px-8 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-2xl font-black text-sm shadow-xl hover:shadow-[var(--kyro-primary)] active:scale-95 transition-all flex items-center gap-2"
+                  className="kyro-btn kyro-btn-lg kyro-btn-primary shadow-xl flex items-center gap-2"
                 >
                   {saving ? (
                     <svg
@@ -347,51 +377,51 @@ export function DetailView({
         {!isSingleLayout && (
           <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
             <div className="surface-tile p-8">
-              <h3 className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 mb-6">
+              <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-6">
                 Metadata
               </h3>
               <div className="space-y-6">
                 <div className="flex flex-col gap-2">
-                  <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
+                  <span className="text-[10px] font-bold  tracking-widest opacity-40">
                     Dynamic Status
                   </span>
                   <div>
                     <span
-                      className={`inline-flex items-center px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest ${status === "published" ? "bg-green-500/10 text-green-500" : "bg-amber-500/10 text-amber-500"}`}
+                      className={`inline-flex items-center px-3 py-1 rounded-full text-[9px] font-bold  tracking-widest ${status === "published" ? "bg-green-500/10 text-green-500" : "bg-amber-500/10 text-amber-500"}`}
                     >
                       {status || "draft"}
                     </span>
                   </div>
                 </div>
                 <div className="flex flex-col gap-2">
-                  <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
+                  <span className="text-[10px] font-bold  tracking-widest opacity-40">
                     Date Created
                   </span>
                   <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
                     {createdAt
                       ? new Date(createdAt).toLocaleString("en-US", {
-                          dateStyle: "medium",
-                          timeStyle: "short",
-                        })
+                        dateStyle: "medium",
+                        timeStyle: "short",
+                      })
                       : "N/A"}
                   </span>
                 </div>
                 <div className="flex flex-col gap-2">
-                  <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
+                  <span className="text-[10px] font-bold  tracking-widest opacity-40">
                     Last Modified
                   </span>
                   <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
                     {updatedAt
                       ? new Date(updatedAt).toLocaleString("en-US", {
-                          dateStyle: "medium",
-                          timeStyle: "short",
-                        })
+                        dateStyle: "medium",
+                        timeStyle: "short",
+                      })
                       : "Just now"}
                   </span>
                 </div>
                 {publishedAt && (
                   <div className="flex flex-col gap-2">
-                    <span className="text-[10px] font-black uppercase tracking-widest opacity-40">
+                    <span className="text-[10px] font-bold  tracking-widest opacity-40">
                       Public At
                     </span>
                     <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
@@ -406,25 +436,28 @@ export function DetailView({
             </div>
 
             <div className="surface-tile p-8 bg-[var(--kyro-bg-secondary)]">
-              <h3 className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 mb-4">
+              <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-4">
                 Quick Links
               </h3>
               <div className="space-y-3">
                 <button
                   type="button"
-                  className="w-full text-left px-4 py-2 rounded-xl text-xs font-bold hover:bg-[var(--kyro-bg-secondary)] transition-colors"
+                  onClick={handleDuplicate}
+                  className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start"
                 >
                   Duplicate Document
                 </button>
                 <button
                   type="button"
-                  className="w-full text-left px-4 py-2 rounded-xl text-xs font-bold hover:bg-[var(--kyro-bg-secondary)] transition-colors"
+                  onClick={() => window.open(`/preview/${slug}/${documentId}`, "_blank")}
+                  className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start"
                 >
                   View Public Page
                 </button>
                 <button
                   type="button"
-                  className="w-full text-left px-4 py-2 rounded-xl text-xs font-bold text-red-500 hover:bg-red-500/10 transition-colors"
+                  onClick={handleDeleteTrigger}
+                  className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start text-[var(--kyro-error)] hover:bg-[var(--kyro-danger-bg)]"
                 >
                   Delete Entry
                 </button>
@@ -433,17 +466,6 @@ export function DetailView({
           </div>
         )}
       </div>
-
-      <ConfirmModal
-        open={showDeleteConfirm}
-        onClose={() => setShowDeleteConfirm(false)}
-        onConfirm={handleDelete}
-        title={`Delete ${label}?`}
-        message="This action cannot be undone."
-        confirmLabel="Delete"
-        variant="danger"
-        loading={deleting}
-      />
     </div>
   );
 }