@asaleh37/ui-base 1.0.9 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "1.0.9",
+  "version": "1.1.1",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",
@@ -13,31 +13,10 @@
     "dev": "vite"
   },
   "devDependencies": {
-    "@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.6",
-    "react": "^19.1.0",
-    "rollup-plugin-dts": "^6.2.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "tslib": "^2.8.1",
-    "@eslint/js": "^9.19.0",
-    "@types/react-dom": "^19.0.3",
-    "@types/react-i18next": "^7.8.3",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.19.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.18",
-    "globals": "^15.14.0",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "^8.22.0",
-    "vite": "^6.1.0",
-    "rollup": "^4.41.1",
-    "rollup-plugin-postcss": "^4.0.2",
     "@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",
@@ -53,25 +32,44 @@
     "@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.6",
+    "@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",
+    "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-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": {
-    "rollup": "^4.41.1",
-    "rollup-plugin-postcss": "^4.0.2",
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
@@ -103,8 +101,13 @@
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.1.5",
     "react-toastify": "^11.0.5",
+    "rollup": "^4.41.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "stylis": "^4.3.6",
     "stylis-plugin-rtl": "^2.1.1",
     "zod": "^3.24.2"
+  },
+  "dependencies": {
+    "@rollup/plugin-json": "^6.1.0"
   }
 }

package/rollup.config.js

@@ -1,43 +1,45 @@
-    import resolve from "@rollup/plugin-node-resolve";
-    import commonjs from "@rollup/plugin-commonjs";
-    import typescript from "@rollup/plugin-typescript";
-    import dts from "rollup-plugin-dts";
-    import terser from "@rollup/plugin-terser";
-    import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import terser from "@rollup/plugin-terser";
+import json from "@rollup/plugin-json";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
 
-    import postcss from "rollup-plugin-postcss";
+import postcss from "rollup-plugin-postcss";
 
-    const packageJson = require("./package.json");
+const packageJson = require("./package.json");
 
-    export default [
+export default [
+  {
+    input: "src/index.ts",
+    output: [
       {
-        input: "src/index.ts",
-        output: [
-          {
-            file: packageJson.main,
-            format: "cjs",
-            sourcemap: true,
-          },
-          {
-            file: packageJson.module,
-            format: "esm",
-            sourcemap: true,
-          },
-        ],
-        plugins: [
-          peerDepsExternal(),
-          resolve(),
-          commonjs(),
-          typescript({ tsconfig: "./tsconfig.json" }),
-          terser(),
-          postcss(),
-        ],
-        external: ["react", "react-dom"],
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
       },
       {
-        input: "src/index.ts",
-        output: [{ file: packageJson.types }],
-        plugins: [dts.default()],
-        external: [/\.css$/],
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
       },
-    ];
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser(),
+      postcss(),
+      json(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    input: "src/index.ts",
+    output: [{ file: packageJson.types }],
+    plugins: [dts.default()],
+    external: [/\.css$/],
+  },
+];

package/src/components/App.tsx

@@ -0,0 +1,31 @@
+import { useSelector } from "react-redux";
+import { createTheme } from "@mui/material";
+import { ThemeProvider } from "@emotion/react";
+import { useEffect } from "react";
+import { RootState } from "../redux/store";
+import { LightThemeOptions } from "../theme/LightThemeOptions";
+import { DarkThemeOptions } from "../theme/DarkThemeOptions";
+import Layout from "../layout/Layout";
+
+function App() {
+  const AppInfo = useSelector((state: RootState) => state.AppInfo);
+  const AppLayoutState = useSelector((state: RootState) => state.AppLayout);
+  let themeOptions = { ...LightThemeOptions };
+  if (AppLayoutState.themeMode === "dark") {
+    themeOptions = { ...DarkThemeOptions };
+  }
+  const theme = createTheme({
+    direction: AppLayoutState.appDirection,
+    ...themeOptions,
+  });
+  useEffect(() => {
+    document.title = AppInfo.documentTitle;
+  }, []);
+  return (
+    <ThemeProvider theme={theme}>
+      <Layout />
+    </ThemeProvider>
+  );
+}
+
+export default App;

package/src/components/BaseApp.tsx

@@ -11,6 +11,7 @@ LicenseInfo.setLicenseKey(
   "c2bd611fa642666253500ab9c8e4f78fTz0xMTE4MjEsRT0xNzc2OTg4Nzk5MDAwLFM9cHJlbWl1bSxMTT1zdWJzY3JpcHRpb24sUFY9aW5pdGlhbCxLVj0y"
 );
 import "react-toastify/dist/ReactToastify.css";
+import App from "./App";
 
 library.add(fab);
 library.add(far);
@@ -21,7 +22,7 @@ export type BaseAppProps = {};
 export const BaseApp: React.FC<BaseAppProps> = (props) => {
   return (
     <Provider store={store}>
-      <div>Base App</div>      
+      <App />
     </Provider>
   );
 };

package/src/components/admin/AttachmentGrid.tsx

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
+import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+
+
+const AttachmentGrid: React.FC = () => {
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    findAll: "api/v1/admin/attachment/all",
+    deleteById: "api/v1/admin/attachment",
+    save: "api/v1/admin/attachment",
+    findById: "api/v1/admin/attachment",
+    setData: setData,
+  });
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ATTACHMENT_ATTACHMENT_NUMBER",
+        fieldName: "attachmentNumber",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ATTACHMENT_ATTACHMENT_SIZE",
+        fieldName: "attachmentSize",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ATTACHMENT_ATTACHMENT_TYPE",
+        fieldName: "attachmentType",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ATTACHMENT_CATEGORY",
+        fieldName: "category",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ATTACHMENT_DOC_TYPE",
+        fieldName: "docType",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ATTACHMENT_FILE_NAME",
+        fieldName: "fileName",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ATTACHMENT_REF_KEY",
+        fieldName: "refKey",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "ATTACHMENT_REMARK",
+        fieldName: "remark",
+        required: false,
+        fieldType: "text",
+      },
+    },
+  ];
+
+  return (
+    <TemplateGrid
+      apiActions={apiActions}
+      data={data}
+      setData={setData}
+      editMode={{ editMode: "row" }}
+      formElements={formElements}
+      keyColumnName={"id"}
+      gridTitle="ATTACHMENT_PLURAL"
+      girdIcon="table-cells"
+      editAction={{ isEnabled: true, authority: "ATTACHMENT_EDIT" }}
+      deleteAction={{ isEnabled: true, authority: "ATTACHMENT_DELETE" }}
+    />
+  );
+};
+
+export default AttachmentGrid;

package/src/components/admin/AuthorityGrid.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
+
+const AuthorityGrid: React.FC = () => {
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    commonStoreKey: "SystemAuthorities",
+    deleteById: "api/v1/admin/authority",
+    save: "api/v1/admin/authority",
+    findById: "api/v1/admin/authority",
+    setData: setData,
+  });
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "AUTHORITY_AUTHORITY_CODE",
+        fieldName: "authorityCode",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "AUTHORITY_AUTHORITY_DESCRIPTION",
+        fieldName: "authorityDescription",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "AUTHORITY_AUTHORITY_NAME",
+        fieldName: "authorityName",
+        required: true,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "AUTHORITY_IS_ACTIVE",
+        fieldName: "isActive",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "AUTHORITY_ORGANIZATION_APPLICATION_ID",
+        fieldName: "organizationApplicationId",
+        required: false,
+        fieldType: "text",
+        gridProps: {
+          hidden: true,
+        },
+      },
+    },
+  ];
+
+  return (
+    <TemplateGrid
+      apiActions={apiActions}
+      data={data}
+      setData={setData}
+      editMode={{ editMode: "row", reloadAfterSave: true }}
+      formElements={formElements}
+      keyColumnName={"id"}
+      gridTitle="AUTHORITY_PLURAL"
+      girdIcon="table-cells"
+      editAction={{ isEnabled: true, authority: "AUTHORITY_EDIT" }}
+      deleteAction={{ isEnabled: true, authority: "AUTHORITY_DELETE" }}
+    />
+  );
+};
+
+export default AuthorityGrid;

package/src/components/admin/BluePrintGrid.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
+
+const BluePrintGrid: React.FC = () => {
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    findAll: "api/v1/admin/blueprint/all",
+    deleteById: "api/v1/admin/blueprint",
+    save: "api/v1/admin/blueprint",
+    findById: "api/v1/admin/blueprint",
+    setData: setData,
+  });
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "BLUE_PRINT_BLUE_PRINT_CODE",
+        fieldName: "bluePrintCode",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "BLUE_PRINT_QUERY_ID",
+        fieldName: "queryId",
+        required: false,
+        fieldType: "text",
+      },
+    },
+  ];
+
+  return (
+    <TemplateGrid
+      apiActions={apiActions}
+      data={data}
+      setData={setData}
+      editMode={{ editMode: "row" }}
+      formElements={formElements}
+      keyColumnName={"id"}
+      gridTitle="BLUE_PRINT_PLURAL"
+      girdIcon="table-cells"
+      editAction={{ isEnabled: true, authority: "BLUE_PRINT_EDIT" }}
+      deleteAction={{ isEnabled: true, authority: "BLUE_PRINT_DELETE" }}
+    />
+  );
+};
+
+export default BluePrintGrid;

package/src/components/admin/BluePrintPageGrid.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
+
+const BluePrintPageGrid: React.FC = () => {
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    findAll: "api/v1/admin/blueprintpage/all",
+    deleteById: "api/v1/admin/blueprintpage",
+    save: "api/v1/admin/blueprintpage",
+    findById: "api/v1/admin/blueprintpage",
+    setData: setData,
+  });
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "BLUE_PRINT_PAGE_BLUE_PRINT_ID",
+        fieldName: "bluePrintId",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "BLUE_PRINT_PAGE_ENABLED",
+        fieldName: "enabled",
+        required: false,
+        fieldType: "checkbox",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "BLUE_PRINT_PAGE_PAGE_NAME",
+        fieldName: "pageName",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "BLUE_PRINT_PAGE_PAGE_ORDER",
+        fieldName: "pageOrder",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "BLUE_PRINT_PAGE_QUERY_ID",
+        fieldName: "queryId",
+        required: false,
+        fieldType: "text",
+      },
+    },
+  ];
+
+  return (
+    <TemplateGrid
+      apiActions={apiActions}
+      data={data}
+      setData={setData}
+      editMode={{ editMode: "row" }}
+      formElements={formElements}
+      keyColumnName={"id"}
+      gridTitle="BLUE_PRINT_PAGE_PLURAL"
+      girdIcon="table-cells"
+      editAction={{ isEnabled: true, authority: "BLUE_PRINT_PAGE_EDIT" }}
+      deleteAction={{ isEnabled: true, authority: "BLUE_PRINT_PAGE_DELETE" }}
+    />
+  );
+};
+
+export default BluePrintPageGrid;

package/src/components/admin/BluePrintPointGrid.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import TemplateGrid from "../templates/DataEntryTemplates/TemplateDataGrid/TemplateGrid";
+import useApiActions from "../templates/DataEntryTemplates/useApiActions";
+import { FormElementProps } from "../templates/DataEntryTemplates/DataEntryTypes";
+
+const BluePrintPointGrid: React.FC = () => {
+  const [data, setData] = useState([]);
+  const apiActions = useApiActions({
+    findAll: "api/v1/admin/blueprintpoint/all",
+    deleteById: "api/v1/admin/blueprintpoint",
+    save: "api/v1/admin/blueprintpoint",
+    findById: "api/v1/admin/blueprintpoint",
+    setData: setData,
+  });
+
+  const formElements: Array<FormElementProps> = [
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "BLUE_PRINT_POINT_BLUE_PRINT_PAGE_ID",
+        fieldName: "bluePrintPageId",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "BLUE_PRINT_POINT_FONT_SIZE",
+        fieldName: "fontSize",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "BLUE_PRINT_POINT_POINT_CODE",
+        fieldName: "pointCode",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "BLUE_PRINT_POINT_X",
+        fieldName: "x",
+        required: false,
+        fieldType: "text",
+      },
+    },
+    {
+      type: "field",
+      mode: "props",
+      props: {
+        fieldLabel: "BLUE_PRINT_POINT_Y",
+        fieldName: "y",
+        required: false,
+        fieldType: "text",
+      },
+    },
+  ];
+
+  return (
+    <TemplateGrid
+      apiActions={apiActions}
+      data={data}
+      setData={setData}
+      editMode={{ editMode: "row" }}
+      formElements={formElements}
+      keyColumnName={"id"}
+      gridTitle="BLUE_PRINT_POINT_PLURAL"
+      girdIcon="table-cells"
+      editAction={{ isEnabled: true, authority: "BLUE_PRINT_POINT_EDIT" }}
+      deleteAction={{ isEnabled: true, authority: "BLUE_PRINT_POINT_DELETE" }}
+    />
+  );
+};
+
+export default BluePrintPointGrid;