ui-soxo-bootstrap-core 2.4.24

package/core/lib/components/progress-bar/progress-bar.js

@@ -0,0 +1,58 @@
+/**
+ * Component used for Table Actions
+ * 
+ * @author Ashique
+ * 
+ * Ensure to follow a minimal standard
+ */
+
+import React, { useState, useEffect, useContext } from "react";
+
+import PropTypes from "prop-types";
+
+import './progress-bar.scss';
+
+import { GlobalContext } from "../../Store";
+
+/**
+ * ProgressBar Component
+ * @param {boolean} isLoading - Indicates if loading is in progress
+ * @returns JSX.Element
+ */
+export default function ProgressBar({ isLoading }) {
+    // State to manage progress
+    const [progress, setProgress] = useState(0);
+
+    useEffect(() => {
+        let interval;
+
+        if (isLoading) {
+
+            setProgress(10); // Start progress
+
+            interval = setInterval(() => {
+                setProgress((prev) => (prev < 90 ? prev + 10 : prev)); // Increase gradually
+            }, 500);
+        } else {
+            setProgress(100); // Complete progress
+
+            setTimeout(() => setProgress(0), 500); // Hide after completion
+        }
+
+        return () => clearInterval(interval);
+    }, [isLoading]);
+
+    const { state } = useContext(GlobalContext);
+
+    return (
+        <div className="progress-bar-container">
+            <div className="progress-bar" style={{ width: `${progress}%`, background: state.theme.colors.progressBar }}>
+            </div>
+        </div>
+    );
+}
+
+ProgressBar.propTypes = {
+    isLoading: PropTypes.bool.isRequired,
+};
+

package/core/lib/components/progress-bar/progress-bar.scss

@@ -0,0 +1,15 @@
+.progress-bar-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    // background: transparent;
+    z-index: 1000;
+
+    .progress-bar {
+        height: 100%;
+        // background: #24aeb8;
+        transition: width 0.3s ease-in-out;
+    }
+}

package/core/lib/components/request-form/request-form.js

@@ -0,0 +1,110 @@
+/**
+ * Generic Form create accepts an array of fields to update any resource
+ */
+
+import React, { useState, useContext } from 'react';
+
+import { message } from 'antd';
+
+import { withRouter } from 'react-router-dom';
+
+// import './form-creator.scss'
+
+import { GlobalContext } from '../../Store';
+
+import FirebaseUtils from './../../utils/firebase.utils';
+
+import { FormCreator } from './../../../lib/components/';
+
+function RequestForm({
+    booking,
+    step,
+    model,
+    formContent,
+    modelIndex,
+    callback
+}) {
+    const [content, setContent] = useState(formContent);
+
+    const { user } = useContext(GlobalContext);
+
+    const onDataCollection = (values) => {
+        // If there is a customer validation that needs
+        // to be done , we have to handle it here
+        //
+        if (step.formValidation) {
+            if (step.formValidation.validation(formContent)) {
+                message.error(step.formValidation.message);
+
+                return new Promise((resolve, reject) => {
+                    resolve(true);
+                });
+            }
+        }
+
+        let params = {
+            [model]: {
+                ...content[model],
+                ...values
+            }
+        };
+
+        if (step.post_status) {
+            params[model].status = step.post_status;
+        }
+
+        if (step.extraParams) {
+            params = {
+                ...params,
+                // Note extra Params will override every previous value if the same key is used
+                ...step.extraParams(content, params[model])
+            };
+        }
+
+        // Building the notification object
+
+        if (step.notification) {
+            params.lastEvent = {
+                title: step.notification(content, user, values).title,
+                body: step.notification(content, user, values).body
+            };
+        }
+
+        return FirebaseUtils.updateRequestGeneric(
+            content.id,
+            params,
+            `${model} update :`,
+            values.remarks,
+            model
+        ).then(() => {
+            message.success(`${model} details updated`);
+
+            // Custom Actions to be done on submit
+
+            if (step.onSubmit) {
+                step.onSubmit &&
+                    step.onSubmit(content, params[model], booking).then(() => {
+                        callback(params, values);
+                    });
+            } else {
+                callback(params, values);
+            }
+        });
+    };
+
+    return (
+        <section className="request-form">
+            {step.fields && step.fields.length ? (
+                <FormCreator
+                    config={step}
+                    formContent={formContent[model]}
+                    modelIndex={modelIndex}
+                    model={model}
+                    onSubmit={onDataCollection}
+                />
+            ) : null}
+        </section>
+    );
+}
+
+export default withRouter(RequestForm);

package/core/lib/components/root-application/root-application.js

@@ -0,0 +1,70 @@
+import React, { useEffect, useContext, useState } from 'react';
+
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
+
+// import
+
+import {
+    Landing,
+} from './../';
+
+import ApplicationBootstrap from './../application-bootstrap/application-bootstrap';
+
+
+function RootApplication({ children, ...props }) {
+
+    let baseUrl = process.env.REACT_APP_ADMIN_BASE_URL || ""
+
+    const { appSettings = {}, CustomComponents = [], CustomModels = [] } = props;
+
+    useEffect(() => {
+        return () => { };
+    }, []);
+
+    return (
+        <ApplicationBootstrap {...props} >
+
+            <Switch>
+
+                <Route exact path={baseUrl}>
+                    <Router basename={baseUrl}>
+
+                        <Route
+                            // exact
+                            path=""
+                            // component={Landing}
+                            render={(routeParams) => <Landing
+
+                                steps={props.steps}
+
+                                appSettings={appSettings}
+                                CustomComponents={CustomComponents}
+                                CustomModels={CustomModels}
+                                {...routeParams}
+                            />}
+                        ></Route>
+
+                    </Router>
+
+                </Route>
+
+
+                <Route path="/">
+
+                    <Router basename="">
+
+                        {children}
+
+                    </Router>
+
+                </Route>
+
+            </Switch>
+
+        </ApplicationBootstrap>
+    );
+}
+
+
+export default RootApplication;

package/core/lib/components/rupee/rupee.js

@@ -0,0 +1,14 @@
+
+import React from 'react';
+
+export default function numberFormat({ value }) {
+
+
+  return new Intl.NumberFormat('en-IN', {
+    style: 'currency',
+    currency: 'INR'
+  }).format(value);
+
+}
+
+

package/core/lib/components/script-input/script-input.js

@@ -0,0 +1,169 @@
+/**
+ * Component to input code
+ */
+
+import React, { useState, useEffect, useContext } from 'react';
+
+import { Modal, Button } from 'antd';
+
+import AceEditor from 'react-ace';
+
+import "ace-builds/src-noconflict/theme-monokai";
+import "ace-builds/src-noconflict/theme-github";
+
+import { Scripts } from './../../models/';
+
+import './script-input.scss';
+
+const maxFontSize = 16;
+const minFontSize = 10;
+const SCRIPT_FONT_SIZE = 'SCRIPT_FONT_SIZE';
+const DEFAULT_FONT_SIZE = 14;
+
+/**
+ * Generic List
+ *
+ * @param {*} param0
+ */
+function ScriptInput({ script_id, defaultValue, callback, disableSave, onChange }) {
+
+    const [loading, setLoading] = useState(false);
+
+    const [value, setValue] = useState(defaultValue);
+
+    // 
+    const [visible, setVisible] = useState(false);
+
+    useEffect(() => {
+
+        if (script_id) {
+            loadScript(script_id);
+        }
+
+        // if(script_id)
+        return () => {
+
+        }
+
+    }, [])
+
+    /**
+     * Load the script
+     */
+    function loadScript() {
+
+        setLoading(true);
+
+        Scripts.getRecord(script_id).then((result) => {
+
+            setValue(result.value);
+
+            setLoading(false);
+
+        })
+    }
+
+    /**
+     * On Submit of script
+     */
+    function onSubmit() {
+
+        // setLoading(true);
+
+        // let params = {
+        //     value
+        // }
+
+        if (disableSave) {
+
+            callback(value);
+
+            setLoading(false);
+
+            onClose();
+
+            //     })
+
+            if (script_id) {
+
+                Scripts.update(script_id, params).then((result) => {
+
+                    callback({ script_id: script_id })
+
+                    setLoading(false);
+
+                })
+
+            } else {
+
+                Scripts.add(params).then((result) => {
+
+                    callback({ script_id: result.id });
+
+                    setLoading(false);
+
+                })
+            }
+        }
+    }
+
+    /**
+     * 
+     * @param {*} script 
+     */
+    function handleChange(script) {
+
+        setValue(script);
+    }
+
+    function onClose() {
+        setVisible(false);
+    }
+
+    return (
+        <section className="script-input">
+
+            <Button size={'small'} onClick={() => { setVisible(true); }}>
+                {script_id ? 'Edit' : 'Add'} Script
+            </Button>
+
+            {/* Add Modal */}
+            <Modal width="80%" className="code-editor-modal" okText={'Submit'} title={'Code Editor'} footer={[
+                <Button key="back" onClick={onClose}>
+                    Cancel
+                </Button>,
+                <Button key="submit" type="primary" loading={loading} onClick={onSubmit}>
+                    Submit
+                </Button>,
+            ]} visible={visible} onCancel={onClose}>
+
+                <AceEditor
+                    mode={'javascript'}
+                    // theme="github"
+                    theme="monokai"
+                    name="Code Editor"
+                    width='100%'
+                    // height='85vh'
+                    // onLoad={this.onLoad}
+                    onChange={handleChange}
+                    fontSize={14}
+                    showPrintMargin={true}
+                    showGutter={true}
+                    highlightActiveLine={true}
+                    value={value}
+                    setOptions={{
+                        enableBasicAutocompletion: true,
+                        enableLiveAutocompletion: true,
+                        enableSnippets: false,
+                        showLineNumbers: true,
+                        tabSize: 2,
+                    }}
+                />
+            </Modal>
+
+            {/* Add Modal Ends */}
+        </section>
+    );
+}
+
+export default (ScriptInput);

package/core/lib/components/script-input/script-input.scss

@@ -0,0 +1,8 @@
+.script-input {
+}
+
+.code-editor-modal {
+    .ant-modal-body {
+        padding: 0px;
+    }
+}

package/core/lib/components/sidemenu/animations.js

@@ -0,0 +1,52 @@
+export const boxVariants = {
+  entering: {y: 20},
+  entered: {
+      y: 0,
+      transition: {
+          y: {
+              duration: 0.2,
+              ease: [.62,.28,.23,.99]
+          }
+      }
+  },
+    show: { scale: 1.2 },
+    tap: { scale: 0.8 },
+    top: { y: [null, -150, 0] },
+    left: {
+      x: [null, -150, 0],
+      transition: {
+        duration: 3,
+        times: [0, 0.3, 0.8],
+        ease: ["backIn", "backOut"]
+      }
+    },
+    right: { x: [null, 150, 0] },
+    zoom: { scale: [null, 2, 1], rotate: [0, 90, 0] }
+  }
+  
+  export const barsVariant = {
+    animate: { transition: { staggerChildren: 0.095 } }
+  }
+  
+  export const barVariant = {
+    initial: { scaleY: 0 },
+    animate: {
+      scaleY: [null, 1, 0],
+      transition: { ease: "easeOut" }
+    }
+  }
+  
+  export const buttonsVariant = {
+    appear: { transition: { staggerChildren: 0.08 } },
+    animate: { transition: { staggerChildren: 0.12 } }
+  }
+  
+  export const buttonVariant = {
+    hidden: { opacity: 0, x: -20 },
+    appear: { opacity: 1, x: 0, transition: { duration: 0.5, ease: "easeOut" } },
+    animate: {
+      y: [null, 50, 0],
+      scale: [1, 0, 1],
+      rotate: [0, 360, 0]
+    }
+  }