nucleus-core-ts 0.8.7 → 0.8.8

package/dist/fe/components/UsersPage/components/UsersPage.js

@@ -0,0 +1,556 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { cn } from "../../../utils/cn";
+import { Button } from "../../Button";
+import { useUsersStore } from "../store";
+import { usersPageTheme } from "../theme";
+import { InviteUserModal } from "./InviteUserModal";
+import { Pagination } from "./Pagination";
+import { StatsCards } from "./StatsCards";
+import { UserDetailDrawer } from "./UserDetailDrawer";
+import { UserFilters } from "./UserFilters";
+import { UserListItem } from "./UserListItem";
+import { UserListSkeleton } from "./UserListSkeleton";
+gsap.registerPlugin(useGSAP);
+export function UsersPage({ title = "User Management", subtitle, className, theme: customTheme, getUsersAction, updateUserAction, getProfilesAction, getAddressesAction, getPhonesAction, getFilesAction, getRolesAction, getUserRolesAction, addUserRoleAction, deleteUserRoleAction, passwordResetRequestAction, magicLinkRequestAction, inviteUserAction, onUserUpdated, onRoleAssigned, onRoleRemoved, onUserInvited }) {
+    const theme = customTheme ? {
+        ...usersPageTheme,
+        ...customTheme
+    } : usersPageTheme;
+    const store = useUsersStore();
+    const containerRef = useRef(null);
+    const contentRef = useRef(null);
+    const [actionLoading, setActionLoading] = useState(null);
+    const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
+    const [isInviting, setIsInviting] = useState(false);
+    const searchTimeoutRef = useRef(null);
+    useGSAP(()=>{
+        if (!contentRef.current) return;
+        gsap.fromTo(contentRef.current, {
+            opacity: 0,
+            y: 10
+        }, {
+            opacity: 1,
+            y: 0,
+            duration: 0.3,
+            ease: "power2.out"
+        });
+    }, {
+        scope: containerRef
+    });
+    const fetchUsers = useEffectEvent((page = store.currentPage, limit = store.pageSize)=>{
+        store.setIsLoading(true);
+        getUsersAction.start({
+            payload: {
+                page,
+                limit
+            },
+            onAfterHandle: (data)=>{
+                store.setIsLoading(false);
+                if (data.data) {
+                    store.setUsers(data.data.items || []);
+                    store.setPagination(data.data.meta?.totalItems || 0, data.data.meta?.totalPages || 1);
+                }
+            },
+            onErrorHandle: ()=>{
+                store.setIsLoading(false);
+            }
+        });
+    });
+    const fetchRelatedData = useEffectEvent(()=>{
+        getProfilesAction.start({
+            payload: {
+                page: 1,
+                limit: 1000
+            },
+            onAfterHandle: (data)=>{
+                if (data.data?.items) store.setProfiles(data.data.items);
+            }
+        });
+        getAddressesAction.start({
+            payload: {
+                page: 1,
+                limit: 1000
+            },
+            onAfterHandle: (data)=>{
+                if (data.data?.items) store.setAddresses(data.data.items);
+            }
+        });
+        getPhonesAction.start({
+            payload: {
+                page: 1,
+                limit: 1000
+            },
+            onAfterHandle: (data)=>{
+                if (data.data?.items) store.setPhones(data.data.items);
+            }
+        });
+        getFilesAction.start({
+            payload: {
+                page: 1,
+                limit: 1000
+            },
+            onAfterHandle: (data)=>{
+                if (data.data?.items) store.setFiles(data.data.items);
+            }
+        });
+        getRolesAction.start({
+            payload: {
+                page: 1,
+                limit: 100
+            },
+            onAfterHandle: (data)=>{
+                if (data.data?.items) store.setRoles(data.data.items);
+            }
+        });
+        getUserRolesAction.start({
+            payload: {
+                page: 1,
+                limit: 5000
+            },
+            onAfterHandle: (data)=>{
+                if (data.data?.items) store.setUserRoles(data.data.items);
+            }
+        });
+    });
+    useEffect(()=>{
+        fetchUsers(1, store.pageSize);
+        fetchRelatedData();
+    }, []);
+    const handlePageChange = useEffectEvent((page)=>{
+        store.setCurrentPage(page);
+        fetchUsers(page, store.pageSize);
+    });
+    const handlePageSizeChange = useEffectEvent((size)=>{
+        store.setPageSize(size);
+        fetchUsers(1, size);
+    });
+    const handleRefresh = useEffectEvent(()=>{
+        fetchUsers(store.currentPage, store.pageSize);
+        fetchRelatedData();
+    });
+    const handleSearchChange = useEffectEvent((query)=>{
+        store.setSearchQuery(query);
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        searchTimeoutRef.current = setTimeout(()=>{
+            store.setCurrentPage(1);
+        }, 300);
+    });
+    const handleSelectUser = useEffectEvent((user)=>{
+        const userWithDetails = store.getUserWithDetails(user.id);
+        store.setSelectedUser(userWithDetails);
+    });
+    const handleClosePanel = useEffectEvent(()=>{
+        store.setDetailPanelOpen(false);
+    });
+    const handleVerifyEmail = useEffectEvent((userId)=>{
+        setActionLoading(`verify-${userId}`);
+        const user = store.users.find((u)=>u.id === userId);
+        if (!user) return;
+        store.updateUser(userId, {
+            verifiedAt: new Date().toISOString()
+        });
+        updateUserAction.start({
+            payload: {
+                id: userId,
+                verifiedAt: new Date().toISOString()
+            },
+            onAfterHandle: (data)=>{
+                setActionLoading(null);
+                if (data.data) {
+                    onUserUpdated?.(data.data);
+                    const updated = store.getUserWithDetails(userId);
+                    if (updated) store.setSelectedUser(updated);
+                }
+            },
+            onErrorHandle: ()=>{
+                setActionLoading(null);
+                store.updateUser(userId, {
+                    verifiedAt: user.verifiedAt
+                });
+            }
+        });
+    });
+    const handleLockAccount = useEffectEvent((userId)=>{
+        setActionLoading(`lock-${userId}`);
+        const user = store.users.find((u)=>u.id === userId);
+        if (!user) return;
+        store.updateUser(userId, {
+            isLocked: true
+        });
+        updateUserAction.start({
+            payload: {
+                id: userId,
+                isLocked: true
+            },
+            onAfterHandle: (data)=>{
+                setActionLoading(null);
+                if (data.data) {
+                    onUserUpdated?.(data.data);
+                    const updated = store.getUserWithDetails(userId);
+                    if (updated) store.setSelectedUser(updated);
+                }
+            },
+            onErrorHandle: ()=>{
+                setActionLoading(null);
+                store.updateUser(userId, {
+                    isLocked: user.isLocked
+                });
+            }
+        });
+    });
+    const handleUnlockAccount = useEffectEvent((userId)=>{
+        setActionLoading(`unlock-${userId}`);
+        const user = store.users.find((u)=>u.id === userId);
+        if (!user) return;
+        store.updateUser(userId, {
+            isLocked: false,
+            lockedUntil: undefined,
+            failedLoginAttempts: 0
+        });
+        updateUserAction.start({
+            payload: {
+                id: userId,
+                isLocked: false,
+                lockedUntil: undefined,
+                failedLoginAttempts: 0
+            },
+            onAfterHandle: (data)=>{
+                setActionLoading(null);
+                if (data.data) {
+                    onUserUpdated?.(data.data);
+                    const updated = store.getUserWithDetails(userId);
+                    if (updated) store.setSelectedUser(updated);
+                }
+            },
+            onErrorHandle: ()=>{
+                setActionLoading(null);
+                store.updateUser(userId, {
+                    isLocked: user.isLocked,
+                    lockedUntil: user.lockedUntil,
+                    failedLoginAttempts: user.failedLoginAttempts
+                });
+            }
+        });
+    });
+    const handleResetPassword = useEffectEvent((email)=>{
+        if (!passwordResetRequestAction) return;
+        setActionLoading(`reset-${email}`);
+        passwordResetRequestAction.start({
+            payload: {
+                email
+            },
+            onAfterHandle: ()=>{
+                setActionLoading(null);
+            },
+            onErrorHandle: ()=>{
+                setActionLoading(null);
+            }
+        });
+    });
+    const handleSendMagicLink = useEffectEvent((email)=>{
+        if (!magicLinkRequestAction) return;
+        setActionLoading(`magic-${email}`);
+        magicLinkRequestAction.start({
+            payload: {
+                email
+            },
+            onAfterHandle: ()=>{
+                setActionLoading(null);
+            },
+            onErrorHandle: ()=>{
+                setActionLoading(null);
+            }
+        });
+    });
+    const handleAssignRole = useEffectEvent((userId, roleId)=>{
+        const tempId = `temp-${Date.now()}`;
+        store.addUserRole({
+            id: tempId,
+            userId,
+            roleId
+        });
+        addUserRoleAction.start({
+            payload: {
+                userId,
+                roleId
+            },
+            onAfterHandle: (data)=>{
+                store.removeUserRole(tempId);
+                if (data.data) {
+                    store.addUserRole(data.data);
+                    onRoleAssigned?.(userId, roleId);
+                    const updated = store.getUserWithDetails(userId);
+                    if (updated) store.setSelectedUser(updated);
+                }
+            },
+            onErrorHandle: ()=>{
+                store.removeUserRole(tempId);
+            }
+        });
+    });
+    const handleRemoveRole = useEffectEvent((userRoleId)=>{
+        const userRole = store.userRoles.find((ur)=>ur.id === userRoleId);
+        if (!userRole) return;
+        store.removeUserRole(userRoleId);
+        deleteUserRoleAction.start({
+            payload: {
+                id: userRoleId
+            },
+            onAfterHandle: ()=>{
+                onRoleRemoved?.(userRole.userId, userRole.roleId);
+                const updated = store.getUserWithDetails(userRole.userId);
+                if (updated) store.setSelectedUser(updated);
+            },
+            onErrorHandle: ()=>{
+                store.addUserRole(userRole);
+            }
+        });
+    });
+    const handleInviteUser = useEffectEvent((email)=>{
+        if (!inviteUserAction) return;
+        setIsInviting(true);
+        inviteUserAction.start({
+            payload: {
+                email
+            },
+            onAfterHandle: ()=>{
+                setIsInviting(false);
+                setIsInviteModalOpen(false);
+                onUserInvited?.(email);
+                fetchUsers(store.currentPage, store.pageSize);
+            },
+            onErrorHandle: ()=>{
+                setIsInviting(false);
+            }
+        });
+    });
+    const handleResendInvite = useEffectEvent((email)=>{
+        if (!inviteUserAction) return;
+        setActionLoading(`invite-${email}`);
+        inviteUserAction.start({
+            payload: {
+                email
+            },
+            onAfterHandle: ()=>{
+                setActionLoading(null);
+            },
+            onErrorHandle: ()=>{
+                setActionLoading(null);
+            }
+        });
+    });
+    const stats = {
+        total: store.totalItems,
+        verified: store.users.filter((u)=>u.verifiedAt).length,
+        unverified: store.users.filter((u)=>!u.verifiedAt).length,
+        locked: store.users.filter((u)=>u.isLocked).length
+    };
+    const filteredUsers = store.users.filter((user)=>{
+        const profile = store.profiles.find((p)=>p.userId === user.id);
+        const displayName = profile?.firstName || profile?.lastName ? `${profile.firstName || ""} ${profile.lastName || ""}`.toLowerCase() : "";
+        const matchesSearch = store.searchQuery === "" || user.email.toLowerCase().includes(store.searchQuery.toLowerCase()) || displayName.includes(store.searchQuery.toLowerCase());
+        const matchesStatus = store.statusFilter === "all" || store.statusFilter === "locked" && user.isLocked || store.statusFilter === "active" && !user.isLocked && user.verifiedAt || store.statusFilter === "unverified" && !user.verifiedAt;
+        const matchesRole = store.roleFilter === "all" || store.userRoles.some((ur)=>ur.userId === user.id && ur.roleId === store.roleFilter);
+        return matchesSearch && matchesStatus && matchesRole;
+    });
+    const getUserWithDetailsForList = (userId)=>{
+        const user = store.users.find((u)=>u.id === userId);
+        if (!user) return {};
+        const profile = store.profiles.find((p)=>p.userId === userId);
+        const userRoles = store.userRoles.filter((ur)=>ur.userId === userId).map((ur)=>({
+                ...ur,
+                role: store.roles.find((r)=>r.id === ur.roleId)
+            }));
+        return {
+            ...user,
+            profile: profile || null,
+            userRoles
+        };
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: containerRef,
+        className: cn(theme.container.base, "p-3 sm:p-4 md:p-6 lg:p-8 xl:p-10", className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                ref: contentRef,
+                className: "max-w-7xl mx-auto",
+                children: [
+                    /*#__PURE__*/ _jsxs("header", {
+                        className: cn(theme.header.wrapper),
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("h1", {
+                                        className: cn(theme.header.title),
+                                        children: title
+                                    }),
+                                    subtitle && /*#__PURE__*/ _jsx("p", {
+                                        className: cn(theme.header.subtitle),
+                                        children: subtitle
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: cn(theme.header.actions),
+                                children: inviteUserAction && /*#__PURE__*/ _jsxs(Button, {
+                                    variant: "primary",
+                                    size: "md",
+                                    onClick: ()=>setIsInviteModalOpen(true),
+                                    leftIcon: /*#__PURE__*/ _jsx("svg", {
+                                        className: "w-4 h-4",
+                                        fill: "none",
+                                        stroke: "currentColor",
+                                        viewBox: "0 0 24 24",
+                                        "aria-hidden": "true",
+                                        children: /*#__PURE__*/ _jsx("path", {
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round",
+                                            strokeWidth: 2,
+                                            d: "M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
+                                        })
+                                    }),
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "hidden sm:inline",
+                                            children: "Invite User"
+                                        }),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "sm:hidden",
+                                            children: "Invite"
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(StatsCards, {
+                        theme: theme,
+                        totalUsers: stats.total,
+                        verifiedUsers: stats.verified,
+                        lockedUsers: stats.locked,
+                        unverifiedUsers: stats.unverified
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: cn(theme.layout.wrapper),
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: cn(theme.layout.sidebar.base, store.isDetailPanelOpen ? theme.layout.sidebar.expanded : theme.layout.sidebar.collapsed),
+                                children: [
+                                    /*#__PURE__*/ _jsx(UserFilters, {
+                                        theme: theme,
+                                        searchQuery: store.searchQuery,
+                                        statusFilter: store.statusFilter,
+                                        roleFilter: store.roleFilter,
+                                        roles: store.roles,
+                                        totalCount: store.totalItems,
+                                        filteredCount: filteredUsers.length,
+                                        onSearchChange: handleSearchChange,
+                                        onStatusChange: store.setStatusFilter,
+                                        onRoleChange: store.setRoleFilter,
+                                        onRefresh: handleRefresh,
+                                        isLoading: store.isLoading
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: cn(theme.table.wrapper),
+                                        children: /*#__PURE__*/ _jsx("div", {
+                                            className: "max-h-[calc(100vh-380px)] sm:max-h-[calc(100vh-340px)] lg:max-h-[calc(100vh-300px)] overflow-y-auto",
+                                            children: store.isLoading ? /*#__PURE__*/ _jsx(UserListSkeleton, {
+                                                theme: theme,
+                                                count: store.pageSize > 10 ? 10 : store.pageSize
+                                            }) : filteredUsers.length === 0 ? /*#__PURE__*/ _jsxs("div", {
+                                                className: cn(theme.emptyState.wrapper),
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("svg", {
+                                                        className: cn(theme.emptyState.icon),
+                                                        fill: "none",
+                                                        stroke: "currentColor",
+                                                        viewBox: "0 0 24 24",
+                                                        "aria-hidden": "true",
+                                                        children: /*#__PURE__*/ _jsx("path", {
+                                                            strokeLinecap: "round",
+                                                            strokeLinejoin: "round",
+                                                            strokeWidth: 1.5,
+                                                            d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("h3", {
+                                                        className: cn(theme.emptyState.title),
+                                                        children: "No users found"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("p", {
+                                                        className: cn(theme.emptyState.description),
+                                                        children: store.searchQuery || store.statusFilter !== "all" || store.roleFilter !== "all" ? "Try adjusting your filters" : "No users have been created yet"
+                                                    })
+                                                ]
+                                            }) : /*#__PURE__*/ _jsx("div", {
+                                                className: "divide-y divide-zinc-100 dark:divide-zinc-800/50",
+                                                children: filteredUsers.map((user)=>/*#__PURE__*/ _jsx(UserListItem, {
+                                                        theme: theme,
+                                                        user: getUserWithDetailsForList(user.id),
+                                                        roles: store.roles,
+                                                        isSelected: store.selectedUser?.id === user.id,
+                                                        onSelect: handleSelectUser
+                                                    }, user.id))
+                                            })
+                                        })
+                                    }),
+                                    store.totalPages > 1 && /*#__PURE__*/ _jsx(Pagination, {
+                                        theme: theme,
+                                        currentPage: store.currentPage,
+                                        totalPages: store.totalPages,
+                                        totalItems: store.totalItems,
+                                        pageSize: store.pageSize,
+                                        pageSizeOptions: [
+                                            10,
+                                            25,
+                                            50,
+                                            100
+                                        ],
+                                        onPageChange: handlePageChange,
+                                        onPageSizeChange: handlePageSizeChange
+                                    })
+                                ]
+                            }),
+                            store.isDetailPanelOpen && /*#__PURE__*/ _jsx("div", {
+                                className: cn(theme.layout.main),
+                                children: /*#__PURE__*/ _jsx(UserDetailDrawer, {
+                                    theme: theme,
+                                    user: store.selectedUser,
+                                    roles: store.roles,
+                                    allUserRoles: store.userRoles,
+                                    isOpen: store.isDetailPanelOpen,
+                                    actionLoading: actionLoading,
+                                    onClose: handleClosePanel,
+                                    onVerifyEmail: handleVerifyEmail,
+                                    onLockAccount: handleLockAccount,
+                                    onUnlockAccount: handleUnlockAccount,
+                                    onResetPassword: handleResetPassword,
+                                    onSendMagicLink: handleSendMagicLink,
+                                    onResendInvite: handleResendInvite,
+                                    onAssignRole: handleAssignRole,
+                                    onRemoveRole: handleRemoveRole,
+                                    hasPasswordReset: !!passwordResetRequestAction,
+                                    hasMagicLink: !!magicLinkRequestAction,
+                                    hasInvite: !!inviteUserAction
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(InviteUserModal, {
+                theme: theme,
+                isOpen: isInviteModalOpen,
+                isLoading: isInviting,
+                onClose: ()=>setIsInviteModalOpen(false),
+                onInvite: handleInviteUser
+            })
+        ]
+    });
+}

package/dist/fe/components/UsersPage/index.js

@@ -0,0 +1,10 @@
+export { InviteUserModal } from "./components/InviteUserModal";
+export { Pagination } from "./components/Pagination";
+export { StatsCards } from "./components/StatsCards";
+export { UserDetailDrawer } from "./components/UserDetailDrawer";
+export { UserFilters } from "./components/UserFilters";
+export { UserListItem } from "./components/UserListItem";
+export { UserListSkeleton } from "./components/UserListSkeleton";
+export { UsersPage } from "./components/UsersPage";
+export { useUsersStore } from "./store";
+export { extendUsersPageTheme, usersPageTheme } from "./theme";