@dexteel/mesf-core 4.27.0 → 4.29.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "4.27.0"
+  ".": "4.29.0"
 }

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# Changelog
+
+## [4.29.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.28.0...@dexteel/mesf-core-v4.29.0) (2025-05-08)
+
+
+### Features
+
+* **account-page:** Refactor account page, using MaterialUI ([#384](https://github.com/dexteel/mesf-core-frontend/issues/384)) ([16e00f5](https://github.com/dexteel/mesf-core-frontend/commit/16e00f5a73087e1df80b60721b51c1232a427f38))
+
+
+### Bug Fixes
+
+* **devops:** Remove tsc package in favor of typescript cli ([4b5f7bc](https://github.com/dexteel/mesf-core-frontend/commit/4b5f7bceaecbd1d57408f3e24034e6967a2a8727))
+
+## [4.28.0] - 2025-04-16
+
+
+
+# Changelog
+
+## [4.28.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.27.0...@dexteel/mesf-core-v4.28.0) (2025-04-16)
+
+
+### Features
+
+* **tree-picker-control-v2:** Show full path of node selected ([#373](https://github.com/dexteel/mesf-core-frontend/issues/373)) ([8ca434b](https://github.com/dexteel/mesf-core-frontend/commit/8ca434b29d1d41c1d2aed6087a52cc999f4e7452))
+
+## [4.27.0] - 2025-04-01
+
+
+
 # Changelog
 
 ## [4.27.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v4.26.5...@dexteel/mesf-core-v4.27.0) (2025-03-31)

package/dist/account/AuthProvider.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export declare const AuthContext: React.Context<{
-    getUserName: () => string;
+    getUserName: () => any;
     saveUserData: (userToken: any) => void;
     clearUserData: () => void;
     getFirstName: () => any;

package/dist/account/account.d.ts

@@ -1,2 +1,4 @@
+import "ag-grid-community/styles/ag-grid.css";
+import "ag-grid-community/styles/ag-theme-material.css";
 import React from "react";
 export declare const Account: () => React.JSX.Element;

package/dist/account/useToken.d.ts

@@ -1,6 +1,6 @@
 export declare const getTokenFromLS: () => string;
 export declare function useToken(): {
-    getUserName: () => string;
+    getUserName: () => any;
     saveUserData: (userToken: any) => void;
     clearUserData: () => void;
     getFirstName: () => any;

package/dist/controls/filters/TreePickerControlV2.d.ts

@@ -6,6 +6,7 @@ type TreePickerControlProps = {
     setListAssetDrawings?: Function;
     onSuccess?: (success: boolean) => void;
     showClearButton?: boolean;
+    showFullPath?: boolean;
     disabled?: boolean;
     dataSource: TreeNode;
     [key: string]: any;

package/dist/index.esm.js

@@ -1,5 +1,9 @@
 export { LicenseManager } from 'ag-grid-enterprise';
 import { withStyles, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, createStyles, Grid, Button, alpha, makeStyles, Dialog as Dialog$1, SvgIcon, Collapse, Typography as Typography$1, Checkbox, TextField, InputAdornment, IconButton as IconButton$1, MenuItem, Card, CardContent, CardActions, CircularProgress, Snackbar, FormControlLabel, Switch, Paper, InputLabel, Select, FormHelperText, DialogContentText, Badge, useTheme, FormControl, Input, Chip, Tooltip, ListItemIcon, Box, List, ListItem, ListItemText, MenuList, Divider, debounce } from '@material-ui/core';
+import LockIcon from '@material-ui/icons/Lock';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-material.css';
+import { AgGridReact } from 'ag-grid-react';
 import { isNil, get, isEmpty, values, round, isNaN, isNumber } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
@@ -15,7 +19,6 @@ import { useComplexState } from 'use-complex-state';
 import { createSlice } from '@reduxjs/toolkit';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { AgGridReact } from 'ag-grid-react';
 import MomentUtils from '@date-io/moment';
 import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from '@material-ui/pickers';
 import moment$7 from 'moment';
@@ -33,7 +36,6 @@ import FormatListBulletedSharpIcon from '@material-ui/icons/FormatListBulletedSh
 import axios from 'axios';
 import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
-import LockIcon from '@material-ui/icons/Lock';
 import SaveIcon from '@material-ui/icons/Save';
 import Button$1 from '@material-ui/core/Button';
 import Popover from '@material-ui/core/Popover';
@@ -62,7 +64,6 @@ import { useSpring, animated } from '@react-spring/web';
 import { DataGrid, GridOverlay } from '@material-ui/data-grid';
 import { format, fromZonedTime, formatInTimeZone } from 'date-fns-tz';
 import { findIana } from 'windows-iana';
-import 'ag-grid-community/styles/ag-grid.css';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import ReplayIcon from '@material-ui/icons/Replay';
 import ToggleOfIcon from '@material-ui/icons/ToggleOff';
@@ -713,10 +714,35 @@ function findNameById(node, id) {
     }
     return null;
 }
+function getNodePath(node, nodeId, parentPath, isRoot) {
+    if (parentPath === void 0) { parentPath = ""; }
+    if (isRoot === void 0) { isRoot = true; }
+    if (node.id === nodeId) {
+        if (isRoot) {
+            return "";
+        }
+        return parentPath ? "".concat(parentPath, "/").concat(node.name) : node.name;
+    }
+    if (node.children && node.children.length > 0) {
+        for (var _i = 0, _a = node.children; _i < _a.length; _i++) {
+            var child = _a[_i];
+            var currentPath = isRoot
+                ? ""
+                : parentPath
+                    ? "".concat(parentPath, "/").concat(node.name)
+                    : node.name;
+            var foundPath = getNodePath(child, nodeId, currentPath, false);
+            if (foundPath !== null) {
+                return foundPath;
+            }
+        }
+    }
+    return null;
+}
 var TreePickerControlV2 = function (props) {
     var classes = useStyles$A();
-    var value = props.value, onSelect = props.onSelect; props.styleLabel; var dataSource = props.dataSource; props.getOptionName; var _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, showAssetTree = props.showAssetTree, onHide = props.onHide, _e = props.listAssetDrawings, listAssetDrawings = _e === void 0 ? [] : _e, onSuccess = props.onSuccess, isLoading = props.isLoading, _f = props.disabled, disabled = _f === void 0 ? false : _f, other = __rest(props, ["value", "onSelect", "styleLabel", "dataSource", "getOptionName", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading", "disabled"]);
-    var _g = useState(false), open = _g[0], setOpen = _g[1];
+    var value = props.value, onSelect = props.onSelect; props.styleLabel; var dataSource = props.dataSource; props.getOptionName; var _a = props.inputTitle, inputTitle = _a === void 0 ? "Asset" : _a; props.showPath; var _c = props.multipleSelectNodes, multipleSelectNodes = _c === void 0 ? false : _c, _d = props.showClearButton, showClearButton = _d === void 0 ? false : _d, _e = props.showFullPath, showFullPath = _e === void 0 ? false : _e, showAssetTree = props.showAssetTree, onHide = props.onHide, _f = props.listAssetDrawings, listAssetDrawings = _f === void 0 ? [] : _f, onSuccess = props.onSuccess, isLoading = props.isLoading, _g = props.disabled, disabled = _g === void 0 ? false : _g, other = __rest(props, ["value", "onSelect", "styleLabel", "dataSource", "getOptionName", "inputTitle", "showPath", "multipleSelectNodes", "showClearButton", "showFullPath", "showAssetTree", "onHide", "listAssetDrawings", "onSuccess", "isLoading", "disabled"]);
+    var _h = useState(false), open = _h[0], setOpen = _h[1];
     var handleClickListItem = function (event) {
         event.stopPropagation();
         if (disabled)
@@ -732,10 +758,11 @@ var TreePickerControlV2 = function (props) {
         }
     };
     var description = useMemo(function () { return findNameById(dataSource, value) || ""; }, [dataSource, value]);
+    var fullPath = useMemo(function () { return getNodePath(dataSource, value) || ""; }, [dataSource, value]);
     return (React__default.createElement(Grid, { container: true, className: classes.root },
         !showAssetTree ? (React__default.createElement(Grid, { container: true, item: true, md: 12, xs: 12, style: { position: "relative" }, title: props.description },
             React__default.createElement(Grid, { item: true, style: { position: "relative", width: "100%" } },
-                React__default.createElement(TextField, { id: "treePickerTextField", label: inputTitle || "", variant: "outlined", value: description, margin: "dense", autoComplete: "off", fullWidth: true, disabled: true, InputProps: {
+                React__default.createElement(TextField, { id: "treePickerTextField", label: inputTitle || "", variant: "outlined", value: showFullPath ? fullPath : description, margin: "dense", autoComplete: "off", fullWidth: true, disabled: true, InputProps: {
                         style: {
                             color: disabled ? "grey" : "black",
                             cursor: "pointer",
@@ -8828,8 +8855,7 @@ function ChangePassword(props) {
     var _a = React__default.useState(""), password = _a[0], setPassword = _a[1];
     var _b = React__default.useState(""), confirmPassword = _b[0], setConfirmPassword = _b[1];
     var _c = React__default.useState(false), canChange = _c[0], setCanChange = _c[1];
-    var _d = React__default.useState(false), showError = _d[0], setShowError = _d[1];
-    var _e = React__default.useState(undefined), error = _e[0], setError = _e[1];
+    var _d = React__default.useState(""), error = _d[0], setError = _d[1];
     //functions
     var handleCancel = function () {
         onClose(false);
@@ -8839,7 +8865,6 @@ function ChangePassword(props) {
             var apiService_1 = new MESApiService();
             apiService_1.changePassword(userId, password).then(function (response) {
                 if (apiService_1.hasErrors) {
-                    setShowError(true);
                     setError(apiService_1.error);
                 }
                 else {
@@ -8859,30 +8884,19 @@ function ChangePassword(props) {
         setPassword("");
         setConfirmPassword("");
     }, [userId, open]);
-    return (React__default.createElement(Dialog$1, { onClose: function () { }, "aria-label": "Change Password", maxWidth: "xs", "aria-labelledby": "confirmation-dialog-title", open: open },
-        React__default.createElement(DialogTitle$1, { id: "confirmation-dialog-title" }, "Change Password"),
-        React__default.createElement(DialogContent$1, { dividers: true },
-            React__default.createElement(Alert$1, { show: showError, variant: "danger", dismissible: true, onClose: function () {
-                    setShowError(false);
-                    setError(undefined);
-                } },
-                React__default.createElement("strong", null, "There was an error"),
-                React__default.createElement("p", null,
-                    " ",
-                    error === undefined
-                        ? "There was an error"
-                        : error.internalError.message === undefined
-                            ? error.internalError
-                            : error.internalError.message)),
-            React__default.createElement("div", { className: "row" },
-                React__default.createElement("div", { className: "col-md-12 px-3 py-1" },
-                    React__default.createElement(SimplePasswordControl, { title: "Password", styleLabel: { minWidth: "150px" }, onChange: setPassword, name: "password", value: password }))),
-            React__default.createElement("div", { className: "row" },
-                React__default.createElement("div", { className: "col-md-12 px-3 py-1" },
-                    React__default.createElement(SimplePasswordControl, { title: "Confirm Password", styleLabel: { minWidth: "150px" }, onChange: setConfirmPassword, name: "confirmPassword", value: confirmPassword })))),
-        React__default.createElement(DialogActions$1, null,
-            React__default.createElement(Button, { autoFocus: true, onClick: handleCancel, color: "primary" }, "Cancel"),
-            React__default.createElement(Button, { onClick: handleOk, color: "primary", disabled: !canChange }, "Change Password"))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Dialog$1, { onClose: function () { }, "aria-label": "Change Password", maxWidth: "xs", "aria-labelledby": "confirmation-dialog-title", open: open },
+            React__default.createElement(DialogTitle$1, { id: "confirmation-dialog-title" }, "Change Password"),
+            React__default.createElement(DialogContent$1, { dividers: true },
+                React__default.createElement(Grid, { container: true, spacing: 2 },
+                    React__default.createElement(Grid, { item: true, md: 12 },
+                        React__default.createElement(TextField, { "aria-readonly": true, label: "Password", value: password, onChange: function (e) { return setPassword(e.target.value); }, variant: "outlined", size: "small", fullWidth: true, style: { minWidth: "150px" } })),
+                    React__default.createElement(Grid, { item: true, md: 12 },
+                        React__default.createElement(TextField, { "aria-readonly": true, label: "Confirm Password", value: confirmPassword, onChange: function (e) { return setConfirmPassword(e.target.value); }, variant: "outlined", size: "small", fullWidth: true, style: { minWidth: "150px" } })))),
+            React__default.createElement(DialogActions$1, null,
+                React__default.createElement(Button, { autoFocus: true, onClick: handleCancel, color: "primary" }, "Cancel"),
+                React__default.createElement(Button, { onClick: handleOk, color: "primary", variant: "contained", disabled: !canChange }, "Change Password"))),
+        React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 }
 
 var UserInitialState = {
@@ -8957,9 +8971,7 @@ function useToken() {
     var getUserName = function () {
         var sessionData = localStorage.getItem("userMESData");
         var userData = JSON.parse(sessionData);
-        return (((userData || {}).lastName || "") +
-            ", " +
-            ((userData || {}).firstName || ""));
+        return (userData || {}).username || "";
     };
     var getFirstName = function () {
         var sessionData = localStorage.getItem("userMESData");
@@ -9007,12 +9019,15 @@ var Account = function () {
     var _e = useState(""), userName = _e[0], setUserName = _e[1];
     var _f = useState(false), userIsDomain = _f[0], setUserIsDomain = _f[1];
     var _g = useState(false), userIsActive = _g[0], setUserIsActive = _g[1];
-    var _h = useState(""), userProfiles = _h[0], setUserProfiles = _h[1];
-    var _j = useState(""), userPermissions = _j[0], setUserPermissions = _j[1];
-    var _k = useState(""), userProcedures = _k[0], setUserProcedures = _k[1];
-    var _l = useState(false), open = _l[0], setOpen = _l[1];
-    var _m = useState(false), showSuccess = _m[0], setShowSuccess = _m[1];
-    var _o = useState(""), successMessage = _o[0], setSuccessMessage = _o[1];
+    var _h = useState(false), open = _h[0], setOpen = _h[1];
+    var _j = useState(false), showSuccess = _j[0], setShowSuccess = _j[1];
+    var _k = useState(""), successMessage = _k[0], setSuccessMessage = _k[1];
+    var _l = useState([]), userProfiles = _l[0], setUserProfiles = _l[1];
+    var _m = useState(""), profileQuickFilter = _m[0], setProfileQuickFilter = _m[1];
+    var _o = useState(null), profileGridApi = _o[0], setProfileGridApi = _o[1];
+    var _p = useState([]), userPermissions = _p[0], setUserPermissions = _p[1];
+    var _q = useState(""), permissionQuickFilter = _q[0], setPermissionQuickFilter = _q[1];
+    var _r = useState(null), permissionGridApi = _r[0], setPermissionGridApi = _r[1];
     var changePassword = function () {
         setOpen(true);
     };
@@ -9023,19 +9038,30 @@ var Account = function () {
         }
         setOpen(false);
     };
-    var stringToList = function (s) {
-        s = s.replace(/,/g, "\n");
-        s = s.replace(/ *\([^)]*\) */g, "");
-        return s;
-    };
+    var profilesColumnDefs = [
+        {
+            field: "profile",
+            headerName: "",
+            minWidth: 20,
+            flex: 1
+        },
+    ];
+    var permissionColumnDefs = [
+        {
+            field: "permission",
+            headerName: "",
+            minWidth: 20,
+            flex: 1
+        },
+    ];
     var loadUserData = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var resp, userData;
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return __generator(this, function (_j) {
-            switch (_j.label) {
+        var resp, userData, profiles, permissions;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return __generator(this, function (_k) {
+            switch (_k.label) {
                 case 0: return [4 /*yield*/, getUser(userId, userParam)];
                 case 1:
-                    resp = _j.sent();
+                    resp = _k.sent();
                     if (resp.ok) {
                         userData = get(resp, "data.tables[0].rows", null);
                         setUserName((_a = userData[0]) === null || _a === void 0 ? void 0 : _a.UserName);
@@ -9043,9 +9069,18 @@ var Account = function () {
                         setUserFirstName((_c = userData[0]) === null || _c === void 0 ? void 0 : _c.FirstName);
                         setUserIsDomain((_d = userData[0]) === null || _d === void 0 ? void 0 : _d.AuthTypeId);
                         setUserIsActive((_e = userData[0]) === null || _e === void 0 ? void 0 : _e.IsActive);
-                        setUserProfiles(stringToList(((_f = userData[0]) === null || _f === void 0 ? void 0 : _f.Profiles) || ""));
-                        setUserProcedures(stringToList(((_g = userData[0]) === null || _g === void 0 ? void 0 : _g.Procedures) || ""));
-                        setUserPermissions(stringToList(((_h = userData[0]) === null || _h === void 0 ? void 0 : _h.Permissions) || ""));
+                        profiles = ((_f = userData[0]) === null || _f === void 0 ? void 0 : _f.Profiles)
+                            ? (_g = userData[0]) === null || _g === void 0 ? void 0 : _g.Profiles.split(",").map(function (profile) { return ({ profile: profile.trim() }); }).sort(function (a, b) {
+                                return a.profile.localeCompare(b.profile);
+                            })
+                            : [];
+                        setUserProfiles(profiles);
+                        permissions = ((_h = userData[0]) === null || _h === void 0 ? void 0 : _h.Permissions)
+                            ? (_j = userData[0]) === null || _j === void 0 ? void 0 : _j.Permissions.split(",").map(function (permission) { return ({ permission: permission.trim() }); }).sort(function (a, b) {
+                                return a.permission.localeCompare(b.permission);
+                            })
+                            : [];
+                        setUserPermissions(permissions);
                     }
                     else {
                         setError(resp.message);
@@ -9079,34 +9114,42 @@ var Account = function () {
     }, [showSuccess]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(GenericPanel, { title: "Account Configuration", showPromptSuccess: showSuccess, successMessage: successMessage },
-            React__default.createElement("div", { className: "row" },
-                React__default.createElement("div", { className: "col-md-3 px-3 py-1" },
-                    React__default.createElement(SimpleTextControl, { title: "Username", styleLabel: { minWidth: "110px" }, styleTextBox: { maxWidth: "200px", minWidth: "100px" }, readOnly: true, name: "userName", value: userName, styleGeneral: { display: "flex" } })),
-                React__default.createElement("div", { className: "col-md-4 px-3 py-1" },
-                    React__default.createElement("button", { className: "btn btn-primary mes-button-primary", onClick: changePassword },
-                        React__default.createElement("i", { className: "fas fa-lock pr-1" }),
-                        "Change Password"),
-                    React__default.createElement(ChangePassword, { open: open, onClose: closeChangePassword, userId: userId }))),
-            React__default.createElement("div", { className: "row" },
-                React__default.createElement("div", { className: "col-md-3 px-3 py-1" },
-                    React__default.createElement(SimpleTextControl, { title: "Name", styleLabel: { minWidth: "110px" }, styleTextBox: { maxWidth: "200px", minWidth: "100px" }, readOnly: true, name: "firstName", value: userFirstName, styleGeneral: { display: "flex" } })),
-                React__default.createElement("div", { className: "col-md-3 px-3 py-1" },
-                    React__default.createElement(SimpleTextControl, { title: "Lastname", styleLabel: { minWidth: "110px" }, styleTextBox: { maxWidth: "200px", minWidth: "100px" }, readOnly: true, name: "lastName", value: userLastName, styleGeneral: { display: "flex" } }))),
-            React__default.createElement("div", { className: "row" },
-                React__default.createElement("div", { className: "col-md-3 px-3 py-1" },
-                    React__default.createElement(CheckBoxControl, { value: userIsDomain, title: "Domain User", readOnly: true, styleTextBox: { maxWidth: "300px" }, disabled: true })),
-                React__default.createElement("div", { className: "col-md-3 px-3 py-1" },
-                    React__default.createElement(CheckBoxControl, { value: userIsActive, title: "Active", readOnly: true, styleTextBox: { maxWidth: "300px" }, disabled: true }))),
-            React__default.createElement("div", { className: "row" },
-                React__default.createElement("div", { className: "col-md-4" },
-                    React__default.createElement(Typography$1, { gutterBottom: true, variant: "h5", component: "h2", className: "pt-1" }, "Profiles"),
-                    React__default.createElement("textarea", { className: "form-control", placeholder: userProfiles, readOnly: true, style: { height: "50vh" } })),
-                React__default.createElement("div", { className: "col-md-4" },
-                    React__default.createElement(Typography$1, { gutterBottom: true, variant: "h5", component: "h2", className: "pt-1" }, "Permissions"),
-                    React__default.createElement("textarea", { className: "form-control", placeholder: userPermissions, readOnly: true, style: { height: "50vh" } })),
-                React__default.createElement("div", { className: "col-md-4" },
-                    React__default.createElement(Typography$1, { gutterBottom: true, variant: "h5", component: "h2", className: "pt-1" }, "Procedures"),
-                    React__default.createElement("textarea", { className: "form-control", placeholder: userProcedures, readOnly: true, style: { height: "50vh" } })))),
+            React__default.createElement(Grid, { container: true, spacing: 2, style: { marginTop: 10 } },
+                React__default.createElement(Grid, { item: true, md: 12, component: Paper, style: { padding: 10 } },
+                    React__default.createElement(Grid, { container: true, md: 12, spacing: 2 },
+                        React__default.createElement(Grid, { item: true, xs: 12, md: 3 },
+                            React__default.createElement(TextField, { "aria-readonly": true, label: "Username", value: userName, variant: "outlined", size: "small", fullWidth: true })),
+                        React__default.createElement(Grid, { item: true, xs: 12, md: 4 },
+                            React__default.createElement(Button, { onClick: changePassword, variant: "contained", color: "primary", startIcon: React__default.createElement(LockIcon, null) }, "Change Password"),
+                            React__default.createElement(ChangePassword, { open: open, onClose: closeChangePassword, userId: userId }))),
+                    React__default.createElement(Grid, { container: true, md: 12, spacing: 2 },
+                        React__default.createElement(Grid, { item: true, xs: 12, md: 3 },
+                            React__default.createElement(TextField, { "aria-readonly": true, label: "Name", value: userFirstName, variant: "outlined", size: "small", fullWidth: true })),
+                        React__default.createElement(Grid, { item: true, xs: 12, md: 3 },
+                            React__default.createElement(TextField, { "aria-readonly": true, label: "Last Name", value: userLastName, variant: "outlined", size: "small", fullWidth: true }))),
+                    React__default.createElement(Grid, { item: true, container: true, md: 12, spacing: 2 },
+                        React__default.createElement(Grid, { item: true, xs: 12, md: 3 },
+                            React__default.createElement(FormControlLabel, { style: { margin: 0 }, control: React__default.createElement(Checkbox, { "aria-readonly": true, checked: userIsDomain, name: "DomainUser", disabled: true }), label: "Domain User" })),
+                        React__default.createElement(Grid, { item: true, xs: 12, md: 3 },
+                            React__default.createElement(FormControlLabel, { style: { margin: 0 }, control: React__default.createElement(Checkbox, { "aria-readonly": true, checked: userIsActive, name: "Active", disabled: true }), label: "Active" })))),
+                React__default.createElement(Grid, { item: true, md: 12, component: Paper, style: { marginTop: 4, padding: 10 } },
+                    React__default.createElement(Grid, { container: true, md: 12, spacing: 2 },
+                        React__default.createElement(Grid, { item: true, xs: 12, md: 4 },
+                            React__default.createElement(Typography$1, { gutterBottom: true, variant: "h5", component: "h2", className: "pt-1" }, "Profiles"),
+                            React__default.createElement(TextField, { label: "Search", value: profileQuickFilter, onChange: function (e) {
+                                    setProfileQuickFilter(e.target.value);
+                                    profileGridApi === null || profileGridApi === void 0 ? void 0 : profileGridApi.setQuickFilter(e.target.value);
+                                }, variant: "outlined", size: "small", fullWidth: true }),
+                            React__default.createElement("div", { style: { height: "43vh", width: "100%", marginTop: 5 }, className: "ag-theme-material" },
+                                React__default.createElement(AgGridReact, { rowData: userProfiles, rowHeight: 30, headerHeight: 0, columnDefs: profilesColumnDefs, animateRows: true, suppressRowClickSelection: true, onGridReady: function (params) { return setProfileGridApi(params.api); } }))),
+                        React__default.createElement(Grid, { item: true, xs: 12, md: 8 },
+                            React__default.createElement(Typography$1, { gutterBottom: true, variant: "h5", component: "h2", className: "pt-1" }, "Permissions"),
+                            React__default.createElement(TextField, { label: "Search", value: permissionQuickFilter, onChange: function (e) {
+                                    setPermissionQuickFilter(e.target.value);
+                                    permissionGridApi === null || permissionGridApi === void 0 ? void 0 : permissionGridApi.setQuickFilter(e.target.value);
+                                }, variant: "outlined", size: "small", fullWidth: true }),
+                            React__default.createElement("div", { style: { height: "43vh", width: "100%", marginTop: 5 }, className: "ag-theme-material" },
+                                React__default.createElement(AgGridReact, { rowData: userPermissions, rowHeight: 30, headerHeight: 0, columnDefs: permissionColumnDefs, animateRows: true, suppressRowClickSelection: true, onGridReady: function (params) { return setPermissionGridApi(params.api); } }))))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () {
                 setError("");
             } })));