@asaleh37/ui-base 1.2.3 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",
@@ -67,7 +67,13 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.22.0",
     "vite": "^6.1.0",
-    "zod": "^3.24.2"
+    "zod": "^3.24.2",
+    "@mui/lab": "^7.0.0-beta.13",
+    "draft-js": "^0.11.7",
+    "draft-js-import-html": "^1.4.1",
+    "draftjs-to-html": "^0.9.1",
+    "react-draft-wysiwyg": "^1.15.0",
+    "rollup-plugin-polyfill-node": "^0.13.0"
   },
   "peerDependencies": {
     "@emotion/cache": "^11.14.0",
@@ -105,7 +111,13 @@
     "rollup-plugin-postcss": "^4.0.2",
     "stylis": "^4.3.6",
     "stylis-plugin-rtl": "^2.1.1",
-    "zod": "^3.24.2"
+    "zod": "^3.24.2",
+    "@mui/lab": "^7.0.0-beta.13",
+    "draft-js": "^0.11.7",
+    "draft-js-import-html": "^1.4.1",
+    "draftjs-to-html": "^0.9.1",
+    "react-draft-wysiwyg": "^1.15.0",
+    "rollup-plugin-polyfill-node": "^0.13.0"
   },
   "dependencies": {
     "@rollup/plugin-json": "^6.1.0"

package/src/components/App.tsx

@@ -98,7 +98,7 @@ const App: React.FC<AppInfo> = (props: AppInfo) => {
       ...commonStores,
       ...props.businessCommonStoresMetaData,
     };
-  }  
+  }
   dispatch(setStoresMetaData(commonStores));
   const AppLayoutState = useSelector((state: any) => state.AppLayout);
   let themeOptions = { ...LightThemeOptions };

package/src/components/BaseApp.tsx

@@ -12,6 +12,7 @@ import UserSessionReducer from "../redux/features/common/UserSessionSlice";
 import LoadingMaskReducer from "../redux/features/common/LoadingMaskSlice";
 import CommonStoreReducer from "../redux/features/common/CommonStoreSlice";
 import AppInfoReducer from "../redux/features/common/AppInfoSlice";
+import SideBarReducer from "../redux/features/common/SideBarSlice";
 import { configureStore } from "@reduxjs/toolkit";
 
 library.add(fab);
@@ -24,31 +25,13 @@ export const BaseApp: React.FC<AppInfo> = (props) => {
     UserSession: UserSessionReducer,
     loadingMask: LoadingMaskReducer,
     commonStores: CommonStoreReducer,
+    SideBar: SideBarReducer,
     AppInfo: AppInfoReducer,
     ...props.businessReduxReducers,
   };
   const store = configureStore({
     reducer: systemReducers,
   });
-  // let csInitialState: CommonStoresInterface = {};
-  // if (props.enableAdministrationModule) {
-  //   for (let adminStoreKey of Object.keys(ADMINISTRATION_STORES)) {
-  //     csInitialState[adminStoreKey] = ADMINISTRATION_STORES[adminStoreKey];
-  //     addCommonStore(adminStoreKey, ADMINISTRATION_STORES[adminStoreKey]);
-  //   }
-  // }
-  // if (props?.businessCommonStoresMetaData) {
-  //   for (let businessStoreKey of Object.keys(
-  //     props.businessCommonStoresMetaData
-  //   )) {
-  //     csInitialState[businessStoreKey] =
-  //       props.businessCommonStoresMetaData[businessStoreKey];
-  //     addCommonStore(
-  //       businessStoreKey,
-  //       props.businessCommonStoresMetaData[businessStoreKey]
-  //     );
-  //   }
-  // }
 
   return (
     <Provider store={store}>

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

@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import TransferList from "../../templates/TransferList";
+import { Box, Button } from "@mui/material";
+import { toast } from "react-toastify";
+import { useAxios } from "../../../hooks";
+
+type OrgMemberRoleFormProps = {
+  selectedRecord: any;
+  closeModalFn: () => void;
+};
+
+const OrgMemberRoleForm: React.FC<OrgMemberRoleFormProps> = (props) => {
+  const [selectedOptions, setSelectedOptions] = useState([]);
+  const [availableOptions, setAvailableOptions] = useState([]);
+  const { handlePostRequest, handleGetRequest } = useAxios();
+
+  const getOrgMemberRoles = async () => {
+    await handleGetRequest({
+      endPointURI: "api/v1/admin/organization/member/roles",
+      showMask: true,
+      parameters: {
+        orgMemberId: props.selectedRecord.id,
+        organizationId: props.selectedRecord.organizationId,
+      },
+      successCallBkFn: (response: any) => {
+        setSelectedOptions(response.data.currentRoles);
+        setAvailableOptions(response.data.availableRoles);
+      },
+    });
+  };
+
+  useEffect(() => {
+    if (props.selectedRecord) {
+      getOrgMemberRoles();
+    }
+  }, [props.selectedRecord]);
+  const saveOrgMemberRoles = async () => {
+    await handlePostRequest({
+      endPointURI: "api/v1/admin/organization/member/roles",
+      showMask: true,
+      parameters: { orgMemberId: props.selectedRecord.id },
+      data: selectedOptions,
+      successCallBkFn: () => {
+        toast.success("Your request has been proccesed successfully");
+        if (props.closeModalFn) {
+          props.closeModalFn();
+        }
+      },
+    });
+  };
+  return (
+    <>
+      <TransferList
+        displayField="appRoleDisplay"
+        options={availableOptions}
+        valueField="id"
+        selectedOptions={selectedOptions}
+        setSelection={setSelectedOptions}
+      />
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          width: "100%",
+        }}
+      >
+        <Button
+          variant="contained"
+          onClick={saveOrgMemberRoles}
+          sx={{ marginRight: 1, marginLeft: 1 }}
+        >
+          Save
+        </Button>
+        <Button variant="contained" color="error" onClick={props.closeModalFn}>
+          Cancel
+        </Button>
+      </Box>
+    </>
+  );
+};
+
+export default OrgMemberRoleForm;

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

@@ -0,0 +1,131 @@
+import { useEffect, useState } from "react";
+import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import { useApiActions, useAxios } from "../../../hooks";
+import { FormElementProps } from "../../templates/DataEntryTemplates/DataEntryTypes";
+import { useTranslation } from "react-i18next";
+
+type OrganizationApplicationModuleGridProps = {
+  selectedOrganization: any;
+};
+
+const OrganizationApplicationModuleGrid: React.FC<
+  OrganizationApplicationModuleGridProps
+> = (props) => {
+  const { t } = useTranslation();
+  const { handleGetRequest } = useAxios();
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    findAll: "api/v1/admin/organizationapplicationmodule/all",
+    deleteById: "api/v1/admin/organizationapplicationmodule",
+    save: "api/v1/admin/organizationapplicationmodule",
+    findById: "api/v1/admin/organizationapplicationmodule",
+    setData: setData,
+  });
+  const [systemApplicationModules, setSystemApplicationModules] = useState([]);
+
+  const getSystemApplicationModules = async () => {
+    await handleGetRequest({
+      endPointURI: "api/v1/admin/systemapplicationmodule/all",
+      showMask: true,
+      successCallBkFn: (response: any) => {
+        setSystemApplicationModules(response.data);
+      },
+    });
+  };
+
+  useEffect(() => {
+    getSystemApplicationModules();
+  }, []);
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel:
+          "ORGANIZATION_APPLICATION_MODULE_SYSTEM_APPLICATION_MODULE_ID",
+        fieldName: "systemApplicationModuleId",
+        required: false,
+        fieldType: "combobox",
+        options: systemApplicationModules,
+        optionDisplayField: "moduleName",
+        optionValueField: "id",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        fieldLabel: "ORGANIZATION_APPLICATION_MODULE_ORGANIZATION_ID",
+        fieldName: "organizationId",
+        required: false,
+        fieldType: "number",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_APPLICATION_MODULE_SUBSCRIPTION_DATE",
+        fieldName: "subscriptionDate",
+        required: true,
+        fieldType: "date",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_APPLICATION_MODULE_EXPIRATION_DATE",
+        fieldName: "expirationDate",
+        required: false,
+        fieldType: "date",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_APPLICATION_MODULE_IS_ACTIVE",
+        fieldName: "isActive",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+  ];
+
+  return (
+    <TemplateGrid
+      apiActions={apiActions}
+      data={data}
+      gridLoadParametersValues={{
+        organizationId: props?.selectedOrganization?.id,
+      }}
+      hideInfoBar={true}
+      setData={setData}
+      editMode={{ editMode: "row" }}
+      formElements={formElements}
+      keyColumnName={"id"}
+      gridTitle="ORGANIZATION_APPLICATION_MODULE_PLURAL"
+      girdIcon="layer-group"
+      editAction={{
+        isEnabled: true,
+        authority: "ORGANIZATION_APPLICATION_MODULE_EDIT",
+        preActionValidation: async (data) => {
+          data.organizationId = props?.selectedOrganization?.id;
+          return true;
+        },
+      }}
+      deleteAction={{
+        isEnabled: true,
+        authority: "ORGANIZATION_APPLICATION_MODULE_DELETE",
+      }}
+    />
+  );
+};
+
+export default OrganizationApplicationModuleGrid;

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

@@ -0,0 +1,165 @@
+import { useState } from "react";
+import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import { useApiActions, useWindow } from "../../../hooks";
+import { FormElementProps } from "../../templates/DataEntryTemplates/DataEntryTypes";
+import { useTranslation } from "react-i18next";
+import OrganizationApplicationModuleGrid from "./OrganizationApplicationModuleGrid";
+import OrganizationUnitTypeGrid from "./OrganizationUnitTypeGrid";
+import OrganizationUnitGrid from "./OrganizationUnitGrid";
+import OrganizationRankGrid from "./OrganizationRankGrid";
+
+const OrganizationGrid: React.FC = () => {
+  const { t } = useTranslation();
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    findAll: "api/v1/admin/organization/all",
+    deleteById: "api/v1/admin/organization",
+    save: "api/v1/admin/organization",
+    findById: "api/v1/admin/organization",
+    setData: setData,
+  });
+  const {
+    Window: ApplicationModulesWindow,
+    setWindowState: setApplicationWindowState,
+  } = useWindow({
+    windowTitle: "Organization Subscriped Application Modules",
+    windowIcon: "layer-group",
+  });
+  const {
+    Window: OrgUnitTypesWindow,
+    setWindowState: setOrgUnitTypesWindowState,
+  } = useWindow({
+    windowTitle: "Organization Unit Types",
+    windowIcon: "tags",
+  });
+  const { Window: OrgUnitsWindow, setWindowState: setOrgUnitsWindowState } =
+    useWindow({
+      windowTitle: "Organization Units",
+      windowIcon: "folder-tree",
+    });
+  const { Window: OrgRanksWindow, setWindowState: setOrgRanksWindowState } =
+    useWindow({
+      windowTitle: "Organization Ranks",
+      windowIcon: "street-view",
+    });
+  const [selectedRecord, setSelectedRecord] = useState<any>(null);
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_ORGANIZATION_CODE",
+        fieldName: "organizationCode",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_ORGANIZATION_AR_NAME",
+        fieldName: "organizationArName",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_ORGANIZATION_EN_NAME",
+        fieldName: "organizationEnName",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_IS_ACTIVE",
+        fieldName: "isActive",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type:'field',
+      mode:'props',
+      props:{
+        fieldLabel:'Status',
+        fieldName:'status',
+        fieldType:'lookup',
+        lookupType:'STATUS'
+      }
+    }
+  ];
+
+  return (
+    <>
+      <ApplicationModulesWindow>
+        <OrganizationApplicationModuleGrid
+          selectedOrganization={selectedRecord}
+        />
+      </ApplicationModulesWindow>
+      <OrgUnitTypesWindow>
+        <OrganizationUnitTypeGrid selectedOrganization={selectedRecord} />
+      </OrgUnitTypesWindow>
+      <OrgUnitsWindow>
+        <OrganizationUnitGrid selectedOrganization={selectedRecord} />
+      </OrgUnitsWindow>
+      <OrgRanksWindow>
+        <OrganizationRankGrid selectedOrganization={selectedRecord} />
+      </OrgRanksWindow>
+      <TemplateGrid
+        apiActions={apiActions}
+        data={data}
+        setData={setData}
+        editMode={{ editMode: "row" }}
+        rowActions={[
+          {
+            icon: "layer-group",
+            actionFn: async (data) => {
+              setSelectedRecord(data);
+              setApplicationWindowState(true);
+            },
+            label: "modules",
+          },
+          {
+            icon: "tags",
+            actionFn: async (data) => {
+              setSelectedRecord(data);
+              setOrgUnitTypesWindowState(true);
+            },
+            label: "Organization Unit Types",
+          },
+          {
+            icon: "folder-tree",
+            actionFn: async (data) => {
+              setSelectedRecord(data);
+              setOrgUnitsWindowState(true);
+            },
+            label: "Organization Units",
+          },
+          {
+            icon: "street-view",
+            actionFn: async (data) => {
+              setSelectedRecord(data);
+              setOrgRanksWindowState(true);
+            },
+            label: "Organization Ranks",
+          },
+        ]}
+        formElements={formElements}
+        keyColumnName={"id"}
+        gridTitle="ORGANIZATION_PLURAL"
+        girdIcon="globe"
+        editAction={{ isEnabled: true, authority: "ORGANIZATION_EDIT" }}
+        deleteAction={{ isEnabled: true, authority: "ORGANIZATION_DELETE" }}
+      />
+    </>
+  );
+};
+
+export default OrganizationGrid;

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

@@ -0,0 +1,176 @@
+import { useState } from "react";
+import TemplateGrid from "../../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import { useApiActions, useWindow } from "../../../hooks";
+import { FormElementProps } from "../../templates/DataEntryTemplates/DataEntryTypes";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import OrgMemberRoleForm from "./OrgMemberRoleForm";
+
+type OrganizationMemberGridProps = {
+  selectedPerson: any;
+};
+const OrganizationMemberGrid: React.FC<OrganizationMemberGridProps> = (
+  props
+) => {
+  const [selectedRecord, setSelectedRecord] = useState<any>(null);
+  const {
+    Window: OrganizationMemberRolesWindow,
+    setWindowState: setOrganizationMemberRolesWindowState,
+  } = useWindow({
+    windowIcon: "tag",
+    windowTitle: "Organization Member Roles",
+    width: "50%",
+  });
+  const SystemOrganizations = useSelector(
+    (state: any) => state.commonStores.stores.SystemOrganizations.data
+  );
+  const SystemOrganizationRanks = useSelector(
+    (state: any) => state.commonStores.stores.SystemOrganizationRanks.data
+  );
+  const SystemOrganizationUnits = useSelector(
+    (state: any) => state.commonStores.stores.SystemOrganizationUnits.data
+  );
+  const { t } = useTranslation();
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    findAll: "api/v1/admin/organizationmember/all",
+    deleteById: "api/v1/admin/organizationmember",
+    save: "api/v1/admin/organizationmember",
+    findById: "api/v1/admin/organizationmember",
+    setData: setData,
+  });
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_MEMBER_IS_ACTIVE",
+        fieldName: "isActive",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_MEMBER_IS_DEFAULT",
+        fieldName: "isDefault",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ORGANIZATION_MEMBER_ORGANIZATION_ID",
+        fieldName: "organizationId",
+        required: true,
+        fieldType: "combobox",
+        options: SystemOrganizations,
+        optionValueField: "id",
+        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",
+      },
+    },
+    {
+      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: {
+        hidden: true,
+        gridProps: {
+          hidden: true,
+        },
+        fieldLabel: "ORGANIZATION_MEMBER_PERSON_ID",
+        fieldName: "personId",
+        required: false,
+        fieldType: "number",
+      },
+    },
+  ];
+
+  return (
+    <>
+      <OrganizationMemberRolesWindow>
+        <OrgMemberRoleForm
+          selectedRecord={selectedRecord}
+          closeModalFn={() => {
+            setOrganizationMemberRolesWindowState(false);
+          }}
+        />
+      </OrganizationMemberRolesWindow>
+      <TemplateGrid
+        apiActions={apiActions}
+        hideInfoBar={true}
+        data={data}
+        setData={setData}
+        editMode={{ editMode: "row" }}
+        formElements={formElements}
+        rowActions={[
+          {
+            icon: "tag",
+            label: "Roles",
+            actionFn: async (data) => {
+              setSelectedRecord(data);
+              setOrganizationMemberRolesWindowState(true);
+            },
+          },
+        ]}
+        gridLoadParametersValues={{ personId: props.selectedPerson.id }}
+        keyColumnName={"id"}
+        gridTitle="ORGANIZATION_MEMBER_PLURAL"
+        girdIcon="table-cells"
+        editAction={{
+          isEnabled: true,
+          authority: "ORGANIZATION_MEMBER_EDIT",
+          preActionValidation: async (data) => {
+            data.personId = props.selectedPerson.id;
+            return true;
+          },
+        }}
+        deleteAction={{
+          isEnabled: true,
+          authority: "ORGANIZATION_MEMBER_DELETE",
+        }}
+      />
+    </>
+  );
+};
+
+export default OrganizationMemberGrid;