nucleus-core-ts 0.8.6 → 0.8.8

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

@@ -0,0 +1,444 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../../utils/cn";
+import { Button } from "../../Button";
+import { RoleAssignmentModal } from "./RoleAssignmentModal";
+export function UserDetailDrawer({ theme, user, roles, allUserRoles, isOpen, actionLoading, onClose, onVerifyEmail, onLockAccount, onUnlockAccount, onResetPassword, onSendMagicLink, onResendInvite, onAssignRole, onRemoveRole, hasPasswordReset = false, hasMagicLink = false, hasInvite = false }) {
+    const drawerRef = useRef(null);
+    const [isRoleModalOpen, setIsRoleModalOpen] = useState(false);
+    useEffect(()=>{
+        const handleEscape = (e)=>{
+            if (e.key === "Escape" && isOpen) {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        return ()=>document.removeEventListener("keydown", handleEscape);
+    }, [
+        isOpen,
+        onClose
+    ]);
+    useEffect(()=>{
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+        } else {
+            document.body.style.overflow = "";
+        }
+        return ()=>{
+            document.body.style.overflow = "";
+        };
+    }, [
+        isOpen
+    ]);
+    if (!user || !isOpen) return null;
+    const formatDate = (date)=>{
+        if (!date) return "Never";
+        const d = typeof date === "string" ? new Date(date) : date;
+        return d.toLocaleDateString("en-US", {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "2-digit",
+            minute: "2-digit"
+        });
+    };
+    const getUserDisplayName = ()=>{
+        if (user.profile?.firstName || user.profile?.lastName) {
+            return `${user.profile.firstName || ""} ${user.profile.lastName || ""}`.trim();
+        }
+        return user.email.split("@")[0];
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: cn(theme.detailPanel.overlay),
+                onClick: onClose,
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                ref: drawerRef,
+                className: cn(theme.detailPanel.wrapper.base, "lg:relative", theme.detailPanel.wrapper.mobile, "sm:rounded-t-2xl md:rounded-none", "md:fixed md:inset-y-0 md:right-0 md:w-[400px] md:rounded-l-2xl", "lg:static lg:w-full lg:rounded-xl"),
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: cn(theme.detailPanel.header.wrapper),
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("h2", {
+                                        className: cn(theme.detailPanel.header.title),
+                                        children: getUserDisplayName()
+                                    }),
+                                    /*#__PURE__*/ _jsx("p", {
+                                        className: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5",
+                                        children: user.email
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "ghost",
+                                size: "sm",
+                                onClick: onClose,
+                                "aria-label": "Close panel",
+                                iconOnly: true,
+                                children: /*#__PURE__*/ _jsx("svg", {
+                                    className: "w-5 h-5",
+                                    fill: "none",
+                                    stroke: "currentColor",
+                                    viewBox: "0 0 24 24",
+                                    "aria-hidden": "true",
+                                    children: /*#__PURE__*/ _jsx("path", {
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round",
+                                        strokeWidth: 2,
+                                        d: "M6 18L18 6M6 6l12 12"
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: cn(theme.detailPanel.content.wrapper),
+                        children: [
+                            /*#__PURE__*/ _jsxs("section", {
+                                className: cn(theme.detailPanel.content.section.wrapper),
+                                children: [
+                                    /*#__PURE__*/ _jsx("h3", {
+                                        className: cn(theme.detailPanel.content.section.title),
+                                        children: "Account Status"
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: cn(theme.detailPanel.content.section.content),
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: cn(theme.detailPanel.content.row.wrapper),
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: cn(theme.detailPanel.content.row.label),
+                                                        children: "Status"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: cn("text-sm font-medium", user.isLocked ? "text-red-600 dark:text-red-400" : user.verifiedAt ? "text-emerald-600 dark:text-emerald-400" : "text-amber-600 dark:text-amber-400"),
+                                                        children: user.isLocked ? "Locked" : user.verifiedAt ? "Active" : "Unverified"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: cn(theme.detailPanel.content.row.wrapper),
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: cn(theme.detailPanel.content.row.label),
+                                                        children: "Last Login"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: cn(theme.detailPanel.content.row.value),
+                                                        children: formatDate(user.lastLoginAt)
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: cn(theme.detailPanel.content.row.wrapper),
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: cn(theme.detailPanel.content.row.label),
+                                                        children: "Login Count"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: cn(theme.detailPanel.content.row.value),
+                                                        children: user.loginCount || 0
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("div", {
+                                                className: cn(theme.detailPanel.content.row.wrapper),
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: cn(theme.detailPanel.content.row.label),
+                                                        children: "Created"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: cn(theme.detailPanel.content.row.value),
+                                                        children: formatDate(user.createdAt)
+                                                    })
+                                                ]
+                                            }),
+                                            user.isLocked && user.lockedUntil && /*#__PURE__*/ _jsxs("div", {
+                                                className: cn(theme.detailPanel.content.row.wrapper),
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: cn(theme.detailPanel.content.row.label),
+                                                        children: "Locked Until"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: cn(theme.detailPanel.content.row.value),
+                                                        children: formatDate(user.lockedUntil)
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            user.profile && /*#__PURE__*/ _jsxs("section", {
+                                className: cn(theme.detailPanel.content.section.wrapper),
+                                children: [
+                                    /*#__PURE__*/ _jsx("h3", {
+                                        className: cn(theme.detailPanel.content.section.title),
+                                        children: "Profile"
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: cn(theme.detailPanel.content.section.content),
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: cn(theme.detailPanel.content.row.wrapper),
+                                            children: [
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: cn(theme.detailPanel.content.row.label),
+                                                    children: "Name"
+                                                }),
+                                                /*#__PURE__*/ _jsxs("span", {
+                                                    className: cn(theme.detailPanel.content.row.value),
+                                                    children: [
+                                                        user.profile.firstName,
+                                                        " ",
+                                                        user.profile.lastName
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            user.addresses && user.addresses.length > 0 && /*#__PURE__*/ _jsxs("section", {
+                                className: cn(theme.detailPanel.content.section.wrapper),
+                                children: [
+                                    /*#__PURE__*/ _jsxs("h3", {
+                                        className: cn(theme.detailPanel.content.section.title),
+                                        children: [
+                                            "Addresses (",
+                                            user.addresses.length,
+                                            ")"
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "space-y-2",
+                                        children: user.addresses.map((addr)=>/*#__PURE__*/ _jsxs("div", {
+                                                className: cn(theme.detailPanel.content.section.content),
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("div", {
+                                                        className: "text-sm font-medium text-zinc-900 dark:text-zinc-100",
+                                                        children: addr.name || "Address"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("div", {
+                                                        className: "text-sm text-zinc-500 dark:text-zinc-400",
+                                                        children: [
+                                                            addr.street,
+                                                            addr.city,
+                                                            addr.state,
+                                                            addr.zip,
+                                                            addr.country
+                                                        ].filter(Boolean).join(", ")
+                                                    })
+                                                ]
+                                            }, addr.id))
+                                    })
+                                ]
+                            }),
+                            user.phones && user.phones.length > 0 && /*#__PURE__*/ _jsxs("section", {
+                                className: cn(theme.detailPanel.content.section.wrapper),
+                                children: [
+                                    /*#__PURE__*/ _jsxs("h3", {
+                                        className: cn(theme.detailPanel.content.section.title),
+                                        children: [
+                                            "Phones (",
+                                            user.phones.length,
+                                            ")"
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "space-y-2",
+                                        children: user.phones.map((phone)=>/*#__PURE__*/ _jsxs("div", {
+                                                className: cn(theme.detailPanel.content.section.content, "flex justify-between items-center"),
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("span", {
+                                                        className: "text-sm text-zinc-500 dark:text-zinc-400",
+                                                        children: phone.name || phone.type || "Phone"
+                                                    }),
+                                                    /*#__PURE__*/ _jsxs("span", {
+                                                        className: "text-sm font-medium text-zinc-900 dark:text-zinc-100",
+                                                        children: [
+                                                            phone.countryCode,
+                                                            " ",
+                                                            phone.number
+                                                        ]
+                                                    })
+                                                ]
+                                            }, phone.id))
+                                    })
+                                ]
+                            }),
+                            user.files && user.files.length > 0 && /*#__PURE__*/ _jsxs("section", {
+                                className: cn(theme.detailPanel.content.section.wrapper),
+                                children: [
+                                    /*#__PURE__*/ _jsxs("h3", {
+                                        className: cn(theme.detailPanel.content.section.title),
+                                        children: [
+                                            "Files (",
+                                            user.files.length,
+                                            ")"
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "space-y-2",
+                                        children: [
+                                            user.files.slice(0, 5).map((file)=>/*#__PURE__*/ _jsx("div", {
+                                                    className: cn(theme.detailPanel.content.section.content, "flex justify-between items-center"),
+                                                    children: /*#__PURE__*/ _jsxs("div", {
+                                                        className: "min-w-0 flex-1",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("div", {
+                                                                className: "text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate",
+                                                                children: file.originalName || file.name
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs("div", {
+                                                                className: "text-xs text-zinc-500",
+                                                                children: [
+                                                                    file.mimeType,
+                                                                    " • ",
+                                                                    Math.round((file.size || 0) / 1024),
+                                                                    "KB"
+                                                                ]
+                                                            })
+                                                        ]
+                                                    })
+                                                }, file.id)),
+                                            user.files.length > 5 && /*#__PURE__*/ _jsxs("div", {
+                                                className: "text-xs text-zinc-500 dark:text-zinc-400 text-center py-1",
+                                                children: [
+                                                    "+",
+                                                    user.files.length - 5,
+                                                    " more files"
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("section", {
+                                className: cn(theme.detailPanel.content.section.wrapper),
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "flex items-center justify-between mb-3",
+                                        children: [
+                                            /*#__PURE__*/ _jsx("h3", {
+                                                className: cn(theme.detailPanel.content.section.title, "mb-0"),
+                                                children: "Roles"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Button, {
+                                                variant: "ghost",
+                                                size: "xs",
+                                                onClick: ()=>setIsRoleModalOpen(true),
+                                                className: "text-blue-600 hover:text-blue-700 dark:text-blue-400",
+                                                children: "Manage"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "flex flex-wrap gap-2",
+                                        children: user.userRoles && user.userRoles.length > 0 ? user.userRoles.map((ur)=>{
+                                            const role = roles.find((r)=>r.id === ur.roleId);
+                                            const isTempId = ur.id.startsWith("temp-");
+                                            return /*#__PURE__*/ _jsxs("span", {
+                                                className: cn("inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium", isTempId ? "bg-zinc-100 dark:bg-zinc-800 text-zinc-500" : "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300"),
+                                                children: [
+                                                    role?.name || "...",
+                                                    role?.name === "godmin" && /*#__PURE__*/ _jsx("svg", {
+                                                        className: "w-3 h-3 text-amber-500",
+                                                        fill: "currentColor",
+                                                        viewBox: "0 0 20 20",
+                                                        "aria-hidden": "true",
+                                                        children: /*#__PURE__*/ _jsx("path", {
+                                                            fillRule: "evenodd",
+                                                            d: "M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z",
+                                                            clipRule: "evenodd"
+                                                        })
+                                                    })
+                                                ]
+                                            }, ur.id);
+                                        }) : /*#__PURE__*/ _jsx("span", {
+                                            className: "text-sm text-zinc-500 dark:text-zinc-400",
+                                            children: "No roles assigned"
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(RoleAssignmentModal, {
+                                isOpen: isRoleModalOpen,
+                                roles: roles,
+                                userRoles: allUserRoles,
+                                userId: user.id,
+                                onClose: ()=>setIsRoleModalOpen(false),
+                                onAssignRole: onAssignRole,
+                                onRemoveRole: onRemoveRole
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: cn(theme.detailPanel.actions.wrapper),
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "grid grid-cols-2 gap-2",
+                            children: [
+                                !user.verifiedAt && /*#__PURE__*/ _jsx(Button, {
+                                    variant: "success",
+                                    size: "sm",
+                                    onClick: ()=>onVerifyEmail(user.id),
+                                    loading: actionLoading === `verify-${user.id}`,
+                                    fullWidth: true,
+                                    children: "Verify Email"
+                                }),
+                                user.isLocked ? /*#__PURE__*/ _jsx(Button, {
+                                    variant: "primary",
+                                    size: "sm",
+                                    onClick: ()=>onUnlockAccount(user.id),
+                                    loading: actionLoading === `unlock-${user.id}`,
+                                    fullWidth: true,
+                                    children: "Unlock Account"
+                                }) : /*#__PURE__*/ _jsx(Button, {
+                                    variant: "danger",
+                                    size: "sm",
+                                    onClick: ()=>onLockAccount(user.id),
+                                    loading: actionLoading === `lock-${user.id}`,
+                                    fullWidth: true,
+                                    children: "Lock Account"
+                                }),
+                                hasPasswordReset && /*#__PURE__*/ _jsx(Button, {
+                                    variant: "warning",
+                                    size: "sm",
+                                    onClick: ()=>onResetPassword(user.email),
+                                    loading: actionLoading === `reset-${user.email}`,
+                                    fullWidth: true,
+                                    children: "Reset Password"
+                                }),
+                                hasMagicLink && /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    size: "sm",
+                                    onClick: ()=>onSendMagicLink(user.email),
+                                    loading: actionLoading === `magic-${user.email}`,
+                                    fullWidth: true,
+                                    children: "Send Magic Link"
+                                }),
+                                hasInvite && !user.verifiedAt && !user.lastLoginAt && /*#__PURE__*/ _jsx(Button, {
+                                    variant: "primary",
+                                    size: "sm",
+                                    onClick: ()=>onResendInvite(user.email),
+                                    loading: actionLoading === `invite-${user.email}`,
+                                    fullWidth: true,
+                                    children: "Resend Invite"
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,142 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn";
+import { Button } from "../../Button";
+import { NucleusTextInput } from "../../NucleusTextInput";
+import { SelectBox } from "../../SelectBox";
+export function UserFilters({ theme, searchQuery, statusFilter, roleFilter, roles, totalCount, filteredCount, onSearchChange, onStatusChange, onRoleChange, onRefresh, isLoading }) {
+    const statusOptions = [
+        {
+            value: "all",
+            label: "All Status"
+        },
+        {
+            value: "active",
+            label: "Active"
+        },
+        {
+            value: "locked",
+            label: "Locked"
+        },
+        {
+            value: "unverified",
+            label: "Unverified"
+        }
+    ];
+    const roleOptions = [
+        {
+            value: "all",
+            label: "All Roles"
+        },
+        ...roles.map((role)=>({
+                value: role.id,
+                label: role.name
+            }))
+    ];
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(theme.filters.wrapper),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col sm:flex-row gap-3",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex-1",
+                        children: /*#__PURE__*/ _jsx(NucleusTextInput, {
+                            type: "text",
+                            value: searchQuery,
+                            onChange: (val)=>onSearchChange(val),
+                            placeholder: "Search by name or email...",
+                            size: "md",
+                            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: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                                })
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-wrap gap-2",
+                        children: [
+                            /*#__PURE__*/ _jsx(SelectBox, {
+                                options: statusOptions,
+                                value: statusFilter,
+                                onChange: (val)=>{
+                                    if (val) onStatusChange(val);
+                                },
+                                placeholder: "Status",
+                                size: "md",
+                                className: "min-w-[140px]"
+                            }),
+                            /*#__PURE__*/ _jsx(SelectBox, {
+                                options: roleOptions,
+                                value: roleFilter,
+                                onChange: (val)=>{
+                                    if (val) onRoleChange(val);
+                                },
+                                placeholder: "Role",
+                                size: "md",
+                                searchable: roles.length > 5,
+                                className: "min-w-[140px]"
+                            }),
+                            onRefresh && /*#__PURE__*/ _jsx(Button, {
+                                variant: "outline",
+                                size: "md",
+                                onClick: onRefresh,
+                                loading: isLoading,
+                                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: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                                    })
+                                }),
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    className: "hidden sm:inline",
+                                    children: "Refresh"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400",
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            "Showing ",
+                            filteredCount,
+                            " of ",
+                            totalCount,
+                            " users"
+                        ]
+                    }),
+                    (statusFilter !== "all" || roleFilter !== "all" || searchQuery) && /*#__PURE__*/ _jsx(Button, {
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: ()=>{
+                            onSearchChange("");
+                            onStatusChange("all");
+                            onRoleChange("all");
+                        },
+                        children: "Clear filters"
+                    })
+                ]
+            })
+        ]
+    });
+}