@kyro-cms/admin 0.3.2 → 0.3.5

package/src/components/users/UsersList.tsx

@@ -0,0 +1,338 @@
+import React, { useState } from "react";
+import { useUIStore } from "../../lib/stores";
+
+interface User {
+  id: string;
+  name?: string;
+  email: string;
+  role: string;
+  tenantId?: string;
+  locked?: boolean;
+  emailVerified?: boolean;
+  lastLogin?: string;
+  createdAt?: string;
+  failedLoginAttempts?: number;
+}
+
+interface UsersListProps {
+  initialUsers: User[];
+  initialTotal: number;
+  apiPath: string;
+  adminPath: string;
+}
+
+const roleColors: Record<string, string> = {
+  super_admin: "bg-red-50 text-red-600",
+  admin: "bg-purple-50 text-purple-600",
+  editor: "bg-blue-50 text-blue-600",
+  author: "bg-green-50 text-green-600",
+  customer: "bg-gray-50 text-gray-600",
+  guest: "bg-yellow-50 text-yellow-600",
+};
+
+export function UsersList({
+  initialUsers,
+  initialTotal,
+  apiPath,
+  adminPath,
+}: UsersListProps) {
+  const [users, setUsers] = useState<User[]>(initialUsers);
+  const [totalUsers, setTotalUsers] = useState(initialTotal);
+  const { confirm, alert } = useUIStore();
+  const [deleting, setDeleting] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  const handleDeleteClick = (user: User) => {
+    confirm({
+      title: "Delete User",
+      message: `Are you sure you want to delete ${user.email}? This action cannot be undone.`,
+      variant: "danger",
+      onConfirm: async () => {
+        setDeleting(true);
+        setErrorMsg(null);
+        try {
+          const res = await fetch(`${apiPath}/users/${user.id}`, {
+            method: "DELETE",
+            credentials: "include",
+          });
+          const data = await res.json();
+          if (res.ok) {
+            setUsers((prev) => prev.filter((u) => u.id !== user.id));
+            setTotalUsers((prev) => prev - 1);
+          } else {
+            setErrorMsg(data.error || "Failed to delete user");
+          }
+        } catch (e) {
+          setErrorMsg("Failed to delete user");
+        } finally {
+          setDeleting(false);
+        }
+      }
+    });
+  };
+
+  const formatDate = (dateStr?: string) => {
+    if (!dateStr) return "—";
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  };
+
+  return (
+    <div className="flex-1 overflow-y-auto pr-12 space-y-8">
+      <div className="surface-tile p-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
+            Users
+          </h1>
+          <p className="text-sm text-[var(--kyro-text-secondary)] mt-1 font-medium">
+            Manage user accounts and permissions
+            <span className="ml-2 text-[var(--kyro-text-primary)] font-bold">
+              · {totalUsers} users
+            </span>
+          </p>
+        </div>
+        <a
+          href={`${adminPath}/users/new`}
+          className="flex items-center text-sm gap-2 px-6 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl transition-all hover:opacity-90 active:scale-95 shadow-lg"
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2.5"
+              d="M12 5v14M5 12h14"
+            ></path>
+          </svg>
+          Add User
+        </a>
+      </div>
+
+      <div className="surface-tile overflow-hidden">
+        {users.length === 0 ? (
+          <div className="px-8 py-16 text-center">
+            <div className="flex flex-col items-center gap-4">
+              <div className="w-16 h-16 rounded-2xl bg-[var(--kyro-surface-accent)] flex items-center justify-center">
+                <svg
+                  className="w-8 h-8 text-[var(--kyro-text-muted)]"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="1.5"
+                    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>
+              </div>
+              <p className="font-medium text-[var(--kyro-text-primary)] text-base">
+                No users yet
+              </p>
+              <p className="text-sm text-[var(--kyro-text-secondary)]">
+                Create your first user to get started.
+              </p>
+              <a
+                href={`${adminPath}/users/new`}
+                className="mt-2 inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm shadow-md"
+              >
+                <svg
+                  className="w-3.5 h-3.5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2.5"
+                    d="M12 5v14M5 12h14"
+                  />
+                </svg>
+                Add User
+              </a>
+            </div>
+          </div>
+        ) : (
+          <table className="w-full text-left">
+            <thead>
+              <tr className="text-[var(--kyro-text-secondary)] font-bold text-[10px]  tracking-[0.3em] border-b border-[var(--kyro-border)]">
+                <th className="px-8 py-6">Name</th>
+                <th className="px-6 py-6">Email</th>
+                <th className="px-6 py-6">Role</th>
+                <th className="px-6 py-6">Status</th>
+                <th className="px-6 py-6">Created</th>
+                <th className="px-6 py-6 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-[var(--kyro-border)]">
+              {users.map((user) => (
+                <tr
+                  key={user.id}
+                  className="group hover:bg-gray-50/50 transition-colors cursor-pointer"
+                  onClick={() =>
+                    (window.location.href = `${adminPath}/users/${user.id}`)
+                  }
+                >
+                  <td className="px-8 py-5">
+                    <div className="flex items-center gap-4">
+                      <div className="w-10 h-10 rounded-full bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center font-bold text-sm">
+                        {(user.name || user.email).charAt(0).toUpperCase()}
+                      </div>
+                      <div>
+                        <div className="font-medium text-[var(--kyro-text-primary)]">
+                          {user.name || "—"}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-6 py-5">
+                    <div className="text-sm text-[var(--kyro-text-secondary)]">
+                      {user.email}
+                    </div>
+                    {user.tenantId && (
+                      <div className="text-xs text-[var(--kyro-text-muted)] mt-0.5">
+                        Tenant: {user.tenantId}
+                      </div>
+                    )}
+                  </td>
+                  <td className="px-6 py-5">
+                    <span
+                      className={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${roleColors[user.role] || "bg-gray-50 text-gray-600"}`}
+                    >
+                      {user.role}
+                    </span>
+                  </td>
+                  <td className="px-6 py-5">
+                    {user.locked ? (
+                      <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-red-50 text-red-600">
+                        <svg
+                          className="w-3 h-3"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                        Locked
+                      </span>
+                    ) : (
+                      <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-green-50 text-green-600">
+                        <svg
+                          className="w-3 h-3"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                        Active
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-6 py-5 text-sm text-[#64748b]">
+                    {formatDate(user.createdAt)}
+                  </td>
+                  <td className="px-6 py-5 text-right">
+                    <div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                      <a
+                        href={`${adminPath}/users/${user.id}`}
+                        className="inline-flex items-center justify-center w-8 h-8 rounded-md text-[#64748b] hover:bg-gray-100 hover:text-[#0b1222] transition-colors"
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <svg
+                          className="w-4 h-4"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                          />
+                        </svg>
+                      </a>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleDeleteClick(user);
+                        }}
+                        className="inline-flex items-center justify-center w-8 h-8 rounded-md text-[#64748b] hover:bg-red-50 hover:text-red-600 transition-colors"
+                      >
+                        <svg
+                          className="w-4 h-4"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="2"
+                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {errorMsg && (
+        <div className="surface-tile p-4 flex items-center gap-3 border border-red-200">
+          <svg
+            className="w-5 h-5 text-red-500 flex-shrink-0"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+              clipRule="evenodd"
+            />
+          </svg>
+          <p className="text-sm font-medium text-red-500">{errorMsg}</p>
+          <button
+            onClick={() => setErrorMsg(null)}
+            className="ml-auto text-red-400 hover:text-red-600"
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+      )}
+
+    </div>
+  );
+}

package/src/env.d.ts

@@ -1,16 +1,16 @@
-/// <reference types="astro/client" />
+declare const __KYRO_API_PATH__: string;
+declare const __KYRO_ADMIN_PATH__: string;
+declare const __KYRO_ADMIN_AUTH_DISABLED__: boolean;
 
-declare global {
-  namespace App {
-    interface Locals {
-      user?: {
-        id: string;
-        email: string;
-        role: string;
-        tenantId?: string;
-      };
-    }
+declare namespace App {
+  interface Locals {
+    user?: {
+      id: string;
+      email: string;
+      role: string;
+      permissions?: string[];
+      tenantId?: string;
+    };
+    sessionId?: string;
   }
 }
-
-export {};

package/src/fields/index.ts

@@ -29,5 +29,6 @@ export type {
   BlocksField,
   ArrayField,
   GroupField,
-  ALL_FIELD_TYPES,
 } from "@kyro-cms/core";
+
+export { ALL_FIELD_TYPES } from "@kyro-cms/core";

package/src/global.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  const __KYRO_ADMIN_PATH__: string;
+  const __KYRO_API_PATH__: string;
+  const __KYRO_ADMIN_AUTH_DISABLED__: boolean;
+}
+
+export {};

package/src/hooks/data.ts

@@ -28,11 +28,6 @@ function getApiUrl(path: string): string {
   return `${base}${path}`;
 }
 
-function getToken(): string | null {
-  if (typeof window === "undefined") return null;
-  return localStorage.getItem("kyro_token");
-}
-
 export function useKyroQuery<T = Record<string, unknown>>(
   slug: string,
   options: QueryOptions = {},
@@ -52,9 +47,8 @@ export function useKyroQuery<T = Record<string, unknown>>(
       if (options.order) params.set("order", options.order);
 
       const url = `${getApiUrl(`/api/${slug}`)}?${params.toString()}`;
-      const token = getToken();
       const res = await fetch(url, {
-        headers: token ? { Authorization: `Bearer ${token}` } : {},
+        credentials: "include",
       });
 
       if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
@@ -89,12 +83,11 @@ export function useKyroMutation(
       setError(null);
       try {
         const url = getApiUrl(`/api/${slug}`);
-        const token = getToken();
         const res = await fetch(url, {
           method,
+          credentials: "include",
           headers: {
             "Content-Type": "application/json",
-            ...(token ? { Authorization: `Bearer ${token}` } : {}),
           },
           body: data ? JSON.stringify(data) : undefined,
         });

package/src/hooks/useAsyncData.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect, useCallback } from "react";
+
+export interface AsyncDataState<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+}
+
+export function useAsyncData<T>(
+  fetcher: () => Promise<T>,
+  deps: unknown[] = [],
+  options?: { initialData?: T; onError?: (err: Error) => void }
+): AsyncDataState<T> & { refetch: () => void } {
+  const [state, setState] = useState<AsyncDataState<T>>({
+    data: options?.initialData ?? null,
+    loading: true,
+    error: null,
+  });
+
+  const fetch = useCallback(async () => {
+    setState(prev => ({ ...prev, loading: true, error: null }));
+    try {
+      const data = await fetcher();
+      setState({ data, loading: false, error: null });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "An error occurred";
+      setState(prev => ({ ...prev, loading: false, error: message }));
+      options?.onError?.(err instanceof Error ? err : new Error(message));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  useEffect(() => { fetch(); }, [fetch]);
+
+  return { ...state, refetch: fetch };
+}