@kyro-cms/admin 0.12.4 → 0.12.5

package/src/components/DashboardMetrics.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { apiGet } from "../lib/api";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
 
 interface MetricsData {
   totalDocuments: number;
@@ -70,15 +71,24 @@ function MetricCard({
 
 
 
-export function DashboardMetrics() {
+export interface DashboardMetricsProps {
+  isEcommerce?: boolean;
+}
+
+export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce }) => {
   const [data, setData] = useState<MetricsData | null>(null);
+  const [analyticsData, setAnalyticsData] = useState<any>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    apiGet<MetricsData>("/api/metrics", { autoToast: false })
-      .then((res) => {
-        setData(res);
+    Promise.all([
+      apiGet<MetricsData>("/api/metrics", { autoToast: false }),
+      isEcommerce ? apiGet<any>("/api/analytics", { autoToast: false }).catch(() => null) : Promise.resolve(null)
+    ])
+      .then(([metricsRes, analyticsRes]) => {
+        setData(metricsRes);
+        if (analyticsRes) setAnalyticsData(analyticsRes);
         setError(null);
       })
       .catch((err) => {
@@ -86,14 +96,14 @@ export function DashboardMetrics() {
         setError("Unable to load metrics");
       })
       .finally(() => setLoading(false));
-  }, []);
+  }, [isEcommerce]);
 
   if (error) {
     return (
-      <div className="surface-tile overflow-hidden">
+      <div className="surface-tile overflow-hidden mb-6">
         <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
+            Metrics
           </h2>
         </div>
         <div className="p-6">
@@ -108,21 +118,8 @@ export function DashboardMetrics() {
       <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 className="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]">
+              Metrics
             </h2>
             <p className="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">
               Real-time content, performance, and system health overview
@@ -147,31 +144,86 @@ export function DashboardMetrics() {
             <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" : ""}`}
-            />
+          isEcommerce ? (
+            <>
+              <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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                }
+                iconBg="rgba(34, 197, 94, 0.1)"
+                iconColor="#22c55e"
+                value={analyticsData?.totalRevenue 
+                  ? new Intl.NumberFormat('en-US', { style: 'currency', currency: analyticsData.currencyCode || 'USD' }).format(analyticsData.totalRevenue) 
+                  : "$0.00"}
+                label="Sales"
+                subtext="Total revenue generated"
+              />
+              <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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
+                }
+                iconBg="rgba(236, 72, 153, 0.1)"
+                iconColor="#ec4899"
+                value={data.collectionCounts?.['products'] || 0}
+                label="Products"
+                subtext="Active inventory items"
+              />
+              <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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>
+                }
+                iconBg="rgba(16, 185, 129, 0.1)"
+                iconColor="#10b981"
+                value={data.collectionCounts?.['orders'] || 0}
+                label="Orders"
+                subtext="Total orders placed"
+              />
+              <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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
+                }
+                iconBg="rgba(59, 130, 246, 0.1)"
+                iconColor="#3b82f6"
+                value={data.collectionCounts?.['customers'] || 0}
+                label="Customers"
+                subtext="Registered shoppers"
+              />
+              <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="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" /></svg>
+                }
+                iconBg="rgba(245, 158, 11, 0.1)"
+                iconColor="#f59e0b"
+                value={data.collectionCounts?.['reviews'] || 0}
+                label="Reviews"
+                subtext="Customer feedback"
+              />
+            </>
+          ) : (
+            <>
+              <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 || 0}
+                label="Documents"
+                subtext={`Across ${data.collections || 0} collection${data.collections !== 1 ? "s" : ""}`}
+              />
 
-            {data.totalMedia !== undefined && (
               <MetricCard
                 icon={
                   <svg
@@ -190,13 +242,11 @@ export function DashboardMetrics() {
                 }
                 iconBg="rgba(168, 85, 247, 0.1)"
                 iconColor="#a855f7"
-                value={data.totalMedia}
+                value={data.totalMedia || 0}
                 label="Media Files"
                 subtext="Images, videos & docs"
               />
-            )}
 
-            {data.totalUsers !== undefined && (
               <MetricCard
                 icon={
                   <svg
@@ -215,13 +265,11 @@ export function DashboardMetrics() {
                 }
                 iconBg="rgba(14, 165, 233, 0.1)"
                 iconColor="#0ea5e9"
-                value={data.totalUsers}
+                value={data.totalUsers || 0}
                 label="Team Members"
                 subtext="Active user accounts"
               />
-            )}
 
-            {data.totalWebhooks !== undefined && (
               <MetricCard
                 icon={
                   <svg
@@ -240,13 +288,11 @@ export function DashboardMetrics() {
                 }
                 iconBg="rgba(34, 197, 94, 0.1)"
                 iconColor="#22c55e"
-                value={data.totalWebhooks}
+                value={data.totalWebhooks || 0}
                 label="Webhooks"
                 subtext="Active integrations"
               />
-            )}
 
-            {data.totalApiKeys !== undefined && (
               <MetricCard
                 icon={
                   <svg
@@ -265,12 +311,12 @@ export function DashboardMetrics() {
                 }
                 iconBg="rgba(245, 158, 11, 0.1)"
                 iconColor="#f59e0b"
-                value={data.totalApiKeys}
+                value={data.totalApiKeys || 0}
                 label="API Keys"
                 subtext="Developer access tokens"
               />
-            )}
-          </>
+            </>
+          )
         ) : null}
       </div>
 
@@ -278,3 +324,67 @@ export function DashboardMetrics() {
     </div>
   );
 }
+
+export const RevenueChart: React.FC = () => {
+  const [data, setData] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    apiGet<any>("/api/analytics", { autoToast: false })
+      .then(setData)
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) return (
+    <div className="surface-tile mt-6 p-6 overflow-hidden">
+       <div className="h-64 animate-pulse bg-[var(--kyro-bg-secondary)] rounded-lg"></div>
+    </div>
+  );
+  const hasChartData = data && data.chartData && data.chartData.length > 0;
+
+  return (
+    <div className="surface-tile mt-6 p-6 overflow-hidden">
+        <div className="mb-6 flex justify-between items-end">
+          <div>
+            <h2 className="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]">Revenue Overview</h2>
+            <p className="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">Daily revenue and order volume</p>
+          </div>
+          <div className="text-right">
+            <h3 className="text-2xl font-bold text-[var(--kyro-primary)]">
+              {new Intl.NumberFormat('en-US', { style: 'currency', currency: data?.currencyCode || 'USD' }).format(data?.totalRevenue || 0)}
+            </h3>
+            <p className="text-xs text-[var(--kyro-text-muted)]">{data?.totalOrders || 0} total orders</p>
+          </div>
+        </div>
+       <div className="h-72 w-full">
+         {!hasChartData ? (
+           <div className="flex flex-col items-center justify-center w-full h-full text-[var(--kyro-text-secondary)] bg-[var(--kyro-bg-secondary)] rounded-xl border border-dashed border-[var(--kyro-border)]">
+             <svg className="w-10 h-10 mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" 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>
+             <p className="text-sm font-medium">No chart data to display</p>
+           </div>
+         ) : (
+           <ResponsiveContainer width="100%" height="100%">
+              <AreaChart data={data.chartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
+                <defs>
+                  <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="var(--kyro-primary)" stopOpacity={0.3}/>
+                    <stop offset="95%" stopColor="var(--kyro-primary)" stopOpacity={0}/>
+                  </linearGradient>
+                </defs>
+                <XAxis dataKey="date" stroke="var(--kyro-text-muted)" fontSize={12} tickLine={false} axisLine={false} />
+                <YAxis stroke="var(--kyro-text-muted)" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => new Intl.NumberFormat('en-US', { style: 'currency', currency: data?.currencyCode || 'USD', maximumFractionDigits: 0 }).format(value)} />
+                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--kyro-border)" />
+                <Tooltip 
+                   contentStyle={{ backgroundColor: 'var(--kyro-bg-primary)', border: '1px solid var(--kyro-border)', borderRadius: '8px', color: 'var(--kyro-text-primary)' }}
+                   itemStyle={{ color: 'var(--kyro-text-primary)' }}
+                   formatter={(value: any) => [new Intl.NumberFormat('en-US', { style: 'currency', currency: data?.currencyCode || 'USD' }).format(value), 'Revenue']}
+                />
+                <Area type="monotone" dataKey="revenue" stroke="var(--kyro-primary)" fillOpacity={1} fill="url(#colorRevenue)" strokeWidth={2} />
+              </AreaChart>
+           </ResponsiveContainer>
+         )}
+       </div>
+    </div>
+  );
+}

package/src/components/DetailView.tsx

@@ -14,6 +14,8 @@ import { useAutoFormStore } from "../lib/autoform-store";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
 import { SplitButton } from "./ui/SplitButton";
+import { useTranslation } from "react-i18next";
+import "../lib/i18n";
 import { adminPath } from "../lib/paths";
 import { resolveFieldValue } from "../lib/resolve-field-value";
 
@@ -41,6 +43,7 @@ export function DetailView({
   onError,
   mode = "collection",
 }: DetailViewProps) {
+  const { t } = useTranslation();
   const { confirm, alert } = useUIStore();
   const [data, setData] = useState<Record<string, unknown>>({});
   const [originalData, setOriginalData] = useState<Record<string, unknown>>({});
@@ -160,8 +163,8 @@ export function DetailView({
 
         if (!isAutosave) {
           const isDraft = status === "draft" || (savedData as any)?.status === "draft";
-          if (isDraft) toast.warning("Draft saved");
-          else toast.success("Updated");
+          if (isDraft) toast.warning(t("toast.draftSaved", { defaultValue: "Draft saved" }));
+          else toast.success(t("toast.updated", { defaultValue: "Updated" }));
         }
 
         setTimeout(() => {
@@ -175,8 +178,8 @@ export function DetailView({
       } catch (e: any) {
         setSaveStatus("error");
         if (!isAutosave) {
-          onError("Failed to save changes");
-          toast.error("Failed to save changes");
+          onError(t("toast.saveError", { defaultValue: "Failed to save changes" }));
+          toast.error(t("toast.saveError", { defaultValue: "Failed to save changes" }));
         }
       } finally {
         setSaving(false);
@@ -194,11 +197,11 @@ export function DetailView({
       } as any);
       setStatus("published");
       setPublishedAt(new Date().toISOString());
-      toast.success("Published successfully");
+      toast.success(t("toast.published", { defaultValue: "Published successfully" }));
       onSave();
     } catch {
-      onError("Failed to publish");
-      toast.error("Failed to publish");
+      onError(t("toast.publishError", { defaultValue: "Failed to publish" }));
+      toast.error(t("toast.publishError", { defaultValue: "Failed to publish" }));
     } finally {
       setSaving(false);
     }
@@ -212,11 +215,11 @@ export function DetailView({
         headers: { "X-Draft": "false" },
       } as any);
       setStatus("draft");
-      toast.warning("Document unpublished");
+      toast.warning(t("toast.unpublished", { defaultValue: "Document unpublished" }));
       onSave();
     } catch {
-      onError("Failed to unpublish");
-      toast.error("Failed to unpublish");
+      onError(t("toast.unpublishError", { defaultValue: "Failed to unpublish" }));
+      toast.error(t("toast.unpublishError", { defaultValue: "Failed to unpublish" }));
     } finally {
       setSaving(false);
     }
@@ -226,14 +229,14 @@ export function DetailView({
     try {
       setIsDuplicating(true);
       const response = await apiPost(`/api/${slug}/${documentId}/duplicate`, undefined, { autoToast: false }) as { data?: { id?: string } };
-      toast.success("Document duplicated");
+      toast.success(t("toast.duplicated", { defaultValue: "Document duplicated" }));
       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");
+      toast.error((e as Error).message || t("toast.duplicateError", { defaultValue: "Failed to duplicate document" }));
     } finally {
       setIsDuplicating(false);
     }
@@ -249,9 +252,9 @@ export function DetailView({
       delete (copyPayload as any).status;
       
       await navigator.clipboard.writeText(JSON.stringify(copyPayload));
-      toast.success("Document data copied to clipboard");
+      toast.success(t("toast.dataCopied", { defaultValue: "Document data copied to clipboard" }));
     } catch (e) {
-      toast.error("Failed to copy document data");
+      toast.error(t("toast.copyError", { defaultValue: "Failed to copy document data" }));
     }
   };
 
@@ -272,16 +275,16 @@ export function DetailView({
         updatedAt: prev.updatedAt,
         status: prev.status,
       }));
-      toast.success("Document data pasted");
+      toast.success(t("toast.dataPasted", { defaultValue: "Document data pasted" }));
     } catch (e) {
-      toast.error("Clipboard does not contain valid document JSON");
+      toast.error(t("toast.pasteError", { defaultValue: "Clipboard does not contain valid document JSON" }));
     }
   };
 
   const handleDeleteTrigger = () => {
     confirm({
-      title: `Delete ${label}?`,
-      message: "This action cannot be undone.",
+      title: t("detailView.deleteTitle", { defaultValue: "Delete {{label}}?", label }),
+      message: t("detailView.deleteMessage", { defaultValue: "This action cannot be undone." }),
       variant: "danger",
       onConfirm: async () => {
         try {
@@ -349,15 +352,15 @@ export function DetailView({
       <PageHeader
         back={{ onClick: onBack }}
         breadcrumbs={[
-          { label: mode === "global" ? "Globals" : "Collections" },
+          { label: mode === "global" ? t("detailView.globals", { defaultValue: "Globals" }) : t("detailView.collections", { defaultValue: "Collections" }) },
           {
             label: label,
             href: mode === "collection" ? `${adminPath}/${slug}` : undefined
           },
-          { label: mode === "global" ? "Edit" : documentId ? "Edit" : "New" }
+          { label: mode === "global" ? t("actions.edit", { defaultValue: "Edit" }) : documentId ? t("actions.edit", { defaultValue: "Edit" }) : t("actions.new", { defaultValue: "New" }) }
         ]}
         title={
-          (mode === "global" ? label : ((resolveFieldValue(collection?.fields as any, data, collection?.admin?.useAsTitle || "title") as string) || data.name as string || documentId || `New ${collection?.singularLabel || label}`))
+          (mode === "global" ? label : ((resolveFieldValue(collection?.fields as any, data, collection?.admin?.useAsTitle || "title") as string) || data.name as string || documentId || t("detailView.newDocument", { defaultValue: "New {{label}}", label: collection?.singularLabel || label })))
         }
         metadata={[
           <Badge
@@ -366,7 +369,7 @@ export function DetailView({
             dot
             className="text-[10px] font-bold "
           >
-            {status}
+            {t(`status.${status}`, { defaultValue: status })}
           </Badge>
         ]}
       />
@@ -384,7 +387,7 @@ export function DetailView({
         onViewHistory={() => {
           window.dispatchEvent(new CustomEvent('kyro:show-version-history'));
         }}
-        onPreview={togglePreview}
+        onPreview={((collection as any)?.admin?.disablePreview || (global as any)?.admin?.disablePreview) ? undefined : togglePreview}
         onDelete={handleDeleteTrigger}
         onBack={onBack}
         onToggleSidebar={() => window.dispatchEvent(new CustomEvent("toggle-sidebar"))}
@@ -405,7 +408,7 @@ export function DetailView({
           <div className="surface-tile p-4 md:p-8">
             <div className="flex items-center justify-between mb-8 px-1">
               <h2 className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
-                Core Configuration
+                {t("detailView.coreConfiguration", { defaultValue: "Core Configuration" })}
               </h2>
               <div className="h-px flex-1 bg-[var(--kyro-border)] ml-6 opacity-30" />
             </div>
@@ -434,7 +437,7 @@ export function DetailView({
                     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"
                   >
-                    {isDeleting ? "Deleting..." : "Delete Document"}
+                    {isDeleting ? t("actions.deleting", { defaultValue: "Deleting..." }) : t("actions.deleteDocument", { defaultValue: "Delete Document" })}
                   </button>
                 )}
                 <SplitButton
@@ -458,7 +461,7 @@ export function DetailView({
                 <div className="w-3 h-3 rounded-full bg-green-400/80"></div>
               </div>
               <div className="text-[10px] font-mono opacity-50 truncate max-w-[60%] bg-[var(--kyro-bg)] px-3 py-1 rounded">
-                {previewUrl || "Generating preview URL..."}
+                {previewUrl || t("detailView.generatingPreview", { defaultValue: "Generating preview URL..." })}
               </div>
               <div className="w-16"></div>
             </div>
@@ -471,7 +474,7 @@ export function DetailView({
                 <iframe
                   src={previewUrl}
                   className="w-full h-full border-0 bg-white"
-                  title="Preview"
+                  title={t("tooltips.preview", { defaultValue: "Preview" })}
                   sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
                 />
               )}
@@ -483,12 +486,12 @@ export function DetailView({
           <div className="space-y-4 md:space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
             <div className="surface-tile p-4 md:p-8">
               <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-4 md:mb-6">
-                Metadata
+                {t("detailView.metadata", { defaultValue: "Metadata" })}
               </h3>
               <div className="space-y-4 md:space-y-6">
                 <div className="flex flex-col gap-2">
                   <span className="text-[10px] font-bold  tracking-widest opacity-40">
-                    Dynamic Status
+                    {t("detailView.dynamicStatus", { defaultValue: "Dynamic Status" })}
                   </span>
                   <div>
                     <span
@@ -500,7 +503,7 @@ export function DetailView({
                 </div>
                 <div className="flex flex-col gap-2">
                   <span className="text-[10px] font-bold  tracking-widest opacity-40">
-                    Date Created
+                    {t("detailView.dateCreated", { defaultValue: "Date Created" })}
                   </span>
                   <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
                     {createdAt
@@ -508,12 +511,12 @@ export function DetailView({
                         dateStyle: "medium",
                         timeStyle: "short",
                       })
-                      : "N/A"}
+                      : t("common.na", { defaultValue: "N/A" })}
                   </span>
                 </div>
                 <div className="flex flex-col gap-2">
                   <span className="text-[10px] font-bold  tracking-widest opacity-40">
-                    Last Modified
+                    {t("detailView.lastModified", { defaultValue: "Last Modified" })}
                   </span>
                   <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
                     {updatedAt
@@ -521,13 +524,13 @@ export function DetailView({
                         dateStyle: "medium",
                         timeStyle: "short",
                       })
-                      : "Just now"}
+                      : t("detailView.justNow", { defaultValue: "Just now" })}
                   </span>
                 </div>
                 {publishedAt && (
                   <div className="flex flex-col gap-2">
                     <span className="text-[10px] font-bold  tracking-widest opacity-40">
-                      Public At
+                      {t("detailView.publicAt", { defaultValue: "Public At" })}
                     </span>
                     <span className="text-sm font-bold text-[var(--kyro-text-secondary)]">
                       {new Date(publishedAt).toLocaleString("en-US", {
@@ -542,7 +545,7 @@ export function DetailView({
 
             <div className="surface-tile p-4 md:p-8 bg-[var(--kyro-bg-secondary)]">
               <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-3 md:mb-4">
-                Quick Links
+                {t("detailView.quickLinks", { defaultValue: "Quick Links" })}
               </h3>
               <div className="space-y-2 md:space-y-3">
                 <button
@@ -551,7 +554,7 @@ export function DetailView({
                   disabled={isDuplicating || saving}
                   className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start"
                 >
-                  {isDuplicating ? "Duplicating..." : "Duplicate Document"}
+                  {isDuplicating ? t("actions.duplicating", { defaultValue: "Duplicating..." }) : t("actions.duplicateDocument", { defaultValue: "Duplicate Document" })}
                 </button>
                 {previewUrl && (
                   <button
@@ -559,7 +562,7 @@ export function DetailView({
                     onClick={() => window.open(previewUrl, "_blank")}
                     className="kyro-btn kyro-btn-sm kyro-btn-ghost w-full justify-start"
                   >
-                    Open Preview in New Tab
+                    {t("detailView.openPreview", { defaultValue: "Open Preview in New Tab" })}
                   </button>
                 )}
                 <button
@@ -567,7 +570,7 @@ export function DetailView({
                   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
+                  {t("actions.deleteEntry", { defaultValue: "Delete Entry" })}
                 </button>
               </div>
             </div>

package/src/components/DeveloperCenter.tsx

@@ -21,6 +21,7 @@ import { useUIStore, toast } from "../lib/stores";
 import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
+import { useTranslation } from "react-i18next";
 
 // @ts-ignore
 const API_BASE = typeof __KYRO_API_PATH__ !== 'undefined' ? __KYRO_API_PATH__ : '/api';
@@ -34,6 +35,7 @@ interface ApiKey {
 }
 
 export function DeveloperCenter({ collections }: { collections: Record<string, unknown> }) {
+    const { t } = useTranslation();
   const [keys, setKeys] = useState<ApiKey[]>([]);
   const [loading, setLoading] = useState(false);
   const [showKey, setShowKey] = useState<string | null>(null);
@@ -114,7 +116,7 @@ export function DeveloperCenter({ collections }: { collections: Record<string, u
   return (
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
       <PageHeader
-        title="Developer Center"
+        title={t("tooltips.developerCenter", { defaultValue: "Developer Center" })}
         description="Provision access keys and explore the headless API ecosystem."
         icon={Code2}
         actions={[
@@ -206,7 +208,7 @@ export function DeveloperCenter({ collections }: { collections: Record<string, u
                       type="button"
                       onClick={() => handleRevokeKey(key.id)}
                       className="p-3.5 bg-red-500/5 text-red-500 rounded-2xl hover:bg-red-500/10 transition-all border border-transparent hover:border-red-500/30 self-start md:self-center"
-                      title="Revoke Key"
+                      title={t("tooltips.revokeKey", { defaultValue: "Revoke Key" })}
                     >
                       <Trash2 className="w-5 h-5" />
                     </button>
@@ -367,7 +369,7 @@ export function DeveloperCenter({ collections }: { collections: Record<string, u
       <Modal
         open={showCreateModal}
         onClose={() => setShowCreateModal(false)}
-        title="Generate Access Token"
+        title={t("tooltips.generateAccessToken", { defaultValue: "Generate Access Token" })}
         size="lg"
       >
         <ModalContent>