nucleus-core-ts 0.8.7 → 0.8.8

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

@@ -0,0 +1,186 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../../utils/cn";
+export function RoleAssignmentModal({ isOpen, roles, userRoles, userId, onClose, onAssignRole, onRemoveRole }) {
+    const modalRef = useRef(null);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [mounted, setMounted] = useState(false);
+    useEffect(()=>{
+        setMounted(true);
+    }, []);
+    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";
+            setSearchQuery("");
+        } else {
+            document.body.style.overflow = "";
+        }
+        return ()=>{
+            document.body.style.overflow = "";
+        };
+    }, [
+        isOpen
+    ]);
+    if (!isOpen || !mounted) return null;
+    const assignedRoleIds = userRoles.filter((ur)=>ur.userId === userId).map((ur)=>ur.roleId);
+    const filteredRoles = roles.filter((role)=>role.name.toLowerCase().includes(searchQuery.toLowerCase()));
+    const handleToggleRole = (role)=>{
+        const isAssigned = assignedRoleIds.includes(role.id);
+        if (isAssigned) {
+            const userRole = userRoles.find((ur)=>ur.userId === userId && ur.roleId === role.id);
+            if (userRole && !userRole.id.startsWith("temp-") && role.name !== "godmin") {
+                onRemoveRole(userRole.id);
+            }
+        } else {
+            onAssignRole(userId, role.id);
+        }
+    };
+    const isRoleDisabled = (role)=>{
+        if (role.name === "godmin") return true;
+        const userRole = userRoles.find((ur)=>ur.userId === userId && ur.roleId === role.id);
+        return userRole?.id.startsWith("temp-") || false;
+    };
+    const modalContent = /*#__PURE__*/ _jsxs("div", {
+        className: "fixed inset-0 flex items-center justify-center p-4",
+        style: {
+            zIndex: 99999
+        },
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "fixed inset-0 bg-black/60",
+                onClick: onClose,
+                "aria-hidden": "true"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                ref: modalRef,
+                className: "relative bg-white dark:bg-zinc-900 rounded-xl shadow-2xl w-full max-w-md max-h-[80vh] flex flex-col border border-zinc-200 dark:border-zinc-700",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between px-5 py-4 border-b border-zinc-200 dark:border-zinc-700",
+                        children: [
+                            /*#__PURE__*/ _jsx("h3", {
+                                className: "text-base font-semibold text-zinc-900 dark:text-white",
+                                children: "Manage Roles"
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: onClose,
+                                className: "p-1 rounded-md text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors",
+                                "aria-label": "Close",
+                                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__*/ _jsx("div", {
+                        className: "px-5 py-3 border-b border-zinc-200 dark:border-zinc-700",
+                        children: /*#__PURE__*/ _jsx("input", {
+                            type: "text",
+                            placeholder: "Search roles...",
+                            value: searchQuery,
+                            onChange: (e)=>setSearchQuery(e.target.value),
+                            className: "w-full px-3 py-2 text-sm bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg outline-none focus:ring-2 focus:ring-blue-500/50 text-zinc-900 dark:text-white placeholder:text-zinc-400"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex-1 overflow-y-auto px-3 py-2 min-h-[200px]",
+                        children: filteredRoles.length === 0 ? /*#__PURE__*/ _jsx("div", {
+                            className: "text-center py-8 text-zinc-500 dark:text-zinc-400 text-sm",
+                            children: "No roles found"
+                        }) : /*#__PURE__*/ _jsx("div", {
+                            className: "space-y-1",
+                            children: filteredRoles.map((role)=>{
+                                const isAssigned = assignedRoleIds.includes(role.id);
+                                const disabled = isRoleDisabled(role);
+                                return /*#__PURE__*/ _jsxs("button", {
+                                    type: "button",
+                                    onClick: ()=>!disabled && handleToggleRole(role),
+                                    disabled: disabled,
+                                    className: cn("w-full flex items-start gap-3 px-3 py-3 rounded-lg text-left transition-colors", disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-zinc-50 dark:hover:bg-zinc-800/50 cursor-pointer", isAssigned && !disabled && "bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30"),
+                                    children: [
+                                        /*#__PURE__*/ _jsx("div", {
+                                            className: cn("w-5 h-5 mt-0.5 rounded border-2 flex items-center justify-center flex-shrink-0 transition-colors", isAssigned ? "bg-blue-600 border-blue-600" : "border-zinc-300 dark:border-zinc-600"),
+                                            children: isAssigned && /*#__PURE__*/ _jsx("svg", {
+                                                className: "w-3 h-3 text-white",
+                                                fill: "none",
+                                                stroke: "currentColor",
+                                                viewBox: "0 0 24 24",
+                                                "aria-hidden": "true",
+                                                children: /*#__PURE__*/ _jsx("path", {
+                                                    strokeLinecap: "round",
+                                                    strokeLinejoin: "round",
+                                                    strokeWidth: 3,
+                                                    d: "M5 13l4 4L19 7"
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex-1 min-w-0",
+                                            children: [
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex items-center gap-2",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            className: "font-medium text-sm text-zinc-900 dark:text-white",
+                                                            children: role.name
+                                                        }),
+                                                        role.name === "godmin" && /*#__PURE__*/ _jsx("span", {
+                                                            className: "text-[10px] px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 font-medium",
+                                                            children: "Protected"
+                                                        })
+                                                    ]
+                                                }),
+                                                role.description && /*#__PURE__*/ _jsx("p", {
+                                                    className: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5 line-clamp-2",
+                                                    children: role.description
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }, role.id);
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "px-5 py-3 border-t border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 rounded-b-xl",
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: "text-xs text-zinc-500 dark:text-zinc-400",
+                            children: [
+                                assignedRoleIds.length,
+                                " role",
+                                assignedRoleIds.length !== 1 ? "s" : "",
+                                " assigned"
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+    return /*#__PURE__*/ createPortal(modalContent, document.body);
+}

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

@@ -0,0 +1,124 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
+import { cn } from "../../../utils/cn";
+gsap.registerPlugin(useGSAP);
+export function StatsCards({ theme, totalUsers, verifiedUsers, lockedUsers, unverifiedUsers }) {
+    const containerRef = useRef(null);
+    useGSAP(()=>{
+        if (!containerRef.current) return;
+        const cards = containerRef.current.querySelectorAll("[data-stat-card]");
+        gsap.fromTo(cards, {
+            opacity: 0,
+            y: 20,
+            scale: 0.95
+        }, {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+            duration: 0.4,
+            stagger: 0.08,
+            ease: "back.out(1.7)"
+        });
+    }, {
+        scope: containerRef
+    });
+    const stats = [
+        {
+            label: "Total Users",
+            value: totalUsers,
+            iconColor: "primary",
+            icon: /*#__PURE__*/ _jsx("svg", {
+                className: "w-4 h-4 sm:w-5 sm: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: "M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+                })
+            })
+        },
+        {
+            label: "Verified",
+            value: verifiedUsers,
+            iconColor: "success",
+            icon: /*#__PURE__*/ _jsx("svg", {
+                className: "w-4 h-4 sm:w-5 sm: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: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
+                })
+            })
+        },
+        {
+            label: "Unverified",
+            value: unverifiedUsers,
+            iconColor: "warning",
+            icon: /*#__PURE__*/ _jsx("svg", {
+                className: "w-4 h-4 sm:w-5 sm: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: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                })
+            })
+        },
+        {
+            label: "Locked",
+            value: lockedUsers,
+            iconColor: "danger",
+            icon: /*#__PURE__*/ _jsx("svg", {
+                className: "w-4 h-4 sm:w-5 sm: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: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                })
+            })
+        }
+    ];
+    return /*#__PURE__*/ _jsx("div", {
+        ref: containerRef,
+        className: cn(theme.stats.wrapper),
+        children: stats.map((stat)=>/*#__PURE__*/ _jsxs("div", {
+                "data-stat-card": true,
+                className: cn(theme.stats.card.base),
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: cn(theme.stats.card.icon.wrapper, theme.stats.card.icon[stat.iconColor]),
+                        children: stat.icon
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: cn(theme.stats.card.value),
+                        children: stat.value
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: cn(theme.stats.card.label),
+                        children: stat.label
+                    })
+                ]
+            }, stat.label))
+    });
+}