@kyro-cms/admin 0.12.20 → 0.12.22

package/src/components/AuditLogsPage.tsx

@@ -157,7 +157,7 @@ function MetadataRow({ label, value }: { label: string; value: unknown }) {
 }
 
 export function AuditLogsPage() {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
   const [logs, setLogs] = useState<AuditLog[]>([]);
   const [total, setTotal] = useState(0);
   const [page, setPage] = useState(1);
@@ -212,7 +212,7 @@ export function AuditLogsPage() {
   return (
     <div className="flex-1 overflow-y-auto  space-y-6">
       {/* Header */}
-      <div className="surface-tile p-6 flex items-center justify-between gap-8">
+      <div className="surface-tile p-6 flex items-center justify-between rounded-lg gap-8 rounded-lg">
         <div>
           <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
             Audit Logs
@@ -231,7 +231,7 @@ export function AuditLogsPage() {
       </div>
 
       {/* Filters */}
-      <div className="surface-tile p-4 flex flex-col md:flex-row flex-wrap items-stretch md:items-center gap-3">
+      <div className="surface-tile p-4 rounded-lg flex flex-col md:flex-row flex-wrap items-stretch md:items-center gap-3 rounded-lg">
         <div className="relative flex-1 min-w-48">
           <Search className="w-4 h-4" />
           <input
@@ -311,9 +311,9 @@ export function AuditLogsPage() {
               color: "text-[var(--kyro-text-primary)]",
             },
           ].map(({ label, value, color }) => (
-            <div key={label} className="surface-tile p-4">
+            <div key={label} className="surface-tile p-4 rounded-lg">
               <div className={`text-2xl font-bold ${color}`}>{value}</div>
-              <div className="text-[10px] font-bold text-[var(--kyro-text-secondary)]  tracking-wider mt-1">
+              <div className="text-[10px] font-bold text-[var(--kyro-text-secondary)] tracking-wider mt-1">
                 {label}
               </div>
             </div>
@@ -322,7 +322,7 @@ export function AuditLogsPage() {
       )}
 
       {/* Table */}
-      <div className="surface-tile overflow-x-auto">
+      <div className="surface-tile overflow-x-auto rounded-lg">
         {loading ? (
           <div className="space-y-2 p-4">
             <Shimmer variant="table-row" count={5} />
@@ -471,7 +471,7 @@ export function AuditLogsPage() {
 
       {/* Pagination */}
       {totalPages > 1 && (
-        <div className="flex items-center justify-between">
+        <div className="surface-tile rounded-lg p-5 flex items-center justify-between">
           <p className="text-sm text-[var(--kyro-text-secondary)] font-medium">
             Page {page} of {totalPages}
             <span className="ml-2 text-[var(--kyro-text-muted)]">

package/src/components/AuthorDashboard.tsx

@@ -0,0 +1,235 @@
+import React, { useEffect, useState } from "react";
+import { apiGet } from "../lib/api";
+import { adminPath, apiPath } from "../lib/paths";
+import { DashboardQuickSections } from "./DashboardQuickSections";
+
+interface ContentDoc {
+  id: string;
+  title?: string;
+  name?: string;
+  status?: string;
+  _status?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  [key: string]: unknown;
+}
+
+interface AuthorDashboardProps {
+  collections: Record<string, any>;
+  userName?: string;
+  userAvatar?: string;
+  userId?: string;
+}
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 1) return "Just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(dateStr).toLocaleDateString();
+}
+
+function SkeletonCard() {
+  return (
+    <div className="surface-tile rounded-lg border border-[var(--kyro-border)] overflow-hidden animate-pulse">
+      <div className="h-3 w-20 rounded bg-[var(--kyro-bg-secondary)] mb-3" />
+      <div className="h-6 w-16 rounded bg-[var(--kyro-bg-secondary)] mb-1" />
+    </div>
+  );
+}
+
+function SkeletonRow() {
+  return (
+    <div className="flex items-center gap-4 px-6 py-4 animate-pulse">
+      <div className="w-8 h-8 rounded-lg bg-[var(--kyro-bg-secondary)]" />
+      <div className="flex-1 space-y-2">
+        <div className="h-3 w-40 rounded bg-[var(--kyro-bg-secondary)]" />
+        <div className="h-2 w-24 rounded bg-[var(--kyro-bg-secondary)]" />
+      </div>
+      <div className="h-5 w-16 rounded bg-[var(--kyro-bg-secondary)]" />
+    </div>
+  );
+}
+
+export function AuthorDashboard({ collections, userName, userAvatar }: AuthorDashboardProps) {
+  const [recentDocs, setRecentDocs] = useState<(ContentDoc & { _collection: string })[]>([]);
+  const [docCounts, setDocCounts] = useState<{ total: number; drafts: number; published: number }>({
+    total: 0,
+    drafts: 0,
+    published: 0,
+  });
+  const [mediaCount, setMediaCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+
+  const displayName = userName || "Author";
+  const firstName = displayName.split(" ")[0];
+
+  const contentCollections = Object.entries(collections).filter(
+    ([slug]) => !["users", "audit_logs", "media", "orders", "customers"].includes(slug)
+  );
+
+  const creatableCollections = contentCollections.slice(0, 4);
+
+  useEffect(() => {
+    const fetches: Promise<any>[] = [];
+    const allDocs: (ContentDoc & { _collection: string })[] = [];
+
+    for (const [slug] of contentCollections.slice(0, 6)) {
+      fetches.push(
+        apiGet<any>(`${apiPath}/${slug}?limit=3&sort=-updatedAt`, { autoToast: false })
+          .then((res) => {
+            const docs = (res.docs || []).map((d: ContentDoc) => ({ ...d, _collection: slug }));
+            allDocs.push(...docs);
+          })
+          .catch(() => { })
+      );
+    }
+
+    fetches.push(
+      apiGet<any>(`${apiPath}/media?limit=0`, { autoToast: false })
+        .then((res) => setMediaCount(res.totalDocs || 0))
+        .catch(() => { })
+    );
+
+    Promise.all(fetches)
+      .then(() => {
+        allDocs.sort((a, b) => {
+          const aTime = new Date(a.updatedAt || a.createdAt || 0).getTime();
+          const bTime = new Date(b.updatedAt || b.createdAt || 0).getTime();
+          return bTime - aTime;
+        });
+        setRecentDocs(allDocs.slice(0, 8));
+        setDocCounts({
+          total: allDocs.length,
+          drafts: allDocs.filter((d) => (d._status || d.status || "").toLowerCase() === "draft").length,
+          published: allDocs.filter((d) => (d._status || d.status || "").toLowerCase() === "published").length,
+        });
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="surface-tile p-6 rounded-xl border border-[var(--kyro-border)] flex items-center justify-between gap-4">
+        <div className="flex items-center gap-4">
+          <div className="w-12 h-12 rounded-xl bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] flex items-center justify-center overflow-hidden flex-shrink-0">
+            {userAvatar ? (
+              <img src={userAvatar} alt={displayName} className="w-full h-full object-cover" />
+            ) : (
+              <svg className="w-6 h-6 text-[var(--kyro-text-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
+              </svg>
+            )}
+          </div>
+          <div>
+            <h1 className="text-lg font-semibold text-[var(--kyro-text-primary)]">Welcome back, {firstName}</h1>
+            <p className="text-xs text-[var(--kyro-text-secondary)] mt-0.5">Author workspace and recent drafts</p>
+          </div>
+        </div>
+        {creatableCollections.length > 0 && (
+          <a
+            href={`${adminPath}/${creatableCollections[0][0]}/new`}
+            className="hidden sm:inline-flex items-center gap-2 px-3.5 py-1.5 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-sidebar-active)] text-xs font-semibold text-[var(--kyro-sidebar-text-active)] hover:opacity-90 transition-opacity"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 5v14M5 12h14" />
+            </svg>
+            New Document
+          </a>
+        )}
+      </div>
+
+      {/* Metrics Row */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+        {loading ? (
+          <>
+            <SkeletonCard />
+            <SkeletonCard />
+            <SkeletonCard />
+            <SkeletonCard />
+          </>
+        ) : (
+          <>
+            <div className="surface-tile rounded-lg border border-[var(--kyro-border)] overflow-hidden">
+              <p className="text-xs font-medium text-[var(--kyro-text-secondary)] mb-1">Total Items</p>
+              <p className="text-2xl font-bold tracking-tight text-[var(--kyro-text-primary)]">{docCounts.total}</p>
+            </div>
+
+            <div className="surface-tile rounded-lg border border-[var(--kyro-border)] overflow-hidden">
+              <p className="text-xs font-medium text-[var(--kyro-text-secondary)] mb-1">Published</p>
+              <p className="text-2xl font-bold tracking-tight text-[var(--kyro-text-primary)]">{docCounts.published}</p>
+            </div>
+
+            <div className="surface-tile rounded-lg border border-[var(--kyro-border)] overflow-hidden">
+              <p className="text-xs font-medium text-[var(--kyro-text-secondary)] mb-1">Drafts</p>
+              <p className="text-2xl font-bold tracking-tight text-[var(--kyro-text-primary)]">{docCounts.drafts}</p>
+            </div>
+
+            <div className="surface-tile rounded-lg border border-[var(--kyro-border)] overflow-hidden">
+              <p className="text-xs font-medium text-[var(--kyro-text-secondary)] mb-1">Media Assets</p>
+              <p className="text-2xl font-bold tracking-tight text-[var(--kyro-text-primary)]">{mediaCount}</p>
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Recent Content */}
+      <div className="surface-tile rounded-lg border border-[var(--kyro-border)] overflow-hidden">
+        <div className="px-6 py-4 border-b border-[var(--kyro-border)]">
+          <h2 className="text-sm font-semibold text-[var(--kyro-text-primary)]">Recent Documents</h2>
+          <p className="text-xs text-[var(--kyro-text-secondary)] mt-0.5">Your recently edited content</p>
+        </div>
+
+        {loading ? (
+          <div className="divide-y divide-[var(--kyro-border)]">
+            <SkeletonRow />
+            <SkeletonRow />
+            <SkeletonRow />
+          </div>
+        ) : recentDocs.length === 0 ? (
+          <div className="py-10 text-center text-xs text-[var(--kyro-text-muted)]">No content created yet</div>
+        ) : (
+          <div className="divide-y divide-[var(--kyro-border)]">
+            {recentDocs.map((doc) => {
+              const docStatus = (doc._status || doc.status || "draft").toLowerCase();
+              const title = doc.title || doc.name || "Untitled";
+
+              return (
+                <a
+                  key={`${doc._collection}-${doc.id}`}
+                  href={`${adminPath}/${doc._collection}/${doc.id}`}
+                  className="flex items-center justify-between px-6 py-3.5 hover:bg-[var(--kyro-surface-accent)] transition-colors"
+                >
+                  <div className="flex items-center gap-3 min-w-0">
+                    <div className="w-8 h-8 rounded-lg bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] flex items-center justify-center text-[var(--kyro-text-secondary)] flex-shrink-0">
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" 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>
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-xs font-medium text-[var(--kyro-text-primary)] truncate">{title}</p>
+                      <p className="text-[10px] text-[var(--kyro-text-muted)] capitalize">
+                        {doc._collection} • {doc.updatedAt ? timeAgo(doc.updatedAt) : "—"}
+                      </p>
+                    </div>
+                  </div>
+                  <span className="px-2 py-0.5 text-[10px] font-medium rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] capitalize">
+                    {docStatus}
+                  </span>
+                </a>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* RBAC Quick Actions & Explore Content */}
+      <DashboardQuickSections collections={collections} serverUserRole="author" />
+    </div>
+  );
+}

package/src/components/AutoForm.tsx

@@ -571,6 +571,7 @@ export function AutoForm({
         onActionSuccess?.(
           isPost ? "Document created successfully" : "Changes saved",
         );
+        toast.success(isPost ? "Document created successfully" : "Changes saved successfully");
         if (globalSlug) {
           window.dispatchEvent(new Event("kyro:soft-reload"));
         }
@@ -638,6 +639,7 @@ export function AutoForm({
         useAutoFormStore.getState().loadDocument(savedData, savedData);
         setLocalSaveStatus("saved");
         onActionSuccess?.("Published successfully");
+        toast.success("Published changes successfully");
 
         setTimeout(() => {
           setLocalSaveStatus("idle");
@@ -795,7 +797,10 @@ export function AutoForm({
                       if (!emailValue && rowName && typeof rowName === "string" && emailFieldName) {
                         emailValue = (formData[rowName] as Record<string, unknown>)?.[emailFieldName] as string | undefined;
                       }
-                      if (!emailValue) return;
+                      if (!emailValue) {
+                        toast.error("Please enter a test recipient email address.");
+                        return;
+                      }
 
                       setLoadingFields((prev) => ({
                         ...prev,
@@ -805,7 +810,12 @@ export function AutoForm({
                         const response = await fetchWithAuth(resolveUrl(actionUrl), {
                           method: (fAdmin.method as string) || "POST",
                           headers: { "Content-Type": "application/json" },
-                          body: JSON.stringify({ email: emailValue }),
+                          body: JSON.stringify({
+                            ...formData,
+                            email: emailValue,
+                            testEmail: emailValue,
+                            testEmailSection: { testEmail: emailValue },
+                          }),
                         });
                         let result: { success?: boolean; message?: string; error?: string } = {};
                         try {
@@ -813,9 +823,9 @@ export function AutoForm({
                         } catch {
                           result = {};
                         }
-                        if (response.ok && result.success) {
+                        if (response.ok && (result.success || result.message)) {
                           onActionSuccess?.(
-                            result.message || "Action completed successfully",
+                            result.message || "Test email sent successfully!",
                           );
                         } else {
                           const errorMsg =

package/src/components/CustomerDashboard.tsx

@@ -0,0 +1,213 @@
+import React, { useEffect, useState } from "react";
+import { apiGet } from "../lib/api";
+import { adminPath, apiPath } from "../lib/paths";
+import { DashboardQuickSections } from "./DashboardQuickSections";
+
+interface OrderDoc {
+  id: string;
+  status?: string;
+  total?: number;
+  createdAt?: string;
+  updatedAt?: string;
+  [key: string]: unknown;
+}
+
+interface CustomerDashboardProps {
+  collections: Record<string, any>;
+  userName?: string;
+  userAvatar?: string;
+  userId?: string;
+}
+
+function formatCurrency(n: number, currency = "USD") {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    maximumFractionDigits: 2,
+  }).format(n);
+}
+
+function timeAgo(dateStr: string): string {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60_000);
+  if (mins < 1) return "Just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  if (days < 30) return `${days}d ago`;
+  return new Date(dateStr).toLocaleDateString();
+}
+
+function SkeletonCard() {
+  return (
+    <div className="surface-tile rounded-lg border border-[var(--kyro-border)] overflow-hidden animate-pulse">
+      <div className="h-3 w-20 rounded bg-[var(--kyro-bg-secondary)] mb-3" />
+      <div className="h-6 w-16 rounded bg-[var(--kyro-bg-secondary)] mb-1" />
+      <div className="h-3 w-24 rounded bg-[var(--kyro-bg-secondary)]" />
+    </div>
+  );
+}
+
+function SkeletonRow() {
+  return (
+    <div className="flex items-center gap-4 px-6 py-4 animate-pulse">
+      <div className="w-8 h-8 rounded-lg bg-[var(--kyro-bg-secondary)]" />
+      <div className="flex-1 space-y-2">
+        <div className="h-3 w-32 rounded bg-[var(--kyro-bg-secondary)]" />
+        <div className="h-2 w-20 rounded bg-[var(--kyro-bg-secondary)]" />
+      </div>
+      <div className="h-5 w-16 rounded bg-[var(--kyro-bg-secondary)]" />
+    </div>
+  );
+}
+
+export function CustomerDashboard({ collections, userName, userAvatar }: CustomerDashboardProps) {
+  const [orders, setOrders] = useState<OrderDoc[]>([]);
+  const [orderCount, setOrderCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+
+  const hasOrders = !!collections["orders"];
+  const displayName = userName || "User";
+  const firstName = displayName.split(" ")[0];
+
+  useEffect(() => {
+    if (hasOrders) {
+      apiGet<any>(`${apiPath}/orders?limit=5&sort=-createdAt`, { autoToast: false })
+        .then((res) => {
+          setOrders(res.docs || []);
+          setOrderCount(res.totalDocs || 0);
+        })
+        .catch(() => {
+          setOrders([]);
+          setOrderCount(0);
+        })
+        .finally(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
+  }, [hasOrders]);
+
+  const totalSpent = orders.reduce((sum, o) => sum + (typeof o.total === "number" ? o.total : 0), 0);
+  const pendingOrders = orders.filter((o) => ["pending", "processing"].includes((o.status || "").toLowerCase())).length;
+
+  return (
+    <div className="space-y-6">
+      {/* Welcome Header */}
+      <div className="surface-tile rounded-xl border border-[var(--kyro-border)] flex items-center justify-between gap-4 p-6">
+        <div className="flex items-center gap-4">
+          <div className="w-12 h-12 rounded-xl bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] flex items-center justify-center overflow-hidden flex-shrink-0">
+            {userAvatar ? (
+              <img src={userAvatar} alt={displayName} className="w-full h-full object-cover" />
+            ) : (
+              <svg className="w-6 h-6 text-[var(--kyro-text-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+              </svg>
+            )}
+          </div>
+          <div>
+            <h1 className="text-lg font-semibold text-[var(--kyro-text-primary)]">Welcome back, {firstName}</h1>
+            <p className="text-xs text-[var(--kyro-text-secondary)] mt-0.5">Account overview and recent activity</p>
+          </div>
+        </div>
+        <a
+          href={`${adminPath}/profile`}
+          className="hidden sm:inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] transition-colors"
+        >
+          My Profile
+        </a>
+      </div>
+
+      {/* Stats Grid */}
+      {hasOrders && (
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          {loading ? (
+            <>
+              <SkeletonCard />
+              <SkeletonCard />
+              <SkeletonCard />
+            </>
+          ) : (
+            <>
+              <div className="surface-tile rounded-lg border border-[var(--kyro-border)] overflow-hidden">
+                <p className="text-xs font-medium text-[var(--kyro-text-secondary)] mb-1">Total Orders</p>
+                <p className="text-2xl font-bold tracking-tight text-[var(--kyro-text-primary)]">{orderCount}</p>
+              </div>
+
+              <div className="surface-tile rounded-lg border border-[var(--kyro-border)] overflow-hidden">
+                <p className="text-xs font-medium text-[var(--kyro-text-secondary)] mb-1">Total Spent</p>
+                <p className="text-2xl font-bold tracking-tight text-[var(--kyro-text-primary)]">{formatCurrency(totalSpent)}</p>
+              </div>
+
+              <div className="surface-tile rounded-lg border border-[var(--kyro-border)] overflow-hidden">
+                <p className="text-xs font-medium text-[var(--kyro-text-secondary)] mb-1">Pending Orders</p>
+                <p className="text-2xl font-bold tracking-tight text-[var(--kyro-text-primary)]">{pendingOrders}</p>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Recent Orders */}
+      {hasOrders && (
+        <div className="surface-tile rounded-lg border border-[var(--kyro-border)] overflow-hidden">
+          <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--kyro-border)]">
+            <div>
+              <h2 className="text-sm font-semibold text-[var(--kyro-text-primary)]">Recent Orders</h2>
+              <p className="text-xs text-[var(--kyro-text-secondary)] mt-0.5">Latest order history</p>
+            </div>
+            <a
+              href={`${adminPath}/orders`}
+              className="text-xs font-medium text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors"
+            >
+              View All →
+            </a>
+          </div>
+
+          {loading ? (
+            <div className="divide-y divide-[var(--kyro-border)]">
+              <SkeletonRow />
+              <SkeletonRow />
+              <SkeletonRow />
+            </div>
+          ) : orders.length === 0 ? (
+            <div className="py-10 text-center text-xs text-[var(--kyro-text-muted)]">No orders found</div>
+          ) : (
+            <div className="divide-y divide-[var(--kyro-border)]">
+              {orders.map((order) => (
+                <a
+                  key={order.id}
+                  href={`${adminPath}/orders/${order.id}`}
+                  className="flex items-center justify-between px-6 py-3.5 hover:bg-[var(--kyro-surface-accent)] transition-colors"
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-lg bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] flex items-center justify-center text-[var(--kyro-text-secondary)]">
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <p className="text-xs font-medium text-[var(--kyro-text-primary)]">Order #{order.id?.slice(-6) || order.id}</p>
+                      <p className="text-[10px] text-[var(--kyro-text-muted)]">{order.createdAt ? timeAgo(order.createdAt) : "—"}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-4">
+                    {typeof order.total === "number" && (
+                      <span className="text-xs font-semibold text-[var(--kyro-text-primary)]">{formatCurrency(order.total)}</span>
+                    )}
+                    <span className="px-2 py-0.5 text-[10px] font-medium rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] capitalize">
+                      {order.status || "pending"}
+                    </span>
+                  </div>
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* RBAC Quick Actions & Explore Content */}
+      <DashboardQuickSections collections={collections} serverUserRole="customer" />
+    </div>
+  );
+}

package/src/components/Dashboard.tsx

@@ -125,7 +125,7 @@ export function Dashboard({ collections, onNavigate, user }: DashboardProps) {
         ].map((stat, i) => (
           <div
             key={i}
-            className="surface-tile p-6 flex items-center justify-between group hover:border-[var(--kyro-primary)] transition-all duration-500 cursor-default"
+            className="surface-tile p-6 flex items-center justify-between rounded-lg group hover:border-[var(--kyro-primary)] transition-all duration-500 cursor-default"
           >
             <div>
               <p className="text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-1">