ui-soxo-bootstrap-core 2.4.24

package/.babelrc

@@ -0,0 +1,9 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        "@babel/plugin-transform-react-jsx"
+    ]
+}

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,33 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - run: npm i
+#       - run: npm test
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org/
+      - run: npm i
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/.husky/pre-commit

@@ -0,0 +1,12 @@
+# #!/usr/bin/env sh
+# . "$(dirname "$0")/_/husky.sh"
+
+
+# Check if eslint.config.mjs has been modified
+
+# if git diff --cached --name-only | grep -q '^eslint.config.mjs$'; then
+#   echo "Error: Changes to eslint.config.mjs are not allowed."
+#   exit 1
+# fi
+
+# npx lint-staged

package/.prettierrc.json

@@ -0,0 +1,11 @@
+{
+    "singleQuote": true,
+    "jsxSingleQuote": false,
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "bracketSpacing": true,
+    "editor.wordWrap": "wordWrapColumn",
+    "editor.wordWrapColumn": 150,
+    "printWidth": 150
+  }
+  

package/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+};

package/core/components/component-loader/component-loader.js

@@ -0,0 +1,125 @@
+/**
+ * 
+ * Component Loader is ins
+ * 
+ */
+
+
+import React, { Suspense, useState, useEffect } from "react";
+
+// import { BrowserRouter } from "react-router-dom";
+
+// import "./index.css";
+
+import { ComponentWrapper } from "../../components/component-wrapper/component-wrapper";
+
+
+
+const App = () => {
+
+    // Configuration to store the env of the application
+    const [configuration, setConfiguration] = useState({});
+
+    useEffect(() => {
+
+        loadConfiguration();
+
+    }, [])
+
+    /**
+     * Load the configuration 
+     */
+    async function loadConfiguration() {
+
+
+        let domain = "qms-dubai";
+        // let domain = window.location.host.split(".")[0];
+
+        const result = await fetch(`https://hgrntky25ejsmw3zobq3u6lk3q0tploo.lambda-url.ap-northeast-1.on.aws/?domain=${domain}`).then((result) => {
+            return result.json();
+        })
+
+        if (result.length && result[0].other_details) {
+
+            let appConfiguration = JSON.parse(result[0].other_details);
+
+            console.log(appConfiguration);
+
+
+
+            console.log("Starting application with ", appConfiguration);
+
+            window.process = {
+                env: appConfiguration
+            }
+
+            // Setting the title
+            document.title = appConfiguration.REACT_APP_WEBSITE_NAME
+
+            setConfiguration({
+                ...appConfiguration,
+            });
+
+        }
+    }
+
+    return (<ComponentLoader configuration={configuration} />)
+
+
+    // return (
+    //   <Suspense fallback={<div>Loading now...</div>}>
+
+    //     {/* Component Wrapper */}
+    //     <ComponentWrapper component={configuration} {...configuration} />
+    //     {/* Component Wrapper Ends */}
+
+    //   </Suspense>
+    // )
+};
+
+/**
+ * Realizing the MFE setup can do not just load applications , 
+ * It can also be used foro loading component on fly 
+ * 
+ */
+export function ComponentLoader({ configuration }) {
+
+
+    window.process = {
+        env: configuration
+    }
+
+    console.log('here 5.2',configuration);
+
+    let component = {
+        "url": "http://localhost:8085/remoteEntry.js",
+        // "url": "https://qms-soxo.web.app/remoteEntry.js",
+        // "url": "http://localhost:9090/remoteEntry.js",
+        // "url": configuration.REACT_APP_URL,
+        "scope": "Application",
+        // "scope": "ReportingUI",
+        "name": "Tokens",
+        "props": {
+            "props1": "propsvalue"
+        }
+    }
+
+    return (<>
+
+        <Suspense fallback={<div>Loading now...</div>}>
+
+            {/* Component Wrapper */}
+            <ComponentWrapper component={configuration} {...configuration} />
+            {/* Component Wrapper Ends */}
+
+        </Suspense>
+
+    </>)
+
+}
+
+
+
+export default App;
+
+

package/core/components/component-wrapper/component-wrapper.js

@@ -0,0 +1,122 @@
+
+
+import React, { Suspense } from "react";
+
+
+/**
+ * 
+ * "component": {
+    "url": "http://localhost:8085/remoteEntry.js",
+    "scope": "curdComponent",
+    "name": "./Widget",
+    "props": {
+        "props1": "propsvalue"
+    }
+    }
+ * 
+ */
+
+import { useDynamicScript, loadComponent } from "../../utils/script.utils";
+
+
+
+
+/**
+ * Expect a component of above structure , language 
+ * 
+ * @param {*} param0 
+ * @returns 
+ */
+export const ComponentWrapper = ({ component, language, t }) => {
+
+    /**
+     * 
+     * 
+     * @param {*} props 
+     * @returns 
+     */
+    const Module = (props) => {
+
+        const { ready, failed } = useDynamicScript({
+            url: props.module && props.module.url,
+            component,
+        });
+
+        console.log('here 5.3');
+
+        if (!props.module) {
+            return <h2>No module specified</h2>;
+        }
+
+        if (!ready) {
+            return <Skeleton />;
+        }
+
+        if (failed) {
+            throw new DOMException("Failed to load script");
+        }
+
+        const Component = React.lazy(
+            loadComponent(props.module.scope, props.module.name)
+        );
+
+        console.log('here 5.4', props.module.scope, props.module.name);
+
+        console.log('here 5.5', Component);
+
+        const { HomePage } = Component;
+
+        console.log(HomePage);
+
+        return (
+            <React.Suspense fallback={<Skeleton caption="Loading your application " />}>
+                <Component
+                    {...component.props}
+                // t={t}
+                // store={store}
+                />
+
+                {/* <HomePage /> */}
+
+            </React.Suspense>
+        );
+    };
+
+    /**
+     * 
+     */
+    if (component && component.name && component.url && component.scope) {
+        return (
+            <div className="component-wrapper animate_animated animate_fadeIn">
+                <Module
+                    module={{
+                        name: component.name,
+                        url: component.url,
+                        scope: component.scope,
+                        props: component.props,
+                    }}
+                />
+            </div>
+        );
+    } else {
+        return <Skeleton />;
+    }
+};
+
+
+function Skeleton({ caption = "Simplifying your business | Soxo" }) {
+
+    return (<div class="skeleton-card">
+        <h3 class="loading-animation-text">{caption}</h3>
+
+        <div class="skeleton"></div>
+
+        <div class="skeleton"></div>
+
+        <div class="skeleton"></div>
+
+        <div class="skeleton"></div>
+
+        <div class="skeleton"></div>
+    </div>)
+}

package/core/components/extra-info/extra-info-details.js

@@ -0,0 +1,172 @@
+/**
+ * ExtraInfoDetail component contains the button and the data for corresponding to script mode and will open extrainfo  
+ *
+ * @description 
+ * @author Sneha T
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import { Button, Drawer, Tabs, Skeleton } from 'antd';
+
+import { Dashboard } from '../../models';
+
+import { InfoCircleFilled } from '@ant-design/icons';
+
+import './extra-info-details.scss';
+
+import ExtraInfo from './extra-info';
+
+// import ExtraInfo from ''; // Assuming ExtraInfo is defined
+
+const { TabPane } = Tabs;
+
+export default function ExtraInfoDetail({ modeValue, icon, title, tabPosition='left',showDrawerData,dbPtr,callback,...record}) {
+    // State to control drawer
+    const [open, setOpen] = useState(false);
+
+    // To set extra info data
+    const [info, setInfo] = useState([]);
+    //Setting active key for tabs
+    const [activeKey, setActiveKey] = useState(null);
+
+    // To strore selected item
+    const [selectedItem, setSelectedItem] = useState(null);
+
+    const [loading, setLoading] = useState(true);
+
+    /**
+    * Show Drawer
+    */
+    const showDrawer = () => {
+
+        setActiveKey(null); // Reset activeKey before fetching new info
+
+        getExtraInfo();
+
+        setOpen(true);
+
+    };
+
+    /**
+     * Function to close
+     */
+    const onClose = () => {
+        if (typeof callback === 'function') {
+            // Only call if it exists
+            callback(false);
+        }
+        setOpen(false);
+    };
+
+    /**
+     * Function to get Info
+     */
+    async function getExtraInfo() {
+
+        setSelectedItem()
+
+        setLoading(true);
+
+        let mode = modeValue
+
+        const result = await Dashboard.getExtraInfo(mode);
+
+        setInfo(result);
+
+        setSelectedItem(result[0])
+
+        setActiveKey(result[0].id.toString()); // Set activeKey to the first item's id
+
+        setLoading(false);
+    }
+
+    useEffect(() => {
+        // If showDrawerData is true then call showDrawer function
+        if (showDrawerData) {
+            showDrawer();
+        }
+    }, [showDrawerData]);
+
+    /**
+   * Function to render icon or button
+   */
+    const renderIconOrButton = () => {
+        switch (icon) {
+            case 'InfoCircleFilled':
+                return <InfoCircleFilled onClick={showDrawer} />;
+            case 'Button':
+                return <Button size="small" onClick={showDrawer}>Show Info</Button>;
+            default:
+                return null;
+        }
+    };
+
+    
+
+    return (
+        <>
+            {/* {loading ? (
+                <>
+                    <Skeleton active />
+                </>
+            ) : ( */}
+            <>
+                {/*  */}
+                {/* <Button onClick={showDrawer}> */}
+
+                {/* <InfoCircleFilled onMouseEnter={showDrawer} /> */}
+
+                {renderIconOrButton()}
+                {/* </Button> */}
+                {/*  */}
+
+                {/*  */}
+                <Drawer
+
+                    width={'85%'}
+
+                    title={title} onClose={onClose} open={open}>
+
+                    <div className="main-drawer-content">
+
+                        <div className="drawer-container">
+
+                            <div className="drawer-click"> {/* Flexbox approach */}
+                                <Tabs
+                                    tabPosition={tabPosition}
+
+                                    activeKey={activeKey} // Set activeKey to control the active tab
+
+                                    onChange={(key) => {
+
+                                        const selectedItem = info.find(item => item.id.toString() === key);
+
+                                        setSelectedItem(selectedItem);
+
+                                        setActiveKey(key);
+                                    }}
+                                >
+                                    {info.map(item => (
+                                        <TabPane tab={item.caption} key={item.id.toString()} />
+                                    ))}
+                                </Tabs>
+                            </div>
+
+                            <div className="right-drawer">
+
+                                {selectedItem && !loading ? <ExtraInfo item={selectedItem} record={record}  dbPtr={dbPtr}/> : null}
+
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </Drawer>
+
+            </>
+            {/* )} */}
+        </>
+    );
+}

package/core/components/extra-info/extra-info-details.scss

@@ -0,0 +1,27 @@
+.drawer-container {
+
+    display: flex;
+
+    .left-drawer {
+
+        cursor: pointer;
+
+        width: 230px;
+    }
+
+    // .drawer-click{
+
+    //     // gap: 10px;
+
+    //     display: flex;
+
+    //     // flex-direction: column;
+    // }
+
+    .right-drawer {
+
+        width: 80%;
+
+        padding-left: 10px;
+    }
+}

package/core/components/extra-info/extra-info.js

@@ -0,0 +1,134 @@
+/**
+ * ExtraInfo component executes the script data
+ * 
+ * @description 
+ * @author Sneha T
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import { Table, Skeleton } from 'antd';
+
+import { Dashboard } from '../../models';
+
+// import './extra-info.scss'
+
+
+export default function ExtraInfo({ item, dbPtr, record }) {
+
+    let displayColumns = item.display_columns;
+
+    // To store selected values
+    const [loading, setLoading] = useState(true);
+
+    // To store columns of tables
+    const [columns, setColumns] = useState([]);
+
+    // To store api result
+    const [result, setResult] = useState([]);
+    /**
+    * 
+    * 
+    * Manage initial render
+    */
+    useEffect(() => {
+        getSelectedItem(item)
+
+        if (item.display_columns) {
+
+            displayColumns = JSON.parse(displayColumns);
+
+            setColumns(displayColumns)
+
+        }
+
+    }, [item])
+
+    /**
+    * Columns for table
+    */
+    const cols = [
+        ...[
+            {
+                title: '#',
+                dataIndex: 'index',
+                render: (value, item, index) => index + 1,
+                key: 'ColumnIndex'
+            },
+        ],
+
+        //Mappping through columns
+        ...columns.map((entry) => {
+
+            return {
+                render: (record) => {
+
+                    if (entry.render) {
+
+                        return entry.render(record);
+
+                    } else {
+
+                        return record[entry.field]
+                    }
+                },
+                field: entry.field,
+                title: entry.title,
+                key: entry.field,
+            };
+
+        }),
+    ]
+    /**
+     * Function to get selected Item
+     */
+    async function getSelectedItem(item) {
+
+        setLoading(true);
+
+        let formBody;
+        //Check if dbPtr is not set or is empty. If not, load the value from localStorage (key: 'db_ptr')
+        if (!dbPtr) dbPtr = localStorage.db_ptr
+
+        formBody = {
+            ...record,
+            submode: item.submode
+        };
+
+
+        return await Dashboard.getSelectedExtraInfo(formBody,dbPtr).then((result) => {
+
+            setResult(result)
+
+
+            setLoading(false)
+
+        })
+
+
+    }
+
+    return (
+        <>
+
+            {loading ? (
+                <>
+                    <Skeleton active />
+                </>
+            ) : (
+
+                <Table
+                    scroll={{ x: true }}
+                    // rowKey={record => record.da_id}
+                    dataSource={result}
+                    columns={cols}
+                    pagination={
+                        false
+                    }
+
+                />
+
+            )}
+        </>
+    );
+};

package/core/components/index.js

@@ -0,0 +1,18 @@
+
+
+
+
+import LandingAPI from './landing-api/landing-api';
+
+import ExtraInfoDetail from './extra-info/extra-info-details';
+
+import RootApplicationAPI from './root-application-api/root-application-api';
+
+import { HomePageAPI } from '../modules';
+
+export {
+    LandingAPI,
+    RootApplicationAPI,
+    ExtraInfoDetail,
+    HomePageAPI
+}