@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.4

package/dist/components/core/users/CreateUserRole.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateUserRole.d.ts","sourceRoot":"","sources":["../../../../src/components/core/users/CreateUserRole.tsx"],"names":[],"mappings":"AAkBA,QAAA,MAAM,cAAc,aAAc,GAAG,4CAgMpC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CreateUserRole.d.ts","sourceRoot":"","sources":["../../../../src/components/core/users/CreateUserRole.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,cAAc,aAAc,GAAG,4CAiLpC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/core/users/CreateUserRole.js

@@ -43,17 +43,16 @@ import { useCreateuserroleMutation } from "../../../redux/api/userApi";
 import { useFormik } from "formik";
 import { usePathname } from "../../../hooks/usePathname";
 import { useRouter } from "../../../hooks/useRouter";
-import { Button } from "primereact/button";
-import { InputText } from "primereact/inputtext";
-import { Message } from "primereact/message";
-import { classNames } from "primereact/utils";
+import { SolidButton, SolidInput, SolidMessage } from "../../shad-cn-ui";
 import qs from "qs";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import * as Yup from "yup";
+import { useDispatch } from "react-redux";
+import { showToast } from "../../../redux/features/toastSlice";
 var CreateUserRole = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h;
     var data = _a.data;
-    var toast = useRef(null);
+    var dispatch = useDispatch();
     var _j = useLazyGetrolesQuery(), triggerGetRoles = _j[0], _k = _j[1], roleLazy = _k.data, isRoleLazyFetching = _k.isFetching, roleLazyError = _k.error;
     var router = useRouter();
     var _l = useCreateuserroleMutation(), createMenuItem = _l[0], _m = _l[1], isLoading = _m.isLoading, isSuccess = _m.isSuccess, isError = _m.isError, error = _m.error, newInvoice = _m.data;
@@ -102,22 +101,18 @@ var CreateUserRole = function (_a) {
     });
     var showError = function () { return __awaiter(void 0, void 0, void 0, function () {
         var errors, errorMessages;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
                 case 0: return [4 /*yield*/, formik.validateForm()];
                 case 1:
-                    errors = _b.sent();
+                    errors = _a.sent();
                     errorMessages = Object.values(errors);
                     if (errorMessages.length > 0) {
-                        (_a = toast === null || toast === void 0 ? void 0 : toast.current) === null || _a === void 0 ? void 0 : _a.show({
-                            severity: "success",
+                        dispatch(showToast({
+                            severity: "error",
                             summary: ERROR_MESSAGES.SEND_REPORT,
-                            // sticky: true,
-                            life: 3000,
-                            //@ts-ignore
-                            content: function (props) { return (_jsx("div", { className: "flex flex-column align-items-left", style: { flex: "1" }, children: errorMessages.map(function (m, index) { return (_jsx("div", { className: "flex align-items-center gap-2", children: _jsx("span", { className: "font-bold text-900", children: String(m) }) }, index)); }) })); },
-                        });
+                            detail: errorMessages.map(String).join(", "),
+                        }));
                     }
                     return [2 /*return*/];
             }
@@ -160,10 +155,8 @@ var CreateUserRole = function (_a) {
             router.push("/admin/iam/users/all");
         }
     }, [isSuccess]);
-    return (_jsx("div", { className: "grid", children: _jsx("div", { className: "col-12 xl:col-10 mx-auto", children: _jsx("div", { children: _jsxs("form", { onSubmit: formik.handleSubmit, children: [pathname.includes('create') ? _jsxs("div", { className: "flex gap-3 justify-content-between mb-5", children: [_jsx("div", { className: "form-wrapper-title", children: " Create User Role" }), _jsxs("div", { className: "gap-3 flex", children: [_jsx("div", { children: _jsx(Button, { label: "Save", size: "small", onClick: function () { return showError(); }, type: "submit", className: 'small-button' }) }), _jsx(CancelButton, {})] })] }) :
-                            _jsxs("div", { className: "flex gap-3 justify-content-between mb-5", children: [_jsx("h1", { className: "m-0", children: " Edit User" }), _jsxs("div", { className: "gap-3 flex", children: [_jsx("div", { children: _jsx(Button, { label: "Save", onClick: function () { return showError(); }, type: "submit", size: "small", className: 'small-button' }) }), _jsx("div", {}), _jsx(CancelButton, {})] })] }), _jsx("div", { className: "form-wrapper", children: _jsxs("div", { className: "grid formgrid", children: [_jsx("div", { className: "md:col-6 sm:col-12", children: _jsxs("div", { className: "field", children: [_jsx("label", { htmlFor: "username", className: "form-label form-field-label", children: "User Name" }), _jsx(InputText, { type: "text", id: "username", name: "username", onChange: formik.handleChange, value: formik.values.username, className: classNames("p-inputtext-sm w-full small-input", {
-                                                        "p-invalid": isFormFieldValid(formik, "username"),
-                                                    }) }), isFormFieldValid(formik, "username") && (_jsx(Message, { severity: "error", text: (_b = formik.errors.username) === null || _b === void 0 ? void 0 : _b.toString() }))] }) }), _jsx("div", { className: "md:col-6 sm:col-12", children: _jsxs("div", { className: "field", children: [_jsx("label", { htmlFor: "type", className: "form-label form-field-label", children: "Role Name" }), _jsxs("div", { children: [_jsx(AutoCompleteField, { multiple: false, isFormFieldValid: isFormFieldValid, formik: formik, fieldName: "roleName", searchData: searchRole, existingData: { label: (_c = data === null || data === void 0 ? void 0 : data.parentCategory) === null || _c === void 0 ? void 0 : _c.title, value: (_d = data === null || data === void 0 ? void 0 : data.parentCategory) === null || _d === void 0 ? void 0 : _d.id }, existingDataTitle: (_e = data === null || data === void 0 ? void 0 : data.parentCategory) === null || _e === void 0 ? void 0 : _e.title, existingDataId: (_f = data === null || data === void 0 ? void 0 : data.parentCategory) === null || _f === void 0 ? void 0 : _f.id, className: "solid-standard-autocomplete" }), isFormFieldValid(formik, "roleName") && (_jsx(Message, { severity: "error", text: (_h = (_g = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _g === void 0 ? void 0 : _g.roleName) === null || _h === void 0 ? void 0 : _h.toString() }))] })] }) })] }) })] }) }) }) }));
+    return (_jsx("div", { className: "grid", children: _jsx("div", { className: "col-12 xl:col-10 mx-auto", children: _jsx("div", { children: _jsxs("form", { onSubmit: formik.handleSubmit, children: [pathname.includes('create') ? _jsxs("div", { className: "flex gap-3 justify-content-between mb-5", children: [_jsx("div", { className: "form-wrapper-title", children: " Create User Role" }), _jsxs("div", { className: "gap-3 flex", children: [_jsx("div", { children: _jsx(SolidButton, { label: "Save", size: "sm", onClick: function () { return showError(); }, type: "submit", className: 'small-button' }) }), _jsx(CancelButton, {})] })] }) :
+                            _jsxs("div", { className: "flex gap-3 justify-content-between mb-5", children: [_jsx("h1", { className: "m-0", children: " Edit User" }), _jsxs("div", { className: "gap-3 flex", children: [_jsx("div", { children: _jsx(SolidButton, { label: "Save", onClick: function () { return showError(); }, type: "submit", size: "sm", className: 'small-button' }) }), _jsx("div", {}), _jsx(CancelButton, {})] })] }), _jsx("div", { className: "form-wrapper", children: _jsxs("div", { className: "grid formgrid", children: [_jsx("div", { className: "md:col-6 sm:col-12", children: _jsxs("div", { className: "field", children: [_jsx("label", { htmlFor: "username", className: "form-label form-field-label", children: "User Name" }), _jsx(SolidInput, { type: "text", id: "username", name: "username", onChange: formik.handleChange, value: formik.values.username, className: "p-inputtext-sm w-full small-input", "aria-invalid": !!isFormFieldValid(formik, "username") }), isFormFieldValid(formik, "username") && (_jsx(SolidMessage, { severity: "error", text: (_b = formik.errors.username) === null || _b === void 0 ? void 0 : _b.toString() }))] }) }), _jsx("div", { className: "md:col-6 sm:col-12", children: _jsxs("div", { className: "field", children: [_jsx("label", { htmlFor: "type", className: "form-label form-field-label", children: "Role Name" }), _jsxs("div", { children: [_jsx(AutoCompleteField, { multiple: false, isFormFieldValid: isFormFieldValid, formik: formik, fieldName: "roleName", searchData: searchRole, existingData: { label: (_c = data === null || data === void 0 ? void 0 : data.parentCategory) === null || _c === void 0 ? void 0 : _c.title, value: (_d = data === null || data === void 0 ? void 0 : data.parentCategory) === null || _d === void 0 ? void 0 : _d.id }, existingDataTitle: (_e = data === null || data === void 0 ? void 0 : data.parentCategory) === null || _e === void 0 ? void 0 : _e.title, existingDataId: (_f = data === null || data === void 0 ? void 0 : data.parentCategory) === null || _f === void 0 ? void 0 : _f.id, className: "solid-standard-autocomplete" }), isFormFieldValid(formik, "roleName") && (_jsx(SolidMessage, { severity: "error", text: (_h = (_g = formik === null || formik === void 0 ? void 0 : formik.errors) === null || _g === void 0 ? void 0 : _g.roleName) === null || _h === void 0 ? void 0 : _h.toString() }))] })] }) })] }) })] }) }) }) }));
 };
 export default CreateUserRole;
 //# sourceMappingURL=CreateUserRole.js.map

package/dist/components/core/users/CreateUserRole.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateUserRole.js","sourceRoot":"","sources":["../../../../src/components/core/users/CreateUserRole.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { AutoCompleteField } from \"../../../components/common/AutoCompleteField\";\nimport { CancelButton } from \"../../../components/common/CancelButton\";\nimport { ERROR_MESSAGES } from \"../../../constants/error-messages\";\nimport { useLazyGetrolesQuery } from \"../../../redux/api/roleApi\";\nimport { useCreateuserroleMutation } from \"../../../redux/api/userApi\";\nimport { useFormik } from \"formik\";\nimport { usePathname } from \"../../../hooks/usePathname\";\nimport { useRouter } from \"../../../hooks/useRouter\";\nimport { Button } from \"primereact/button\";\nimport { InputText } from \"primereact/inputtext\";\nimport { Message } from \"primereact/message\";\nimport { Toast } from \"primereact/toast\";\nimport { classNames } from \"primereact/utils\";\nimport qs from \"qs\";\nimport { useEffect, useRef } from \"react\";\nimport * as Yup from \"yup\";\n\nconst CreateUserRole = ({ data }: any) => {\n  const toast = useRef<Toast>(null);\n\n  const [triggerGetRoles, { data: roleLazy, isFetching: isRoleLazyFetching, error: roleLazyError }] = useLazyGetrolesQuery();\n  const router = useRouter();\n\n  const [\n    createMenuItem,\n    { isLoading, isSuccess, isError, error, data: newInvoice },\n  ] = useCreateuserroleMutation();\n\n  const initialValues = {\n    username: data ? data.username : \"\",\n    roleName: data ? data.roleName : \"\"\n  };\n  const validationSchema = Yup.object({\n    username: Yup.string().required(ERROR_MESSAGES.FIELD_REUQIRED('User Name')),\n    roleName: Yup.lazy((value) => {\n      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n        return Yup.object().required(ERROR_MESSAGES.FIELD_REUQIRED('Role Name'));\n      } else if (typeof value === 'string') {\n        return Yup.string().required(ERROR_MESSAGES.FIELD_REUQIRED('Role Name'));\n      } else {\n        return Yup.mixed().required(ERROR_MESSAGES.FIELD_REUQIRED('Role Name'));\n      }\n    })\n  });\n\n  const isFormFieldValid = (formik: any, fieldName: string) =>\n    formik.touched[fieldName] && formik.errors[fieldName];\n\n  const pathname = usePathname();\n\n  const formik = useFormik({\n    initialValues,\n    validationSchema,\n    enableReinitialize: true,\n    onSubmit: async (values) => {\n      try {\n        let obj = {\n          username: values.username,\n          roleName: values.roleName.label\n        }\n        createMenuItem(obj);\n      } catch (err) {\n        console.error(ERROR_MESSAGES.FAILED_CREATE_INVOICE, err);\n      }\n    },\n  });\n\n  const showError = async () => {\n    const errors = await formik.validateForm();\n    const errorMessages = Object.values(errors);\n\n    if (errorMessages.length > 0) {\n      toast?.current?.show({\n        severity: \"success\",\n        summary: ERROR_MESSAGES.SEND_REPORT,\n        // sticky: true,\n        life: 3000,\n        //@ts-ignore\n        content: (props) => (\n          <div\n            className=\"flex flex-column align-items-left\"\n            style={{ flex: \"1\" }}\n          >\n            {errorMessages.map((m, index) => (\n              <div className=\"flex align-items-center gap-2\" key={index}>\n                <span className=\"font-bold text-900\">{String(m)}</span>\n              </div>\n            ))}\n          </div>\n        ),\n      });\n    }\n  };\n\n  const searchRole = async (event: any) => {\n    const query = event.query;\n    let queryData = {};\n    if (query) {\n      queryData = {\n        roleName: query\n      };\n    }\n\n    const queryString = qs.stringify(queryData, {\n      encodeValuesOnly: true\n    });\n\n    // Trigger the API call manually\n    const result = await triggerGetRoles(queryString).unwrap();\n\n    // Map the API response to AutoComplete format\n    if (result && result.data) {\n      const filteredMenu = result.data.map((m: any) => ({ label: m.name, value: m.id }));\n\n      // Update the suggestions in state\n      return filteredMenu\n    } else {\n      // Handle the case where no data is returned\n      return []\n    }\n  };\n\n  useEffect(() => {\n    if (isSuccess == true) {\n      router.push(`/admin/iam/users/all`);\n    }\n  }, [isSuccess])\n\n  return (\n    <div className=\"grid\">\n      <div className=\"col-12 xl:col-10 mx-auto\">\n        <div>\n          {/* <Toast ref={toast} /> */}\n\n          <form onSubmit={formik.handleSubmit}>\n            {pathname.includes('create') ? <div className=\"flex gap-3 justify-content-between mb-5\">\n              <div className=\"form-wrapper-title\"> Create User Role</div>\n              <div className=\"gap-3 flex\">\n                <div>\n                  <Button label=\"Save\" size=\"small\" onClick={() => showError()} type=\"submit\" className='small-button' />\n                </div>\n                <CancelButton />\n              </div>\n            </div> :\n              <div className=\"flex gap-3 justify-content-between mb-5\">\n                <h1 className=\"m-0\"> Edit User</h1>\n                <div className=\"gap-3 flex\">\n                  <div>\n                    <Button label=\"Save\" onClick={() => showError()} type=\"submit\" size=\"small\" className='small-button' />\n                  </div>\n                  <div>\n                    {/* <Button label=\"Delete\" severity=\"danger\" type=\"button\" /> */}\n                  </div>\n                  <CancelButton />\n                </div>\n              </div>\n            }\n            <div className=\"form-wrapper\">\n              <div className=\"grid formgrid\">\n                <div className=\"md:col-6 sm:col-12\">\n                  <div className=\"field\">\n                    <label htmlFor=\"username\" className=\"form-label form-field-label\">\n                      User Name\n                    </label>\n                    <InputText\n                      type=\"text\"\n                      id=\"username\"\n                      name=\"username\"\n                      onChange={formik.handleChange}\n                      value={formik.values.username}\n                      className={classNames(\"p-inputtext-sm w-full small-input\", {\n                        \"p-invalid\": isFormFieldValid(formik, \"username\"),\n                      })}\n                    />\n                    {isFormFieldValid(formik, \"username\") && (\n                      <Message severity=\"error\" text={formik.errors.username?.toString()} />\n                    )}\n                  </div>\n                </div>\n                <div className=\"md:col-6 sm:col-12\">\n                  <div className=\"field\">\n                    <label htmlFor=\"type\" className=\"form-label form-field-label\">\n                      Role Name\n                    </label>\n                    <div>\n                      <AutoCompleteField\n                        multiple={false}\n                        isFormFieldValid={isFormFieldValid}\n                        formik={formik}\n                        fieldName=\"roleName\"\n                        searchData={searchRole}\n                        existingData={{ label: data?.parentCategory?.title, value: data?.parentCategory?.id }}\n                        existingDataTitle={data?.parentCategory?.title}\n                        existingDataId={data?.parentCategory?.id}\n                        className=\"solid-standard-autocomplete\"\n                      ></AutoCompleteField>\n                      {isFormFieldValid(formik, \"roleName\") && (\n                        <Message severity=\"error\" text={formik?.errors?.roleName?.toString()} />\n                      )}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default CreateUserRole;\n"]}
+{"version":3,"file":"CreateUserRole.js","sourceRoot":"","sources":["../../../../src/components/core/users/CreateUserRole.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8CAA8C,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,CAAC;AACpB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAE/D,IAAM,cAAc,GAAG,UAAC,EAAa;;QAAX,IAAI,UAAA;IAC5B,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAEzB,IAAA,KAA8F,oBAAoB,EAAE,EAAnH,eAAe,QAAA,EAAE,UAAwE,EAAhE,QAAQ,UAAA,EAAc,kBAAkB,gBAAA,EAAS,aAAa,WAA4B,CAAC;IAC3H,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAErB,IAAA,KAGF,yBAAyB,EAAE,EAF7B,cAAc,QAAA,EACd,UAA0D,EAAxD,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAA,EAAE,KAAK,WAAA,EAAQ,UAAU,UAC3B,CAAC;IAEhC,IAAM,aAAa,GAAG;QACpB,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;QACnC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;KACpC,CAAC;IACF,IAAM,gBAAgB,GAAG,GAAG,CAAC,MAAM,CAAC;QAClC,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QAC3E,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,UAAC,KAAK;YACvB,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACxE,OAAO,GAAG,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;aAC1E;iBAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBACpC,OAAO,GAAG,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;aAC1E;iBAAM;gBACL,OAAO,GAAG,CAAC,KAAK,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC;aACzE;QACH,CAAC,CAAC;KACH,CAAC,CAAC;IAEH,IAAM,gBAAgB,GAAG,UAAC,MAAW,EAAE,SAAiB;QACtD,OAAA,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC;IAArD,CAAqD,CAAC;IAExD,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,IAAM,MAAM,GAAG,SAAS,CAAC;QACvB,aAAa,eAAA;QACb,gBAAgB,kBAAA;QAChB,kBAAkB,EAAE,IAAI;QACxB,QAAQ,EAAE,UAAO,MAAM;;;gBACrB,IAAI;oBACE,GAAG,GAAG;wBACR,QAAQ,EAAE,MAAM,CAAC,QAAQ;wBACzB,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK;qBAChC,CAAA;oBACD,cAAc,CAAC,GAAG,CAAC,CAAC;iBACrB;gBAAC,OAAO,GAAG,EAAE;oBACZ,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,EAAE,GAAG,CAAC,CAAC;iBAC1D;;;aACF;KACF,CAAC,CAAC;IAEH,IAAM,SAAS,GAAG;;;;wBACD,qBAAM,MAAM,CAAC,YAAY,EAAE,EAAA;;oBAApC,MAAM,GAAG,SAA2B;oBACpC,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;oBAE5C,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;wBAC5B,QAAQ,CAAC,SAAS,CAAC;4BACjB,QAAQ,EAAE,OAAO;4BACjB,OAAO,EAAE,cAAc,CAAC,WAAW;4BACnC,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;yBAC7C,CAAC,CAAC,CAAC;qBACL;;;;SACF,CAAC;IAEF,IAAM,UAAU,GAAG,UAAO,KAAU;;;;;oBAC5B,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;oBACtB,SAAS,GAAG,EAAE,CAAC;oBACnB,IAAI,KAAK,EAAE;wBACT,SAAS,GAAG;4BACV,QAAQ,EAAE,KAAK;yBAChB,CAAC;qBACH;oBAEK,WAAW,GAAG,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE;wBAC1C,gBAAgB,EAAE,IAAI;qBACvB,CAAC,CAAC;oBAGY,qBAAM,eAAe,CAAC,WAAW,CAAC,CAAC,MAAM,EAAE,EAAA;;oBAApD,MAAM,GAAG,SAA2C;oBAE1D,8CAA8C;oBAC9C,IAAI,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE;wBACnB,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAhC,CAAgC,CAAC,CAAC;wBAEnF,kCAAkC;wBAClC,sBAAO,YAAY,EAAA;qBACpB;yBAAM;wBACL,4CAA4C;wBAC5C,sBAAO,EAAE,EAAA;qBACV;;;;SACF,CAAC;IAEF,SAAS,CAAC;QACR,IAAI,SAAS,IAAI,IAAI,EAAE;YACrB,MAAM,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;SACrC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,OAAO,CACL,cAAK,SAAS,EAAC,MAAM,YACnB,cAAK,SAAS,EAAC,0BAA0B,YACvC,wBAGE,gBAAM,QAAQ,EAAE,MAAM,CAAC,YAAY,aAChC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,eAAK,SAAS,EAAC,yCAAyC,aACrF,cAAK,SAAS,EAAC,oBAAoB,kCAAwB,EAC3D,eAAK,SAAS,EAAC,YAAY,aACzB,wBACE,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,cAAM,OAAA,SAAS,EAAE,EAAX,CAAW,EAAE,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,cAAc,GAAG,GACrG,EACN,KAAC,YAAY,KAAG,IACZ,IACF,CAAC,CAAC;4BACN,eAAK,SAAS,EAAC,yCAAyC,aACtD,aAAI,SAAS,EAAC,KAAK,2BAAgB,EACnC,eAAK,SAAS,EAAC,YAAY,aACzB,wBACE,KAAC,WAAW,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,cAAM,OAAA,SAAS,EAAE,EAAX,CAAW,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,cAAc,GAAG,GACrG,EACN,eAEM,EACN,KAAC,YAAY,KAAG,IACZ,IACF,EAER,cAAK,SAAS,EAAC,cAAc,YAC3B,eAAK,SAAS,EAAC,eAAe,aAC5B,cAAK,SAAS,EAAC,oBAAoB,YACjC,eAAK,SAAS,EAAC,OAAO,aACpB,gBAAO,OAAO,EAAC,UAAU,EAAC,SAAS,EAAC,6BAA6B,0BAEzD,EACR,KAAC,UAAU,IACT,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,UAAU,EACb,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,MAAM,CAAC,YAAY,EAC7B,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,EAC7B,SAAS,EAAC,mCAAmC,kBAC/B,CAAC,CAAC,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC,GACpD,EACD,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CACvC,KAAC,YAAY,IAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAE,MAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,0CAAE,QAAQ,EAAE,GAAI,CAC5E,IACG,GACF,EACN,cAAK,SAAS,EAAC,oBAAoB,YACjC,eAAK,SAAS,EAAC,OAAO,aACpB,gBAAO,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,6BAA6B,0BAErD,EACR,0BACE,KAAC,iBAAiB,IAChB,QAAQ,EAAE,KAAK,EACf,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,SAAS,EAAC,UAAU,EACpB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,EAAE,KAAK,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc,0CAAE,KAAK,EAAE,KAAK,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc,0CAAE,EAAE,EAAE,EACrF,iBAAiB,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc,0CAAE,KAAK,EAC9C,cAAc,EAAE,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc,0CAAE,EAAE,EACxC,SAAS,EAAC,6BAA6B,GACpB,EACpB,gBAAgB,CAAC,MAAM,EAAE,UAAU,CAAC,IAAI,CACvC,KAAC,YAAY,IAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAE,MAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,0CAAE,QAAQ,0CAAE,QAAQ,EAAE,GAAI,CAC9E,IACG,IACF,GACF,IACF,GACF,IACD,GACH,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["\nimport { AutoCompleteField } from \"../../../components/common/AutoCompleteField\";\nimport { CancelButton } from \"../../../components/common/CancelButton\";\nimport { ERROR_MESSAGES } from \"../../../constants/error-messages\";\nimport { useLazyGetrolesQuery } from \"../../../redux/api/roleApi\";\nimport { useCreateuserroleMutation } from \"../../../redux/api/userApi\";\nimport { useFormik } from \"formik\";\nimport { usePathname } from \"../../../hooks/usePathname\";\nimport { useRouter } from \"../../../hooks/useRouter\";\nimport { SolidButton, SolidInput, SolidMessage } from \"../../shad-cn-ui\";\nimport qs from \"qs\";\nimport { useEffect } from \"react\";\nimport * as Yup from \"yup\";\nimport { useDispatch } from \"react-redux\";\nimport { showToast } from \"../../../redux/features/toastSlice\";\n\nconst CreateUserRole = ({ data }: any) => {\n  const dispatch = useDispatch();\n\n  const [triggerGetRoles, { data: roleLazy, isFetching: isRoleLazyFetching, error: roleLazyError }] = useLazyGetrolesQuery();\n  const router = useRouter();\n\n  const [\n    createMenuItem,\n    { isLoading, isSuccess, isError, error, data: newInvoice },\n  ] = useCreateuserroleMutation();\n\n  const initialValues = {\n    username: data ? data.username : \"\",\n    roleName: data ? data.roleName : \"\"\n  };\n  const validationSchema = Yup.object({\n    username: Yup.string().required(ERROR_MESSAGES.FIELD_REUQIRED('User Name')),\n    roleName: Yup.lazy((value) => {\n      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n        return Yup.object().required(ERROR_MESSAGES.FIELD_REUQIRED('Role Name'));\n      } else if (typeof value === 'string') {\n        return Yup.string().required(ERROR_MESSAGES.FIELD_REUQIRED('Role Name'));\n      } else {\n        return Yup.mixed().required(ERROR_MESSAGES.FIELD_REUQIRED('Role Name'));\n      }\n    })\n  });\n\n  const isFormFieldValid = (formik: any, fieldName: string) =>\n    formik.touched[fieldName] && formik.errors[fieldName];\n\n  const pathname = usePathname();\n\n  const formik = useFormik({\n    initialValues,\n    validationSchema,\n    enableReinitialize: true,\n    onSubmit: async (values) => {\n      try {\n        let obj = {\n          username: values.username,\n          roleName: values.roleName.label\n        }\n        createMenuItem(obj);\n      } catch (err) {\n        console.error(ERROR_MESSAGES.FAILED_CREATE_INVOICE, err);\n      }\n    },\n  });\n\n  const showError = async () => {\n    const errors = await formik.validateForm();\n    const errorMessages = Object.values(errors);\n\n    if (errorMessages.length > 0) {\n      dispatch(showToast({\n        severity: \"error\",\n        summary: ERROR_MESSAGES.SEND_REPORT,\n        detail: errorMessages.map(String).join(\", \"),\n      }));\n    }\n  };\n\n  const searchRole = async (event: any) => {\n    const query = event.query;\n    let queryData = {};\n    if (query) {\n      queryData = {\n        roleName: query\n      };\n    }\n\n    const queryString = qs.stringify(queryData, {\n      encodeValuesOnly: true\n    });\n\n    // Trigger the API call manually\n    const result = await triggerGetRoles(queryString).unwrap();\n\n    // Map the API response to AutoComplete format\n    if (result && result.data) {\n      const filteredMenu = result.data.map((m: any) => ({ label: m.name, value: m.id }));\n\n      // Update the suggestions in state\n      return filteredMenu\n    } else {\n      // Handle the case where no data is returned\n      return []\n    }\n  };\n\n  useEffect(() => {\n    if (isSuccess == true) {\n      router.push(`/admin/iam/users/all`);\n    }\n  }, [isSuccess])\n\n  return (\n    <div className=\"grid\">\n      <div className=\"col-12 xl:col-10 mx-auto\">\n        <div>\n          {/* <Toast ref={toast} /> */}\n\n          <form onSubmit={formik.handleSubmit}>\n            {pathname.includes('create') ? <div className=\"flex gap-3 justify-content-between mb-5\">\n              <div className=\"form-wrapper-title\"> Create User Role</div>\n              <div className=\"gap-3 flex\">\n                <div>\n                  <SolidButton label=\"Save\" size=\"sm\" onClick={() => showError()} type=\"submit\" className='small-button' />\n                </div>\n                <CancelButton />\n              </div>\n            </div> :\n              <div className=\"flex gap-3 justify-content-between mb-5\">\n                <h1 className=\"m-0\"> Edit User</h1>\n                <div className=\"gap-3 flex\">\n                  <div>\n                    <SolidButton label=\"Save\" onClick={() => showError()} type=\"submit\" size=\"sm\" className='small-button' />\n                  </div>\n                  <div>\n                    {/* <Button label=\"Delete\" severity=\"danger\" type=\"button\" /> */}\n                  </div>\n                  <CancelButton />\n                </div>\n              </div>\n            }\n            <div className=\"form-wrapper\">\n              <div className=\"grid formgrid\">\n                <div className=\"md:col-6 sm:col-12\">\n                  <div className=\"field\">\n                    <label htmlFor=\"username\" className=\"form-label form-field-label\">\n                      User Name\n                    </label>\n                    <SolidInput\n                      type=\"text\"\n                      id=\"username\"\n                      name=\"username\"\n                      onChange={formik.handleChange}\n                      value={formik.values.username}\n                      className=\"p-inputtext-sm w-full small-input\"\n                      aria-invalid={!!isFormFieldValid(formik, \"username\")}\n                    />\n                    {isFormFieldValid(formik, \"username\") && (\n                      <SolidMessage severity=\"error\" text={formik.errors.username?.toString()} />\n                    )}\n                  </div>\n                </div>\n                <div className=\"md:col-6 sm:col-12\">\n                  <div className=\"field\">\n                    <label htmlFor=\"type\" className=\"form-label form-field-label\">\n                      Role Name\n                    </label>\n                    <div>\n                      <AutoCompleteField\n                        multiple={false}\n                        isFormFieldValid={isFormFieldValid}\n                        formik={formik}\n                        fieldName=\"roleName\"\n                        searchData={searchRole}\n                        existingData={{ label: data?.parentCategory?.title, value: data?.parentCategory?.id }}\n                        existingDataTitle={data?.parentCategory?.title}\n                        existingDataId={data?.parentCategory?.id}\n                        className=\"solid-standard-autocomplete\"\n                      ></AutoCompleteField>\n                      {isFormFieldValid(formik, \"roleName\") && (\n                        <SolidMessage severity=\"error\" text={formik?.errors?.roleName?.toString()} />\n                      )}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </form>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default CreateUserRole;\n"]}

package/dist/components/core/users/CreateUserRole.tsx

@@ -7,17 +7,15 @@ import { useCreateuserroleMutation } from "../../../redux/api/userApi";
 import { useFormik } from "formik";
 import { usePathname } from "../../../hooks/usePathname";
 import { useRouter } from "../../../hooks/useRouter";
-import { Button } from "primereact/button";
-import { InputText } from "primereact/inputtext";
-import { Message } from "primereact/message";
-import { Toast } from "primereact/toast";
-import { classNames } from "primereact/utils";
+import { SolidButton, SolidInput, SolidMessage } from "../../shad-cn-ui";
 import qs from "qs";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import * as Yup from "yup";
+import { useDispatch } from "react-redux";
+import { showToast } from "../../../redux/features/toastSlice";
 
 const CreateUserRole = ({ data }: any) => {
-  const toast = useRef<Toast>(null);
+  const dispatch = useDispatch();
 
   const [triggerGetRoles, { data: roleLazy, isFetching: isRoleLazyFetching, error: roleLazyError }] = useLazyGetrolesQuery();
   const router = useRouter();
@@ -71,25 +69,11 @@ const CreateUserRole = ({ data }: any) => {
     const errorMessages = Object.values(errors);
 
     if (errorMessages.length > 0) {
-      toast?.current?.show({
-        severity: "success",
+      dispatch(showToast({
+        severity: "error",
         summary: ERROR_MESSAGES.SEND_REPORT,
-        // sticky: true,
-        life: 3000,
-        //@ts-ignore
-        content: (props) => (
-          <div
-            className="flex flex-column align-items-left"
-            style={{ flex: "1" }}
-          >
-            {errorMessages.map((m, index) => (
-              <div className="flex align-items-center gap-2" key={index}>
-                <span className="font-bold text-900">{String(m)}</span>
-              </div>
-            ))}
-          </div>
-        ),
-      });
+        detail: errorMessages.map(String).join(", "),
+      }));
     }
   };
 
@@ -138,7 +122,7 @@ const CreateUserRole = ({ data }: any) => {
               <div className="form-wrapper-title"> Create User Role</div>
               <div className="gap-3 flex">
                 <div>
-                  <Button label="Save" size="small" onClick={() => showError()} type="submit" className='small-button' />
+                  <SolidButton label="Save" size="sm" onClick={() => showError()} type="submit" className='small-button' />
                 </div>
                 <CancelButton />
               </div>
@@ -147,7 +131,7 @@ const CreateUserRole = ({ data }: any) => {
                 <h1 className="m-0"> Edit User</h1>
                 <div className="gap-3 flex">
                   <div>
-                    <Button label="Save" onClick={() => showError()} type="submit" size="small" className='small-button' />
+                    <SolidButton label="Save" onClick={() => showError()} type="submit" size="sm" className='small-button' />
                   </div>
                   <div>
                     {/* <Button label="Delete" severity="danger" type="button" /> */}
@@ -163,18 +147,17 @@ const CreateUserRole = ({ data }: any) => {
                     <label htmlFor="username" className="form-label form-field-label">
                       User Name
                     </label>
-                    <InputText
+                    <SolidInput
                       type="text"
                       id="username"
                       name="username"
                       onChange={formik.handleChange}
                       value={formik.values.username}
-                      className={classNames("p-inputtext-sm w-full small-input", {
-                        "p-invalid": isFormFieldValid(formik, "username"),
-                      })}
+                      className="p-inputtext-sm w-full small-input"
+                      aria-invalid={!!isFormFieldValid(formik, "username")}
                     />
                     {isFormFieldValid(formik, "username") && (
-                      <Message severity="error" text={formik.errors.username?.toString()} />
+                      <SolidMessage severity="error" text={formik.errors.username?.toString()} />
                     )}
                   </div>
                 </div>
@@ -196,7 +179,7 @@ const CreateUserRole = ({ data }: any) => {
                         className="solid-standard-autocomplete"
                       ></AutoCompleteField>
                       {isFormFieldValid(formik, "roleName") && (
-                        <Message severity="error" text={formik?.errors?.roleName?.toString()} />
+                        <SolidMessage severity="error" text={formik?.errors?.roleName?.toString()} />
                       )}
                     </div>
                   </div>

package/dist/components/core/users/UserListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserListView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/users/UserListView.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,YAAY,+CAmUxB,CAAC"}
+{"version":3,"file":"UserListView.d.ts","sourceRoot":"","sources":["../../../../src/components/core/users/UserListView.tsx"],"names":[],"mappings":"AAoCA,eAAO,MAAM,YAAY,+CAuRxB,CAAC"}

package/dist/components/core/users/UserListView.js

@@ -1,3 +1,14 @@
+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 __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) {
@@ -35,66 +46,56 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useDeleteMultipleUsersMutation, useLazyGetusersQuery } from '../../../redux/api/userApi';
+import { useDeleteMultipleUsersMutation, useLazyGetusersQuery } from "../../../redux/api/userApi";
 import Link from "../../common/Link";
-import { FilterMatchMode } from "primereact/api";
-import { Button } from "primereact/button";
-import { Column } from "primereact/column";
-import { DataTable, } from "primereact/datatable";
 import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { CreateButton } from "../../../components/common/CreateButton";
-import { Dialog } from "primereact/dialog";
 import qs from "qs";
-import { ERROR_MESSAGES } from '../../../constants/error-messages';
-import { showToast } from '../../../redux/features/toastSlice';
+import { ERROR_MESSAGES } from "../../../constants/error-messages";
+import { showToast } from "../../../redux/features/toastSlice";
+import { SolidButton, SolidDialog, SolidIcon, SolidInput, SolidSpinner } from "../../shad-cn-ui";
+import { Column, SolidDataTable } from "../list/SolidDataTable";
+import { FilterMatchMode } from "../filter/filterMatchMode";
+var createDefaultFilters = function () { return ({
+    fullName: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+    username: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+    email: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+    mobile: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+}); };
 export var UserListView = function () {
     var dispatch = useDispatch();
     var _a = useState([]), users = _a[0], setUsers = _a[1];
-    var _b = useState({
-        fullName: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-        username: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-        email: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-        mobile: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-        // "roles.name": { value: null, matchMode: FilterMatchMode.STARTS_WITH },
-    }), filters = _b[0], setFilters = _b[1];
-    var _c = useState(0), first = _c[0], setFirst = _c[1];
-    var _d = useState(25), rows = _d[0], setRows = _d[1];
-    var _e = useState(0), totalRecords = _e[0], setTotalRecords = _e[1];
-    var _f = useState(""), sortField = _f[0], setSortField = _f[1];
-    var _g = useState(0), sortOrder = _g[0], setSortOrder = _g[1];
-    var _h = useState([]), selectedUsers = _h[0], setSelectedUsers = _h[1];
-    var _j = useState(true), loading = _j[0], setLoading = _j[1];
-    var _k = useState(false), isDialogVisible = _k[0], setDialogVisible = _k[1];
-    var _l = useLazyGetusersQuery(), triggerGetUser = _l[0], _m = _l[1], user = _m.data, isLoading = _m.isLoading, error = _m.error, isError = _m.isError;
-    var _o = useDeleteMultipleUsersMutation(), deleteManyUser = _o[0], _p = _o[1], isUserDeleted = _p.isLoading, isDeleteUserSuceess = _p.isSuccess, isUserDeleteError = _p.isError, UserDeleteError = _p.error, DeletedUser = _p.data;
+    var _b = useState(function () { return createDefaultFilters(); }), filters = _b[0], setFilters = _b[1];
+    var _c = useState(function () { return createDefaultFilters(); }), pendingFilters = _c[0], setPendingFilters = _c[1];
+    var _d = useState(0), first = _d[0], setFirst = _d[1];
+    var _e = useState(25), rows = _e[0], setRows = _e[1];
+    var _f = useState(0), totalRecords = _f[0], setTotalRecords = _f[1];
+    var _g = useState(""), sortField = _g[0], setSortField = _g[1];
+    var _h = useState(0), sortOrder = _h[0], setSortOrder = _h[1];
+    var _j = useState([]), selectedUsers = _j[0], setSelectedUsers = _j[1];
+    var _k = useState(true), loading = _k[0], setLoading = _k[1];
+    var _l = useState(false), isDialogVisible = _l[0], setDialogVisible = _l[1];
+    var _m = useLazyGetusersQuery(), triggerGetUser = _m[0], _o = _m[1], user = _o.data, isLoading = _o.isLoading, error = _o.error, isError = _o.isError;
+    var _p = useDeleteMultipleUsersMutation(), deleteManyUser = _p[0], _q = _p[1], isDeleteUserSuceess = _q.isSuccess, isUserDeleteError = _q.isError, UserDeleteError = _q.error;
     useEffect(function () {
-        var _a;
+        var _a, _b, _c, _d, _e;
         if (user) {
-            setUsers(user === null || user === void 0 ? void 0 : user.data.records);
-            setTotalRecords((_a = user === null || user === void 0 ? void 0 : user.data.meta) === null || _a === void 0 ? void 0 : _a.totalRecords);
+            setUsers((_b = (_a = user === null || user === void 0 ? void 0 : user.data) === null || _a === void 0 ? void 0 : _a.records) !== null && _b !== void 0 ? _b : []);
+            setTotalRecords((_e = (_d = (_c = user === null || user === void 0 ? void 0 : user.data) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.totalRecords) !== null && _e !== void 0 ? _e : 0);
             setLoading(false);
         }
     }, [user]);
-    // const initFilters = () => {
-    //     setFilters(defaultFilters);
-    //     setGlobalFilterValue('');
-    // };
-    // const clearFilter = () => {
-    //     initFilters();
-    // };
     useEffect(function () {
         var queryData = {
             offset: 0,
-            limit: 25,
-            populate: ['roles']
+            limit: rows,
+            populate: ["roles"],
         };
-        var queryString = qs.stringify(queryData, {
-            encodeValuesOnly: true
-        });
+        var queryString = qs.stringify(queryData, { encodeValuesOnly: true });
         triggerGetUser(queryString);
         setSelectedUsers([]);
-    }, [isDeleteUserSuceess]);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
     useEffect(function () {
         if (isError || isUserDeleteError) {
             setLoading(false);
@@ -106,39 +107,36 @@ export var UserListView = function () {
             else {
                 errorMessage = ERROR_MESSAGES.SOMETHING_WRONG;
             }
-            dispatch(showToast({ severity: 'error', summary: ERROR_MESSAGES.ERROR, detail: errorMessage, life: 3000 }));
+            dispatch(showToast({ severity: "error", summary: ERROR_MESSAGES.ERROR, detail: errorMessage, life: 3000 }));
         }
-    }, [isError, isUserDeleteError]);
-    function isFetchBaseQueryErrorWithErrorResponse(error) {
-        return error && typeof error === 'object' && 'data' in error && 'message' in error.data;
-    }
+    }, [dispatch, isError, isUserDeleteError, error, UserDeleteError]);
+    var isFetchBaseQueryErrorWithErrorResponse = function (error) {
+        return error && typeof error === "object" && "data" in error && "message" in error.data;
+    };
     var onPageChange = function (event) {
         setFirst(event.first);
         setRows(event.rows);
         setQueryString(event.first, event.rows, sortField, sortOrder, filters);
     };
     var onSort = function (event) {
-        var sortField = event.sortField, sortOrder = event.sortOrder;
-        var validSortOrder = sortOrder === 1 || sortOrder === -1 ? sortOrder : 0;
-        setSortField(sortField);
+        var _a;
+        var nextSortField = (_a = event.sortField) !== null && _a !== void 0 ? _a : "";
+        var validSortOrder = event.sortOrder === 1 || event.sortOrder === -1 ? event.sortOrder : 0;
+        setSortField(nextSortField);
         setSortOrder(validSortOrder);
         setFirst(0);
-        setQueryString(0, rows, sortField, sortOrder === 1 || sortOrder === -1 ? sortOrder : 0, filters);
+        setQueryString(0, rows, nextSortField, validSortOrder, filters);
     };
-    var onSelectionChange = function (event) {
-        var value = event.value;
-        setSelectedUsers(value);
-    };
-    // Filter fuctions
-    var setQueryString = function (offset, row, field, order, filterQuery) { return __awaiter(void 0, void 0, void 0, function () {
+    var setQueryString = function (offset, rowCount, field, order, filterQuery) { return __awaiter(void 0, void 0, void 0, function () {
         var formattedFilters, queryData, queryString;
         return __generator(this, function (_a) {
             formattedFilters = {};
-            Object.keys(filterQuery).forEach(function (field) {
-                var _a, _b;
-                var filterValue = filterQuery[field].value;
-                var matchMode = filterQuery[field].matchMode;
-                if (filterValue !== null && filterValue !== undefined) {
+            Object.keys(filterQuery !== null && filterQuery !== void 0 ? filterQuery : {}).forEach(function (fieldName) {
+                var _a;
+                var _b, _c;
+                var filterValue = (_b = filterQuery === null || filterQuery === void 0 ? void 0 : filterQuery[fieldName]) === null || _b === void 0 ? void 0 : _b.value;
+                var matchMode = (_c = filterQuery === null || filterQuery === void 0 ? void 0 : filterQuery[fieldName]) === null || _c === void 0 ? void 0 : _c.matchMode;
+                if (filterValue !== null && filterValue !== undefined && matchMode) {
                     var operator = matchMode;
                     switch (matchMode) {
                         case FilterMatchMode.CONTAINS:
@@ -162,55 +160,60 @@ export var UserListView = function () {
                         default:
                             operator = matchMode;
                     }
-                    if (field.includes(".")) {
-                        var fieldParts = field.split(".");
-                        if (!formattedFilters[fieldParts[0]]) {
-                            formattedFilters[fieldParts[0]] = {};
-                        }
-                        formattedFilters[fieldParts[0]][fieldParts[1]] = (_a = {}, _a[operator] = filterValue, _a);
-                    }
-                    else {
-                        formattedFilters[field] = (_b = {}, _b[operator] = filterValue, _b);
-                    }
+                    formattedFilters[fieldName] = (_a = {}, _a[operator] = filterValue, _a);
                 }
             });
             queryData = {
                 offset: offset !== null && offset !== void 0 ? offset : first,
-                limit: row !== null && row !== void 0 ? row : rows,
-                populate: ['roles'],
+                limit: rowCount !== null && rowCount !== void 0 ? rowCount : rows,
+                populate: ["roles"],
                 filters: formattedFilters,
             };
             if (field) {
-                queryData.sort = [
-                    "".concat(field, ":").concat(order == 0 ? null : order == 1 ? "asc" : "desc"),
-                ];
+                queryData.sort = ["".concat(field, ":").concat(order === 0 ? null : order === 1 ? "asc" : "desc")];
             }
             queryString = qs.stringify(queryData, {
                 encodeValuesOnly: true,
             });
-            triggerGetUser(queryString);
-            return [2 /*return*/];
+            return [2 /*return*/, triggerGetUser(queryString)];
         });
     }); };
-    var onFilter = function (e) {
-        setFilters(e.filters);
-        setQueryString(0, rows, sortField, sortOrder === 1 || sortOrder === -1 ? sortOrder : 0, e.filters);
+    var handleFilterInputChange = function (fieldName, value) {
+        setPendingFilters(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[fieldName] = __assign(__assign({}, prev[fieldName]), { value: value }), _a)));
+        });
     };
-    var detailsBodyTemplate = function (product) {
-        return (_jsx(Link, { href: "".concat(product.id), rel: "noopener noreferrer", className: "text-sm font-bold p-0", style: { color: "#12415D" }, children: _jsx("i", { className: "pi pi-pencil", style: { fontSize: "1rem" } }) }));
+    var applyFilters = function () {
+        setFirst(0);
+        setFilters(pendingFilters);
+        setQueryString(0, rows, sortField, sortOrder, pendingFilters);
+    };
+    var clearFilters = function () {
+        var defaults = createDefaultFilters();
+        setPendingFilters(defaults);
+        setFilters(defaults);
+        setFirst(0);
+        setQueryString(0, rows, sortField, sortOrder, defaults);
     };
     var deleteBulk = function () {
-        var deleteList = [];
-        selectedUsers.forEach(function (element) {
-            deleteList.push(element.id);
-        });
+        var deleteList = selectedUsers.map(function (user) { return user.id; });
         deleteManyUser(deleteList);
         setDialogVisible(false);
     };
-    var onDeleteClose = function () {
-        setDialogVisible(false);
-        setSelectedUsers([]);
-    };
-    return (_jsxs("div", { className: "", children: [_jsxs("div", { className: "flex gap-3 mb-4", children: [_jsx(CreateButton, {}), selectedUsers.length > 0 && _jsx(Button, { type: "button", label: "Delete", size: "small", onClick: function () { return setDialogVisible(true); }, className: "small-button", severity: "danger" })] }), _jsx("style", { children: "\n        .p-datatable .p-datatable-loading-overlay {\n        background-color: rgba(0, 0, 0, 0.0);\n        }\n        " }), _jsxs(DataTable, { value: users, lazy: true, tableStyle: { minWidth: "60rem", margin: "auto" }, size: "small", paginator: true, rows: rows, rowsPerPageOptions: [10, 25, 50], dataKey: "id", filters: filters, emptyMessage: "No users found", onFilter: onFilter, filterDisplay: "row", totalRecords: totalRecords, first: first, onPage: onPageChange, onSort: function (e) { return onSort(e); }, sortField: sortField, sortOrder: sortOrder === 1 || sortOrder === -1 ? sortOrder : 0, loading: loading || isLoading, loadingIcon: "pi pi-spinner", selection: selectedUsers, onSelectionChange: onSelectionChange, selectionMode: "multiple", removableSort: true, children: [_jsx(Column, { selectionMode: "multiple", headerStyle: { width: "3em" } }), _jsx(Column, { field: "id", header: "ID", className: "text-sm", sortable: true, headerClassName: "table-header-fs" }), _jsx(Column, { field: "fullName", header: "Full Name", className: "text-sm", sortable: true, filter: true, filterPlaceholder: "Search user by full name", style: { minWidth: "12rem" }, headerClassName: "table-header-fs" }), _jsx(Column, { field: "username", header: "Username", className: "text-sm", sortable: true, filter: true, filterPlaceholder: "Search user by username", style: { minWidth: "12rem" }, headerClassName: "table-header-fs" }), _jsx(Column, { field: "email", header: "Email", className: "text-sm", sortable: true, filter: true, filterPlaceholder: "Search user by email", style: { minWidth: "12rem" }, headerClassName: "table-header-fs" }), _jsx(Column, { body: detailsBodyTemplate })] }), _jsx(Dialog, { visible: isDialogVisible, header: "Confirm Delete", modal: true, className: "solid-confirm-dialog", footer: function () { return (_jsxs("div", { className: "flex justify-content-center", children: [_jsx(Button, { label: "Yes", icon: "pi pi-check", className: 'small-button', severity: "danger", autoFocus: true, onClick: deleteBulk }), _jsx(Button, { label: "No", icon: "pi pi-times", className: 'small-button', onClick: onDeleteClose })] })); }, onHide: function () { return setDialogVisible(false); }, children: _jsx("p", { children: "Are you sure you want to delete the selected Users?" }) })] }));
+    return (_jsxs("div", { className: "solid-user-list w-full", children: [_jsxs("div", { className: "flex gap-3 mb-4 align-items-center flex-wrap", children: [_jsx(CreateButton, {}), selectedUsers.length > 0 && (_jsx(SolidButton, { type: "button", label: "Delete", size: "small", severity: "danger", className: "small-button", onClick: function () { return setDialogVisible(true); } }))] }), _jsxs("div", { className: "grid formgrid mb-3", children: [[
+                        { key: "fullName", placeholder: "Search by full name" },
+                        { key: "username", placeholder: "Search by username" },
+                        { key: "email", placeholder: "Search by email" },
+                        { key: "mobile", placeholder: "Search by mobile" },
+                    ].map(function (filter) {
+                        var _a;
+                        return (_jsx("div", { className: "field col-12 md:col-3", children: _jsx(SolidInput, { value: (_a = pendingFilters[filter.key].value) !== null && _a !== void 0 ? _a : "", onChange: function (event) {
+                                    return handleFilterInputChange(filter.key, event.currentTarget.value);
+                                }, placeholder: filter.placeholder }) }, filter.key));
+                    }), _jsxs("div", { className: "field col-12 flex align-items-center gap-2", children: [_jsx(SolidButton, { size: "small", onClick: applyFilters, label: "Apply" }), _jsx(SolidButton, { size: "small", variant: "ghost", onClick: clearFilters, label: "Clear" })] })] }), (loading || isLoading) && (_jsx("div", { className: "flex justify-content-center my-3", children: _jsx(SolidSpinner, {}) })), _jsxs(SolidDataTable, { value: users, size: "small", paginator: true, rows: rows, rowsPerPageOptions: [10, 25, 50], dataKey: "id", emptyMessage: "No users found", totalRecords: totalRecords, first: first, onPage: onPageChange, onSort: onSort, sortField: sortField, sortOrder: sortOrder, selection: selectedUsers, onSelectionChange: function (_a) {
+                    var value = _a.value;
+                    return setSelectedUsers(value);
+                }, children: [_jsx(Column, { selectionMode: "multiple", headerStyle: { width: "3em" } }), _jsx(Column, { field: "id", header: "ID", className: "text-sm", sortable: true, headerClassName: "table-header-fs" }), _jsx(Column, { field: "fullName", header: "Full Name", className: "text-sm", sortable: true, style: { minWidth: "12rem" }, headerClassName: "table-header-fs" }), _jsx(Column, { field: "username", header: "Username", className: "text-sm", sortable: true, style: { minWidth: "12rem" }, headerClassName: "table-header-fs" }), _jsx(Column, { field: "email", header: "Email", className: "text-sm", sortable: true, style: { minWidth: "12rem" }, headerClassName: "table-header-fs" }), _jsx(Column, { body: function (record) { return (_jsx(Link, { href: "".concat(record.id), rel: "noopener noreferrer", className: "text-sm font-bold p-0", style: { color: "#12415D" }, children: _jsx(SolidIcon, { name: "si-pencil", style: { fontSize: "1rem" }, "aria-hidden": true }) })); } })] }), _jsxs(SolidDialog, { visible: isDialogVisible, header: "Confirm Delete", modal: true, className: "solid-confirm-dialog", onHide: function () { return setDialogVisible(false); }, children: [_jsx("p", { children: "Are you sure you want to delete the selected Users?" }), _jsxs("div", { className: "flex justify-content-center gap-3 mt-3", children: [_jsx(SolidButton, { label: "Yes", className: "small-button", severity: "danger", autoFocus: true, onClick: deleteBulk }), _jsx(SolidButton, { label: "No", className: "small-button", variant: "ghost", onClick: function () { return setDialogVisible(false); } })] })] })] }));
 };
 //# sourceMappingURL=UserListView.js.map