@kyro-cms/admin 0.12.4 → 0.12.5

package/src/components/PluginsManager.tsx

@@ -14,6 +14,7 @@ import {
 import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
+import { useTranslation } from "react-i18next";
 
 interface Plugin {
   id: string;
@@ -31,6 +32,7 @@ interface ToggleError {
 }
 
 export function PluginsManager() {
+    const { t } = useTranslation();
   const [plugins, setPlugins] = useState<Plugin[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
@@ -71,7 +73,7 @@ export function PluginsManager() {
     return (
       <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
         <PageHeader
-          title="Plugins"
+          title={t("tooltips.plugins", { defaultValue: "Plugins" })}
           description="Extend Kyro CMS with modular features and integrations."
           icon={Blocks}
         />
@@ -85,7 +87,7 @@ export function PluginsManager() {
   return (
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
       <PageHeader
-        title="Plugins"
+        title={t("tooltips.plugins", { defaultValue: "Plugins" })}
         description="Extend Kyro CMS with modular features and integrations."
         icon={Blocks}
         actions={[
@@ -164,7 +166,7 @@ export function PluginsManager() {
               <Search className="w-4 h-4 absolute left-3.5 top-1/2 -translate-y-1/2 text-[var(--kyro-text-secondary)] opacity-40" />
               <input
                 type="text"
-                placeholder="Search plugins..."
+                placeholder={t("fields.searchPlugins", { defaultValue: "Search plugins..." })}
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 className="w-full pl-10 pr-4 py-3 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl text-xs focus:outline-none focus:border-[var(--kyro-primary)]/50 transition-all"
@@ -247,7 +249,7 @@ export function PluginsManager() {
       <Modal
         open={!!showConfigModal}
         onClose={() => setShowConfigModal(null)}
-        title="Plugin Configuration"
+        title={t("tooltips.pluginConfiguration", { defaultValue: "Plugin Configuration" })}
         size="lg"
       >
         <ModalContent>

package/src/components/RestPlayground.tsx

@@ -11,6 +11,7 @@ import {
   X,
   ChevronRight,
 } from "./ui/icons";
+import { useTranslation } from "react-i18next";
 
 interface EnvVariable {
   key: string;
@@ -78,6 +79,7 @@ const METHOD_BG: Record<string, string> = {
 };
 
 export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
+    const { t } = useTranslation();
   const [sidebarTab, setSidebarTab] = useState<"collections" | "saved" | "history" | "env">("collections");
   const [folders, setFolders] = useState<RequestFolder[]>([]);
   const [history, setHistory] = useState<HistoryItem[]>([]);
@@ -357,7 +359,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
         <button
           onClick={() => setShowSidebar(!showSidebar)}
           className="p-1 rounded-lg text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
-          title="Toggle sidebar"
+          title={t("tooltips.toggleSidebar", { defaultValue: "Toggle sidebar" })}
         >
           <ChevronRight className={`w-4 h-4 transition-transform ${showSidebar ? "rotate-180" : ""}`} />
         </button>
@@ -694,10 +696,10 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
                 </>
               )}
               <div className="ml-auto flex items-center gap-1">
-                <button onClick={handleCopyResponse} className="p-1 rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Copy response">
+                <button onClick={handleCopyResponse} className="p-1 rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title={t("tooltips.copyResponse", { defaultValue: "Copy response" })}>
                   {copied ? <Check className="w-3 h-3 text-[var(--kyro-success)]" /> : <Copy className="w-3 h-3" />}
                 </button>
-                <button onClick={handleDownloadResponse} className="p-1 rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title="Download response">
+                <button onClick={handleDownloadResponse} className="p-1 rounded text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]" title={t("tooltips.downloadResponse", { defaultValue: "Download response" })}>
                   <Download className="w-3 h-3" />
                 </button>
               </div>
@@ -727,7 +729,7 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
       </div>
 
       {/* Modals */}
-      <Modal open={showFolderModal} onClose={() => setShowFolderModal(false)} title="Create Folder" size="sm"
+      <Modal open={showFolderModal} onClose={() => setShowFolderModal(false)} title={t("tooltips.createFolder", { defaultValue: "Create Folder" })} size="sm"
         footer={
           <div className="flex gap-2">
             <button onClick={() => setShowFolderModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>
@@ -736,11 +738,11 @@ export function RestPlayground({ collections = [] }: RestPlaygroundProps) {
         }
       >
         <input type="text" value={newFolderName} onChange={(e) => setNewFolderName(e.target.value)}
-          placeholder="Folder name..." className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-3 py-2 text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
+          placeholder={t("fields.folderName", { defaultValue: "Folder name..." })} className="w-full bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg px-3 py-2 text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
         />
       </Modal>
 
-      <Modal open={showSaveModal} onClose={() => setShowSaveModal(false)} title="Save Request" size="sm"
+      <Modal open={showSaveModal} onClose={() => setShowSaveModal(false)} title={t("tooltips.saveRequest", { defaultValue: "Save Request" })} size="sm"
         footer={
           <div className="flex gap-2">
             <button onClick={() => setShowSaveModal(false)} className="kyro-btn kyro-btn-md kyro-btn-ghost">Cancel</button>

package/src/components/SessionsManager.tsx

@@ -4,6 +4,7 @@ import { Shield, Monitor, Trash2, Clock, AlertTriangle, Info, LogOut, Globe, Act
 import { PageHeader } from "./ui/PageHeader";
 import { toast } from "../lib/stores";
 import { Badge } from "./ui/Badge";
+import { useTranslation } from "react-i18next";
 
 interface Session {
   id: string;
@@ -33,6 +34,7 @@ function timeAgo(ts: number): string {
 }
 
 export function SessionsManager() {
+    const { t } = useTranslation();
   const [sessions, setSessions] = useState<Session[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
@@ -82,7 +84,7 @@ export function SessionsManager() {
   return (
     <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 pb-32">
       <PageHeader
-        title="Active Sessions"
+        title={t("tooltips.activeSessions", { defaultValue: "Active Sessions" })}
         description="Monitor and manage your cryptographic access across all devices."
         icon={Monitor}
         actions={otherCount > 0 ? [

package/src/components/Sidebar.astro

@@ -21,6 +21,9 @@ const darkLogo = brandSettings?.identity?.darkLogo;
 const logoWidth = siteLogo?.width || darkLogo?.width;
 const logoHeight = siteLogo?.height || darkLogo?.height;
 const logoAlt = siteLogo?.altText || darkLogo?.altText || siteName;
+const showSiteName = brandSettings?.identity?.showSiteName ?? true;
+
+import i18next from "../lib/i18n";
 
 interface Props {
   title: string;
@@ -29,38 +32,59 @@ interface Props {
 const { title } = Astro.props;
 const currentPath = Astro.url.pathname;
 
-const collectionItems: NavItem[] = nonAuthCollections
+const groupedCollections = new Map<string, NavItem[]>();
+const defaultCollections: NavItem[] = [];
+
+nonAuthCollections
   .filter((col) => col.slug !== "media") //removed here cos it's been added manually in the navSections.
-  .map((col) => ({
-    href: `${adminPath}/${col.slug}`,
-    label: col.label || col.slug,
-    icon: col.admin?.icon || "collection",
-  }));
+  .forEach((col) => {
+    const item: NavItem = {
+      href: `${adminPath}/${col.slug}`,
+      label: col.label || col.slug,
+      icon: (col.admin?.icon as string) || "collection",
+    };
+    
+    if (col.admin?.group) {
+      const groupName = col.admin.group as string;
+      if (!groupedCollections.has(groupName)) {
+        groupedCollections.set(groupName, []);
+      }
+      groupedCollections.get(groupName)!.push(item);
+    } else {
+      defaultCollections.push(item);
+    }
+  });
+
+const dynamicSections = Array.from(groupedCollections.entries()).map(([group, items]) => ({
+  label: group,
+  items: items,
+}));
 
 const navSections: { label: string; items: NavItem[] }[] = [
   {
-    label: "Home",
+    label: "Dashboard",
     items: [
-      { href: adminPath, label: "Dashboard", icon: "home" },
+      { href: adminPath, label: "nav.dashboard", icon: "home" },
       {
         href: adminPath + "/media",
-        label: "Media Library",
+        label: "nav.media",
         icon: "media",
       },
     ],
   },
-  {
-    label: "Collections",
-    items: collectionItems,
-  },
+  ...dynamicSections,
+  ...(defaultCollections.length > 0 ? [{
+    label: "Content",
+    items: defaultCollections,
+  }] : []),
   {
     label: "Settings",
     items: [
-      { href: adminPath + "/users", label: "Users", icon: "users" },
-      { href: adminPath + "/plugins", label: "Plugins", icon: "plugins" },
+      { href: adminPath + "/users", label: "nav.users", icon: "users" },
+      { href: adminPath + "/plugins", label: "nav.plugins", icon: "plugins" },
       {
         href: adminPath + "/settings",
-        label: "Settings",
+        label: "nav.settings",
         icon: "settings",
       },
     ],
@@ -101,36 +125,47 @@ function isActive(item: NavItem): boolean {
   <div class="px-6 md:px-8 py-6 md:py-8 flex items-center justify-between gap-3">
     {
       siteLogo || darkLogo ? (
-        <div class="flex items-center">
-          {siteLogo && (
-            <img
-              src={siteLogo.url}
-              alt={logoAlt}
-              style={{
-                width: logoWidth ? `${logoWidth}px` : "auto",
-                height: logoHeight ? `${logoHeight}px` : "32px",
-                objectFit: "contain",
-              }}
-              class={`rounded-lg ${darkLogo ? "block dark:hidden" : ""}`}
-            />
-          )}
-          {darkLogo && (
-            <img
-              src={darkLogo.url}
-              alt={logoAlt}
-              style={{
-                width: logoWidth ? `${logoWidth}px` : "auto",
-                height: logoHeight ? `${logoHeight}px` : "32px",
-                objectFit: "contain",
-              }}
-              class={`rounded-lg ${siteLogo ? "hidden dark:block" : ""}`}
-            />
+        <div class="flex items-center gap-3">
+          <div class="flex items-center">
+            {siteLogo && (
+              <img
+                src={siteLogo.url}
+                alt={logoAlt}
+                style={{
+                  width: logoWidth ? `${logoWidth}px` : "auto",
+                  height: logoHeight ? `${logoHeight}px` : "32px",
+                  objectFit: "contain",
+                }}
+                class={`rounded-lg ${darkLogo ? "block dark:hidden" : ""}`}
+              />
+            )}
+            {darkLogo && (
+              <img
+                src={darkLogo.url}
+                alt={logoAlt}
+                style={{
+                  width: logoWidth ? `${logoWidth}px` : "auto",
+                  height: logoHeight ? `${logoHeight}px` : "32px",
+                  objectFit: "contain",
+                }}
+                class={`rounded-lg ${siteLogo ? "hidden dark:block" : ""}`}
+              />
+            )}
+          </div>
+          {showSiteName && (
+            <span class="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]">
+              {siteName}
+            </span>
           )}
         </div>
       ) : (
-        <span class="text-2xl font-black tracking-tighter text-[var(--kyro-text-primary)] ">
-          {siteName}
-        </span>
+        <div class="flex items-center gap-3">
+          <img src="/logo-white.svg" alt="Kyro CMS" class="w-7 h-7 hidden dark:block" />
+          <img src="/logo.svg" alt="Kyro CMS" class="w-7 h-7 block dark:hidden" />
+          <span class="text-2xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+            {siteName}
+          </span>
+        </div>
       )
     }
     <button id="mobile-close-btn" class="md:hidden p-2 -mr-2 rounded-lg text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
@@ -142,43 +177,54 @@ function isActive(item: NavItem): boolean {
     <div class="space-y-4">
       {
         navSections.map((section) => (
-          <div class="space-y-2" data-section={section.label}>
+          <div class="space-y-2 group/section" data-section={section.label}>
             <div class="pt-4 pb-2">
-              <p class="px-6 text-[10px] font-medium text-[var(--kyro-text-secondary)]  tracking-[0.2em] opacity-40">
-                {section.label}
-              </p>
+              <button type="button" class="w-full flex items-center justify-between px-6 focus:outline-none sidebar-section-toggle transition-opacity hover:opacity-80">
+                <p class="text-[10px] font-medium text-[var(--kyro-text-secondary)] tracking-[0.2em] opacity-40 uppercase">
+                  {i18next.t(section.label, { defaultValue: section.label.split('.').pop()?.toUpperCase() || section.label }) || (section.label.split('.').pop()?.toUpperCase() || section.label)}
+                </p>
+                <Icons.ChevronDown className="w-3.5 h-3.5 text-[var(--kyro-text-secondary)] opacity-40 transition-transform duration-200 group-data-[collapsed=true]/section:-rotate-90" />
+              </button>
+            </div>
+            <div class="section-items space-y-1">
+              {section.items.map((item) => {
+                const slug = item.href.split("/").pop();
+                const type = item.href.includes("/settings")
+                  ? "global"
+                  : "collection";
+                return (
+                  <a
+                    href={item.href}
+                    data-nav-item
+                    data-slug={slug}
+                    data-type={type}
+                    class={`flex items-center gap-4 px-6 py-2 rounded-2xl transition-all font-medium text-[13px] ${
+                      item.icon === "collection"
+                        ? currentPath === item.href ||
+                          currentPath.startsWith(item.href + "/")
+                          ? "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)] active-nav-item"
+                          : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"
+                        : isActive(item)
+                          ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-lg active-nav-item"
+                          : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"
+                    }`}
+                  >
+                    {(() => {
+                      const iconName = iconAliases[item.icon] || item.icon;
+                      const Icon = (Icons as any)[iconName] || Icons.Dot;
+                      return <Icon className="w-4 h-4" strokeWidth={2.5} />;
+                    })()}
+                    <span>
+                      {(() => {
+                        const fallback = item.label.split('.').pop() || item.label;
+                        const capitalized = fallback.charAt(0).toUpperCase() + fallback.slice(1);
+                        return i18next.t(item.label, { defaultValue: capitalized }) || capitalized;
+                      })()}
+                    </span>
+                  </a>
+                );
+              })}
             </div>
-            {section.items.map((item) => {
-              const slug = item.href.split("/").pop();
-              const type = item.href.includes("/settings")
-                ? "global"
-                : "collection";
-              return (
-                <a
-                  href={item.href}
-                  data-nav-item
-                  data-slug={slug}
-                  data-type={type}
-                  class={`flex items-center gap-4 px-6 py-2 rounded-2xl transition-all font-medium text-[13px] ${
-                    item.icon === "collection"
-                      ? currentPath === item.href ||
-                        currentPath.startsWith(item.href + "/")
-                        ? "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)]"
-                        : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"
-                      : isActive(item)
-                        ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-lg"
-                        : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"
-                  }`}
-                >
-                  {(() => {
-                    const iconName = iconAliases[item.icon] || item.icon;
-                    const Icon = (Icons as any)[iconName] || Icons.Dot;
-                    return <Icon className="w-4 h-4" strokeWidth={2.5} />;
-                  })()}
-                  <span>{item.label}</span>
-                </a>
-              );
-            })}
           </div>
         ))
       }
@@ -186,42 +232,84 @@ function isActive(item: NavItem): boolean {
   </nav>
 
   <script>
+    function initSidebar() {
+      const sections = document.querySelectorAll("[data-section]");
+      sections.forEach((section) => {
+        const label = section.getAttribute("data-section");
+        const toggleBtn = section.querySelector('.sidebar-section-toggle');
+        const itemsContainer = section.querySelector('.section-items');
+        
+        const isCollapsed = localStorage.getItem(`kyro-sidebar-collapsed-${label}`) === 'true';
+        if (isCollapsed) {
+          section.setAttribute('data-collapsed', 'true');
+          if (itemsContainer) itemsContainer.classList.add('hidden');
+        }
+
+        const activeItem = section.querySelector('.active-nav-item');
+        if (activeItem && isCollapsed) {
+          section.removeAttribute('data-collapsed');
+          if (itemsContainer) itemsContainer.classList.remove('hidden');
+          localStorage.setItem(`kyro-sidebar-collapsed-${label}`, 'false');
+        }
+        
+        // Remove old listeners to prevent duplicates
+        const newToggleBtn = toggleBtn?.cloneNode(true);
+        if (toggleBtn && newToggleBtn && toggleBtn.parentNode) {
+          toggleBtn.parentNode.replaceChild(newToggleBtn, toggleBtn);
+          newToggleBtn.addEventListener('click', () => {
+             const currentlyCollapsed = section.getAttribute('data-collapsed') === 'true';
+             if (currentlyCollapsed) {
+               section.removeAttribute('data-collapsed');
+               if (itemsContainer) itemsContainer.classList.remove('hidden');
+               localStorage.setItem(`kyro-sidebar-collapsed-${label}`, 'false');
+             } else {
+               section.setAttribute('data-collapsed', 'true');
+               if (itemsContainer) itemsContainer.classList.add('hidden');
+               localStorage.setItem(`kyro-sidebar-collapsed-${label}`, 'true');
+             }
+          });
+        }
+      });
+    }
+
+    // Run on load and view transitions
+    initSidebar();
+    document.addEventListener('astro:page-load', initSidebar);
+
     // Handle frontend RBAC pruning in the sidebar
-    window.addEventListener("kyro:auth-ready", (event: any) => {
+    window.addEventListener("kyro:auth-ready", (event) => {
+      // @ts-ignore
       const { permissions } = event.detail;
       if (!permissions) return;
 
       const navItems = document.querySelectorAll("[data-nav-item]");
-      navItems.forEach((item: any) => {
+      navItems.forEach((item) => {
         const slug = item.getAttribute("data-slug");
         const type = item.getAttribute("data-type");
 
         let hasAccess = true;
-
         if (type === "collection" && permissions.collections) {
           const colPerms = permissions.collections[slug];
-          if (colPerms && colPerms.read === false) {
-            hasAccess = false;
-          }
+          if (colPerms && colPerms.read === false) hasAccess = false;
         } else if (type === "global" && permissions.globals) {
           const globalPerms = permissions.globals[slug];
-          if (globalPerms && globalPerms.read === false) {
-            hasAccess = false;
-          }
+          if (globalPerms && globalPerms.read === false) hasAccess = false;
         }
 
         if (!hasAccess) {
+          // @ts-ignore
           item.style.display = "none";
         }
       });
 
-      // Hide empty sections
+      // Hide empty sections after RBAC
       const sections = document.querySelectorAll("[data-section]");
-      sections.forEach((section: any) => {
+      sections.forEach((section) => {
         const visibleItems = section.querySelectorAll(
-          '[data-nav-item]:not([style*="display: none"])',
+          '[data-nav-item]:not([style*="display: none"])'
         );
         if (visibleItems.length === 0) {
+          // @ts-ignore
           section.style.display = "none";
         }
       });
@@ -238,14 +326,14 @@ function isActive(item: NavItem): boolean {
         <button
           id="theme-light-btn"
           class="p-2 rounded-lg transition-all active:scale-95"
-          title="Light Mode"
+          title={i18next.t("sidebar.lightMode", { defaultValue: "Light Mode" })}
         >
           <Icons.Sun className="w-4 h-4" strokeWidth={2.5} />
         </button>
         <button
           id="theme-dark-btn"
           class="p-2 rounded-lg transition-all active:scale-95"
-          title="Dark Mode"
+          title={i18next.t("sidebar.darkMode", { defaultValue: "Dark Mode" })}
         >
           <Icons.Moon className="w-4 h-4" strokeWidth={2.5} />
         </button>

package/src/components/UserManagement.tsx

@@ -15,6 +15,7 @@ import { useUIStore, toast } from "../lib/stores";
 import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 import { Badge } from "./ui/Badge";
 import { PageHeader } from "./ui/PageHeader";
+import { useTranslation } from "react-i18next";
 
 interface User {
   id: string;
@@ -29,6 +30,7 @@ interface User {
 }
 
 export function UserManagement() {
+    const { t } = useTranslation();
   const [users, setUsers] = useState<User[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
@@ -135,7 +137,7 @@ export function UserManagement() {
     <div className="w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700 px-4 md:px-8 pb-12">
       {/* Header */}
       <PageHeader
-        title="Identity & Access"
+        title={t("tooltips.identityAccess", { defaultValue: "Identity & Access" })}
         description="Manage the core administrative team and security permissions."
         icon={Users}
         action={{
@@ -155,7 +157,7 @@ export function UserManagement() {
           <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)] opacity-40 group-focus-within:opacity-100 transition-opacity" />
           <input
             type="text"
-            placeholder="Search by identity or email..."
+            placeholder={t("fields.searchByIdentityOr", { defaultValue: "Search by identity or email..." })}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             className="w-full pl-10 pr-4 py-2.5 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] transition-all text-xs font-bold"
@@ -241,7 +243,7 @@ export function UserManagement() {
                       <button
                         onClick={() => handleDelete(user)}
                         className="p-1.5 rounded-lg border border-red-500/20 bg-red-500/10 text-red-500 hover:bg-red-500/20 transition-all"
-                        title="Delete User"
+                        title={t("tooltips.deleteUser", { defaultValue: "Delete User" })}
                       >
                         <Trash2 className="w-3.5 h-3.5" />
                       </button>
@@ -258,7 +260,7 @@ export function UserManagement() {
       <Modal
         open={showCreateModal}
         onClose={() => setShowCreateModal(false)}
-        title="Create User"
+        title={t("tooltips.createUser", { defaultValue: "Create User" })}
         size="lg"
       >
         <ModalContent>
@@ -269,7 +271,7 @@ export function UserManagement() {
                 type="text"
                 value={createForm.name}
                 onChange={(e) => setCreateForm({ ...createForm, name: e.target.value })}
-                placeholder="John Doe"
+                placeholder={t("fields.johnDoe", { defaultValue: "John Doe" })}
                 className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"
               />
             </div>
@@ -290,7 +292,7 @@ export function UserManagement() {
                 type="password"
                 value={createForm.password}
                 onChange={(e) => setCreateForm({ ...createForm, password: e.target.value })}
-                placeholder="Minimum 12 characters"
+                placeholder={t("fields.minimum12Characters", { defaultValue: "Minimum 12 characters" })}
                 required
                 minLength={12}
                 className="w-full px-4 py-3 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-primary)]"