@nsxbet/admin-sdk 0.8.1 → 0.9.1

package/dist/shell/components/access-control/AccessControlAuditPage.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { DataTable, EmptyState, Input, LoadingState, } from "@nsxbet/admin-ui";
+import { useFetch } from "../../../hooks/useFetch";
+import { useI18n } from "../../../hooks/useI18n";
+import { useTimestamp } from "../../../hooks/useTimestamp";
+import { useOutletContext } from "react-router-dom";
+import { createAccessControlApi } from "./api";
+const PAGE_SIZE = 20;
+export function AccessControlAuditPage() {
+    const { t } = useI18n();
+    const fetcher = useFetch();
+    const { apiUrl } = useOutletContext();
+    const api = useMemo(() => createAccessControlApi(fetcher, apiUrl), [fetcher, apiUrl]);
+    const apiRef = useRef(api);
+    apiRef.current = api;
+    const { formatDate } = useTimestamp();
+    const [filters, setFilters] = useState({
+        eventType: "",
+        actorEmail: "",
+        targetType: "",
+        targetId: "",
+    });
+    const [committedFilters, setCommittedFilters] = useState(filters);
+    const [events, setEvents] = useState([]);
+    const [hasLoaded, setHasLoaded] = useState(false);
+    const [isFiltering, setIsFiltering] = useState(false);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [error, setError] = useState(null);
+    const [nextCursor, setNextCursor] = useState(null);
+    const sentinelRef = useRef(null);
+    const tRef = useRef(t);
+    tRef.current = t;
+    const commitFilters = useCallback(() => {
+        setCommittedFilters(filters);
+    }, [filters]);
+    const filterParams = useMemo(() => ({
+        eventType: committedFilters.eventType || undefined,
+        actorEmail: committedFilters.actorEmail || undefined,
+        targetType: committedFilters.targetType || undefined,
+        targetId: committedFilters.targetId || undefined,
+        limit: PAGE_SIZE,
+    }), [committedFilters]);
+    useEffect(() => {
+        let cancelled = false;
+        const loadAudit = async () => {
+            try {
+                setIsFiltering(true);
+                setError(null);
+                const page = await apiRef.current.listAuditEvents(filterParams);
+                if (cancelled)
+                    return;
+                setEvents(page.items);
+                setNextCursor(page.nextCursor);
+                setHasLoaded(true);
+            }
+            catch (nextError) {
+                if (cancelled)
+                    return;
+                setError(nextError instanceof Error ? nextError.message : tRef.current("errors.generic"));
+            }
+            finally {
+                if (!cancelled)
+                    setIsFiltering(false);
+            }
+        };
+        loadAudit();
+        return () => { cancelled = true; };
+    }, [filterParams]);
+    const loadMoreRef = useRef();
+    const loadMore = useCallback(async () => {
+        if (!nextCursor || isLoadingMore)
+            return;
+        try {
+            setIsLoadingMore(true);
+            const page = await apiRef.current.listAuditEvents({
+                ...filterParams,
+                cursor: nextCursor,
+            });
+            setEvents((prev) => [...prev, ...page.items]);
+            setNextCursor(page.nextCursor);
+        }
+        catch {
+            // Silent failure on load-more; user can scroll again to retry
+        }
+        finally {
+            setIsLoadingMore(false);
+        }
+    }, [filterParams, nextCursor, isLoadingMore]);
+    loadMoreRef.current = loadMore;
+    useEffect(() => {
+        const sentinel = sentinelRef.current;
+        if (!sentinel || !nextCursor)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                loadMoreRef.current?.();
+            }
+        }, { rootMargin: "200px" });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [nextCursor]);
+    const columns = useMemo(() => [
+        {
+            accessor: "occurredAt",
+            header: t("accessControlPage.columnTimestamp"),
+            cell: (_value, row) => formatDate(new Date(row.occurredAt), "datetime"),
+        },
+        {
+            accessor: "eventType",
+            header: t("accessControlPage.columnEvent"),
+        },
+        {
+            accessor: "actorEmailSnapshot",
+            header: t("accessControlPage.columnActor"),
+        },
+        {
+            accessor: "targetType",
+            header: t("accessControlPage.columnTarget"),
+            cell: (_value, row) => `${row.targetType} / ${row.targetId}`,
+        },
+        {
+            accessor: "summary",
+            header: t("accessControlPage.columnSummary"),
+        },
+    ], [t, formatDate]);
+    const showInitialLoading = !hasLoaded && isFiltering;
+    const showTable = hasLoaded && !error;
+    return (_jsxs("section", { "data-testid": "access-control-audit-page", className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h2", { className: "text-xl font-semibold", children: t("accessControlPage.auditTitle") }), _jsx("span", { className: "rounded bg-muted px-2 py-1 text-xs font-medium", children: t("common.readOnly") })] }), _jsxs("div", { className: "grid gap-3 md:grid-cols-4", onKeyDown: (event) => {
+                    if (event.key === "Enter")
+                        commitFilters();
+                }, children: [_jsx(Input, { placeholder: t("accessControlPage.filterEventType"), value: filters.eventType, onChange: (event) => setFilters((current) => ({ ...current, eventType: event.target.value })), onBlur: commitFilters }), _jsx(Input, { placeholder: t("accessControlPage.filterActor"), value: filters.actorEmail, onChange: (event) => setFilters((current) => ({ ...current, actorEmail: event.target.value })), onBlur: commitFilters }), _jsx(Input, { placeholder: t("accessControlPage.filterTargetType"), value: filters.targetType, onChange: (event) => setFilters((current) => ({ ...current, targetType: event.target.value })), onBlur: commitFilters }), _jsx(Input, { placeholder: t("accessControlPage.filterTargetId"), value: filters.targetId, onChange: (event) => setFilters((current) => ({ ...current, targetId: event.target.value })), onBlur: commitFilters })] }), showInitialLoading ? (_jsx(LoadingState, { text: t("common.loading") })) : error ? (_jsx(EmptyState, { title: t("common.error"), description: error })) : showTable ? (_jsxs("div", { children: [_jsx("div", { className: isFiltering
+                            ? "pointer-events-none opacity-50 transition-opacity duration-200"
+                            : "transition-opacity duration-200", children: _jsx(DataTable, { data: events, columns: columns, emptyState: _jsx(EmptyState, { title: t("accessControlPage.noAuditTitle"), description: t("accessControlPage.noAuditDescription") }) }) }), nextCursor !== null && (_jsx("div", { ref: sentinelRef, className: "flex justify-center py-4", children: isLoadingMore && (_jsx("div", { className: "min-h-0 py-2", children: _jsx(LoadingState, { text: t("common.loading") }) })) }))] })) : null] }));
+}

package/dist/shell/components/access-control/AccessControlGroupDetailPage.d.ts

@@ -0,0 +1 @@
+export declare function AccessControlGroupDetailPage(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/components/access-control/AccessControlGroupDetailPage.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useOutletContext, useParams } from "react-router-dom";
+import { Button, DataTable, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyState, Input, LoadingState, Badge, StatusBadge, } from "@nsxbet/admin-ui";
+import { useFetch } from "../../../hooks/useFetch";
+import { useAuth } from "../../../hooks/useAuth";
+import { useI18n } from "../../../hooks/useI18n";
+import { createAccessControlApi, } from "./api";
+import { AccessControlMemberPicker } from "./AccessControlMemberPicker";
+import { AccessControlPermissionPicker } from "./AccessControlPermissionPicker";
+export function AccessControlGroupDetailPage() {
+    const { groupId: groupIdParam } = useParams();
+    const groupId = groupIdParam ? parseInt(groupIdParam, 10) : undefined;
+    const { t } = useI18n();
+    const fetcher = useFetch();
+    const auth = useAuth();
+    const { apiUrl } = useOutletContext();
+    const api = useMemo(() => createAccessControlApi(fetcher, apiUrl), [fetcher, apiUrl]);
+    const [group, setGroup] = useState(null);
+    const [catalogItems, setCatalogItems] = useState([]);
+    const [knownUsers, setKnownUsers] = useState([]);
+    const [isLoadingUsers, setIsLoadingUsers] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const canManage = auth.hasPermission("admin.platform.access-control.groups.manage");
+    const mountedRef = useRef(true);
+    const currentUser = auth.getUser();
+    const [selfRemoveTarget, setSelfRemoveTarget] = useState(null);
+    const [selfRemoveConfirmText, setSelfRemoveConfirmText] = useState("");
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => { mountedRef.current = false; };
+    }, []);
+    const loadGroup = useCallback(async () => {
+        if (!groupId)
+            return;
+        try {
+            setIsLoading(true);
+            setError(null);
+            const [nextGroup, catalog] = await Promise.all([
+                api.getGroupDetail(groupId),
+                api.getPermissionCatalog(),
+            ]);
+            setGroup(nextGroup);
+            setCatalogItems(catalog.items);
+        }
+        catch (nextError) {
+            setError(nextError instanceof Error ? nextError.message : t("errors.generic"));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [api, groupId, t]);
+    const revalidateGroup = useCallback(async () => {
+        if (!groupId)
+            return;
+        try {
+            const [nextGroup, catalog] = await Promise.all([
+                api.getGroupDetail(groupId),
+                api.getPermissionCatalog(),
+            ]);
+            if (mountedRef.current) {
+                setGroup(nextGroup);
+                setCatalogItems(catalog.items);
+            }
+        }
+        catch {
+            // Silent revalidation failure is acceptable
+        }
+    }, [api, groupId]);
+    useEffect(() => {
+        loadGroup();
+    }, [loadGroup]);
+    const loadKnownUsers = useCallback(async (search) => {
+        setIsLoadingUsers(true);
+        try {
+            const page = await api.listKnownUsers({ search: search || undefined, limit: 50 });
+            setKnownUsers(page.items);
+        }
+        finally {
+            setIsLoadingUsers(false);
+        }
+    }, [api]);
+    const handleAddMembers = useCallback(async (userIds) => {
+        if (!groupId || !group)
+            return;
+        const newMembers = knownUsers.filter((u) => userIds.includes(u.id));
+        setGroup((prev) => prev
+            ? { ...prev, members: [...prev.members, ...newMembers.map((u) => ({ ...u }))] }
+            : prev);
+        try {
+            await api.addGroupMembers(groupId, userIds);
+            revalidateGroup();
+        }
+        catch {
+            setGroup(group);
+        }
+    }, [api, groupId, group, knownUsers, revalidateGroup]);
+    const executeRemoveMember = useCallback(async (userId) => {
+        if (!groupId || !group)
+            return;
+        const previousMembers = group.members;
+        setGroup((prev) => prev ? { ...prev, members: prev.members.filter((m) => m.id !== userId) } : prev);
+        try {
+            await api.removeGroupMember(groupId, userId);
+            revalidateGroup();
+        }
+        catch {
+            setGroup((prev) => prev ? { ...prev, members: previousMembers } : prev);
+        }
+    }, [api, groupId, group, revalidateGroup]);
+    const handleRemoveMember = useCallback((userId) => {
+        if (!group)
+            return;
+        const member = group.members.find((m) => m.id === userId);
+        if (member && group.isProtected && member.subject === currentUser.id) {
+            setSelfRemoveTarget(member);
+            setSelfRemoveConfirmText("");
+            return;
+        }
+        executeRemoveMember(userId);
+    }, [group, currentUser.id, executeRemoveMember]);
+    const handleConfirmSelfRemove = useCallback(async () => {
+        if (!selfRemoveTarget)
+            return;
+        setSelfRemoveTarget(null);
+        setSelfRemoveConfirmText("");
+        await executeRemoveMember(selfRemoveTarget.id);
+    }, [selfRemoveTarget, executeRemoveMember]);
+    const handleAssignPermissions = useCallback(async (permissions) => {
+        if (!groupId || !group)
+            return;
+        setGroup((prev) => prev
+            ? { ...prev, permissions: [...prev.permissions, ...permissions] }
+            : prev);
+        try {
+            await api.assignGroupPermissions(groupId, permissions);
+            revalidateGroup();
+        }
+        catch {
+            setGroup(group);
+        }
+    }, [api, groupId, group, revalidateGroup]);
+    const handleRemovePermission = useCallback(async (permission) => {
+        if (!groupId || !group)
+            return;
+        const previousPermissions = group.permissions;
+        setGroup((prev) => prev
+            ? { ...prev, permissions: prev.permissions.filter((p) => p !== permission) }
+            : prev);
+        try {
+            await api.removeGroupPermission(groupId, permission);
+            revalidateGroup();
+        }
+        catch {
+            setGroup((prev) => prev ? { ...prev, permissions: previousPermissions } : prev);
+        }
+    }, [api, groupId, group, revalidateGroup]);
+    const memberColumns = useMemo(() => [
+        {
+            accessor: "displayName",
+            header: t("accessControlPage.columnName"),
+        },
+        {
+            accessor: "email",
+            header: t("accessControlPage.columnEmail"),
+        },
+        {
+            accessor: "subject",
+            header: t("accessControlPage.columnSubject"),
+            cell: (_value, row) => (_jsx(Badge, { variant: "outline", className: "font-mono text-[10px]", children: row.subject })),
+        },
+        ...(canManage && group
+            ? [
+                {
+                    accessor: "id",
+                    header: "",
+                    cell: (_value, row) => (_jsx(Button, { variant: "ghost", size: "sm", className: "text-destructive hover:text-destructive", onClick: () => handleRemoveMember(row.id), children: t("common.delete") })),
+                },
+            ]
+            : []),
+    ], [t, canManage, group, handleRemoveMember]);
+    const permissionRows = useMemo(() => {
+        if (!group)
+            return [];
+        return group.permissions.map((permission) => {
+            const catalogItem = catalogItems.find((item) => item.permission === permission);
+            return { permission, orphaned: catalogItem?.orphaned ?? false };
+        });
+    }, [group, catalogItems]);
+    const permissionColumns = useMemo(() => [
+        {
+            accessor: "permission",
+            header: t("accessControlPage.permissionsTab"),
+            cell: (_value, row) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-mono text-sm", children: row.permission }), row.orphaned && (_jsx(Badge, { variant: "secondary", className: "text-[10px]", children: "Orphaned" }))] })),
+        },
+        ...(canManage && group && !group.isProtected
+            ? [
+                {
+                    accessor: "orphaned",
+                    header: "",
+                    cell: (_value, row) => (_jsx(Button, { variant: "ghost", size: "sm", className: "text-destructive hover:text-destructive", onClick: () => handleRemovePermission(row.permission), children: t("common.delete") })),
+                },
+            ]
+            : []),
+    ], [t, canManage, group, handleRemovePermission]);
+    if (isLoading) {
+        return _jsx(LoadingState, { text: t("common.loading") });
+    }
+    if (error || !group) {
+        return (_jsx(EmptyState, { title: t("common.error"), description: error ?? t("errors.notFound") }));
+    }
+    return (_jsxs("section", { "data-testid": "access-control-group-detail-page", className: "space-y-6", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-xl font-semibold", children: group.displayName }), _jsx("p", { className: "text-sm text-muted-foreground font-mono", children: group.id })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(StatusBadge, { status: group.deactivatedAt ? "inactive" : "active", label: group.deactivatedAt ? t("common.disabled") : t("common.enabled") }), group.isProtected && (_jsx(Badge, { variant: "secondary", children: t("accessControlPage.protectedGroup") }))] })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h3", { className: "text-lg font-semibold", children: [t("accessControlPage.membersTab"), _jsxs("span", { className: "ml-2 text-sm font-normal text-muted-foreground", children: ["(", group.members.length, ")"] })] }), canManage && (_jsx(AccessControlMemberPicker, { existingMemberIds: group.members.map((m) => m.id), isLoading: isLoadingUsers, users: knownUsers, onSearchChange: loadKnownUsers, onAddMembers: handleAddMembers }))] }), _jsx(DataTable, { data: group.members, columns: memberColumns, emptyState: _jsx(EmptyState, { title: t("accessControlPage.noMembers"), className: "min-h-[120px]" }) })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h3", { className: "text-lg font-semibold", children: [t("accessControlPage.permissionsTab"), _jsxs("span", { className: "ml-2 text-sm font-normal text-muted-foreground", children: ["(", group.permissions.length, ")"] })] }), canManage && !group.isProtected && (_jsx(AccessControlPermissionPicker, { items: catalogItems, assignedPermissions: group.permissions, onAssignPermissions: handleAssignPermissions }))] }), _jsx(DataTable, { data: permissionRows, columns: permissionColumns, emptyState: _jsx(EmptyState, { title: t("accessControlPage.noPermissions"), className: "min-h-[120px]" }) })] }), _jsx(Dialog, { open: selfRemoveTarget !== null, onOpenChange: (nextOpen) => {
+                    if (!nextOpen) {
+                        setSelfRemoveTarget(null);
+                        setSelfRemoveConfirmText("");
+                    }
+                }, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { className: "text-destructive", children: t("accessControlPage.selfRemoveTitle") }), _jsx(DialogDescription, { children: t("accessControlPage.selfRemoveDescription", {
+                                        group: group?.displayName ?? "",
+                                    }) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t("accessControlPage.selfRemovePrompt") }), _jsx(Input, { value: selfRemoveConfirmText, onChange: (event) => setSelfRemoveConfirmText(event.target.value), placeholder: "CONFIRM", autoFocus: true })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => {
+                                        setSelfRemoveTarget(null);
+                                        setSelfRemoveConfirmText("");
+                                    }, children: t("common.cancel") }), _jsx(Button, { variant: "destructive", disabled: selfRemoveConfirmText !== "CONFIRM", onClick: handleConfirmSelfRemove, children: t("accessControlPage.selfRemoveConfirmButton") })] })] }) })] }));
+}

package/dist/shell/components/access-control/AccessControlGroupsPage.d.ts

@@ -0,0 +1 @@
+export declare function AccessControlGroupsPage(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/components/access-control/AccessControlGroupsPage.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate, useOutletContext } from "react-router-dom";
+import { Button, DataTable, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, EmptyState, Input, LoadingState, Badge, StatusBadge, } from "@nsxbet/admin-ui";
+import { useFetch } from "../../../hooks/useFetch";
+import { useAuth } from "../../../hooks/useAuth";
+import { useI18n } from "../../../hooks/useI18n";
+import { createAccessControlApi } from "./api";
+const PAGE_SIZE = 20;
+export function AccessControlGroupsPage() {
+    const { t } = useI18n();
+    const fetcher = useFetch();
+    const auth = useAuth();
+    const navigate = useNavigate();
+    const { apiUrl } = useOutletContext();
+    const api = useMemo(() => createAccessControlApi(fetcher, apiUrl), [fetcher, apiUrl]);
+    const apiRef = useRef(api);
+    apiRef.current = api;
+    const [statusFilter, setStatusFilter] = useState("all");
+    const [search, setSearch] = useState("");
+    const [committedSearch, setCommittedSearch] = useState("");
+    const [groups, setGroups] = useState([]);
+    const [hasLoaded, setHasLoaded] = useState(false);
+    const [isFiltering, setIsFiltering] = useState(false);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [error, setError] = useState(null);
+    const [nextCursor, setNextCursor] = useState(null);
+    const sentinelRef = useRef(null);
+    const [createDialogOpen, setCreateDialogOpen] = useState(false);
+    const [createName, setCreateName] = useState("");
+    const [editTarget, setEditTarget] = useState(null);
+    const [editName, setEditName] = useState("");
+    const [toggleTarget, setToggleTarget] = useState(null);
+    const lastToggleTarget = useRef(null);
+    if (toggleTarget)
+        lastToggleTarget.current = toggleTarget;
+    const toggleDisplay = toggleTarget ?? lastToggleTarget.current;
+    const canManage = auth.hasPermission("admin.platform.access-control.groups.manage");
+    const commitSearch = useCallback(() => setCommittedSearch(search), [search]);
+    const filterParams = useMemo(() => ({
+        status: statusFilter === "all" ? undefined : statusFilter,
+        search: committedSearch || undefined,
+        limit: PAGE_SIZE,
+    }), [statusFilter, committedSearch]);
+    useEffect(() => {
+        let cancelled = false;
+        const load = async () => {
+            try {
+                setIsFiltering(true);
+                setError(null);
+                const page = await apiRef.current.listGroups(filterParams);
+                if (cancelled)
+                    return;
+                setGroups(page.items);
+                setNextCursor(page.nextCursor);
+                setHasLoaded(true);
+            }
+            catch (nextError) {
+                if (cancelled)
+                    return;
+                setError(nextError instanceof Error ? nextError.message : "Unknown error");
+            }
+            finally {
+                if (!cancelled)
+                    setIsFiltering(false);
+            }
+        };
+        load();
+        return () => { cancelled = true; };
+    }, [filterParams]);
+    const loadMoreRef = useRef();
+    const loadMore = useCallback(async () => {
+        if (!nextCursor || isLoadingMore)
+            return;
+        try {
+            setIsLoadingMore(true);
+            const page = await apiRef.current.listGroups({ ...filterParams, cursor: nextCursor });
+            setGroups((prev) => [...prev, ...page.items]);
+            setNextCursor(page.nextCursor);
+        }
+        catch {
+            // silent
+        }
+        finally {
+            setIsLoadingMore(false);
+        }
+    }, [filterParams, nextCursor, isLoadingMore]);
+    loadMoreRef.current = loadMore;
+    useEffect(() => {
+        const sentinel = sentinelRef.current;
+        if (!sentinel || !nextCursor)
+            return;
+        const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting)
+            loadMoreRef.current?.(); }, { rootMargin: "200px" });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [nextCursor]);
+    const reload = useCallback(async () => {
+        try {
+            setIsFiltering(true);
+            const page = await apiRef.current.listGroups(filterParams);
+            setGroups(page.items);
+            setNextCursor(page.nextCursor);
+        }
+        catch {
+            // silent
+        }
+        finally {
+            setIsFiltering(false);
+        }
+    }, [filterParams]);
+    const handleCreate = async () => {
+        if (!createName.trim())
+            return;
+        await apiRef.current.createGroup(createName.trim());
+        setCreateName("");
+        setCreateDialogOpen(false);
+        await reload();
+    };
+    const openEdit = (group) => {
+        setEditTarget(group);
+        setEditName(group.displayName);
+    };
+    const handleEdit = async () => {
+        if (!editTarget || !editName.trim())
+            return;
+        await apiRef.current.updateGroup(editTarget.id, editName.trim());
+        setEditTarget(null);
+        setEditName("");
+        await reload();
+    };
+    const handleConfirmToggleActive = async () => {
+        if (!toggleTarget)
+            return;
+        if (toggleTarget.deactivatedAt) {
+            await apiRef.current.reactivateGroup(toggleTarget.id);
+        }
+        else {
+            await apiRef.current.deactivateGroup(toggleTarget.id);
+        }
+        setToggleTarget(null);
+        await reload();
+    };
+    const columns = useMemo(() => [
+        {
+            accessor: "displayName",
+            header: t("accessControlPage.columnName"),
+            cell: (_value, row) => (_jsx("button", { className: "font-medium text-primary hover:underline", onClick: () => navigate(`/_access-control/groups/${row.id}`), children: row.displayName })),
+        },
+        {
+            accessor: "deactivatedAt",
+            header: t("common.status"),
+            cell: (_value, row) => (_jsx(StatusBadge, { status: row.deactivatedAt ? "inactive" : "active", label: row.deactivatedAt ? t("common.disabled") : t("common.enabled") })),
+        },
+        {
+            accessor: "isProtected",
+            header: t("accessControlPage.columnProtected"),
+            cell: (_value, row) => row.isProtected ? (_jsx(Badge, { variant: "secondary", children: t("accessControlPage.protectedGroup") })) : null,
+        },
+        {
+            accessor: "id",
+            header: t("common.actions"),
+            sticky: "right",
+            cell: (_value, row) => (_jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => navigate(`/_access-control/groups/${row.id}`), children: t("accessControlPage.viewGroup") }), canManage && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", disabled: row.isProtected, onClick: () => openEdit(row), children: t("common.edit") }), _jsx(Button, { variant: "outline", size: "sm", disabled: row.isProtected, onClick: () => setToggleTarget(row), children: row.deactivatedAt ? t("accessControlPage.reactivate") : t("accessControlPage.deactivate") })] }))] })),
+        },
+    ], [t, navigate, canManage]);
+    const showInitialLoading = !hasLoaded && isFiltering;
+    const showTable = hasLoaded && !error;
+    return (_jsxs("section", { "data-testid": "access-control-groups-page", className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("h2", { className: "text-xl font-semibold", children: t("accessControlPage.groupsTitle") }), canManage && (_jsx(Button, { onClick: () => { setCreateName(""); setCreateDialogOpen(true); }, "data-testid": "access-control-create-group", children: t("common.create") }))] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Input, { placeholder: t("common.search"), value: search, onChange: (event) => setSearch(event.target.value), onKeyDown: (event) => { if (event.key === "Enter")
+                            commitSearch(); }, onBlur: commitSearch, className: "max-w-xs" }), _jsx("div", { className: "flex gap-2", children: ["all", "active", "inactive"].map((status) => (_jsx(Button, { variant: statusFilter === status ? "default" : "outline", size: "sm", onClick: () => setStatusFilter(status), "data-testid": `access-control-status-${status}`, children: t(`accessControlPage.status${status.charAt(0).toUpperCase()}${status.slice(1)}`) }, status))) })] }), showInitialLoading ? (_jsx(LoadingState, { text: t("common.loading") })) : error ? (_jsx(EmptyState, { title: t("common.error"), description: error, action: { label: t("common.retry"), onClick: () => reload() } })) : showTable ? (_jsxs("div", { children: [_jsx("div", { className: isFiltering
+                            ? "pointer-events-none opacity-50 transition-opacity duration-200"
+                            : "transition-opacity duration-200", children: _jsx(DataTable, { data: groups, columns: columns, emptyState: _jsx(EmptyState, { title: t("accessControlPage.noGroupsTitle"), description: t("accessControlPage.noGroupsDescription") }) }) }), nextCursor !== null && (_jsx("div", { ref: sentinelRef, className: "flex justify-center py-4", children: isLoadingMore && (_jsx("div", { className: "min-h-0 py-2", children: _jsx(LoadingState, { text: t("common.loading") }) })) }))] })) : null, _jsx(Dialog, { open: createDialogOpen, onOpenChange: setCreateDialogOpen, children: _jsxs(DialogContent, { className: "max-w-sm", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t("common.create") }), _jsx(DialogDescription, { children: t("accessControlPage.promptCreateGroup") })] }), _jsx(Input, { placeholder: t("accessControlPage.columnName"), value: createName, onChange: (event) => setCreateName(event.target.value), autoFocus: true, onKeyDown: (event) => { if (event.key === "Enter")
+                                handleCreate(); } }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setCreateDialogOpen(false), children: t("common.cancel") }), _jsx(Button, { onClick: handleCreate, disabled: !createName.trim(), children: t("common.create") })] })] }) }), _jsx(Dialog, { open: editTarget !== null, onOpenChange: (open) => { if (!open)
+                    setEditTarget(null); }, children: _jsxs(DialogContent, { className: "max-w-sm", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t("common.edit") }), _jsx(DialogDescription, { children: t("accessControlPage.promptEditGroup") })] }), _jsx(Input, { placeholder: t("accessControlPage.columnName"), value: editName, onChange: (event) => setEditName(event.target.value), autoFocus: true, onKeyDown: (event) => { if (event.key === "Enter")
+                                handleEdit(); } }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setEditTarget(null), children: t("common.cancel") }), _jsx(Button, { onClick: handleEdit, disabled: !editName.trim(), children: t("common.save") })] })] }) }), _jsx(Dialog, { open: toggleTarget !== null, onOpenChange: (open) => { if (!open)
+                    setToggleTarget(null); }, children: _jsxs(DialogContent, { className: "max-w-sm", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: toggleDisplay?.deactivatedAt
+                                        ? t("accessControlPage.reactivate")
+                                        : t("accessControlPage.deactivate") }), _jsx(DialogDescription, { children: toggleDisplay?.deactivatedAt
+                                        ? t("accessControlPage.confirmReactivate", { group: toggleDisplay?.displayName ?? "" })
+                                        : t("accessControlPage.confirmDeactivate", { group: toggleDisplay?.displayName ?? "" }) })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setToggleTarget(null), children: t("common.cancel") }), _jsx(Button, { variant: toggleDisplay?.deactivatedAt ? "default" : "destructive", onClick: handleConfirmToggleActive, children: toggleDisplay?.deactivatedAt
+                                        ? t("accessControlPage.reactivate")
+                                        : t("accessControlPage.deactivate") })] })] }) })] }));
+}

package/dist/shell/components/access-control/AccessControlLayout.d.ts

@@ -0,0 +1,8 @@
+export interface AccessControlOutletContext {
+    apiUrl?: string;
+}
+interface AccessControlLayoutProps {
+    apiUrl?: string;
+}
+export declare function AccessControlLayout({ apiUrl }: AccessControlLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shell/components/access-control/AccessControlLayout.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { useAuth } from "../../../hooks/useAuth";
+import { useI18n } from "../../../hooks/useI18n";
+export function AccessControlLayout({ apiUrl }) {
+    const auth = useAuth();
+    const { t } = useI18n();
+    const location = useLocation();
+    const AC_SUB_PERMISSIONS = [
+        "admin.platform.access-control.groups.view",
+        "admin.platform.access-control.groups.manage",
+        "admin.platform.access-control.users.view",
+        "admin.platform.access-control.audit.view",
+    ];
+    const hasAnyAcPermission = AC_SUB_PERMISSIONS.some((p) => auth.hasPermission(p));
+    if (!hasAnyAcPermission) {
+        return (_jsxs("div", { "data-testid": "access-control-forbidden", children: [_jsx("h1", { className: "text-2xl font-semibold", children: t("errors.accessDenied") }), _jsx("p", { className: "mt-2 text-muted-foreground", children: t("accessControlPage.noAccess") })] }));
+    }
+    if (location.pathname === "/_access-control" || location.pathname === "/_access-control/") {
+        return _jsx(Navigate, { to: "/_access-control/groups", replace: true });
+    }
+    return (_jsx("div", { "data-testid": "access-control-layout", children: _jsx(Outlet, { context: { apiUrl } }) }));
+}

package/dist/shell/components/access-control/AccessControlMemberPicker.d.ts

@@ -0,0 +1,10 @@
+import type { AccessControlUserSummary } from "./api";
+interface AccessControlMemberPickerProps {
+    existingMemberIds: number[];
+    isLoading: boolean;
+    users: AccessControlUserSummary[];
+    onSearchChange: (value: string) => void;
+    onAddMembers: (userIds: number[]) => Promise<void>;
+}
+export declare function AccessControlMemberPicker({ existingMemberIds, isLoading, users, onSearchChange, onAddMembers, }: AccessControlMemberPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shell/components/access-control/AccessControlMemberPicker.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Badge, Button, Checkbox, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Input, Separator, } from "@nsxbet/admin-ui";
+export function AccessControlMemberPicker({ existingMemberIds, isLoading, users, onSearchChange, onAddMembers, }) {
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const [selectedUsers, setSelectedUsers] = useState([]);
+    const debouncedSearch = useCallback((value) => {
+        onSearchChange(value);
+    }, [onSearchChange]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const timer = window.setTimeout(() => {
+            debouncedSearch(search);
+        }, 200);
+        return () => window.clearTimeout(timer);
+    }, [debouncedSearch, search, open]);
+    useEffect(() => {
+        if (open) {
+            setSearch("");
+            setSelectedUsers([]);
+            debouncedSearch("");
+        }
+    }, [open, debouncedSearch]);
+    const selectedIds = useMemo(() => new Set(selectedUsers.map((u) => u.id)), [selectedUsers]);
+    const selectableUsers = useMemo(() => {
+        const excludedIds = new Set(existingMemberIds);
+        return users.filter((user) => !excludedIds.has(user.id) && !selectedIds.has(user.id));
+    }, [existingMemberIds, selectedIds, users]);
+    const toggleUser = (user, checked) => {
+        setSelectedUsers((current) => checked ? [...current, user] : current.filter((u) => u.id !== user.id));
+    };
+    const handleAdd = async () => {
+        if (selectedUsers.length === 0)
+            return;
+        await onAddMembers(selectedUsers.map((u) => u.id));
+        setSelectedUsers([]);
+        setOpen(false);
+    };
+    const hasResults = !isLoading && selectableUsers.length > 0;
+    const showEmpty = !isLoading && selectableUsers.length === 0 && selectedUsers.length === 0;
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { size: "sm", "data-testid": "access-control-add-members-trigger", children: "Add Members" }) }), _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Add Members" }), _jsx(DialogDescription, { children: "Search and select known local users to add to this group." })] }), _jsx(Input, { placeholder: "Search by name or email", value: search, onChange: (event) => setSearch(event.target.value), autoFocus: true }), _jsxs("div", { className: "max-h-72 space-y-1 overflow-auto rounded border p-2", children: [selectedUsers.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 px-1 pb-1", children: [_jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Selected" }), _jsx(Badge, { variant: "secondary", className: "text-[10px]", children: selectedUsers.length })] }), selectedUsers.map((user) => (_jsxs("label", { className: "flex cursor-pointer items-center gap-3 rounded bg-muted/40 px-2 py-1.5 hover:bg-muted", children: [_jsx(Checkbox, { checked: true, onCheckedChange: () => toggleUser(user, false) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium", children: user.displayName }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: user.email })] })] }, user.id))), (hasResults || isLoading) && _jsx(Separator, { className: "my-2" })] })), isLoading ? (_jsx("div", { className: "py-4 text-center text-sm text-muted-foreground", children: "Loading..." })) : showEmpty ? (_jsx("div", { className: "py-4 text-center text-sm text-muted-foreground", children: "No users found." })) : (selectableUsers.map((user) => (_jsxs("label", { className: "flex cursor-pointer items-center gap-3 rounded px-2 py-1.5 hover:bg-muted", children: [_jsx(Checkbox, { checked: false, onCheckedChange: (checked) => toggleUser(user, checked === true) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate text-sm font-medium", children: user.displayName }), _jsx("div", { className: "truncate text-xs text-muted-foreground", children: user.email })] })] }, user.id))))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), children: "Cancel" }), _jsxs(Button, { onClick: handleAdd, disabled: selectedUsers.length === 0, "data-testid": "access-control-add-members", children: ["Add ", selectedUsers.length > 0 ? `(${selectedUsers.length})` : ""] })] })] })] }));
+}