robobyte-front-builder 1.0.0

package/src/configs/acl.js

@@ -0,0 +1,115 @@
+import { AbilityBuilder, Ability } from '@casl/ability'
+import { AbilityContext } from '../layouts/components/acl/Can'
+import { useContext } from 'react'
+import { AuthContext } from 'src/context/AuthContext'
+export const AppAbility = Ability
+
+/**
+ * Please define your own Ability rules according to your app requirements.
+ * We have just shown Admin and Client rules for demo purpose where
+ * admin can manage everything and client can just visit ACL page
+ */
+const defineRulesFor = (permissions, userType) => {
+  const { can, cannot, rules } = new AbilityBuilder(AppAbility)
+
+  permissions.forEach(permission => {
+      can(permission?.actions, permission?.subject)
+    })
+    can('view','mainHome')
+    can('manage','all')
+
+  return rules
+}
+// pass const ability = useContext(AbilityContext)
+// pass newPermissions = [{action: ["permission1","permission2"],subject: 'OrderStatusEnumUpdate',inverted:false}]
+// inverted for cannot have this actions within subject
+export const updatePermissions = (ability, newPermissions) => {
+  const existingRules = ability.rules
+
+  newPermissions.forEach(newPermission => {
+    // Find if there's an existing rule for the subject
+    const existingRuleIndex = existingRules.findIndex(rule => rule.subject === newPermission.subject)
+
+    if (existingRuleIndex >= 0) {
+      // Merge new actions with existing ones, avoiding duplicates
+      let actions = [...newPermission.action]
+      //Uncomment for actions etending instead of replacment
+      // actions = [...existingRules[existingRuleIndex].action, ...actions]
+      const updatedActions = Array.from(new Set([...actions]))
+      existingRules[existingRuleIndex].action = updatedActions
+      existingRules[existingRuleIndex].inverted = newPermission.inverted == true
+    } else {
+      // If no existing rule for the subject, add as a new rule
+      existingRules.push(newPermission)
+    }
+  })
+
+  ability.update(existingRules)
+
+}
+export const buildAbilityFor = (permissions, subject) => {
+  return new AppAbility(defineRulesFor(permissions, subject), {
+    // https://casl.js.org/v5/en/guide/subject-type-detection
+    // @ts-ignore
+    detectSubjectType: object => object.type
+  })
+}
+
+export const defaultACLObj = {
+  action: 'manage',
+  subject: 'all'
+}
+
+export default defineRulesFor
+
+
+
+
+
+
+
+
+
+
+// import { AbilityBuilder, Ability } from '@casl/ability'
+
+// export const AppAbility = Ability
+
+// /**
+//  * Please define your own Ability rules according to your app requirements.
+//  * We have just shown Admin and Client rules for demo purpose where
+//  * admin can manage everything and client can just visit ACL page
+//  */
+// const defineRulesFor = (roles, subject) => {
+//   const { can, rules } = new AbilityBuilder(AppAbility)
+//
+//   if (
+//     roles.includes('Admin') ||
+//     roles.includes('Owner') ||
+//     roles.includes('FranchiseOwner') ||
+//     roles.includes('SystemOwner') ||
+//     roles.includes('BranchOwner')
+//   ) {
+//
+//     can('manage', 'all')
+//   } else {
+//     can(['read', 'create', 'update', 'delete'], subject)
+//   }
+
+//   return rules
+// }
+
+// export const buildAbilityFor = (roles, subject) => {
+//   return new AppAbility(defineRulesFor(roles, subject), {
+//     // https://casl.js.org/v5/en/guide/subject-type-detection
+//     // @ts-ignore
+//     detectSubjectType: object => object.type
+//   })
+// }
+
+// export const defaultACLObj = {
+//   action: 'manage',
+//   subject: 'all'
+// }
+
+// export default defineRulesFor

package/src/configs/auth.js

@@ -0,0 +1,5 @@
+export default {
+  storageTokenKeyName: 'accessToken',
+  storageUserId: 'userId',
+  refreshToken: 'refreshToken',
+}

package/src/configs/aws-exports.js

@@ -0,0 +1,30 @@
+/* eslint-disable */
+// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.
+
+const awsmobile = {
+  aws_project_region: '',
+  aws_cognito_identity_pool_id: '',
+  aws_cognito_region: '',
+  aws_user_pools_id: '',
+  aws_user_pools_web_client_id: '',
+  oauth: {
+    domain: '',
+    scope: ['phone', 'email', 'openid', 'profile', 'aws.cognito.signin.user.admin'],
+    redirectSignIn: 'http://localhost:3000/',
+    redirectSignOut: 'http://localhost:3000/login/',
+    responseType: 'code'
+  },
+  federationTarget: 'COGNITO_USER_POOLS',
+  aws_cognito_username_attributes: ['EMAIL'],
+  aws_cognito_social_providers: [],
+  aws_cognito_signup_attributes: ['EMAIL'],
+  aws_cognito_mfa_configuration: 'OFF',
+  aws_cognito_mfa_types: ['SMS'],
+  aws_cognito_password_protection_settings: {
+    passwordPolicyMinLength: 8,
+    passwordPolicyCharacters: []
+  },
+  aws_cognito_verification_mechanisms: ['EMAIL']
+}
+
+export default awsmobile

package/src/configs/firebase.js

@@ -0,0 +1,25 @@
+// Import the functions you need from the SDKs you need
+import Firebase from 'firebase/compat/app'
+import 'firebase/compat/auth'
+
+// TODO: Add SDKs for Firebase services that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: '',
+  authDomain: '',
+  projectId: '',
+  storageBucket: '',
+  messagingSenderId: '',
+  appId: '',
+  measurementId: ''
+}
+
+// Initialize Firebase
+if (!Firebase.apps.length) {
+  Firebase.initializeApp(firebaseConfig)
+}
+
+export default Firebase

package/src/configs/i18n.js

@@ -0,0 +1,34 @@
+import i18n from 'i18next'
+import Backend from 'i18next-http-backend'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+
+i18n
+
+  // Enables the i18next backend
+  .use(Backend)
+
+  // Enable automatic language detection
+  .use(LanguageDetector)
+
+  // Enables the hook initialization module
+  .use(initReactI18next)
+  .init({
+    lng: 'ar',
+    backend: {
+      /* translation file path */
+      loadPath: '/locales/{{lng}}.json'
+    },
+    fallbackLng: 'ar',
+    debug: false,
+    keySeparator: false,
+    react: {
+      useSuspense: false
+    },
+    interpolation: {
+      escapeValue: false,
+      formatSeparator: ','
+    }
+  })
+
+export default i18n

package/src/configs/izColors.json

@@ -0,0 +1,11 @@
+{
+  "red":"#e32e89",
+  "grey": "#d3d3d3",
+  "darkGreen": "#008724",
+  "success" : "#72E128",
+  "error" : "#FF4D49",
+  "warning" : "#FDB528",
+  "info" : "#26C6F9",
+  "secondary" : "#6D788D",
+  "primary" : "#F7000A"
+}

package/src/configs/primaryColorConfig.js

@@ -0,0 +1,35 @@
+// Primary color config object
+const primaryColorConfig = [
+  {
+    name: 'primary-1',
+    light: '#8589FF',
+    main: '#666CFF',
+    dark: '#5C61E6'
+  },
+  {
+    name: 'primary-2',
+    light: '#49CCB5',
+    main: '#06B999',
+    dark: '#048770'
+  },
+  {
+    name: 'primary-3',
+    light: '#FFA95A',
+    main: '#FF891D',
+    dark: '#BA6415'
+  },
+  {
+    name: 'primary-4',
+    light: '#F07179',
+    main: '#EB3D47',
+    dark: '#AC2D34'
+  },
+  {
+    name: 'primary-5',
+    light: '#5CC5F1',
+    main: '#20AFEC',
+    dark: '#1780AC'
+  }
+]
+
+export default primaryColorConfig

package/src/configs/themeConfig.js

@@ -0,0 +1,44 @@
+/**
+ * Config
+ * -------------------------------------------------------------------------------------
+ * ! IMPORTANT: Make sure you clear the browser local storage in order to see the config changes in the template.
+ * ! To clear local storage, you may refer https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/.
+ */
+// ** Icon Import
+import Circle from 'mdi-material-ui/Circle'
+
+const themeConfig = {
+  // ** Layout Configs
+  templateName: 'RoboByte' /* App Name */,
+  layout: 'horizontal' /* vertical | horizontal */,
+  mode: 'light' /* light | dark */,
+  direction: 'rtl' /* ltr | rtl */,
+  skin: 'semi-dark' /*
+  default | bordered | semi-dark /*! Note: semi-dark value will only work for Vertical Layout */,
+  contentWidth: 'boxed' /* full | boxed */,
+  footer: 'static' /* fixed | static | hidden */,
+  // ** Routing Configs
+  routingLoader: true /* true | false */,
+  // ** Navigation (Menu) Configs
+  navHidden: false /* true | false */,
+  menuTextTruncate: true /* true | false */,
+  navSubItemIcon: Circle /* Icon Element */,
+  verticalNavToggleType: 'accordion' /* accordion | collapse /*! Note: This is for Vertical navigation menu only */,
+  navCollapsed: false /* true | false /*! Note: This is for Vertical navigation menu only */,
+  navigationSize: 260 /* Number in PX(Pixels) /*! Note: This is for Vertical navigation menu only */,
+  collapsedNavigationSize: 68 /* Number in PX(Pixels) /*! Note: This is for Vertical navigation menu only */,
+  afterVerticalNavMenuContentPosition: 'fixed' /* fixed | static */,
+  beforeVerticalNavMenuContentPosition: 'fixed' /* fixed | static */,
+  horizontalMenuToggle: 'hover' /* click | hover /*! Note: This is for Horizontal navigation menu only */,
+  horizontalMenuAnimation: true /* true | false */,
+  // ** AppBar Configs
+  appBar: 'fixed' /* fixed | static | hidden /*! Note: hidden value will only work for Vertical Layout */,
+  appBarBlur: true /* true | false */,
+  // ** Other Configs
+  responsiveFontSizes: true /* true | false */,
+  disableRipple: false /* true | false */,
+  disableCustomizer: true /* true | false */,
+  toastPosition: 'bottom-center' /* top-left | top-center | top-right | bottom-left | bottom-center | bottom-right */
+}
+
+export default themeConfig

package/src/context/AuthContext.js

@@ -0,0 +1,179 @@
+// ** React Imports
+import { createContext, useEffect, useState } from 'react'
+
+// ** Next Import
+import { useRouter } from 'next/router'
+import PutRefreshToken from 'services/auth/PutRefreshToken'
+// ** Axios
+import axios from 'axios'
+
+// ** Config
+import authConfig from 'src/configs/auth'
+import { UsersEndpoints } from 'services/Endpoints/UsersEndpoints'
+import { ApiURL } from 'services/Endpoints'
+import { jwtDecode } from "jwt-decode";
+import {ReportBuilderEndpoints} from "services/Endpoints/ReportBuilderEndpoints";
+
+// ** Defaults
+const defaultProvider = {
+  user: null,
+  accessToken: null,
+  loading: true,
+  setUser: () => null,
+  setLoading: () => Boolean,
+  isInitialized: false,
+  login: () => Promise.resolve(),
+  logout: () => Promise.resolve(),
+  setIsInitialized: () => Boolean,
+  register: () => Promise.resolve()
+}
+const AuthContext = createContext(defaultProvider)
+const AuthProvider = ({ children }) => {
+  // ** States
+  const [user, setUser] = useState(defaultProvider.user)
+  const [loading, setLoading] = useState(defaultProvider.loading)
+  const [isInitialized, setIsInitialized] = useState(defaultProvider.isInitialized)
+  const [token, setToken] = useState()
+  // ** Hooks
+  const router = useRouter()
+  useEffect(() => {
+    const initAuth = async () => {
+      setIsInitialized(true)
+      const storedToken = window.localStorage.getItem(authConfig.storageTokenKeyName)
+      const storedRefreshToken = window.localStorage.getItem(authConfig.refreshToken)
+      if (storedToken) {
+       await PutRefreshToken()
+        setLoading(true)
+        await axios
+          .post(ApiURL + ReportBuilderEndpoints.Post.GenericGet.URL, {
+            tFilter  : [
+              {
+                path  :"Id",
+                method  : "Equals",
+                value : window.localStorage.getItem(authConfig.storageUserId)
+              }
+            ]
+          } ,{
+            headers: {
+              Authorization: 'Bearer ' + window.localStorage.getItem(authConfig.storageTokenKeyName),
+              'content-type': 'application/json'
+            },
+            params: {
+              sourceModel : 'AuthModule.Domain.AuthModels.ApplicationUser',
+              getType : 'Single',
+              page : 1,
+              pageSize: 1,
+              userId: window.localStorage.getItem(authConfig.storageUserId)
+            },
+          })
+          .then(async response => {
+            setLoading(false)
+            response.data.data = {
+              ...response.data?.data,
+              permissions : [],
+              roles : []
+            }
+            setUser({ ...response.data?.data })
+          })
+          .catch(async e => {
+            setLoading(false)
+            handleLogout()
+          })
+      } else {
+        setLoading(false)
+        handleLogout()
+      }
+    }
+    initAuth()
+  }, [])
+  const handleLogin = (params, errorCallback) => {
+
+    axios
+      .post(ApiURL + UsersEndpoints.Post.Login.URL, params)
+      .then(async res => {
+        window.localStorage.setItem(authConfig.storageTokenKeyName, res.data.accessToken)
+        window.localStorage.setItem(authConfig.storageUserId, res.data.id)
+        window.localStorage.setItem(authConfig.refreshToken, res.data.refreshToken)
+        setToken(res.data.accessToken)
+      })
+      .then(() => {
+        axios
+          .post(ApiURL + ReportBuilderEndpoints.Post.GenericGet.URL, {
+            tFilter  : [
+              {
+                path  :"Id",
+                method  : "Equals",
+                value : window.localStorage.getItem(authConfig.storageUserId)
+              }
+            ]
+          } ,{
+            headers: {
+              Authorization: 'Bearer ' + window.localStorage.getItem(authConfig.storageTokenKeyName),
+              'content-type': 'application/json'
+            },
+            params: {
+              sourceModel : 'AuthModule.Domain.AuthModels.ApplicationUser',
+              getType : 'Single',
+              page : 1,
+              pageSize: 1,
+              userId: window.localStorage.getItem(authConfig.storageUserId)
+            },
+          })
+          .then(async response => {
+            const returnUrl = router.query.returnUrl
+            response.data.data = {
+              ...response.data?.data,
+              permissions : [],
+              roles : []
+            }
+            setUser({ ...response.data?.data })
+            await window.localStorage.setItem('userData', JSON.stringify(response.data?.data))
+            const redirectURL = returnUrl && returnUrl !== '/' ? returnUrl : '/mainHome'
+            router.replace(redirectURL)
+          })
+      })
+      .catch(err => {
+        if (errorCallback) errorCallback(err)
+      })
+  }
+
+  const handleLogout = () => {
+    setUser(null)
+    setIsInitialized(false)
+    window.localStorage.removeItem('userData')
+    window.localStorage.removeItem(authConfig.storageTokenKeyName)
+    window.localStorage.removeItem(authConfig.storageUserId)
+    window.localStorage.removeItem(authConfig.refreshToken)
+    router.push('/login')
+  }
+
+  const handleRegister = (params, errorCallback) => {
+    axios
+      .post(authConfig.registerEndpoint, params)
+      .then(res => {
+        if (res.data.error) {
+          if (errorCallback) errorCallback(res.data.error)
+        } else {
+          handleLogin({ email: params.email, password: params.password })
+        }
+      })
+      .catch(err => (errorCallback ? errorCallback(err) : null))
+  }
+
+  const values = {
+    user,
+    accessToken: token,
+    loading,
+    setUser,
+    setLoading,
+    isInitialized,
+    setIsInitialized,
+    login: handleLogin,
+    logout: handleLogout,
+    register: handleRegister
+  }
+
+  return <AuthContext.Provider value={values}>{children}</AuthContext.Provider>
+}
+
+export { AuthContext, AuthProvider }

package/src/context/BuilderContext.jsx

@@ -0,0 +1,209 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+import { executeActionsByEvent } from 'services/builderHelper/actionExecutor'
+import { findNode } from 'services/builderHelper'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
+
+const BuilderContext = createContext(null)
+
+/**
+ * Validate form based on component validation rules
+ * @param {object} root - Root node of the schema
+ * @param {object} formData - Current form values
+ * @returns {Promise<object>} - Validation errors keyed by component key
+ */
+async function validateForm(root, formData) {
+  const errors = {}
+
+  async function traverse(node) {
+    if (!node) return
+
+    // Get component key
+    const key = node.props?.main?.key?.value || node.props?.main?.key
+
+    if (key) {
+      const value = formData[key]
+
+      // Check required validation
+      const required = node.props?.advanced?.required?.value ?? node.props?.advanced?.required
+      if (required && (value === undefined || value === null || value === '')) {
+        errors[key] = 'This field is required'
+      }
+
+      // Check custom validation expression
+      const validationField = node.props?.advanced?.validation
+      if (validationField?.valueType === 'expression' && validationField?.expression?.code) {
+        try {
+          const result = await executeJSCode(validationField.expression.code, {
+            form: formData,
+            data: {}
+          })
+
+          // If validation returns false or error message, add error
+          if (result === false) {
+            errors[key] = 'Validation failed'
+          } else if (typeof result === 'string') {
+            errors[key] = result
+          }
+        } catch (e) {
+          console.error(`Validation error for ${key}:`, e)
+        }
+      }
+    }
+
+    // Traverse children
+    if (node.children) {
+      for (const child of node.children) {
+        await traverse(child)
+      }
+    }
+  }
+
+  await traverse(root)
+  return errors
+}
+
+const initialSchema = {
+  root: {
+    id: 'root',
+    type: 'container',
+    props: {
+      main: {
+        key: {
+          valueType: 'value',
+          value: 'root_form'
+        }
+      },
+      style: {
+        minHeight: {
+          valueType: 'value',
+          value: '100%'
+        },
+        padding: {
+          valueType: 'value',
+          value: '16px'
+        }
+      },
+      advanced: {}
+    },
+    className: '',
+    children: []
+  },
+  actions: []
+}
+
+export function BuilderProvider({ children }) {
+  const [schema, setSchema] = useState(initialSchema)
+  const [selectedId, setSelectedId] = useState(null)
+  const [viewMetaData, setViewMetaData] = useState({
+    id: 0,
+    viewId: '',
+    title: '',
+    value: '',
+    groupId: null,
+    group: null,
+    isNew: true
+  })
+
+  // ✅ NEW: editor mode
+  const [mode, setMode] = useState('edit') // 'edit' | 'preview'
+
+  // ✅ NEW: global data object for action results
+  const [data, setData] = useState({})
+
+  // ✅ NEW: form state for component values
+  const [form, setForm] = useState({})
+
+  // ✅ NEW: validation errors
+  const [validationErrors, setValidationErrors] = useState({})
+  const [draggingNodeId, setDraggingNodeId] = useState(null)
+
+  useEffect(() => {
+    console.log('BUILDER SCHEMA:', schema)
+  }, [schema])
+
+  // Execute onLoad actions when entering preview mode (form load in run mode)
+  useEffect(() => {
+    if (mode === 'preview') {
+      // Reset form and data for fresh preview mode execution
+      setForm({})
+      setData({})
+      setValidationErrors({})
+
+      // Execute onLoad actions with fresh context
+      if (schema.actions && schema.actions.length > 0) {
+        executeActionsByEvent(schema.actions, 'onLoad', { form: {}, data: {} }, setData).catch(err => {
+          console.error('onLoad actions error:', err)
+        })
+      }
+    }
+  }, [mode, schema.actions])
+
+  // ✅ Update form field value
+  const updateFormValue = (key, value) => {
+    setForm(prev => ({
+      ...prev,
+      [key]: value
+    }))
+  }
+
+  // ✅ Submit form handler
+  const submitForm = async () => {
+    // Execute validation
+    const errors = await validateForm(schema.root, form)
+    setValidationErrors(errors)
+
+    // If validation passes, execute onSubmit actions
+    if (Object.keys(errors).length === 0) {
+      await executeActionsByEvent(schema.actions, 'onSubmit', { form, data }, setData)
+      return true
+    }
+    return false
+  }
+
+  // ✅ Reset form handler
+  const resetForm = () => {
+    setForm({})
+    setValidationErrors({})
+  }
+
+  return (
+    <BuilderContext.Provider
+      value={{
+        schema,
+        setSchema,
+
+        viewMetaData,
+        setViewMetaData,
+
+        selectedId,
+        setSelectedId,
+
+        draggingNodeId,
+        setDraggingNodeId,
+
+        // ✅ mode API
+        mode,
+        setMode,
+        isEditMode: mode === 'edit',
+        isPreviewMode: mode === 'preview',
+
+        // ✅ global data object
+        data,
+        setData,
+
+        // ✅ form state and handlers
+        form,
+        setForm,
+        updateFormValue,
+        validationErrors,
+        setValidationErrors,
+        submitForm,
+        resetForm
+      }}
+    >
+      {children}
+    </BuilderContext.Provider>
+  )
+}
+
+export const useBuilder = () => useContext(BuilderContext)