@asaleh37/ui-base 25.12.10 → 25.12.16

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

@@ -5,6 +5,7 @@ import { FormElementProps } from "../../templates/DataEntryTemplates/DataEntryTy
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import OrgMemberRoleForm from "./OrgMemberRoleForm";
+import { AppInfo } from "../../../redux/features/common/AppInfoSlice";
 
 type OrganizationMemberGridProps = {
   selectedPerson: any;
@@ -12,6 +13,7 @@ type OrganizationMemberGridProps = {
 const OrganizationMemberGrid: React.FC<OrganizationMemberGridProps> = (
   props
 ) => {
+  const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
   const [selectedRecord, setSelectedRecord] = useState<any>(null);
   const {
     Window: OrganizationMemberRolesWindow,
@@ -65,7 +67,7 @@ const OrganizationMemberGrid: React.FC<OrganizationMemberGridProps> = (
       type: "field",
       mode: "props",
       props: {
-        fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_ID",
+        fieldLabel: "Organization",
         fieldName: "organizationId",
         required: true,
         fieldType: "combobox",
@@ -74,57 +76,61 @@ const OrganizationMemberGrid: React.FC<OrganizationMemberGridProps> = (
         optionDisplayField: "organizationEnName",
       },
     },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_RANK_ID",
-        fieldName: "organizationRankId",
-        required: false,
-        fieldType: "combobox",
-        options: SystemOrganizationRanks,
-        optionValueField: "id",
-        optionDisplayField: "rankDisplay",
+  ];
+
+  if (appInfo?.isUserProfileManaged) {
+    formElements.push(
+      {
+        type: "field",
+        mode: "props",
+        props: {
+          fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_RANK_ID",
+          fieldName: "organizationRankId",
+          required: false,
+          fieldType: "combobox",
+          options: SystemOrganizationRanks,
+          optionValueField: "id",
+          optionDisplayField: "rankDisplay",
+        },
       },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_UNIT_ID",
-        fieldName: "organizationUnitId",
-        required: false,
-        fieldType: "combobox",
-        options: SystemOrganizationUnits,
-        optionValueField: "id",
-        optionDisplayField: "fullPath",
+      {
+        type: "field",
+        mode: "props",
+        props: {
+          fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_UNIT_ID",
+          fieldName: "organizationUnitId",
+          required: false,
+          fieldType: "combobox",
+          options: SystemOrganizationUnits,
+          optionValueField: "id",
+          optionDisplayField: "fullPath",
+        },
       },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        fieldLabel: "Membership number",
-        fieldName: "organizationMembershipNumber",
-        fieldType: "text",
+      {
+        type: "field",
+        mode: "props",
+        props: {
+          fieldLabel: "Membership number",
+          fieldName: "organizationMembershipNumber",
+          fieldType: "text",
+        },
       },
-    },
-    {
-      type: "field",
-      mode: "props",
-      props: {
-        hidden: true,
-        gridProps: {
+      {
+        type: "field",
+        mode: "props",
+        props: {
           hidden: true,
+          gridProps: {
+            hidden: true,
+          },
+          fieldLabel: "ORGANIZATION_MEMBER_PERSON_ID",
+          fieldName: "personId",
+          required: false,
+          fieldType: "number",
         },
-        fieldLabel: "ORGANIZATION_MEMBER_PERSON_ID",
-        fieldName: "personId",
-        required: false,
-        fieldType: "number",
-      },
-    },
-  ];
-
+      }
+    );
+  }
   return (
     <>
       <OrganizationMemberRolesWindow>
@@ -152,7 +158,10 @@ const OrganizationMemberGrid: React.FC<OrganizationMemberGridProps> = (
             },
           },
         ]}
-        gridLoadParametersValues={{ personId: props.selectedPerson.id }}
+        gridLoadParametersValues={{
+          personId: props.selectedPerson.id,
+          employeeNumber: props.selectedPerson.employeeNumber,
+        }}
         keyColumnName={"id"}
         gridTitle="ORGANIZATION_MEMBER_PLURAL"
         girdIcon="table-cells"
@@ -160,7 +169,12 @@ const OrganizationMemberGrid: React.FC<OrganizationMemberGridProps> = (
           isEnabled: true,
           authority: "ORGANIZATION_MEMBER_EDIT",
           preActionValidation: async (data) => {
-            data.personId = props.selectedPerson.id;
+            if (appInfo?.isUserProfileManaged) {
+              data.personId = props.selectedPerson.id;
+            } else {
+              data.organizationMembershipNumber =
+                props.selectedPerson.employeeNumber;
+            }
             return true;
           },
         }}

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

@@ -10,352 +10,18 @@ import AttachmentImageViewer from "../../templates/attachment/AttachmentImageVie
 import { useSelector } from "react-redux";
 import OrgMemberRoleForm from "./OrgMemberRoleForm";
 import ChangePasswordPanel from "./ChangePasswordPanel";
+import { AppInfo } from "../../../redux/features/common/AppInfoSlice";
+import OrgProvidedPersonGrid from "./OrgProvidedPersonGrid";
+import CustomPersonGrid from "./CustomPersonGrid";
 
 const PersonGrid: 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;
-          },
-        }}
-      />
-    </>
-  );
+  const appInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
+  if (appInfo?.isUserProfileManaged) {
+    return <CustomPersonGrid />;    
+  } else {
+    return <OrgProvidedPersonGrid />;
+    
+  }
 };
 
 export default PersonGrid;

package/src/components/common/AzureLogin.tsx

@@ -130,7 +130,7 @@ const AzureLogin: React.FC<AzureLoginProps> = ({ msalInstance }) => {
             justifyContent: "center",
             minHeight: "100vh",
             width: "100%",
-            backgroundImage: "url('/bg.jpg')",
+            backgroundImage: `url('/${appInfo?.loginScreenStyle?.backgroundImageNameInPublicFolder}')`,
             backgroundRepeat: "no-repeat",
             backgroundSize: "cover",
             backgroundPosition: "center",
@@ -141,7 +141,7 @@ const AzureLogin: React.FC<AzureLoginProps> = ({ msalInstance }) => {
               left: 0,
               right: 0,
               bottom: 0,
-              backgroundColor: "rgba(0, 0, 0, 0.4)", // 👈 controls opacity
+              backgroundColor: appInfo?.loginScreenStyle?.backgroundColor,
               zIndex: 0,
             },
           }}

package/src/components/common/Login.tsx

@@ -154,7 +154,7 @@ const Login: React.FC = () => {
             justifyContent: "center",
             minHeight: "100vh",
             width: "100%",
-            backgroundImage: "url('/bg.jpg')",
+            backgroundImage: `url('/${appInfo?.loginScreenStyle?.backgroundImageNameInPublicFolder}')`,
             backgroundRepeat: "no-repeat",
             backgroundSize: "cover",
             backgroundPosition: "center",
@@ -165,7 +165,7 @@ const Login: React.FC = () => {
               left: 0,
               right: 0,
               bottom: 0,
-              backgroundColor: "rgba(0, 0, 0, 0.4)", // 👈 controls opacity
+              backgroundColor: appInfo?.loginScreenStyle?.backgroundColor,
               zIndex: 0,
             },
           }}

package/src/layout/NavigationTree.tsx

@@ -32,6 +32,7 @@ import useSession from "../hooks/UseSession";
 import { findNavigationItemById, NavigationItems } from "../navigationItems";
 import { DRAWER_WIDTH } from "../redux/features/common/AppLayoutSlice";
 import { toggleSideBarState } from "../redux/features/common/SideBarSlice";
+import { AppInfo } from "../redux/features/common/AppInfoSlice";
 
 function DotIcon() {
   return (
@@ -232,7 +233,7 @@ const CustomTreeItem = React.forwardRef(function CustomTreeItem(
 export default function NavigationTree() {
   const navigate = useNavigate();
   const appLayoutState = useSelector((state: any) => state.AppLayout);
-  const AppInfo = useSelector((state: any) => state.AppInfo.value);
+  const AppInfo: AppInfo = useSelector((state: any) => state.AppInfo.value);
   const dispatch = useDispatch();
   const isMobile = useIsMobile();
   const toggleSideBar = () => {
@@ -243,6 +244,12 @@ export default function NavigationTree() {
   const filterData = (data) => {
     const parentItems = [];
     for (let parentItem of data) {
+      if (
+        parentItem.id === "development_admin.organization" &&
+        !AppInfo.isUserProfileManaged
+      ) {
+        continue;
+      }
       if (
         (parentItem.authority === undefined ||
           parentItem.authority == null ||