@kyro-cms/admin 0.12.4 → 0.12.5

package/src/components/ApiKeysManager.tsx

@@ -10,6 +10,7 @@ import {
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
 import { Modal, ModalContent, ModalActions } from "./ui/Modal";
+import { useTranslation } from "react-i18next";
 
 interface ApiKeyItem {
   id: string;
@@ -46,6 +47,7 @@ const ALL_PERMISSIONS: PermissionsOption[] = [
 ];
 
 export function ApiKeysManager() {
+    const { t } = useTranslation();
   const { items: keys, loading, create, update, remove, isCreateModalOpen, setIsCreateModalOpen } =
     useResourceManager<ApiKeyItem>(
       React.useMemo(() => ({
@@ -83,7 +85,7 @@ export function ApiKeysManager() {
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
 
       <PageHeader
-        title="API Keys"
+        title={t("tooltips.apiKeys", { defaultValue: "API Keys" })}
         description="Programmatic tokens for secure infrastructure integration."
         icon={Key}
         actions={
@@ -329,7 +331,7 @@ export function ApiKeysManager() {
                       type="button"
                       onClick={() => remove(key.id, "API Key")}
                       className="p-2 bg-red-500/5 border border-red-500/10 rounded-lg hover:bg-red-500/10 hover:border-red-500/30 transition-all opacity-0 group-hover:opacity-100 shrink-0"
-                      title="Revoke Access"
+                      title={t("tooltips.revokeAccess", { defaultValue: "Revoke Access" })}
                     >
                       <Trash2 className="w-3.5 h-3.5 text-red-500/50 group-hover/delete:text-red-500" />
                     </button>
@@ -342,7 +344,7 @@ export function ApiKeysManager() {
       </div>
 
       {/* Create Modal */}
-      <Modal size="lg" open={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} title="Create New API Key">
+      <Modal size="lg" open={isCreateModalOpen} onClose={() => setIsCreateModalOpen(false)} title={t("tooltips.createNewApiKey", { defaultValue: "Create New API Key" })}>
         <ModalContent>
           <div className="space-y-5">
             <div>
@@ -428,7 +430,7 @@ export function ApiKeysManager() {
       </Modal>
 
       {/* Help Modal */}
-      <Modal size="lg" open={showHelpModal} onClose={() => setShowHelpModal(false)} title="How API Keys Work">
+      <Modal size="lg" open={showHelpModal} onClose={() => setShowHelpModal(false)} title={t("tooltips.howApiKeysWork", { defaultValue: "How API Keys Work" })}>
         <ModalContent>
           <div className="space-y-6">
             <div>

package/src/components/AuditLogsPage.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useCallback } from "react";
 import { fetchWithAuth } from "../lib/api";
 import { Modal } from "./ui/Modal";
 import { Shimmer } from "./ui/Shimmer";
+import { useTranslation } from "react-i18next";
 
 interface AuditLog {
   id: string;
@@ -156,6 +157,7 @@ function MetadataRow({ label, value }: { label: string; value: unknown }) {
 }
 
 export function AuditLogsPage() {
+    const { t } = useTranslation();
   const [logs, setLogs] = useState<AuditLog[]>([]);
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(1);
@@ -234,7 +236,7 @@ export function AuditLogsPage() {
           <Search className="w-4 h-4" />
           <input
             type="text"
-            placeholder="Search by user email..."
+            placeholder={t("fields.searchByUserEmail", { defaultValue: "Search by user email..." })}
             value={search}
             onChange={(e) => {
               setSearch(e.target.value);
@@ -524,7 +526,7 @@ export function AuditLogsPage() {
       <Modal
         open={!!selectedLog}
         onClose={() => setSelectedLog(null)}
-        title="Audit Log Details"
+        title={t("tooltips.auditLogDetails", { defaultValue: "Audit Log Details" })}
         size="lg"
       >
         {selectedLog && (

package/src/components/AutoForm.tsx

@@ -567,8 +567,7 @@ export function AutoForm({
       if (response.ok) {
         const result = await response.json();
         const savedData = result.data || data;
-        setFormData({ ...formData, ...savedData });
-        markSaved();
+        useAutoFormStore.getState().loadDocument(savedData, savedData);
         lastAutoSaveTimeRef.current = Date.now();
         setAutoSaveStatus("success");
         setLocalSaveStatus("saved");
@@ -580,6 +579,9 @@ export function AutoForm({
         onActionSuccess?.(
           isPost ? "Document created successfully" : "Changes saved",
         );
+        if (globalSlug) {
+          window.dispatchEvent(new Event("kyro:soft-reload"));
+        }
         if (isPost) {
           setTimeout(() => {
             window.location.href = `${ADMIN_BASE}/${collectionSlug}/${result.data.id}`;
@@ -630,9 +632,8 @@ export function AutoForm({
         }
         const result = await response.json();
         const savedData = result.data || data;
-        setFormData({ ...formData, ...savedData });
-        markSaved();
-        dataToPublish = { ...formData, ...savedData };
+        useAutoFormStore.getState().loadDocument(savedData, savedData);
+        dataToPublish = savedData;
       }
 
       // Save and publish (X-Draft: false writes to main doc + versions table)
@@ -642,8 +643,7 @@ export function AutoForm({
       if (response?.ok) {
         const result = await response.json().catch(() => ({}));
         const savedData = result.data || data;
-        setFormData({ ...formData, ...savedData });
-        markSaved();
+        useAutoFormStore.getState().loadDocument(savedData, savedData);
         setLocalSaveStatus("saved");
         onActionSuccess?.("Published successfully");
         
@@ -1137,6 +1137,9 @@ export function AutoForm({
                   setFormData({ ...formData, ...savedData });
                   setLastSavedData({ ...formData, ...savedData });
                   onActionSuccess?.("Changes saved");
+                  if (globalSlug) {
+                    window.dispatchEvent(new Event("kyro:soft-reload"));
+                  }
                 }
               } catch (e) {
                 console.error("Save error exception:", e);

package/src/components/BrandingHub.tsx

@@ -12,8 +12,10 @@ import {
   RefreshCcw,
   Sparkles,
 } from "./ui/icons";
+import { useTranslation } from "react-i18next";
 
 export function BrandingHub() {
+    const { t } = useTranslation();
   const [siteName, setSiteName] = useState("Kyro CMS");
   const [adminTitle, setAdminTitle] = useState("Command Center");
   const [primaryColor, setPrimaryColor] = useState("#6366f1");
@@ -158,7 +160,7 @@ export function BrandingHub() {
                 onChange={(e) => setDashboardGreeting(e.target.value)}
                 rows={3}
                 className="w-full bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl py-3 px-4 text-sm font-bold focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)] transition-all resize-none"
-                placeholder="Greeting text for the dashboard..."
+                placeholder={t("fields.greetingTextForThe", { defaultValue: "Greeting text for the dashboard..." })}
               />
             </div>
           </div>

package/src/components/Dashboard.tsx

@@ -4,6 +4,7 @@ import { useAuthStore } from "../lib/stores";
 import { authCollectionSlugs } from "../lib/config";
 import { PageHeader } from "./ui/PageHeader";
 import { Shimmer } from "./ui/Shimmer";
+import { useTranslation } from "react-i18next";
 
 
 interface DashboardProps {
@@ -13,8 +14,14 @@ interface DashboardProps {
 }
 
 export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
+  const { t } = useTranslation();
   const { permissions } = useAuthStore();
-  const [stats, setStats] = useState({
+  const [stats, setStats] = useState<{
+    totalDocs: number;
+    totalMedia: number;
+    totalUsers: number;
+    recentActivity: Array<{ id: number; type: string; user: string; doc: string; collection: string; time: string }>;
+  }>({
     totalDocs: 0,
     totalMedia: 0,
     totalUsers: 0,
@@ -78,10 +85,10 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
   return (
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-12">
       <PageHeader
-        title={`Welcome back, ${user?.email?.split("@")[0] || "Admin"}`}
-        description="Everything looks great in your command center today."
+        title={t("dashboard.welcome", { defaultValue: "Welcome back, {{name}}", name: (user?.email as string)?.split("@")[0] || "Admin" })}
+        description={t("dashboard.description", { defaultValue: "Everything looks great in your command center today." })}
         action={collectionList.length > 0 && permissions?.collections?.[collectionList[0]?.[0]]?.create !== false ? {
-          label: "New Document",
+          label: t("actions.newDocument", { defaultValue: "New Document" }),
           onClick: () => onNavigate("create", collectionList[0]?.[0]),
           icon: Plus,
         } : undefined}
@@ -92,25 +99,25 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         {[
           {
-            label: "Total Content",
+            label: t("dashboard.totalContent", { defaultValue: "Total Content" }),
             value: stats.totalDocs,
             icon: FileText,
             color: "text-blue-500",
           },
           {
-            label: "Media Assets",
+            label: t("dashboard.mediaAssets", { defaultValue: "Media Assets" }),
             value: stats.totalMedia,
             icon: ImageIcon,
             color: "text-purple-500",
           },
           {
-            label: "Active Users",
+            label: t("dashboard.activeUsers", { defaultValue: "Active Users" }),
             value: stats.totalUsers,
             icon: Users,
             color: "text-green-500",
           },
           {
-            label: "System Health",
+            label: t("dashboard.systemHealth", { defaultValue: "System Health" }),
             value: "100%",
             icon: Activity,
             color: "text-amber-500",
@@ -143,10 +150,10 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
           <section className="surface-tile p-8">
             <h2 className="text-xl font-bold mb-1 tracking-tight flex items-center gap-2">
               <LayoutDashboard className="w-5 h-5 opacity-40" />
-              Content Growth
+              {t("dashboard.contentGrowth", { defaultValue: "Content Growth" })}
             </h2>
             <p className="text-[10px] font-bold  tracking-widest opacity-40 mb-8">
-              Snapshot of document velocity over the last 7 days
+              {t("dashboard.contentGrowthDesc", { defaultValue: "Snapshot of document velocity over the last 7 days" })}
             </p>
 
             {/* SVG Line Chart */}
@@ -192,18 +199,18 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
                 />
               </svg>
               <div className="flex justify-between mt-4 text-[10px] font-bold opacity-30 tracking-widest ">
-                <span>Mon</span>
-                <span>Tue</span>
-                <span>Wed</span>
-                <span>Thu</span>
-                <span>Fri</span>
-                <span>Sat</span>
-                <span>Sun</span>
+                <span>{t("days.mon", { defaultValue: "Mon" })}</span>
+                <span>{t("days.tue", { defaultValue: "Tue" })}</span>
+                <span>{t("days.wed", { defaultValue: "Wed" })}</span>
+                <span>{t("days.thu", { defaultValue: "Thu" })}</span>
+                <span>{t("days.fri", { defaultValue: "Fri" })}</span>
+                <span>{t("days.sat", { defaultValue: "Sat" })}</span>
+                <span>{t("days.sun", { defaultValue: "Sun" })}</span>
               </div>
             </div>
 
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              {collectionList.map(([slug, config]: [string, Record<string, unknown>]) => (
+              {collectionList.map(([slug, config]: [string, any]) => (
                 <div
                   key={slug}
                   onClick={() => onNavigate("list", slug)}
@@ -211,7 +218,7 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
                 >
                   <div className="flex items-center justify-between mb-2">
                     <h3 className="font-bold text-lg tracking-tight group-hover:text-[var(--kyro-primary)] transition-colors">
-                      {config.label || slug}
+                      {(config.label as string) || slug}
                     </h3>
                     <ArrowUpRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-all" />
                   </div>
@@ -222,7 +229,7 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
                     />
                   </div>
                   <p className="text-sm text-[var(--kyro-text-secondary)] line-clamp-1">
-                    {config.admin?.description || `Manage ${slug} content.`}
+                    {(config.admin as any)?.description || `Manage ${slug} content.`}
                   </p>
                 </div>
               ))}
@@ -234,7 +241,7 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
               <div className="flex items-center justify-between mb-4">
                 <h3 className="text-xl font-bold tracking-tight group-hover:text-[var(--kyro-primary)] transition-colors flex items-center gap-2">
                   <Plus className="w-5 h-5" />
-                  Quick Links
+                  {t("dashboard.quickLinks", { defaultValue: "Quick Links" })}
                 </h3>
               </div>
               <div className="space-y-3">
@@ -247,13 +254,13 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
                       className="w-full flex items-center justify-between p-4 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-surface-accent)] hover:border-[var(--kyro-primary)] transition-all group/btn"
                     >
                       <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
-                        New {(collections[slug] as Record<string, unknown>)?.singularLabel || (collections[slug] as Record<string, unknown>)?.label || slug}
+                        {t("dashboard.newAction", { defaultValue: "New {{item}}", item: (collections[slug] as Record<string, unknown>)?.singularLabel || (collections[slug] as Record<string, unknown>)?.label || slug })}
                       </span>
                       <Plus className="w-4 h-4 text-[var(--kyro-text-secondary)] group-hover/btn:text-[var(--kyro-primary)]" />
                     </button>
                   ))}
                 {collectionList.every(([slug]) => permissions?.collections?.[slug]?.create === false) && (
-                  <p className="text-sm text-[var(--kyro-text-secondary)] py-2">No collections available for creation.</p>
+                  <p className="text-sm text-[var(--kyro-text-secondary)] py-2">{t("dashboard.noCollections", { defaultValue: "No collections available for creation." })}</p>
                 )}
               </div>
             </section>
@@ -261,13 +268,13 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
             <div className="surface-tile p-8 bg-[#0f172a] text-white border-none shadow-2xl shadow-blue-500/10 overflow-hidden relative group cursor-pointer">
               <div className="relative z-10">
                 <h3 className="text-2xl font-bold tracking-tighter mb-2">
-                  Media Library
+                  {t("dashboard.mediaLibrary", { defaultValue: "Media Library" })}
                 </h3>
                 <p className="opacity-80 text-sm font-medium mb-6">
-                  Manage high-fidelity assets with our liquid masonry gallery.
+                  {t("dashboard.mediaLibraryDesc", { defaultValue: "Manage high-fidelity assets with our liquid masonry gallery." })}
                 </p>
                 <div className="flex items-center gap-2 font-bold text-xs  tracking-widest text-blue-400">
-                  Open Assets{" "}
+                  {t("dashboard.openAssets", { defaultValue: "Open Assets" })}{" "}
                   <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                 </div>
               </div>
@@ -281,10 +288,10 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
           <section className="surface-tile p-8">
             <h2 className="text-xl font-bold mb-6 tracking-tight flex items-center gap-2">
               <ClockIcon className="w-5 h-5 opacity-40" />
-              Recent Activity
+              {t("dashboard.recentActivity", { defaultValue: "Recent Activity" })}
             </h2>
             <div className="space-y-6">
-              {stats.recentActivity.map((act: Record<string, unknown>) => (
+              {stats.recentActivity.map((act: any) => (
                 <div key={act.id} className="flex gap-4 group">
                   <div className="mt-1">
                     <div className="w-8 h-8 rounded-full bg-[var(--kyro-bg-secondary)] flex items-center justify-center border border-[var(--kyro-border)] group-hover:bg-[var(--kyro-primary)] transition-colors">
@@ -316,31 +323,31 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
               ))}
             </div>
             <button type="button" className="w-full mt-6 py-3 text-xs font-bold  tracking-widest text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors border-t border-[var(--kyro-border)] pt-6">
-              View Audit Logs
+              {t("dashboard.viewAuditLogs", { defaultValue: "View Audit Logs" })}
             </button>
           </section>
 
           <section className="surface-tile p-8">
             <h2 className="text-xl font-bold mb-6 tracking-tight flex items-center gap-2">
               <Activity className="w-5 h-5 opacity-40" />
-              System Status
+              {t("dashboard.systemStatus", { defaultValue: "System Status" })}
             </h2>
             <div className="space-y-4">
               {[
                 {
-                  label: "Cloud API",
-                  status: "Optimal",
+                  label: t("dashboard.cloudApi", { defaultValue: "Cloud API" }),
+                  status: t("dashboard.statusOptimal", { defaultValue: "Optimal" }),
                   pulse: "bg-green-500",
                 },
                 {
-                  label: "Database Node",
-                  status: "Healthy",
+                  label: t("dashboard.dbNode", { defaultValue: "Database Node" }),
+                  status: t("dashboard.statusHealthy", { defaultValue: "Healthy" }),
                   pulse: "bg-green-500",
                 },
-                { label: "Media CDN", status: "Active", pulse: "bg-blue-500" },
+                { label: t("dashboard.mediaCdn", { defaultValue: "Media CDN" }), status: t("dashboard.statusActive", { defaultValue: "Active" }), pulse: "bg-blue-500" },
                 {
-                  label: "Auth Service",
-                  status: "Secure",
+                  label: t("dashboard.authService", { defaultValue: "Auth Service" }),
+                  status: t("dashboard.statusSecure", { defaultValue: "Secure" }),
                   pulse: "bg-green-500",
                 },
               ].map((sys, index) => (