@asaleh37/ui-base 25.12.122 → 25.12.171

package/package.json

@@ -1,122 +1,122 @@
-{
-  "name": "@asaleh37/ui-base",
-  "version": "25.12.122",
-  "description": "",
-  "license": "ISC",
-  "author": "Ahmed Saleh Mohamed",
-  "type": "commonjs",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs",
-    "dev": "vite --host"
-  },
-  "devDependencies": {
-    "@emotion/cache": "^11.14.0",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@eslint/js": "^9.19.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@hookform/resolvers": "^4.1.0",
-    "@mui/icons-material": "^6.4.8",
-    "@mui/lab": "^7.0.0-beta.13",
-    "@mui/material": "^6.4.4",
-    "@mui/x-charts": "^7.27.0",
-    "@mui/x-data-grid-premium": "^8.3.0",
-    "@mui/x-date-pickers": "^7.27.0",
-    "@mui/x-license": "^8.3.0",
-    "@mui/x-tree-view": "^7.26.0",
-    "@react-spring/web": "^9.7.5",
-    "@reduxjs/toolkit": "^2.5.1",
-    "@rollup/plugin-commonjs": "^28.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.2",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.0.3",
-    "@types/react-i18next": "^7.8.3",
-    "@vitejs/plugin-react": "^4.3.4",
-    "axios": "^1.8.1",
-    "eslint": "^9.19.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.18",
-    "global": "^4.4.0",
-    "globals": "^15.14.0",
-    "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.3",
-    "i18next-http-backend": "^3.0.2",
-    "moment": "^2.30.1",
-    "oidc-client-ts": "^3.1.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.0.0",
-    "react-hook-form": "^7.54.2",
-    "react-i18next": "^15.4.0",
-    "react-redux": "^9.2.0",
-    "react-router-dom": "^7.1.5",
-    "react-toastify": "^11.0.5",
-    "rollup": "^4.41.1",
-    "rollup-plugin-dts": "^6.2.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-polyfill-node": "^0.13.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "stylis": "^4.3.6",
-    "stylis-plugin-rtl": "^2.1.1",
-    "tslib": "^2.8.1",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.22.0",
-    "vite": "^6.1.0",
-    "zod": "^3.24.2"
-  },
-  "peerDependencies": {
-    "@emotion/cache": "^11.14.0",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@hookform/resolvers": "^4.1.0",
-    "@mui/icons-material": "^6.4.8",
-    "@mui/lab": "^7.0.0-beta.13",
-    "@mui/material": "^6.4.4",
-    "@mui/x-charts": "^7.27.0",
-    "@mui/x-data-grid-premium": "^8.3.0",
-    "@mui/x-date-pickers": "^7.27.0",
-    "@mui/x-license": "^8.3.0",
-    "@mui/x-tree-view": "^7.26.0",
-    "@react-spring/web": "^9.7.5",
-    "@reduxjs/toolkit": "^2.5.1",
-    "axios": "^1.8.1",
-    "global": "^4.4.0",
-    "i18next": "^24.2.2",
-    "i18next-browser-languagedetector": "^8.0.3",
-    "i18next-http-backend": "^3.0.2",
-    "moment": "^2.30.1",
-    "oidc-client-ts": "^3.1.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-hook-form": "^7.54.2",
-    "react-i18next": "^15.4.0",
-    "react-redux": "^9.2.0",
-    "react-router-dom": "^7.1.5",
-    "react-toastify": "^11.0.5",
-    "rollup": "^4.41.1",
-    "rollup-plugin-polyfill-node": "^0.13.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "stylis": "^4.3.6",
-    "stylis-plugin-rtl": "^2.1.1",
-    "zod": "^3.24.2"
-  },
-  "dependencies": {
-    "@azure/msal-browser": "^4.21.1",
-    "@azure/msal-react": "^3.0.19",
-    "@rollup/plugin-json": "^6.1.0",
-    "rollup-plugin-terser": "^7.0.2"
-  }
-}
+{
+  "name": "@asaleh37/ui-base",
+  "version": "25.12.171",
+  "description": "",
+  "license": "ISC",
+  "author": "Ahmed Saleh Mohamed",
+  "type": "commonjs",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c --bundleConfigAsCjs",
+    "dev": "vite --host"
+  },
+  "devDependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@eslint/js": "^9.19.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@hookform/resolvers": "^4.1.0",
+    "@mui/icons-material": "^6.4.8",
+    "@mui/lab": "^7.0.0-beta.13",
+    "@mui/material": "^6.4.4",
+    "@mui/x-charts": "^7.27.0",
+    "@mui/x-data-grid-premium": "^8.3.0",
+    "@mui/x-date-pickers": "^7.27.0",
+    "@mui/x-license": "^8.3.0",
+    "@mui/x-tree-view": "^7.26.0",
+    "@react-spring/web": "^9.7.5",
+    "@reduxjs/toolkit": "^2.5.1",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.0.3",
+    "@types/react-i18next": "^7.8.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "axios": "^1.8.1",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "global": "^4.4.0",
+    "globals": "^15.14.0",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.3",
+    "i18next-http-backend": "^3.0.2",
+    "moment": "^2.30.1",
+    "oidc-client-ts": "^3.1.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-i18next": "^15.4.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.1.5",
+    "react-toastify": "^11.0.5",
+    "rollup": "^4.41.1",
+    "rollup-plugin-dts": "^6.2.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "stylis": "^4.3.6",
+    "stylis-plugin-rtl": "^2.1.1",
+    "tslib": "^2.8.1",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.1.0",
+    "zod": "^3.24.2"
+  },
+  "peerDependencies": {
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@hookform/resolvers": "^4.1.0",
+    "@mui/icons-material": "^6.4.8",
+    "@mui/lab": "^7.0.0-beta.13",
+    "@mui/material": "^6.4.4",
+    "@mui/x-charts": "^7.27.0",
+    "@mui/x-data-grid-premium": "^8.3.0",
+    "@mui/x-date-pickers": "^7.27.0",
+    "@mui/x-license": "^8.3.0",
+    "@mui/x-tree-view": "^7.26.0",
+    "@react-spring/web": "^9.7.5",
+    "@reduxjs/toolkit": "^2.5.1",
+    "axios": "^1.8.1",
+    "global": "^4.4.0",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.3",
+    "i18next-http-backend": "^3.0.2",
+    "moment": "^2.30.1",
+    "oidc-client-ts": "^3.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-i18next": "^15.4.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.1.5",
+    "react-toastify": "^11.0.5",
+    "rollup": "^4.41.1",
+    "rollup-plugin-polyfill-node": "^0.13.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "stylis": "^4.3.6",
+    "stylis-plugin-rtl": "^2.1.1",
+    "zod": "^3.24.2"
+  },
+  "dependencies": {
+    "@azure/msal-browser": "^4.21.1",
+    "@azure/msal-react": "^3.0.19",
+    "@rollup/plugin-json": "^6.1.0",
+    "rollup-plugin-terser": "^7.0.2"
+  }
+}

package/src/components/administration/admin/CustomPersonGrid.tsx

@@ -0,0 +1,361 @@
+import { useState } from "react";
+import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import { useApiActions, useSession, useWindow } from "../../../hooks";
+import { FormElementProps } from "../../templates/DataEntryTemplates/DataEntryTypes";
+import { useTranslation } from "react-i18next";
+import { toast } from "react-toastify";
+import OrganizationMemberGrid from "./OrganizationMemberGrid";
+import { Box } from "@mui/material";
+import AttachmentImageViewer from "../../templates/attachment/AttachmentImageViewer";
+import { useSelector } from "react-redux";
+import OrgMemberRoleForm from "./OrgMemberRoleForm";
+import ChangePasswordPanel from "./ChangePasswordPanel";
+
+const CustomPersonGrid: React.FC = () => {
+  const { t } = useTranslation();
+  const [selectedPerson, setSelectedPerson] = useState<any>(null);
+  const { UserInfo } = useSession();
+  const CurrentOrganizationRanks = useSelector(
+    (state: any) => state.commonStores.stores.CurrentOrganizationRanks.data
+  );
+  const CurrentOrganizationUnits = useSelector(
+    (state: any) => state.commonStores.stores.CurrentOrganizationUnits.data
+  );
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    commonStoreKey: "persons",
+    deleteById: "api/v1/admin/person",
+    save: "api/v1/admin/person",
+    findById: "api/v1/admin/person",
+    setData: setData,
+  });
+  const [selectedRecord, setSelectedRecord] = useState<any>(null);
+  const {
+    Window: OrganizationMembersWindow,
+    setWindowState: setOrganizationMemberWindowState,
+  } = useWindow({
+    windowTitle: "Organizations Membership",
+    windowIcon: "globe",
+  });
+  const {
+    Window: OrganizationMemberRolesWindow,
+    setWindowState: setOrganizationMemberRolesWindowState,
+  } = useWindow({
+    windowIcon: "tag",
+    windowTitle: "Organization Member Roles",
+    width: "50%",
+  });
+  const {
+    Window: ChangePasswordWindow,
+    setWindowState: setChangePasswordWindow,
+  } = useWindow({
+    windowIcon: "key",
+    windowTitle: "Change Password",
+    width: "fit-content",
+    height: "fit-content",
+  });
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        hidden: true,
+        fieldLabel: "id",
+        fieldName: "id",
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "number",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        hidden: true,
+        fieldLabel: "organizationMemberId",
+        fieldName: "organizationMemberId",
+        gridProps: {
+          hidden: true,
+        },
+        required: false,
+        fieldType: "number",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Image",
+        fieldName: "custom",
+        fieldType: "custom",
+        gridProps: {
+          muiProps: {
+            align: "center",
+            headerAlign: "center",
+            renderCell: (params) => {
+              return (
+                <Box
+                  sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    height: "100%",
+                  }}
+                >
+                  <AttachmentImageViewer
+                    showAsAvatar={true}
+                    attachmentCode="EMPLOYEE_PHOTOS"
+                    refKey={params.id + ""}
+                  />
+                </Box>
+              );
+            },
+          },
+        },
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "PERSON_EMPLOYEE_AR_NAME",
+        fieldName: "employeeArName",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "PERSON_EMPLOYEE_EN_NAME",
+        fieldName: "employeeEnName",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "PERSON_EMAIL",
+        fieldName: "email",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "PERSON_MOBILE_NUMBER",
+        fieldName: "mobileNumber",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_RANK_ID",
+        fieldName: "organizationRankId",
+        required: false,
+        fieldType: "combobox",
+        options: CurrentOrganizationRanks,
+        optionValueField: "id",
+        optionDisplayField: "rankEnName",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_UNIT_ID",
+        fieldName: "organizationUnitId",
+        required: false,
+        fieldType: "combobox",
+        options: CurrentOrganizationUnits,
+        optionValueField: "id",
+        optionDisplayField: "organizationUnitEnName",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "Membership number",
+        fieldName: "organizationMembershipNumber",
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        hidden: true,
+        gridProps: { hidden: true },
+        fieldLabel: "PERSON_PASSWORD",
+        fieldName: "password",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "PERSON_USERNAME",
+        fieldName: "username",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        hidden: true,
+        fieldLabel: "Ref Source",
+        fieldName: "refSource",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        hidden: true,
+        fieldLabel: "PERSON_EMPLOYEE_NUMBER",
+        fieldName: "refSyncNumber",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "PERSON_IS_ACTIVE",
+        fieldName: "isActive",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+  ];
+
+  return (
+    <>
+      <OrganizationMemberRolesWindow>
+        <OrgMemberRoleForm
+          selectedRecord={selectedRecord}
+          closeModalFn={() => {
+            setOrganizationMemberRolesWindowState(false);
+          }}
+        />
+      </OrganizationMemberRolesWindow>
+      <OrganizationMembersWindow>
+        <OrganizationMemberGrid selectedPerson={selectedPerson} />
+      </OrganizationMembersWindow>
+      <ChangePasswordWindow>
+        <ChangePasswordPanel
+          selectedPerson={selectedPerson}
+          isSelfService={false}
+          onSuccessCallBk={() => {
+            setChangePasswordWindow(false);
+          }}
+        />
+      </ChangePasswordWindow>
+      <TemplateGrid
+        attachment={{ attachmentCode: "EMPLOYEE_PHOTOS" }}
+        apiActions={apiActions}
+        data={data}
+        setData={setData}
+        editMode={{
+          editMode: "modal",          
+          specs: {
+            modalIcon: "user",
+            modalTitle: "Person Profile",             
+            modalWidth: 300,
+          },
+        }}
+        formElements={formElements}
+        keyColumnName={"id"}
+        gridTitle="PERSON_PLURAL"
+        rowActions={[
+          {
+            icon: "key",
+            label: "Change User Password",
+            actionFn: async (data) => {
+              setSelectedPerson(data);
+              setChangePasswordWindow(true);
+            },
+          },
+          {
+            icon: "tags",
+            label: "Current Organization User Roles",
+            isActionDisabledForRecord: (data) => {
+              return !data?.organizationMemberId;
+            },
+            actionFn: async (data) => {
+              setSelectedRecord({
+                organizationId: UserInfo?.currentOrganization?.id,
+                id: data?.organizationMemberId,
+              });
+              setOrganizationMemberRolesWindowState(true);
+            },
+          },
+          {
+            icon: "globe",
+            label: "User Organizations",
+            actionFn: async (data) => {
+              setSelectedPerson(data);
+              setOrganizationMemberWindowState(true);
+            },
+          },
+        ]}
+        girdIcon="users"
+        editAction={{
+          isEnabled: true,          
+          authority: "PERSON_EDIT",
+          preActionValidation: (data) => {
+            if (
+              data.refSource != undefined &&
+              data.refSource != null &&
+              data.refSource != ""
+            ) {
+              toast.error(
+                "This Person Was synced from other system therefore you can't modify this record"
+              );
+              return false;
+            }
+            return true;
+          },
+        }}
+        deleteAction={{
+          isEnabled: true,
+          authority: "PERSON_DELETE",
+          preActionValidation: (data) => {
+            if (
+              data.refSource != undefined &&
+              data.refSource != null &&
+              data.refSource != ""
+            ) {
+              toast.error(
+                "This Person Was synced from other system therefore you can't modify this record"
+              );
+              return false;
+            }
+            return true;
+          },
+        }}
+      />
+    </>
+  );
+};
+
+export default CustomPersonGrid;