pixelize-design-library 2.3.1-beta.2 → 2.3.1-beta.20

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -50,10 +50,12 @@ var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function ProfilePhotoViewer(_a) {
-    var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _b = _a.imageWidth, imageWidth = _b === void 0 ? "100px" : _b, _c = _a.imageAlt, imageAlt = _c === void 0 ? "Profile Photo" : _c, _d = _a.imageObjectFit, imageObjectFit = _d === void 0 ? "cover" : _d, _e = _a.imageBorderRadius, imageBorderRadius = _e === void 0 ? "full" : _e, _f = _a.editIconSize, editIconSize = _f === void 0 ? "sm" : _f, _g = _a.editIconPositionRight, editIconPositionRight = _g === void 0 ? "0px" : _g, _h = _a.editIconPositionBottom, editIconPositionBottom = _h === void 0 ? "0px" : _h, _j = _a.isRound, isRound = _j === void 0 ? true : _j, boxStyle = _a.boxStyle, _k = _a.isEditable, isEditable = _k === void 0 ? false : _k, _l = _a.isView, isView = _l === void 0 ? false : _l, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText;
-    var _m = (0, react_1.useState)(photoUrl), photo = _m[0], setPhoto = _m[1];
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    var photoUrl = _a.photoUrl, onPhotoChange = _a.onPhotoChange, _z = _a.imageWidth, imageWidth = _z === void 0 ? "100px" : _z, _0 = _a.imageAlt, imageAlt = _0 === void 0 ? "Profile Photo" : _0, _1 = _a.imageObjectFit, imageObjectFit = _1 === void 0 ? "cover" : _1, _2 = _a.imageBorderRadius, imageBorderRadius = _2 === void 0 ? "full" : _2, _3 = _a.editIconSize, editIconSize = _3 === void 0 ? "sm" : _3, _4 = _a.editIconPositionRight, editIconPositionRight = _4 === void 0 ? "0px" : _4, _5 = _a.editIconPositionBottom, editIconPositionBottom = _5 === void 0 ? "0px" : _5, _6 = _a.isRound, isRound = _6 === void 0 ? true : _6, boxStyle = _a.boxStyle, _7 = _a.isEditable, isEditable = _7 === void 0 ? false : _7, _8 = _a.isView, isView = _8 === void 0 ? false : _8, style = _a.style, handleIsView = _a.handleIsView, fallbackText = _a.fallbackText, _9 = _a.revealOnHover, revealOnHover = _9 === void 0 ? true : _9;
+    var _10 = (0, react_1.useState)(photoUrl), photo = _10[0], setPhoto = _10[1];
     var fileInputRef = (0, react_1.useRef)(null);
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var c = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
     var handlePhotoChange = function (event) {
         var _a;
         if (!isEditable)
@@ -76,31 +78,47 @@ function ProfilePhotoViewer(_a) {
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     var isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
-    return (react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block", style: boxStyle, sx: {
-            "&:hover .icon-button": {
-                opacity: 1,
+    var border = (_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[200];
+    // Shared modern frame for whichever media we render (photo / pdf / fallback).
+    var mediaFrame = {
+        boxSize: imageWidth,
+        borderRadius: imageBorderRadius,
+        border: "0.063rem solid ".concat(border),
+        boxShadow: (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.sm,
+    };
+    var renderMedia = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (photo) {
+            return isPdf ? (react_1.default.createElement(react_2.Box, __assign({}, mediaFrame, { bg: (_b = (_a = c.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "gray.100", color: (_c = c.gray) === null || _c === void 0 ? void 0 : _c[500], display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" }),
+                react_1.default.createElement(lucide_react_1.FileText, { size: "45%" }))) : (react_1.default.createElement(react_2.Image, __assign({ src: photo, alt: imageAlt, objectFit: imageObjectFit }, mediaFrame)));
+        }
+        // Fallback: branded tinted avatar (initials or user glyph).
+        return (react_1.default.createElement(react_2.Box, __assign({}, mediaFrame, { display: "flex", alignItems: "center", justifyContent: "center", bg: (_f = (_e = (_d = c.primary) === null || _d === void 0 ? void 0 : _d.opacity) === null || _e === void 0 ? void 0 : _e[16]) !== null && _f !== void 0 ? _f : (_g = c.gray) === null || _g === void 0 ? void 0 : _g[100], color: (_j = (_h = c.primary) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[500] }), fallbackText ? (react_1.default.createElement(react_2.Text, { fontSize: "1.75rem", fontWeight: 700, lineHeight: "1" }, fallbackText)) : (react_1.default.createElement(lucide_react_1.User, { size: "48%" }))));
+    };
+    var hasActions = isEditable || isView;
+    return (react_1.default.createElement(react_2.Box, { position: "relative", display: "inline-block", style: boxStyle, borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease", sx: {
+            "&:hover .ppv-overlay": { opacity: 1 },
+            "&:hover .ppv-actions": { opacity: 1 },
+            "&:hover .ppv-media": {
+                boxShadow: "0 0 0 0.1875rem ".concat((_j = (_h = (_g = c.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[24]) !== null && _j !== void 0 ? _j : "transparent"),
             },
         } },
-        photo ? (isPdf ? (react_1.default.createElement(react_2.Box, { width: imageWidth, height: imageWidth, borderRadius: imageBorderRadius, bg: "gray.200", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden" },
-            react_1.default.createElement(lucide_react_1.FileText, { size: "50%" }))) : (react_1.default.createElement(react_2.Image, { src: photo, alt: imageAlt, boxSize: imageWidth, objectFit: imageObjectFit, borderRadius: imageBorderRadius }))) : fallbackText ? (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
-            react_1.default.createElement(react_2.Text, { fontSize: "2xl", fontWeight: "bold" }, fallbackText))) : (react_1.default.createElement(react_2.Box, { boxSize: imageWidth, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: imageBorderRadius, bg: "gray.200" },
-            react_1.default.createElement(lucide_react_1.User, { size: "50%" }))),
-        (isEditable || isView) && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.Box, { className: "icon-button", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-25%, -25%)", sx: {
-                    opacity: 0,
-                    transition: "opacity 0.3s",
-                } },
-                isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit" },
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: theme.shadows.md, marginRight: "3px" }), _hover: {
+        react_1.default.createElement(react_2.Box, { className: "ppv-media", borderRadius: imageBorderRadius, transition: "box-shadow 0.2s ease" }, renderMedia()),
+        hasActions && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_2.Box, { className: "ppv-overlay", position: "absolute", inset: 0, borderRadius: imageBorderRadius, bg: "blackAlpha.300", opacity: 0, transition: "opacity 0.2s ease", pointerEvents: "none" }),
+            react_1.default.createElement(react_2.HStack, { className: "ppv-actions", position: "absolute", right: editIconPositionRight, bottom: editIconPositionBottom, transform: "translate(-15%, -15%)", spacing: 1.5, opacity: revealOnHover ? 0 : 1, transition: "opacity 0.2s ease" },
+                isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit", hasArrow: true },
+                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", bg: (_k = c.primary) === null || _k === void 0 ? void 0 : _k[500], color: (_l = c.white) !== null && _l !== void 0 ? _l : "#fff", border: "0.125rem solid ".concat((_m = c.white) !== null && _m !== void 0 ? _m : "#fff"), boxShadow: (_o = theme.shadows) === null || _o === void 0 ? void 0 : _o.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+                            bg: (_p = c.primary) === null || _p === void 0 ? void 0 : _p[600],
                             transform: "scale(1.1)",
-                            color: theme.colors.white,
-                            boxShadow: theme.shadows.lg,
-                        } }))),
-                isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View" },
-                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: theme.shadows.md }), _hover: {
+                            boxShadow: (_q = theme.shadows) === null || _q === void 0 ? void 0 : _q.lg,
+                        }, _active: { bg: (_r = c.primary) === null || _r === void 0 ? void 0 : _r[700] } }))),
+                isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true },
+                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: (_s = c.white) !== null && _s !== void 0 ? _s : "#fff", color: (_t = c.gray) === null || _t === void 0 ? void 0 : _t[700], border: "0.063rem solid ".concat(border), boxShadow: (_u = theme.shadows) === null || _u === void 0 ? void 0 : _u.md, style: style, transition: "transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease", _hover: {
+                            bg: (_v = c.gray) === null || _v === void 0 ? void 0 : _v[50],
+                            color: (_w = c.primary) === null || _w === void 0 ? void 0 : _w[600],
                             transform: "scale(1.1)",
-                            color: theme.colors.white,
-                            boxShadow: theme.shadows.lg,
-                        } })))),
+                            boxShadow: (_x = theme.shadows) === null || _x === void 0 ? void 0 : _x.lg,
+                        }, _active: { bg: (_y = c.gray) === null || _y === void 0 ? void 0 : _y[100] } })))),
             isEditable && (react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))))));
 }

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewerProps.d.ts

@@ -15,4 +15,6 @@ export type ProfilePhotoViewerProps = {
     style?: React.CSSProperties;
     handleIsView?: () => void;
     fallbackText?: string;
+    /** When true, the edit/view icons are hidden and revealed on hover. Defaults to false (always visible). */
+    revealOnHover?: boolean;
 };

package/dist/Components/RolesPermission/DeleteRoleModal.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DeleteRoleModalProps } from "./RolesPermissionProps";
+declare const DeleteRoleModal: React.FC<DeleteRoleModalProps>;
+export default DeleteRoleModal;

package/dist/Components/RolesPermission/DeleteRoleModal.js

@@ -0,0 +1,29 @@
+"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("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../Button/Button"));
+var DeleteRoleModal = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var isOpen = _a.isOpen, onClose = _a.onClose, onConfirm = _a.onConfirm, isLoading = _a.isLoading, labels = _a.labels;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true },
+        react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
+        react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
+            react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_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], display: "flex", alignItems: "center", gap: 3 },
+                react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_j = (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[50]) !== null && _j !== void 0 ? _j : "#FEF2F2", color: (_p = (_m = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _k === void 0 ? void 0 : _k.error) === null || _l === void 0 ? void 0 : _l[500]) !== null && _m !== void 0 ? _m : (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[500]) !== null && _p !== void 0 ? _p : "#EF4444" },
+                    react_1.default.createElement(lucide_react_1.AlertTriangle, { size: 18 })),
+                react_1.default.createElement(react_2.Text, { fontSize: "1.05rem", fontWeight: 600 }, labels.deleteRole)),
+            react_1.default.createElement(react_2.ModalCloseButton, null),
+            react_1.default.createElement(react_2.ModalBody, { py: 6 },
+                react_1.default.createElement(react_2.Text, { color: (_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[600], fontSize: "sm", mb: 5 }, labels.deleteRoleConfirm),
+                react_1.default.createElement(react_2.HStack, { justifyContent: "flex-end", spacing: 3 },
+                    react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }),
+                    react_1.default.createElement(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: react_1.default.createElement(lucide_react_1.Trash2, { size: 15 }) }))))));
+};
+exports.default = DeleteRoleModal;

package/dist/Components/RolesPermission/RolesPermission.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { RolesPermissionProps } from "./RolesPermissionProps";
+declare const RolesPermission: React.FC<RolesPermissionProps>;
+export default RolesPermission;

package/dist/Components/RolesPermission/RolesPermission.js

@@ -0,0 +1,243 @@
+"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 __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 Button_1 = __importDefault(require("../Button/Button"));
+var TextInput_1 = __importDefault(require("../Input/TextInput"));
+var EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+var DeleteRoleModal_1 = __importDefault(require("./DeleteRoleModal"));
+var DEFAULT_LABELS = {
+    title: "Roles & Permissions",
+    totalRoles: "Total Roles",
+    newRole: "New Role",
+    sNo: "S.No",
+    roleNameColumn: "Role name",
+    createdBy: "Created By",
+    createdTime: "Created Time",
+    actions: "Actions",
+    noRoles: "No roles found",
+    view: "View",
+    edit: "Edit",
+    delete: "Delete",
+    roleInformation: "Role & Permission Information",
+    roleName: "Role Name",
+    roleNamePlaceholder: "Enter role name",
+    enableAllPermissions: "Enable All Permissions",
+    trackLocation: "Track Location",
+    showAllUserRecords: "Show All User Records",
+    permissionSettings: "Permission Settings",
+    moduleName: "Module Name",
+    read: "Read",
+    create: "Create",
+    editPermission: "Edit",
+    deletePermission: "Delete",
+    importPermission: "Import",
+    exportPermission: "Export",
+    noPermissions: "No permissions found",
+    cancel: "Cancel",
+    saveChanges: "Save Changes",
+    updateChanges: "Update Changes",
+    readOnly: "Read Only",
+    deleteRole: "Delete Role",
+    deleteRoleConfirm: "Are you sure you want to delete this role?",
+};
+var DEFAULT_KEYS = [
+    "read",
+    "create",
+    "edit",
+    "delete",
+    "import",
+    "export",
+];
+var RolesPermission = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var view = _a.view, _q = _a.mode, mode = _q === void 0 ? "create" : _q, roles = _a.roles, _r = _a.isRolesLoading, isRolesLoading = _r === void 0 ? false : _r, permissions = _a.permissions, _s = _a.permissionKeys, permissionKeys = _s === void 0 ? DEFAULT_KEYS : _s, roleName = _a.roleName, roleNameError = _a.roleNameError, isSuperAdmin = _a.isSuperAdmin, isTrackLocation = _a.isTrackLocation, isShowRecords = _a.isShowRecords, _t = _a.isEditing, isEditing = _t === void 0 ? false : _t, _u = _a.isSaving, isSaving = _u === void 0 ? false : _u, onNewRole = _a.onNewRole, onViewRole = _a.onViewRole, onEditRole = _a.onEditRole, onDeleteRole = _a.onDeleteRole, onBack = _a.onBack, onRoleNameChange = _a.onRoleNameChange, onToggleSuperAdmin = _a.onToggleSuperAdmin, onToggleTrackLocation = _a.onToggleTrackLocation, onToggleShowRecords = _a.onToggleShowRecords, onPermissionChange = _a.onPermissionChange, onSave = _a.onSave, onCancelForm = _a.onCancelForm, footerSlot = _a.footerSlot, checkIcon = _a.checkIcon, labelOverrides = _a.labels, _v = _a.padding, padding = _v === void 0 ? "16px" : _v;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var labels = (0, react_1.useMemo)(function () { return (__assign(__assign({}, DEFAULT_LABELS), labelOverrides)); }, [labelOverrides]);
+    var _w = (0, react_1.useState)(null), deleteId = _w[0], setDeleteId = _w[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 headBg = (_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";
+    var isViewMode = mode === "view";
+    var columnLabels = {
+        read: labels.read,
+        create: labels.create,
+        edit: labels.editPermission,
+        delete: labels.deletePermission,
+        import: labels.importPermission,
+        export: labels.exportPermission,
+        automation: "Automation",
+    };
+    var cardSx = {
+        backgroundColor: surface,
+        borderRadius: "xl",
+        border: "1px solid",
+        borderColor: border,
+        boxShadow: "0 1px 2px rgba(16,24,40,0.05)",
+        overflow: "hidden",
+    };
+    var cardHeaderSx = {
+        px: 4,
+        py: 3,
+        borderBottom: "1px solid",
+        borderColor: border,
+    };
+    var thStyle = {
+        fontSize: "0.7rem",
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        color: muted,
+        borderColor: border,
+        py: 3,
+    };
+    var renderGrantedCheck = function () {
+        var _a, _b;
+        return checkIcon !== null && checkIcon !== void 0 ? checkIcon : (react_1.default.createElement(react_2.Box, { color: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.green) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : "#22C55E", display: "inline-flex" },
+            react_1.default.createElement(lucide_react_1.Check, { size: 18, strokeWidth: 3 })));
+    };
+    var renderListView = function () { return (react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 4 },
+        react_1.default.createElement(react_2.Box, __assign({}, cardSx),
+            react_1.default.createElement(react_2.Flex, __assign({}, cardHeaderSx, { 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.ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })),
+                    react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, labels.title),
+                    !isRolesLoading && (react_1.default.createElement(react_2.Badge, { colorScheme: "blue", variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", textTransform: "none" },
+                        labels.totalRoles,
+                        ": ",
+                        roles.length))),
+                react_1.default.createElement(Button_1.default, { label: labels.newRole, onClick: onNewRole, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", leftIcon: react_1.default.createElement(lucide_react_1.Plus, { size: 15 }) })),
+            react_1.default.createElement(react_2.Box, { overflowX: "auto" }, isRolesLoading ? (react_1.default.createElement(react_2.VStack, { spacing: 3, p: 4, align: "stretch" }, Array.from({ length: 6 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Skeleton, { key: idx, height: "18px", borderRadius: "md" })); }))) : roles.length === 0 ? (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.ShieldCheck, title: labels.noRoles, size: "sm", minH: "200px" })) : (react_1.default.createElement(react_2.Table, { variant: "simple", size: "sm" },
+                react_1.default.createElement(react_2.Thead, { bg: headBg },
+                    react_1.default.createElement(react_2.Tr, null,
+                        react_1.default.createElement(react_2.Th, __assign({}, thStyle, { width: "56px" }), labels.sNo),
+                        react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.roleNameColumn),
+                        react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.createdBy),
+                        react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.createdTime),
+                        react_1.default.createElement(react_2.Th, __assign({}, thStyle, { textAlign: "right" }), labels.actions))),
+                react_1.default.createElement(react_2.Tbody, null, roles.map(function (role, index) {
+                    var _a, _b, _c;
+                    return (react_1.default.createElement(react_2.Tr, { key: (_a = role.roles_id) !== null && _a !== void 0 ? _a : role.roleName, _hover: { bg: headBg }, transition: "background 0.15s ease" },
+                        react_1.default.createElement(react_2.Td, { borderColor: border, color: muted, fontSize: "sm" }, index + 1),
+                        react_1.default.createElement(react_2.Td, { borderColor: border, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: "sm", fontWeight: 600, color: heading }, role.roleName),
+                        react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", color: muted }, role.createdBy),
+                        react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", color: muted }, role.created_at),
+                        react_1.default.createElement(react_2.Td, { borderColor: border },
+                            react_1.default.createElement(react_2.HStack, { spacing: 1, justifyContent: "flex-end" },
+                                react_1.default.createElement(react_2.Tooltip, { label: labels.view, hasArrow: true },
+                                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquareArrowOutUpRight, { size: 15 }), "aria-label": labels.view, variant: "ghost", size: "xs", color: muted, onClick: function () { return onViewRole === null || onViewRole === void 0 ? void 0 : onViewRole(role); } })),
+                                react_1.default.createElement(react_2.Tooltip, { label: labels.edit, hasArrow: true },
+                                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Pencil, { size: 15 }), "aria-label": labels.edit, variant: "ghost", size: "xs", color: muted, onClick: function () { return onEditRole === null || onEditRole === void 0 ? void 0 : onEditRole(role); } })),
+                                react_1.default.createElement(react_2.Tooltip, { label: labels.delete, hasArrow: true },
+                                    react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Trash2, { size: 15 }), "aria-label": labels.delete, variant: "ghost", size: "xs", colorScheme: "red", color: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.red) === null || _b === void 0 ? void 0 : _b[400]) !== null && _c !== void 0 ? _c : "#F87171", onClick: function () { return setDeleteId(Number(role.roles_id)); } }))))));
+                })))))),
+        footerSlot)); };
+    var renderFormView = function () { return (react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 4 },
+        react_1.default.createElement(react_2.Box, __assign({}, cardSx),
+            react_1.default.createElement(react_2.Flex, __assign({}, cardHeaderSx, { alignItems: "center", gap: 2 }),
+                onCancelForm && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Go back", icon: react_1.default.createElement(lucide_react_1.ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onCancelForm })),
+                react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, labels.roleInformation)),
+            react_1.default.createElement(react_2.Box, { p: 4 },
+                react_1.default.createElement(react_2.Box, { maxW: "320px" },
+                    react_1.default.createElement(react_2.Tooltip, { label: isViewMode ? labels.readOnly : "", isDisabled: !isViewMode },
+                        react_1.default.createElement(react_2.Box, null,
+                            react_1.default.createElement(TextInput_1.default, { label: labels.roleName, value: roleName, placeholder: labels.roleNamePlaceholder, error: !!roleNameError, errorMessage: roleNameError, onChange: function (e) { return onRoleNameChange === null || onRoleNameChange === void 0 ? void 0 : onRoleNameChange(e.target.value); }, isRequired: true, width: "100%", isDisabled: isViewMode })))),
+                react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 3, mt: 4 },
+                    react_1.default.createElement(react_2.Checkbox, { isChecked: isSuperAdmin, isDisabled: isViewMode, size: "sm", onChange: function (e) { return onToggleSuperAdmin === null || onToggleSuperAdmin === void 0 ? void 0 : onToggleSuperAdmin(e.target.checked); } },
+                        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: heading }, labels.enableAllPermissions)),
+                    react_1.default.createElement(react_2.Checkbox, { isChecked: isTrackLocation, isDisabled: isViewMode, size: "sm", onChange: function (e) { return onToggleTrackLocation === null || onToggleTrackLocation === void 0 ? void 0 : onToggleTrackLocation(e.target.checked); } },
+                        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: heading }, labels.trackLocation)),
+                    react_1.default.createElement(react_2.Checkbox, { isChecked: isShowRecords, isDisabled: isViewMode, size: "sm", onChange: function (e) { return onToggleShowRecords === null || onToggleShowRecords === void 0 ? void 0 : onToggleShowRecords(e.target.checked); } },
+                        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: heading }, labels.showAllUserRecords))))),
+        react_1.default.createElement(react_2.Box, __assign({}, cardSx),
+            react_1.default.createElement(react_2.Flex, __assign({}, cardHeaderSx, { alignItems: "center" }),
+                react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, labels.permissionSettings)),
+            react_1.default.createElement(react_2.Box, { overflowX: "auto" },
+                react_1.default.createElement(react_2.Table, { variant: "simple", size: "sm" },
+                    react_1.default.createElement(react_2.Thead, { bg: headBg },
+                        react_1.default.createElement(react_2.Tr, null,
+                            react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.moduleName),
+                            permissionKeys.map(function (key) { return (react_1.default.createElement(react_2.Th, __assign({ key: key }, thStyle, { textAlign: "center" }), columnLabels[key])); }))),
+                    react_1.default.createElement(react_2.Tbody, null, permissions.length === 0 ? (react_1.default.createElement(react_2.Tr, null,
+                        react_1.default.createElement(react_2.Td, { colSpan: permissionKeys.length + 1, textAlign: "center", borderColor: border },
+                            react_1.default.createElement(react_2.Text, { color: muted, fontSize: "sm", py: 4 }, labels.noPermissions)))) : (permissions.map(function (perm) {
+                        var _a;
+                        var isAutomationModule = ((_a = perm.module) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "automation";
+                        return (react_1.default.createElement(react_2.Tr, { key: perm.module, _hover: { bg: headBg }, transition: "background 0.15s ease" },
+                            react_1.default.createElement(react_2.Td, { borderColor: border, color: heading, fontSize: "sm", fontWeight: 500, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, perm.module),
+                            permissionKeys.map(function (key) {
+                                var isRead = key === "read";
+                                return (react_1.default.createElement(react_2.Td, { key: key, textAlign: "center", borderColor: border },
+                                    react_1.default.createElement(react_2.Flex, { justify: "center" }, isViewMode ? (isAutomationModule ? (isRead &&
+                                        perm.automation &&
+                                        renderGrantedCheck()) : (perm[key] && renderGrantedCheck())) : isAutomationModule && !isRead ? null : (react_1.default.createElement(react_2.Checkbox, { size: "sm", isChecked: isAutomationModule
+                                            ? perm.automation
+                                            : perm[key], isDisabled: isAutomationModule && !isRead, onChange: function () {
+                                            return onPermissionChange === null || onPermissionChange === void 0 ? void 0 : onPermissionChange(perm.module, isAutomationModule ? "automation" : key);
+                                        } })))));
+                            })));
+                    }))))),
+            !isViewMode && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(react_2.Divider, { borderColor: border }),
+                react_1.default.createElement(react_2.Flex, { justifyContent: "flex-end", gap: 3, p: 4 },
+                    react_1.default.createElement(Button_1.default, { onClick: onCancelForm, size: "sm", sx: { fontSize: "xs" }, label: labels.cancel, colorScheme: "red", variant: "outline" }),
+                    react_1.default.createElement(Button_1.default, { onClick: onSave, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", isLoading: isSaving, label: isEditing ? labels.updateChanges : labels.saveChanges }))))))); };
+    return (react_1.default.createElement(react_2.Box, { p: padding, backgroundColor: (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50]) !== null && _p !== void 0 ? _p : "#F8FAFC", minHeight: "100%" },
+        view === "list" ? renderListView() : renderFormView(),
+        react_1.default.createElement(DeleteRoleModal_1.default, { isOpen: deleteId !== null, onClose: function () { return setDeleteId(null); }, onConfirm: function () {
+                if (deleteId !== null)
+                    onDeleteRole === null || onDeleteRole === void 0 ? void 0 : onDeleteRole(deleteId);
+                setDeleteId(null);
+            }, labels: labels })));
+};
+exports.default = RolesPermission;

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

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

package/dist/Components/RolesPermission/RolesPermission.test.js

@@ -0,0 +1,150 @@
+"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 __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 RolesPermission_1 = __importDefault(require("./RolesPermission"));
+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: { 200: "#bfdbfe", 400: "#60a5fa", 500: "#3b82f6" },
+            green: { 400: "#4ade80", 500: "#22c55e" },
+            red: { 400: "#f87171", 500: "#ef4444", 50: "#fef2f2" },
+            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 roles = [
+    {
+        roleName: "Admin",
+        createdBy: "Aisha Khan",
+        created_at: "Jun 6, 2026 10:00 AM",
+        permission: [],
+        roles_id: "1",
+        designation: "Army",
+        makeSuperAdmin: true,
+    },
+    {
+        roleName: "Sales",
+        createdBy: "Marcus Reed",
+        created_at: "Jun 5, 2026 09:00 AM",
+        permission: [],
+        roles_id: "2",
+        designation: "Army",
+    },
+];
+var permissions = [
+    {
+        module: "Leads",
+        read: true,
+        create: true,
+        edit: false,
+        delete: false,
+        import: false,
+        export: false,
+    },
+    {
+        module: "Automation",
+        read: false,
+        create: false,
+        edit: false,
+        delete: false,
+        automation: true,
+    },
+];
+var baseProps = {
+    roles: roles,
+    permissions: permissions,
+    roleName: "",
+    isSuperAdmin: false,
+    isTrackLocation: false,
+    isShowRecords: false,
+};
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("RolesPermission", function () {
+    it("renders the roles list", function () {
+        renderWithChakra(react_1.default.createElement(RolesPermission_1.default, __assign({ view: "list" }, baseProps)));
+        expect(react_2.screen.getByText("Roles & Permissions")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Admin")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Sales")).toBeInTheDocument();
+    });
+    it("calls onNewRole when New Role is clicked", function () {
+        var onNewRole = jest.fn();
+        renderWithChakra(react_1.default.createElement(RolesPermission_1.default, __assign({ view: "list" }, baseProps, { onNewRole: onNewRole })));
+        react_2.fireEvent.click(react_2.screen.getByText("New Role"));
+        expect(onNewRole).toHaveBeenCalled();
+    });
+    it("shows an empty state when there are no roles", function () {
+        renderWithChakra(react_1.default.createElement(RolesPermission_1.default, __assign({ view: "list" }, baseProps, { roles: [] })));
+        expect(react_2.screen.getByText("No roles found")).toBeInTheDocument();
+    });
+    it("renders the permission matrix in the form view", function () {
+        renderWithChakra(react_1.default.createElement(RolesPermission_1.default, __assign({ view: "form", mode: "create" }, baseProps)));
+        expect(react_2.screen.getByText("Permission Settings")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Leads")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Automation")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Enable All Permissions")).toBeInTheDocument();
+    });
+    it("opens the delete confirmation modal", function () {
+        renderWithChakra(react_1.default.createElement(RolesPermission_1.default, __assign({ view: "list" }, baseProps)));
+        react_2.fireEvent.click(react_2.screen.getAllByLabelText("Delete")[0]);
+        expect(react_2.screen.getByText("Are you sure you want to delete this role?")).toBeInTheDocument();
+    });
+});