@kyro-cms/admin 0.1.6 → 0.1.7

package/src/components/Sidebar.astro

@@ -0,0 +1,237 @@
+---
+import "../styles/main.css";
+import { nonAuthCollections } from "@/lib/config";
+
+interface User {
+  id: string;
+  email: string;
+  role: string;
+  tenantId?: string;
+}
+
+interface NavItem {
+  href: string;
+  label: string;
+  icon: string;
+}
+
+interface Props {
+  title: string;
+  user?: User;
+}
+
+const { title, user } = Astro.props;
+const currentPath = Astro.url.pathname;
+
+const collectionItems: NavItem[] = nonAuthCollections.map((col) => ({
+  href: `/${col.slug}`,
+  label: col.label || col.slug,
+  icon: "collection",
+}));
+
+const navSections: { label: string; items: NavItem[] }[] = [
+  {
+    label: "Home",
+    items: [{ href: "/", label: "Dashboard", icon: "home" }],
+  },
+  {
+    label: "Collections",
+    items: collectionItems,
+  },
+  {
+    label: "Settings",
+    items: [
+      { href: "/settings", label: "General Settings", icon: "settings" },
+      { href: "/users", label: "Users", icon: "users" },
+      { href: "/roles", label: "Roles", icon: "roles" },
+      { href: "/audit", label: "Audit Logs", icon: "audit" },
+    ],
+  },
+  {
+    label: "Developer",
+    items: [
+      { href: "/admin/keys", label: "API Keys", icon: "keys" },
+      { href: "/admin/webhooks", label: "Webhooks", icon: "webhooks" },
+    ],
+  },
+];
+
+const icons: Record<string, string> = {
+  home: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
+  collection: "M12 12m-5 0a5 5 0 1 1 10 0 5 5 0 1 1-10 0",
+  settings:
+    "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37M15 12a3 3 0 11-6 0 3 3 0 016 0z",
+  users:
+    "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",
+  roles:
+    "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z",
+  audit:
+    "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",
+  keys: "M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z",
+  webhooks:
+    "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1",
+  user: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z",
+  logout:
+    "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1",
+  sun: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.364 17.636l-.707.707M17.636 17.636l-.707-.707M6.364 6.364l-.707-.707M15 12a3 3 0 11-6 0 3 3 0 016 0z",
+  moon: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z",
+};
+
+function isActive(item: NavItem): boolean {
+  if (item.href === "/") return title === "Dashboard";
+  if (item.href.startsWith("/settings"))
+    return currentPath.startsWith("/settings");
+  if (item.href === "/users") return title === "Users";
+  if (item.href === "/roles") return title === "Roles";
+  if (item.href === "/audit") return title === "Audit Logs";
+  if (item.href === "/admin/keys") return title === "API Keys";
+  if (item.href === "/admin/webhooks") return title === "Webhooks";
+  // Collections: match /collection-name and /collection-name/* paths
+  if (currentPath === item.href || currentPath.startsWith(item.href + "/"))
+    return true;
+  return false;
+}
+---
+
+<aside
+  class="surface-tile w-[320px] flex flex-col flex-shrink-0 overflow-hidden"
+>
+  <div class="px-4 py-8">
+    <span
+      class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]"
+      >KYRO.</span
+    >
+  </div>
+
+  <nav class="flex-1 px-4 overflow-y-auto">
+    <div class="space-y-4">
+      {
+        navSections.map((section) => (
+          <div class="space-y-1">
+            <div class="pt-4 pb-2">
+              <p class="px-6 text-[9px] font-black text-[var(--kyro-text-secondary)] uppercase tracking-[0.2em] opacity-40">
+                {section.label}
+              </p>
+            </div>
+            {section.items.map((item) => (
+              <a
+                href={item.href}
+                class={`flex items-center gap-4 px-6 py-2 rounded-2xl transition-all font-bold ${
+                  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)]"
+                }`}
+              >
+                <svg
+                  class="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2.5"
+                    d={icons[item.icon]}
+                  />
+                </svg>
+                <span>{item.label}</span>
+              </a>
+            ))}
+          </div>
+        ))
+      }
+    </div>
+  </nav>
+
+  <div class="px-6 py-4 mt-auto">
+    <div
+      class="flex items-center justify-between p-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-2xl"
+    >
+      <div
+        class="flex p-1 bg-[var(--kyro-bg)] rounded-xl border border-[var(--kyro-border)] shadow-inner"
+      >
+        <button
+          id="theme-light-btn"
+          class="p-2 rounded-lg transition-all active:scale-95"
+          title="Light Mode"
+        >
+          <svg
+            class="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2.5"
+              d={icons.sun}></path>
+          </svg>
+        </button>
+        <button
+          id="theme-dark-btn"
+          class="p-2 rounded-lg transition-all active:scale-95"
+          title="Dark Mode"
+        >
+          <svg
+            class="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2.5"
+              d={icons.moon}></path>
+          </svg>
+        </button>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <a
+          href={user ? `/users/${user.id}` : "#"}
+          class="flex justify-center p-2.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)] rounded-xl transition-all shadow-sm active:scale-95"
+          title="Account"
+        >
+          <svg
+            class="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2.5"
+              d={icons.user}></path>
+          </svg>
+        </a>
+        <button
+          id="logout-btn"
+          class="flex justify-center p-2.5 text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-xl transition-all shadow-sm active:scale-95 font-bold"
+          title="Logout"
+        >
+          <svg
+            class="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2.5"
+              d={icons.logout}></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</aside>

package/src/components/UserManagement.tsx

@@ -0,0 +1,204 @@
+import React, { useState, useEffect } from "react";
+import {
+  Users,
+  UserPlus,
+  Shield,
+  Lock,
+  Unlock,
+  MoreVertical,
+  Mail,
+  Clock,
+  Search,
+  Filter,
+} from "lucide-react";
+
+interface User {
+  id: string;
+  email: string;
+  name?: string;
+  role: string;
+  locked?: boolean;
+  lastLogin?: string;
+  createdAt: string;
+}
+
+export function UserManagement() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  useEffect(() => {
+    loadUsers();
+  }, []);
+
+  const loadUsers = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch("/api/auth/users");
+      const result = await response.json();
+      setUsers(result.docs || []);
+    } catch (error) {
+      console.error("Failed to load users:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleToggleLock = async (user: User) => {
+    try {
+      const response = await fetch(`/api/auth/${user.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ locked: !user.locked }),
+      });
+      if (response.ok) {
+        setUsers((prev) =>
+          prev.map((u) => (u.id === user.id ? { ...u, locked: !u.locked } : u)),
+        );
+      }
+    } catch (error) {
+      console.error("Failed to toggle user lock:", error);
+    }
+  };
+
+  const filteredUsers = users.filter(
+    (u) =>
+      u.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      u.name?.toLowerCase().includes(searchQuery.toLowerCase()),
+  );
+
+  return (
+    <div className="w-full space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-12">
+      {/* Header */}
+      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pt-4">
+        <div>
+          <h1 className="text-4xl font-black tracking-tighter text-[var(--kyro-text-primary)]">
+            Team <span className="text-[var(--kyro-primary)]">Management</span>
+          </h1>
+          <p className="text-[var(--kyro-text-secondary)] mt-1 font-medium opacity-60">
+            Control access and oversee administrative governance.
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <button type="button" className="flex items-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-2xl font-black text-sm shadow-xl active:scale-95 transition-all">
+            <UserPlus className="w-4 h-4" />
+            Invite Member
+          </button>
+        </div>
+      </div>
+
+      {/* Tools bar */}
+      <div className="flex flex-col md:flex-row gap-4">
+        <div className="relative flex-1 group">
+          <Search className="absolute left-4 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 name or email..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full pl-11 pr-4 py-3 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-2xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)] focus:border-[var(--kyro-primary)] transition-all text-sm font-medium"
+          />
+        </div>
+        <div className="flex items-center gap-3 bg-[var(--kyro-bg-secondary)] p-1 rounded-2xl border border-[var(--kyro-border)]">
+          <button type="button" className="px-4 py-2 text-[10px] font-black uppercase tracking-widest bg-[var(--kyro-surface)] shadow-sm rounded-xl border border-[var(--kyro-border)]">
+            All Users
+          </button>
+          <button type="button" className="px-4 py-2 text-[10px] font-black uppercase tracking-widest opacity-40 hover:opacity-100 transition-all">
+            Admins
+          </button>
+          <button type="button" className="px-4 py-2 text-[10px] font-black uppercase tracking-widest opacity-40 hover:opacity-100 transition-all">
+            Restricted
+          </button>
+        </div>
+      </div>
+
+      {/* User Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+        {loading ? (
+          Array(6)
+            .fill(0)
+            .map((_, i) => (
+              <div
+                key={i}
+                className="surface-tile h-48 animate-pulse p-8 bg-[var(--kyro-bg-secondary)]"
+              />
+            ))
+        ) : filteredUsers.length === 0 ? (
+          <div className="col-span-full py-20 text-center surface-tile">
+            <Users className="w-12 h-12 mx-auto opacity-10 mb-4" />
+            <p className="opacity-40 italic">
+              No team members found matching your search.
+            </p>
+          </div>
+        ) : (
+          filteredUsers.map((user) => (
+            <div
+              key={user.id}
+              className={`surface-tile p-8 group transition-all duration-500 hover:shadow-2xl relative overflow-hidden ${user.locked ? "grayscale opacity-60" : ""}`}
+            >
+              {/* Status Badge */}
+              <div className="absolute top-0 right-0 p-6">
+                <span
+                  className={`inline-flex items-center px-2 py-0.5 rounded-full text-[8px] font-black uppercase tracking-widest ${user.locked ? "bg-red-500/10 text-red-500" : "bg-green-500/10 text-green-500"}`}
+                >
+                  {user.locked ? "Locked" : "Active"}
+                </span>
+              </div>
+
+              <div className="flex items-center gap-4 mb-6">
+                <div className="w-14 h-14 rounded-2xl bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] flex items-center justify-center text-xl font-black text-[var(--kyro-primary)] group-hover:scale-110 transition-transform duration-500">
+                  {user.name ? user.name[0] : user.email[0].toUpperCase()}
+                </div>
+                <div>
+                  <h3 className="text-lg font-black tracking-tight">
+                    {user.name || "Set Name"}
+                  </h3>
+                  <div className="flex items-center gap-2 text-[11px] font-bold opacity-40 uppercase tracking-wider">
+                    <Shield className="w-3 h-3" />
+                    {user.role}
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-4 mb-8">
+                <div className="flex items-center gap-3 text-sm font-medium text-[var(--kyro-text-secondary)]">
+                  <Mail className="w-4 h-4 opacity-40" />
+                  <span className="truncate">{user.email}</span>
+                </div>
+                <div className="flex items-center gap-3 text-sm font-medium text-[var(--kyro-text-secondary)]">
+                  <Clock className="w-4 h-4 opacity-40" />
+                  <span>
+                    Last seen{" "}
+                    {user.lastLogin
+                      ? new Date(user.lastLogin).toLocaleDateString()
+                      : "Never"}
+                  </span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-3">
+                <button type="button"
+                  onClick={() => handleToggleLock(user)}
+                  className={`flex-1 py-2.5 rounded-xl font-black text-[10px] uppercase tracking-widest transition-all flex items-center justify-center gap-2 ${user.locked ? "bg-green-500/10 text-green-500 hover:bg-green-500/20" : "bg-red-500/10 text-red-500 hover:bg-red-500/20"}`}
+                >
+                  {user.locked ? (
+                    <Unlock className="w-3 h-3" />
+                  ) : (
+                    <Lock className="w-3 h-3" />
+                  )}
+                  {user.locked ? "Unlock Account" : "Lock Account"}
+                </button>
+                <button type="button" className="p-2.5 bg-[var(--kyro-bg-secondary)] rounded-xl border border-[var(--kyro-border)] hover:bg-[var(--kyro-surface)] transition-all">
+                  <MoreVertical className="w-4 h-4 opacity-40" />
+                </button>
+              </div>
+
+              {/* Decorative detail */}
+              <div className="absolute -bottom-4 -right-4 w-24 h-24 bg-[var(--kyro-primary)] opacity-0 group-hover:opacity-5 blur-3xl transition-opacity" />
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/VersionHistoryPanel.tsx

@@ -134,7 +134,7 @@ export function VersionHistoryPanel({
                   )}
                 </div>
                 <div className="flex items-center gap-1 ml-2">
-                  <button
+                  <button type="button"
                     onClick={() => onPreview(version)}
                     className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors"
                     title="Preview this version"
@@ -152,7 +152,7 @@ export function VersionHistoryPanel({
                     </svg>
                   </button>
                   {onCompare && (
-                    <button
+                    <button type="button"
                       onClick={() =>
                         onCompare(
                           version,
@@ -176,7 +176,7 @@ export function VersionHistoryPanel({
                     </button>
                   )}
                   {version.id !== currentVersionId && (
-                    <button
+                    <button type="button"
                       onClick={() => onRestore(version)}
                       className="p-1.5 text-gray-400 hover:text-primary hover:bg-primary-light rounded transition-colors"
                       title="Restore this version"