pixelize-design-library 2.3.1-beta.9 → 2.3.3

package/dist/Components/UserDetails/UserDetails.js

@@ -0,0 +1,263 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+var AddUserModal_1 = __importDefault(require("./AddUserModal"));
+var ChangeRoleModal_1 = __importDefault(require("./ChangeRoleModal"));
+var DeactivateConfirmModal_1 = __importDefault(require("./DeactivateConfirmModal"));
+var DEFAULT_LABELS = {
+    teamMembers: "Team Members",
+    refreshList: "Refresh list",
+    userDetails: "User Details",
+    selectTeamMember: "Select a Team Member",
+    addUser: "Add User",
+    resendInvitation: "Resend Invitation",
+    deactivateUser: "Deactivate User",
+    changeRole: "Change Role",
+    you: "You",
+    active: "Active",
+    inactive: "Inactive",
+    pendingInvitation: "Pending Invitation",
+    personalInformation: "Personal Information",
+    noUsers: "No team members yet",
+    noUserSelected: "Select a team member to view their details",
+    addNewUser: "Add New User",
+    firstName: "First Name",
+    lastName: "Last Name",
+    email: "Email",
+    role: "Role",
+    firstNamePlaceholder: "First Name",
+    lastNamePlaceholder: "Last Name",
+    emailPlaceholder: "An invite will be sent to this email",
+    addNewRole: "Add New Role",
+    cancel: "Cancel",
+    save: "Save",
+    firstNameRequired: "First Name is required",
+    lastNameRequired: "Last Name is required",
+    emailRequired: "Email is required",
+    emailInvalid: "Invalid email",
+    roleRequired: "Role is required",
+    changeRoleTitle: "Change Role",
+    confirmDeactivation: "Confirm Deactivation",
+    deactivateConfirmQuestion: "Are you sure you want to deactivate this user?",
+    deactivateConfirmDescription: "will no longer have access to the organization. You can reactivate them later if needed.",
+};
+var UserDetails = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var users = _a.users, selectedUser = _a.selectedUser, selectedUserId = _a.selectedUserId, _s = _a.roleOptions, roleOptions = _s === void 0 ? [] : _s, _t = _a.canManageUsers, canManageUsers = _t === void 0 ? false : _t, _u = _a.isUsersLoading, isUsersLoading = _u === void 0 ? false : _u, _v = _a.isInviteLoading, isInviteLoading = _v === void 0 ? false : _v, _w = _a.isDeactivateLoading, isDeactivateLoading = _w === void 0 ? false : _w, _x = _a.isAddUserLoading, isAddUserLoading = _x === void 0 ? false : _x, _y = _a.isChangeRoleLoading, isChangeRoleLoading = _y === void 0 ? false : _y, onSelectUser = _a.onSelectUser, onRefresh = _a.onRefresh, onBack = _a.onBack, onAddUserSubmit = _a.onAddUserSubmit, onChangeRoleSubmit = _a.onChangeRoleSubmit, onReinvite = _a.onReinvite, onDeactivate = _a.onDeactivate, onAddRoleClick = _a.onAddRoleClick, addUserUpgradeNotice = _a.addUserUpgradeNotice, labelOverrides = _a.labels, _z = _a.minHeight, minHeight = _z === void 0 ? "90vh" : _z;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var labels = (0, react_1.useMemo)(function () { return (__assign(__assign({}, DEFAULT_LABELS), labelOverrides)); }, [labelOverrides]);
+    var _0 = (0, react_2.useDisclosure)(), isAddUserOpen = _0.isOpen, onAddUserOpen = _0.onOpen, onAddUserClose = _0.onClose;
+    var _1 = (0, react_2.useDisclosure)(), isChangeRoleOpen = _1.isOpen, onChangeRoleOpen = _1.onOpen, onChangeRoleClose = _1.onClose;
+    var _2 = (0, react_2.useDisclosure)(), isConfirmOpen = _2.isOpen, onConfirmOpen = _2.onOpen, onConfirmClose = _2.onClose;
+    var _3 = (0, react_1.useState)(null), actionUserId = _3[0], setActionUserId = _3[1];
+    var border = (_e = (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : "#E2E8F0";
+    var surface = (_f = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    var muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
+    var heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
+    var successScheme = "green";
+    var dangerScheme = "red";
+    var handleDeactivateConfirm = function () {
+        if (actionUserId != null)
+            onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate(actionUserId);
+        onConfirmClose();
+    };
+    var renderStatusBadge = function (isActive) { return (react_1.default.createElement(react_2.Badge, { variant: "subtle", colorScheme: isActive ? successScheme : dangerScheme, borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, textTransform: "none" }, isActive ? labels.active : labels.inactive)); };
+    return (react_1.default.createElement(react_2.Flex, { backgroundColor: (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC", minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" } },
+        react_1.default.createElement(react_2.Box, { width: { base: "100%", lg: "300px" }, backgroundColor: surface, borderRadius: "xl", boxShadow: "0 1px 2px rgba(16,24,40,0.05)", border: "1px solid", borderColor: border, position: "relative", order: { base: 2, lg: 1 }, overflow: "hidden", display: "flex", flexDirection: "column" },
+            react_1.default.createElement(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between" },
+                react_1.default.createElement(react_2.HStack, { spacing: 2 },
+                    onBack && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Go back", icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })),
+                    react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, labels.teamMembers),
+                    react_1.default.createElement(react_2.Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "0.65rem", px: 2 }, users.length)),
+                onRefresh && (react_1.default.createElement(react_2.IconButton, { "aria-label": labels.refreshList, icon: react_1.default.createElement(lucide_react_1.RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))),
+            react_1.default.createElement(react_2.Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: "calc(".concat(minHeight, " - 80px)") } }, isUsersLoading ? (react_1.default.createElement(react_2.VStack, { spacing: 2, p: 3 }, Array.from({ length: 6 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Flex, { key: idx, alignItems: "center", gap: 3, p: 2, w: "100%" },
+                react_1.default.createElement(react_2.SkeletonCircle, { size: "9" }),
+                react_1.default.createElement(react_2.Box, { flex: 1 },
+                    react_1.default.createElement(react_2.Skeleton, { height: "12px", mb: 2, width: "80%" }),
+                    react_1.default.createElement(react_2.Skeleton, { height: "9px", width: "60%" })))); }))) : users.length === 0 ? (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.Users, title: labels.noUsers, size: "sm", minH: "220px" })) : (react_1.default.createElement(react_2.VStack, { spacing: 1, p: 2, align: "stretch" }, users.map(function (user) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                var isSelected = selectedUserId != null && selectedUserId === user.id;
+                return (react_1.default.createElement(react_2.Flex, { key: user.id, p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#EEF2FF" : "transparent", _hover: {
+                        background: isSelected
+                            ? (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#EEF2FF"
+                            : (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#F8FAFC",
+                    }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", onClick: function () { return onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user); } },
+                    isSelected && (react_1.default.createElement(react_2.Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#6366F1" })),
+                    react_1.default.createElement(react_2.Avatar, { size: "sm", name: "".concat(user.firstName, " ").concat(user.lastName), src: user.profile, bg: (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _j === void 0 ? void 0 : _j[100]) !== null && _k !== void 0 ? _k : "#E0E7FF", color: (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _l === void 0 ? void 0 : _l[600]) !== null && _m !== void 0 ? _m : "#4F46E5" }),
+                    react_1.default.createElement(react_2.Box, { flex: 1, overflow: "hidden" },
+                        react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: 600, noOfLines: 1, color: heading },
+                            user.firstName,
+                            " ",
+                            user.lastName),
+                        react_1.default.createElement(react_2.Text, { fontSize: "xs", color: muted, noOfLines: 1 }, user.email)),
+                    renderStatusBadge(user.isActive)));
+            }))))),
+        react_1.default.createElement(react_2.Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "0 1px 2px rgba(16,24,40,0.05)", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden" },
+            react_1.default.createElement(react_2.Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border },
+                react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, selectedUser ? labels.userDetails : labels.selectTeamMember),
+                canManageUsers && (react_1.default.createElement(react_2.Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: react_1.default.createElement(lucide_react_1.UserPlus, { size: 15 }), onClick: onAddUserOpen }, labels.addUser))),
+            react_1.default.createElement(react_2.Box, { flex: 1, overflowY: "auto" }, isUsersLoading ? (react_1.default.createElement(react_2.VStack, { spacing: 4, p: 4, align: "stretch" },
+                react_1.default.createElement(react_2.Flex, { align: "center", gap: 4 },
+                    react_1.default.createElement(react_2.SkeletonCircle, { size: "16" }),
+                    react_1.default.createElement(react_2.Box, { flex: 1 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "18px", width: "50%", mb: 2 }),
+                        react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "35%" }))),
+                Array.from({ length: 4 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Box, { key: idx, w: "100%" },
+                    react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "30%", mb: 2 }),
+                    react_1.default.createElement(react_2.Skeleton, { height: "10px", width: "80%" }))); }))) : selectedUser ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(react_2.Flex, { direction: { base: "column", md: "row" }, alignItems: { base: "flex-start", md: "center" }, justifyContent: "space-between", gap: 4, p: 4, borderBottom: "1px solid", borderColor: border },
+                    react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: 4 },
+                        react_1.default.createElement(react_2.Box, { position: "relative" },
+                            react_1.default.createElement(react_2.Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto, bg: (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _o === void 0 ? void 0 : _o[100]) !== null && _p !== void 0 ? _p : "#E0E7FF", color: (_r = (_q = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _q === void 0 ? void 0 : _q[600]) !== null && _r !== void 0 ? _r : "#4F46E5" }),
+                            selectedUser.isCurrent && (react_1.default.createElement(react_2.Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "0.6rem", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none" }, labels.you))),
+                        react_1.default.createElement(react_2.Box, null,
+                            react_1.default.createElement(react_2.Heading, { size: "md", mb: 1, color: heading }, selectedUser.name),
+                            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: muted, mb: 2 }, selectedUser.role),
+                            react_1.default.createElement(react_2.HStack, { spacing: 2 },
+                                renderStatusBadge(selectedUser.isActive),
+                                selectedUser.isPending && (react_1.default.createElement(react_2.Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, colorScheme: "orange", textTransform: "none" }, labels.pendingInvitation))))),
+                    canManageUsers &&
+                        !selectedUser.isSuperAdmin && (react_1.default.createElement(react_2.HStack, { spacing: 2, flexWrap: "wrap" },
+                        !selectedUser.isCurrent && !selectedUser.isActive && (react_1.default.createElement(react_2.Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: react_1.default.createElement(lucide_react_1.Send, { size: 13 }), isLoading: isInviteLoading, onClick: function () {
+                                return selectedUser.userId != null &&
+                                    (onReinvite === null || onReinvite === void 0 ? void 0 : onReinvite(selectedUser.userId));
+                            } }, labels.resendInvitation)),
+                        react_1.default.createElement(react_2.Button, { size: "xs", variant: "outline", colorScheme: "gray", fontSize: "xs", leftIcon: react_1.default.createElement(lucide_react_1.Shield, { size: 13 }), onClick: function () {
+                                if (selectedUser.userId != null) {
+                                    setActionUserId(selectedUser.userId);
+                                    onChangeRoleOpen();
+                                }
+                            } }, labels.changeRole),
+                        !selectedUser.isCurrent && (react_1.default.createElement(react_2.Button, { size: "xs", variant: "ghost", colorScheme: "red", fontSize: "xs", leftIcon: react_1.default.createElement(lucide_react_1.Trash2, { size: 13 }), isDisabled: selectedUser.userId == null || isDeactivateLoading, onClick: function () {
+                                if (selectedUser.userId != null) {
+                                    setActionUserId(selectedUser.userId);
+                                    onConfirmOpen();
+                                }
+                            } }, labels.deactivateUser))))),
+                react_1.default.createElement(react_2.Box, { p: 4 },
+                    react_1.default.createElement(react_2.Text, { fontSize: "xs", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: muted, mb: 3 }, labels.personalInformation),
+                    react_1.default.createElement(react_2.Box, { border: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden" }, selectedUser.details.map(function (detail, index) {
+                        var _a, _b, _c, _d, _e, _f, _g;
+                        var Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : lucide_react_1.UserRound;
+                        return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+                            react_1.default.createElement(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: { bg: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#F8FAFC" }, alignItems: "center", transition: "background 0.15s ease" },
+                                react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#EEF2FF", borderRadius: "lg", color: (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : "#4F46E5", flexShrink: 0 },
+                                    react_1.default.createElement(Icon, { size: 15 })),
+                                react_1.default.createElement(react_2.Box, { minWidth: "110px" },
+                                    react_1.default.createElement(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted }, detail.label)),
+                                react_1.default.createElement(react_2.Box, { flex: 1 },
+                                    react_1.default.createElement(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500 }, detail.value))),
+                            index < selectedUser.details.length - 1 && (react_1.default.createElement(react_2.Divider, { borderColor: border }))));
+                    }))))) : (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })))),
+        react_1.default.createElement(AddUserModal_1.default, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: function (values) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values))];
+                        case 1:
+                            _a.sent();
+                            onAddUserClose();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }, onAddRoleClick: onAddRoleClick, upgradeNotice: addUserUpgradeNotice, labels: labels }),
+        react_1.default.createElement(ChangeRoleModal_1.default, { isOpen: isChangeRoleOpen, onClose: onChangeRoleClose, userId: actionUserId, email: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.email, currentRole: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.role, roleOptions: roleOptions, isLoading: isChangeRoleLoading, onSubmit: function (payload) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, (onChangeRoleSubmit === null || onChangeRoleSubmit === void 0 ? void 0 : onChangeRoleSubmit(payload))];
+                        case 1:
+                            _a.sent();
+                            onChangeRoleClose();
+                            return [2 /*return*/];
+                    }
+                });
+            }); }, onAddRoleClick: onAddRoleClick, labels: labels }),
+        react_1.default.createElement(DeactivateConfirmModal_1.default, { isOpen: isConfirmOpen, onClose: onConfirmClose, userName: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.name, isLoading: isDeactivateLoading, onConfirm: handleDeactivateConfirm, labels: labels })));
+};
+exports.default = UserDetails;

package/dist/Components/UserDetails/UserDetails.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/UserDetails/UserDetails.test.js

@@ -0,0 +1,129 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var UserDetails_1 = __importDefault(require("./UserDetails"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#ffffff",
+            gray: {
+                50: "#f8fafc",
+                100: "#f0f0f0",
+                200: "#e2e8f0",
+                300: "#cbd5e1",
+                400: "#94a3b8",
+                500: "#64748b",
+                600: "#475569",
+                700: "#334155",
+                800: "#1e293b",
+            },
+            primary: {
+                50: "#eef2ff",
+                100: "#e0e7ff",
+                300: "#a5b4fc",
+                500: "#6366f1",
+                600: "#4f46e5",
+                700: "#4338ca",
+            },
+            boxborder: { 200: "#e2e8f0" },
+            text: { 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155" },
+            secondary: { 500: "#805ad5" },
+            backgroundColor: { light: "#ffffff" },
+            blue: { 400: "#60a5fa" },
+            green: { 400: "#4ade80" },
+            red: { 400: "#f87171", 500: "#ef4444", 50: "#fef2f2" },
+            yellow: { 500: "#eab308" },
+            semantic: { error: { 50: "#fef2f2", 500: "#ef4444" } },
+        },
+    }); },
+}); });
+beforeAll(function () {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(function (query) { return ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        }); }),
+    });
+});
+var users = [
+    {
+        id: 1,
+        firstName: "Jane",
+        lastName: "Doe",
+        email: "jane@example.com",
+        role: "Admin",
+        isActive: true,
+        isCurrent: true,
+        isSuperAdmin: true,
+    },
+    {
+        id: 2,
+        firstName: "John",
+        lastName: "Smith",
+        email: "john@example.com",
+        role: "Sales",
+        isActive: false,
+        isPending: true,
+    },
+];
+var selectedUser = {
+    userId: 2,
+    name: "John Smith",
+    role: "Sales",
+    email: "john@example.com",
+    isActive: false,
+    isPending: true,
+    isCurrent: false,
+    isSuperAdmin: false,
+    details: [
+        { label: "Email", value: "john@example.com", icon: lucide_react_1.Mail },
+        { label: "Role", value: "Sales", icon: lucide_react_1.Mail },
+    ],
+};
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("UserDetails", function () {
+    it("renders the team member list", function () {
+        renderWithChakra(react_1.default.createElement(UserDetails_1.default, { users: users, selectedUser: null }));
+        expect(react_2.screen.getByText("Team Members")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Jane Doe")).toBeInTheDocument();
+        expect(react_2.screen.getByText("John Smith")).toBeInTheDocument();
+    });
+    it("calls onSelectUser when a list item is clicked", function () {
+        var onSelectUser = jest.fn();
+        renderWithChakra(react_1.default.createElement(UserDetails_1.default, { users: users, selectedUser: null, onSelectUser: onSelectUser }));
+        react_2.fireEvent.click(react_2.screen.getByText("John Smith"));
+        expect(onSelectUser).toHaveBeenCalledWith(expect.objectContaining({ id: 2 }));
+    });
+    it("shows an empty state when there are no users", function () {
+        renderWithChakra(react_1.default.createElement(UserDetails_1.default, { users: [], selectedUser: null }));
+        expect(react_2.screen.getByText("No team members yet")).toBeInTheDocument();
+    });
+    it("renders the selected user's details", function () {
+        renderWithChakra(react_1.default.createElement(UserDetails_1.default, { users: users, selectedUser: selectedUser, selectedUserId: 2 }));
+        expect(react_2.screen.getByText("User Details")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Personal Information")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Pending Invitation")).toBeInTheDocument();
+    });
+    it("opens the Add User modal when the action is triggered", function () {
+        renderWithChakra(react_1.default.createElement(UserDetails_1.default, { users: users, selectedUser: selectedUser, selectedUserId: 2, canManageUsers: true, roleOptions: [{ id: 1, label: "Admin" }] }));
+        react_2.fireEvent.click(react_2.screen.getAllByText("Add User")[0]);
+        expect(react_2.screen.getByText("Add New User")).toBeInTheDocument();
+    });
+});

package/dist/Components/UserDetails/UserDetailsProps.d.ts

@@ -0,0 +1,151 @@
+import { ElementType, ReactNode } from "react";
+export type RoleOption = {
+    id: number;
+    label: string;
+};
+export type UserListItem = {
+    id: number;
+    firstName: string;
+    lastName: string;
+    email: string;
+    role: string;
+    profile?: string;
+    isActive: boolean;
+    isPending?: boolean;
+    isCurrent?: boolean;
+    isSuperAdmin?: boolean;
+};
+export type UserDetailRow = {
+    label: string;
+    value: string;
+    icon?: ElementType;
+};
+export type SelectedUserDetail = {
+    userId?: number;
+    name: string;
+    role: string;
+    email: string;
+    profilePhoto?: string;
+    isActive: boolean;
+    isPending?: boolean;
+    isCurrent?: boolean;
+    isSuperAdmin?: boolean;
+    details: UserDetailRow[];
+};
+export type AddUserFormValues = {
+    firstName: string;
+    lastName: string;
+    email: string;
+    role: RoleOption | null;
+};
+export type ChangeRoleSubmitPayload = {
+    userId: number;
+    roleId: number;
+};
+/**
+ * All user-facing strings. Provide translated values from the host app; every
+ * key has a sensible English default so the component works standalone.
+ */
+export type UserDetailsLabels = {
+    teamMembers?: string;
+    refreshList?: string;
+    userDetails?: string;
+    selectTeamMember?: string;
+    addUser?: string;
+    resendInvitation?: string;
+    deactivateUser?: string;
+    changeRole?: string;
+    you?: string;
+    active?: string;
+    inactive?: string;
+    pendingInvitation?: string;
+    personalInformation?: string;
+    noUsers?: string;
+    noUserSelected?: string;
+    addNewUser?: string;
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    role?: string;
+    firstNamePlaceholder?: string;
+    lastNamePlaceholder?: string;
+    emailPlaceholder?: string;
+    addNewRole?: string;
+    cancel?: string;
+    save?: string;
+    firstNameRequired?: string;
+    lastNameRequired?: string;
+    emailRequired?: string;
+    emailInvalid?: string;
+    roleRequired?: string;
+    changeRoleTitle?: string;
+    confirmDeactivation?: string;
+    deactivateConfirmQuestion?: string;
+    deactivateConfirmDescription?: string;
+};
+export interface UserDetailsProps {
+    /** Full list of users shown in the left panel. */
+    users: UserListItem[];
+    /** The currently selected user rendered in the right panel. */
+    selectedUser: SelectedUserDetail | null;
+    /** Id of the selected user, used to highlight the active row. */
+    selectedUserId?: number;
+    /** Role options for the Add User and Change Role modals. */
+    roleOptions?: RoleOption[];
+    /** Whether the current viewer can manage users (super-admin gate). */
+    canManageUsers?: boolean;
+    /** Loading flags driven by the host app's async calls. */
+    isUsersLoading?: boolean;
+    isInviteLoading?: boolean;
+    isDeactivateLoading?: boolean;
+    isAddUserLoading?: boolean;
+    isChangeRoleLoading?: boolean;
+    /** Selection + refresh. */
+    onSelectUser?: (user: UserListItem) => void;
+    onRefresh?: () => void;
+    /** Back navigation handler for the list panel header. */
+    onBack?: () => void;
+    /** Modal submit / action callbacks. */
+    onAddUserSubmit?: (values: AddUserFormValues) => void | Promise<void>;
+    onChangeRoleSubmit?: (payload: ChangeRoleSubmitPayload) => void | Promise<void>;
+    onReinvite?: (userId: number) => void;
+    onDeactivate?: (userId: number) => void;
+    /** "Add New Role" actions inside the SearchSelect of each modal. */
+    onAddRoleClick?: () => void;
+    /** App-specific node rendered inside the Add User modal header (e.g. an upgrade notice). */
+    addUserUpgradeNotice?: ReactNode;
+    /** Translated/override strings. */
+    labels?: UserDetailsLabels;
+    /** Minimum height of the outer container. Defaults to "90vh". */
+    minHeight?: string;
+}
+export interface AddUserModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    roleOptions: RoleOption[];
+    isLoading?: boolean;
+    onSubmit?: (values: AddUserFormValues) => void | Promise<void>;
+    onAddRoleClick?: () => void;
+    upgradeNotice?: ReactNode;
+    labels: Required<Pick<UserDetailsLabels, "addNewUser" | "firstName" | "lastName" | "email" | "role" | "firstNamePlaceholder" | "lastNamePlaceholder" | "emailPlaceholder" | "addNewRole" | "cancel" | "save" | "firstNameRequired" | "lastNameRequired" | "emailRequired" | "emailInvalid" | "roleRequired">>;
+}
+export interface ChangeRoleModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    userId: number | null;
+    email?: string;
+    currentRole?: string;
+    roleOptions: RoleOption[];
+    isLoading?: boolean;
+    onSubmit?: (payload: ChangeRoleSubmitPayload) => void | Promise<void>;
+    onAddRoleClick?: () => void;
+    labels: Required<Pick<UserDetailsLabels, "changeRoleTitle" | "email" | "role" | "addNewRole" | "cancel" | "save" | "roleRequired">>;
+}
+export interface DeactivateConfirmModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    userName?: string;
+    isLoading?: boolean;
+    onConfirm: () => void;
+    labels: Required<Pick<UserDetailsLabels, "confirmDeactivation" | "deactivateConfirmQuestion" | "deactivateConfirmDescription" | "cancel" | "deactivateUser">>;
+}

package/dist/Components/UserDetails/UserDetailsProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Theme/componentStyles.d.ts

@@ -3,7 +3,7 @@ export declare const componentStyles: {
     Input: import("@chakra-ui/theme").ComponentStyleConfig;
     Button: import("@chakra-ui/theme").ComponentStyleConfig;
     Select: import("@chakra-ui/theme").ComponentStyleConfig;
-    Tag: import("@chakra-ui/theme").ComponentStyleConfig;
+    Tag: import("@chakra-ui/theme").ComponentMultiStyleConfig;
     Textarea: import("@chakra-ui/theme").ComponentStyleConfig;
     NumberInput: import("@chakra-ui/theme").ComponentStyleConfig;
 };

package/dist/Theme/index.d.ts

@@ -7,11 +7,11 @@ import emerald from "./Emerald/theme";
 import rosewood from "./Rosewood/theme";
 export { skyline, meadow, radiant, lavender, slate, emerald, rosewood };
 export declare const ThemesList: {
-    skyline: Record<string, any>;
-    meadow: Record<string, any>;
-    radiant: Record<string, any>;
     lavender: Record<string, any>;
-    slate: Record<string, any>;
+    meadow: Record<string, any>;
+    skyline: Record<string, any>;
     emerald: Record<string, any>;
     rosewood: Record<string, any>;
+    slate: Record<string, any>;
+    radiant: Record<string, any>;
 };

package/dist/Theme/index.js

@@ -19,11 +19,11 @@ exports.emerald = theme_6.default;
 var theme_7 = __importDefault(require("./Rosewood/theme"));
 exports.rosewood = theme_7.default;
 exports.ThemesList = {
-    skyline: theme_4.default,
-    meadow: theme_2.default,
-    radiant: theme_3.default,
     lavender: theme_1.default,
-    slate: theme_5.default,
+    meadow: theme_2.default,
+    skyline: theme_4.default,
     emerald: theme_6.default,
     rosewood: theme_7.default,
+    slate: theme_5.default,
+    radiant: theme_3.default,
 };

package/dist/index.d.ts

@@ -60,5 +60,27 @@ import ApexLineChart from "./Components/Apexcharts/ApexLineChart/ApexLineChart";
 import Notification from "./Components/Notification/Notification";
 import DatePicker from "./Components/DatePicker/ThemeDatePicker";
 import FilterSidebar from "./Components/FilterSidebar/FilterSidebar";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, FileUpload, FileUploader, FilterSidebar, FormWrapper, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+import EmptyState from "./Components/EmptyState/EmptyState";
+import MoreItems from "./Components/MoreItems/MoreItems";
+import ScrollToTop from "./Components/ScrollToTop/ScrollToTop";
+import CopyButton from "./Components/CopyButton/CopyButton";
+import FieldSelectModal from "./Components/FieldSelectModal/FieldSelectModal";
+import PdfViewer from "./Components/PdfViewer/PdfViewer";
+import LazyWrapper from "./Components/LazyWrapper/LazyWrapper";
+import FilePreview, { FilePreviewTrigger } from "./Components/FilePreview/FilePreview";
+import StageProgress from "./Components/StageProgress/StageProgress";
+import StageItem from "./Components/StageProgress/StageItem";
+import OrgSwitcher from "./Components/OrgSwitcher/OrgSwitcher";
+import UpgradeButton from "./Components/UpgradeButton/UpgradeButton";
+import UserDetails from "./Components/UserDetails/UserDetails";
+import RolesPermission from "./Components/RolesPermission/RolesPermission";
+import CustomModulesTable from "./Components/CustomModulesTable/CustomModulesTable";
+import SignInActivityTable from "./Components/SignInActivityTable/SignInActivityTable";
+import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails";
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, UpgradeButton, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;
+export type { UserDetailsProps, UserDetailsLabels, UserListItem, SelectedUserDetail, UserDetailRow, RoleOption, AddUserFormValues, ChangeRoleSubmitPayload, } from "./Components/UserDetails/UserDetailsProps";
+export type { RolesPermissionProps, RolesPermissionLabels, RolesPermissionView, RolesPermissionMode, Permission, PermissionKey, RoleData, } from "./Components/RolesPermission/RolesPermissionProps";
+export type { CustomModulesTableProps, CustomModulesTableLabels, ModuleItem, UpdateModulePayload, } from "./Components/CustomModulesTable/CustomModulesTableProps";
+export type { SignInActivityTableProps, SignInActivityLabels, SignInDevice, } from "./Components/SignInActivityTable/SignInActivityTableProps";
+export type { OrganizationDetailsProps, OrganizationDetailsLabels, OrganizationItem, CreateOrgFormValues, } from "./Components/OrganizationDetails/OrganizationDetailsProps";