@kyro-cms/admin 0.12.20 → 0.12.22

package/src/components/DashboardMetrics.tsx

@@ -153,13 +153,39 @@ function CustomTooltip({ active, payload, label, currency }: any) {
 export const RevenueChart: React.FC = () => {
   const [data, setData] = useState<any>(null);
   const [loading, setLoading] = useState(true);
+  const [auth, setAuth] = useState<any>(null);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
+    setMounted(true);
+    if (typeof window !== "undefined") {
+      setAuth((window as any).__kyroAuth || null);
+    }
+    const handleAuth = (e: any) => {
+      if (e?.detail) setAuth(e.detail);
+      else if (typeof window !== "undefined") setAuth((window as any).__kyroAuth || null);
+    };
+    window.addEventListener("kyro:auth-ready", handleAuth);
+    return () => window.removeEventListener("kyro:auth-ready", handleAuth);
+  }, []);
+
+  const userRole = auth?.user?.role || "";
+  const isAdmin = userRole === "admin" || userRole === "super_admin";
+  const canReadOrders = isAdmin || auth?.permissions?.collections?.orders?.read === true;
+
+  useEffect(() => {
+    if (!mounted) return;
+    if (!canReadOrders) {
+      setLoading(false);
+      return;
+    }
     apiGet<any>("/api/analytics", { autoToast: false })
       .then(setData)
       .catch(console.error)
       .finally(() => setLoading(false));
-  }, []);
+  }, [mounted, canReadOrders]);
+
+  if (!mounted || !canReadOrders) return null;
 
   if (loading)
     return (
@@ -396,6 +422,27 @@ export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce
   const [analyticsData, setAnalyticsData] = useState<any>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [auth, setAuth] = useState<any>(null);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    if (typeof window !== "undefined") {
+      setAuth((window as any).__kyroAuth || null);
+    }
+    const handleAuth = (e: any) => {
+      if (e?.detail) setAuth(e.detail);
+      else if (typeof window !== "undefined") setAuth((window as any).__kyroAuth || null);
+    };
+    window.addEventListener("kyro:auth-ready", handleAuth);
+    return () => window.removeEventListener("kyro:auth-ready", handleAuth);
+  }, []);
+
+  const user = auth?.user;
+  const permissions = auth?.permissions;
+  const userRole = user?.role || "";
+  const isSuperAdmin = userRole === "super_admin";
+  const isAdmin = userRole === "admin" || isSuperAdmin;
 
   useEffect(() => {
     Promise.all([
@@ -418,7 +465,7 @@ export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce
 
   if (error) {
     return (
-      <div className="surface-tile overflow-hidden mb-6">
+      <div className="surface-tile overflow-hidden rounded-lg mb-6">
         <div className="p-6 border-b" style={{ borderColor: "var(--kyro-border)" }}>
           <h2 className="text-xl font-bold tracking-tight" style={{ color: "var(--kyro-text-primary)" }}>Metrics</h2>
         </div>
@@ -438,6 +485,7 @@ export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce
 
   const ecommerceCards = [
     {
+      id: "revenue",
       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>,
       gradient: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
       value: analyticsData?.totalRevenue !== undefined
@@ -445,48 +493,59 @@ export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce
         : "$0",
       label: "Total Revenue",
       subtext: "From system orders",
+      visible: isAdmin || permissions?.collections?.orders?.read === true,
     },
     {
+      id: "products",
       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>,
       gradient: "linear-gradient(135deg, #ec4899 0%, #f43f5e 100%)",
       value: productCount,
       label: "Products / Menu Items",
       subtext: "Active inventory & menu items",
+      visible: isAdmin || permissions?.collections?.products?.read === true,
     },
     {
+      id: "orders",
       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>,
       gradient: "linear-gradient(135deg, #10b981 0%, #06b6d4 100%)",
       value: analyticsData?.totalOrders !== undefined ? analyticsData.totalOrders : (data?.collectionCounts?.["orders"] || 0),
       label: "Orders",
       subtext: "Total orders placed",
+      visible: isAdmin || permissions?.collections?.orders?.read === true,
     },
     {
+      id: "customers",
       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>,
       gradient: "linear-gradient(135deg, #3b82f6 0%, #6366f1 100%)",
       value: data?.collectionCounts?.["customers"] || 0,
       label: "Customers",
       subtext: "Registered shoppers",
+      visible: isAdmin || permissions?.collections?.customers?.read === true || permissions?.collections?.users?.read === true,
     },
     {
+      id: "reviews",
       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>,
       gradient: "linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)",
       value: data?.collectionCounts?.["reviews"] || 0,
       label: "Reviews",
       subtext: "Customer feedback",
+      visible: isAdmin || permissions?.collections?.reviews?.read === true,
     },
-  ];
+  ].filter((c) => c.visible);
 
-  // Dynamically extract top active custom collections if present
+  // Dynamically extract top active custom collections permitted for user
   const activeCustomCollections = data?.collectionCounts
     ? Object.entries(data.collectionCounts)
-        .filter(([slug, count]) => count > 0 && !["users", "audit_logs", "media"].includes(slug))
-        .sort((a, b) => b[1] - a[1])
-        .slice(0, 3)
+      .filter(([slug, count]) => count > 0 && !["users", "audit_logs", "media"].includes(slug))
+      .filter(([slug]) => isAdmin || permissions?.collections?.[slug]?.read === true)
+      .sort((a, b) => b[1] - a[1])
+      .slice(0, 3)
     : [];
 
   const dynamicCollectionCards = activeCustomCollections.map(([slug, count]) => {
     const formattedLabel = slug.split("-").map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
     return {
+      id: `col-${slug}`,
       icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>,
       gradient: "linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)",
       value: count,
@@ -497,30 +556,36 @@ export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce
 
   const baseCmsCards = [
     {
+      id: "documents",
       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>,
       gradient: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
       value: data?.totalDocuments || 0,
       label: "Documents",
       subtext: `Across ${data?.collections || 0} collection${data?.collections !== 1 ? "s" : ""}`,
+      visible: true,
     },
     {
+      id: "media",
       icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>,
       gradient: "linear-gradient(135deg, #a855f7 0%, #ec4899 100%)",
       value: data?.totalMedia || 0,
       label: "Media Files",
       subtext: "Images, videos & docs",
+      visible: isAdmin || permissions?.collections?.media?.read === true,
     },
-  ];
+  ].filter((c) => c.visible);
 
   const trailingCmsCards = [
     {
+      id: "team",
       icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>,
       gradient: "linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%)",
       value: data?.totalUsers || 0,
       label: "Team Members",
       subtext: "Active user accounts",
+      visible: isAdmin || permissions?.collections?.users?.read === true,
     },
-  ];
+  ].filter((c) => c.visible);
 
   const cmsCards = [
     ...baseCmsCards,

package/src/components/DashboardQuickSections.tsx

@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from "react";
+import { adminPath } from "../lib/paths";
+import { useAuthStore } from "../lib/stores";
+
+interface DashboardQuickSectionsProps {
+  collections: Record<string, any>;
+  serverUserRole?: string;
+  serverPermissions?: any;
+}
+
+export function DashboardQuickSections({
+  collections,
+  serverUserRole,
+  serverPermissions,
+}: DashboardQuickSectionsProps) {
+  const storeAuth = useAuthStore();
+  const [windowAuth, setWindowAuth] = useState<any>(null);
+
+  useEffect(() => {
+    if (typeof window !== "undefined" && (window as any).__kyroAuth) {
+      setWindowAuth((window as any).__kyroAuth);
+    }
+    const handleAuth = (e: any) => {
+      if (e?.detail) {
+        setWindowAuth(e.detail);
+      } else if (typeof window !== "undefined") {
+        setWindowAuth((window as any).__kyroAuth);
+      }
+    };
+    window.addEventListener("kyro:auth-ready", handleAuth);
+    return () => window.removeEventListener("kyro:auth-ready", handleAuth);
+  }, []);
+
+  const user = storeAuth.user || windowAuth?.user || null;
+  const permissions = storeAuth.permissions || windowAuth?.permissions || serverPermissions || null;
+  const role = user?.role || serverUserRole || "";
+
+  const isSuperAdmin = role === "super_admin";
+  const isAdmin = role === "admin" || isSuperAdmin;
+  const isEditor = role === "editor";
+  const isAuthor = role === "author";
+  const isCustomer = role === "customer";
+
+  // Helpers to check collection read/create permission
+  const canReadCollection = (slug: string): boolean => {
+    if (isAdmin) return true;
+    if (permissions && permissions.collections && permissions.collections[slug]) {
+      return permissions.collections[slug].read === true;
+    }
+    if (isEditor) {
+      return !["users", "audit_logs", "roles", "plugins", "keys", "webhooks", "settings"].includes(slug);
+    }
+    if (isAuthor) {
+      return ["posts", "categories", "orders"].includes(slug);
+    }
+    if (isCustomer) {
+      return ["orders"].includes(slug);
+    }
+    return false;
+  };
+
+  const canCreateCollection = (slug: string): boolean => {
+    if (isAdmin) return true;
+    if (permissions && permissions.collections && permissions.collections[slug]) {
+      return permissions.collections[slug].create === true;
+    }
+    if (isEditor) {
+      return !["users", "audit_logs", "roles", "plugins", "keys", "webhooks", "settings"].includes(slug);
+    }
+    if (isAuthor) {
+      return ["posts", "categories"].includes(slug);
+    }
+    if (isCustomer) {
+      return ["orders"].includes(slug);
+    }
+    return false;
+  };
+
+  // ── Quick Actions RBAC List ──
+  const allQuickActions = [
+    {
+      id: "profile",
+      label: "Edit Account Profile",
+      description: "Manage your personal profile and account details",
+      href: `${adminPath}/profile`,
+      visible: true, // Everyone logged in can view their profile
+    },
+    {
+      id: "media",
+      label: "Media Assets Library",
+      description: "Upload and manage images, documents and files",
+      href: `${adminPath}/media`,
+      visible: !isCustomer && (isAdmin || isAuthor || isEditor || canReadCollection("media")),
+    },
+    {
+      id: "orders",
+      label: "Order History",
+      description: "View past orders and purchases",
+      href: `${adminPath}/orders`,
+      visible: !!collections["orders"] && (isAdmin || canReadCollection("orders")),
+    },
+    {
+      id: "users",
+      label: "User Management",
+      description: "Manage team accounts, roles & customer profiles",
+      href: `${adminPath}/users`,
+      visible: isAdmin || canReadCollection("users"),
+    },
+    {
+      id: "roles",
+      label: "Roles & Permissions",
+      description: "RBAC inheritance rules and granted permission matrices",
+      href: `${adminPath}/roles`,
+      visible: isSuperAdmin,
+    },
+    {
+      id: "audit",
+      label: "Security Audit Logs",
+      description: "Monitor user actions, auth attempts and system logs",
+      href: `${adminPath}/audit`,
+      visible: isAdmin || canReadCollection("audit_logs"),
+    },
+    {
+      id: "health",
+      label: "API System Health",
+      description: "Real-time API status, memory and database health",
+      href: `${adminPath}/health`,
+      visible: isAdmin,
+    },
+    {
+      id: "settings",
+      label: "System Settings",
+      description: "Global site preferences, SEO & API configuration",
+      href: `${adminPath}/settings`,
+      visible: isAdmin,
+    },
+  ];
+
+  const visibleQuickActions = allQuickActions.filter((action) => action.visible);
+
+  // ── Explore Content RBAC List ──
+  const exploreCollections = Object.entries(collections)
+    .filter(([slug]) => !["users", "audit_logs", "media"].includes(slug))
+    .filter(([slug]) => canReadCollection(slug))
+    .map(([slug, config]: [string, any]) => {
+      const label = config.label || slug.split("-").map((w: string) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+      const canCreate = canCreateCollection(slug);
+      return {
+        slug,
+        label,
+        canCreate,
+        href: `${adminPath}/${slug}`,
+        newHref: `${adminPath}/${slug}/new`,
+      };
+    });
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
+      {/* ── Quick Actions ── */}
+      <div className="surface-tile p-5 rounded-lg border border-[var(--kyro-border)] flex flex-col justify-between">
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <div>
+              <h2 className="text-sm font-semibold text-[var(--kyro-text-primary)]">Quick Actions</h2>
+              <p className="text-[11px] text-[var(--kyro-text-secondary)] mt-0.5">Shortcuts available for your role</p>
+            </div>
+            <span className="text-[10px] font-mono px-2 py-0.5 rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]">
+              {visibleQuickActions.length} Actions
+            </span>
+          </div>
+
+          <div className="space-y-1">
+            {visibleQuickActions.map((action) => (
+              <a
+                key={action.id}
+                href={action.href}
+                className="flex items-center justify-between p-2.5 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-xs text-[var(--kyro-text-primary)] transition-colors group"
+              >
+                <div>
+                  <p className="font-medium text-[var(--kyro-text-primary)]">{action.label}</p>
+                </div>
+                <span className="text-[var(--kyro-text-muted)] group-hover:text-[var(--kyro-text-primary)] transition-colors">
+                  →
+                </span>
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* ── Explore Content ── */}
+      <div className="surface-tile p-5 rounded-lg border border-[var(--kyro-border)] flex flex-col justify-between">
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <div>
+              <h2 className="text-sm font-semibold text-[var(--kyro-text-primary)]">Explore Content</h2>
+              <p className="text-[11px] text-[var(--kyro-text-secondary)] mt-0.5">Collections accessible to your account</p>
+            </div>
+            <span className="text-[10px] font-mono px-2 py-0.5 rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]">
+              {exploreCollections.length} Collections
+            </span>
+          </div>
+
+          {exploreCollections.length === 0 ? (
+            <div className="py-8 text-center text-xs text-[var(--kyro-text-muted)]">No accessible collections</div>
+          ) : (
+            <div className="space-y-1">
+              {exploreCollections.map((col) => (
+                <div
+                  key={col.slug}
+                  className="flex items-center justify-between p-2.5 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-xs transition-colors group"
+                >
+                  <a href={col.href} className="font-medium text-[var(--kyro-text-primary)] hover:underline flex-1">
+                    {col.label}
+                  </a>
+                  <div className="flex items-center gap-2">
+                    {col.canCreate && (
+                      <a
+                        href={col.newHref}
+                        className="text-[10px] font-medium px-2 py-0.5 rounded border border-[var(--kyro-border)] bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors"
+                      >
+                        + New
+                      </a>
+                    )}
+                    <a href={col.href} className="text-[var(--kyro-text-muted)] group-hover:text-[var(--kyro-text-primary)] transition-colors">
+                      →
+                    </a>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ListView.tsx

@@ -382,7 +382,7 @@ export function ListView({
 
 
       {/* Toolbar */}
-      <div className="surface-tile p-4 flex flex-col lg:flex-row gap-4 items-start lg:items-center">
+      <div className="surface-tile p-4 flex flex-col lg:flex-row gap-4 items-start lg:items-center rounded-lg">
         {/* Search */}
         <div className="relative flex-1 w-full lg:max-w-md">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" />
@@ -471,7 +471,7 @@ export function ListView({
 
       {/* Filter Panel */}
       {showFilters && (
-        <div className="surface-tile p-4 border-l-4 border-[var(--kyro-sidebar-active)]">
+        <div className="surface-tile p-4 border-l-4 border-[var(--kyro-sidebar-active)] rounded-lg">
           <div className="flex items-center justify-between mb-4">
             <h3 className="font-medium text-[var(--kyro-text-primary)]">
               {t("listView.advancedFilters", { defaultValue: "Advanced Filters" })}
@@ -573,7 +573,7 @@ export function ListView({
       )}
 
       {/* Data Table */}
-      <div className="surface-tile overflow-hidden">
+      <div className="surface-tile overflow-hidden rounded-lg">
         {loading ? (
           <div className="space-y-2 p-4">
             <Shimmer variant="table-row" count={8} />

package/src/components/MediaGallery.tsx

@@ -143,7 +143,7 @@ export function MediaGallery({
   multiple?: boolean;
   pickerMode?: boolean;
 }) {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
   const { permissions } = useAuthStore();
   const canUpload = permissions?.media?.create !== false;
   const canDelete = permissions?.media?.delete !== false;
@@ -678,7 +678,7 @@ export function MediaGallery({
                 ))}
               </div>
             ) : (
-              <div className="surface-tile overflow-hidden animate-in fade-in duration-500">
+              <div className="surface-tile overflow-hidden rounded-lg animate-in fade-in duration-500">
                 <table className="w-full text-left">
                   <thead>
                     <tr className="text-[10px] font-bold  tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40 border-b border-[var(--kyro-border)]">

package/src/components/PluginsManager.tsx

@@ -118,7 +118,7 @@ export function PluginsManager() {
         </div>
       )}
 
-      <div className="flex flex-col gap-8 surface-tile p-8">
+      <div className="flex flex-col gap-8 surface-tile p-8 rounded-lg">
         {/* Info Banner */}
         <div className="p-4 rounded-2xl bg-blue-500/10 border border-blue-500/20 flex items-start gap-3">
           <ShieldCheck className="w-4 h-4 text-blue-500 shrink-0 mt-0.5" />

package/src/components/SessionsManager.tsx

@@ -34,7 +34,7 @@ function timeAgo(ts: number): string {
 }
 
 export function SessionsManager() {
-    const { t } = useTranslation();
+  const { t } = useTranslation();
   const [sessions, setSessions] = useState<Session[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
@@ -43,9 +43,9 @@ export function SessionsManager() {
 
   useEffect(() => {
     apiGet<{ sessions: Session[] }>("/api/auth/sessions")
-      .then((r) => { 
-        setSessions(Array.isArray(r.sessions) ? r.sessions : []); 
-        setError(""); 
+      .then((r) => {
+        setSessions(Array.isArray(r.sessions) ? r.sessions : []);
+        setError("");
       })
       .catch(() => setError("Failed to load sessions"))
       .finally(() => setLoading(false));
@@ -57,11 +57,11 @@ export function SessionsManager() {
       await apiDelete(`/api/auth/sessions/${id}`);
       setSessions((p) => p.filter((s) => s.id !== id));
       toast.success("Session revoked");
-    } catch { 
-      setError("Failed to revoke session"); 
+    } catch {
+      setError("Failed to revoke session");
       toast.error("Failed to revoke session");
-    } finally { 
-      setRevokingId(null); 
+    } finally {
+      setRevokingId(null);
     }
   };
 
@@ -71,11 +71,11 @@ export function SessionsManager() {
       await apiDelete("/api/auth/sessions");
       setSessions((p) => p.filter((s) => s.currentSession));
       toast.success("All other sessions revoked");
-    } catch { 
-      setError("Failed to revoke sessions"); 
+    } catch {
+      setError("Failed to revoke sessions");
       toast.error("Failed to revoke sessions");
-    } finally { 
-      setRevokingAll(false); 
+    } finally {
+      setRevokingAll(false);
     }
   };
 
@@ -98,7 +98,7 @@ export function SessionsManager() {
         ] : undefined}
       />
 
-      <div className="flex flex-col gap-8 surface-tile p-8">
+      <div className="flex flex-col gap-8 surface-tile p-8 rounded-lg">
         {/* Security & Summary Row */}
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
           <div className="lg:col-span-2 p-5 rounded-2xl bg-amber-500/5 border border-amber-500/10 flex items-center gap-4">
@@ -159,8 +159,8 @@ export function SessionsManager() {
                   <div className="flex items-start justify-between gap-4 relative z-10">
                     <div className="flex items-center gap-3">
                       <div className={`kyro-btn-primary p-2.5 rounded-xl transition-colors shadow-sm ${s.currentSession ? "" : "bg-[var(--kyro-surface)] text-[var(--kyro-text-secondary)] border border-[var(--kyro-border)]"}`}>
-                        {s.deviceInfo?.platform?.toLowerCase().includes("android") || s.deviceInfo?.platform?.toLowerCase().includes("ios") 
-                          ? <Smartphone className="w-4 h-4" /> 
+                        {s.deviceInfo?.platform?.toLowerCase().includes("android") || s.deviceInfo?.platform?.toLowerCase().includes("ios")
+                          ? <Smartphone className="w-4 h-4" />
                           : <Laptop className="w-4 h-4" />}
                       </div>
                       <div>