robobyte-front-builder 1.0.19 → 1.0.21

package/src/context/SystemContext.js

@@ -7,7 +7,7 @@ import axios from 'axios'
 
 // ** Config
 import {Endpoints, Services} from 'services/Endpoints'
-import {getBaseURL} from 'services/config'
+import {getBaseURL, getAccessToken} from 'services/config'
 import {useJsApiLoader} from '@react-google-maps/api'
 import {AuthContext} from './AuthContext'
 import handleChange from 'services/helper/handleChange'
@@ -44,7 +44,7 @@ const SystemProvider = ({children}) => {
   const auth = useContext(AuthContext)
   //
   useEffect(() => {
-    if (localStorage.getItem('accessToken') != null) {
+    if (getAccessToken() != null) {
       handleGetNavigationSettings()
       console.log(navigation)
     }

package/src/hooks/useGlobalStore.js

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react'
+import { getGlobalData, setGlobalData, subscribeGlobal } from '../services/globalStore'
+
+/**
+ * React hook for consuming and updating the cross-route global store.
+ *
+ * Components that call this hook will re-render whenever any part of
+ * globalData changes (via setGlobalData from any Calculation, renderer,
+ * or component anywhere in the app).
+ *
+ * @returns {{ globalData: object, setGlobalData: (updater: object | Function) => void }}
+ *
+ * @example
+ *   function MyComponent() {
+ *     const { globalData, setGlobalData } = useGlobalStore()
+ *
+ *     return (
+ *       <div>
+ *         Selected: {globalData.selectedUser?.name}
+ *         <button onClick={() => setGlobalData({ selectedUser: null })}>Clear</button>
+ *       </div>
+ *     )
+ *   }
+ */
+export function useGlobalStore() {
+  const [state, setState] = useState(getGlobalData)
+
+  useEffect(() => {
+    // Sync with any changes that happened between render and effect
+    setState(getGlobalData())
+    // Subscribe for future updates
+    return subscribeGlobal(setState)
+  }, [])
+
+  return { globalData: state, setGlobalData }
+}

package/src/hooks/useTimerEngine.js

@@ -0,0 +1,54 @@
+import { useEffect, useRef } from 'react'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
+
+/**
+ * useTimerEngine
+ *
+ * Starts client-side timers (setInterval / setTimeout) for each enabled timer
+ * in the schema, executes their Calculation code via executeJSCode, and cleans
+ * up all handles when the component unmounts or the timer configuration changes.
+ *
+ * IMPORTANT — context is read through a ref, NOT a dep:
+ *   The effect only re-registers when `timers` config changes, not on every
+ *   render caused by data/form state updates. This prevents runaway re-mounts
+ *   while still ensuring each tick uses the freshest data/setData values.
+ *
+ * @param {object[]} timers     - schema.timers array
+ * @param {object}   context    - Execution context (data, setData, dataRef, …)
+ *                                Caller must update this object on every render.
+ */
+export function useTimerEngine({ timers, context }) {
+  // Always hold a ref to the latest context so timer callbacks see fresh state
+  // without adding context to the effect dependency array.
+  const contextRef = useRef(context)
+  useEffect(() => { contextRef.current = context }) // sync every render
+
+  useEffect(() => {
+    const active = (timers ?? []).filter(t => t.enabled && t.code?.trim())
+    if (!active.length) return
+
+    const cleanups = []
+
+    for (const timer of active) {
+      // Enforce a 1 s minimum to avoid accidental tight loops
+      const ms = Math.max(Number(timer.interval) || 5000, 1000)
+
+      const run = () => {
+        executeJSCode(timer.code, contextRef.current).catch(err =>
+          console.error(`[Timer "${timer.name ?? timer.id}"]`, err)
+        )
+      }
+
+      if (timer.type === 'interval') {
+        if (timer.runOnLoad) run()              // fire immediately if requested
+        const id = setInterval(run, ms)
+        cleanups.push(() => clearInterval(id))
+      } else if (timer.type === 'delay') {
+        const id = setTimeout(run, ms)
+        cleanups.push(() => clearTimeout(id))
+      }
+    }
+
+    return () => cleanups.forEach(fn => fn())
+  }, [timers]) // re-registers only when timer config (name/type/interval/code) changes
+}

package/src/lib/index.js

@@ -73,14 +73,22 @@ export { default as RoboByteFrontBuilderProvider } from './providers/RoboByteFro
 export { default as UIBuilderPage } from '../pages/viewBuilder/index'
 export { default as ReportBuilderPage } from '../pages/reportModule/reportBuilder/index'
 export { default as NavigatorBuilderPage } from '../pages/navigatorBuilder/index'
+// PrintBuilderPage — full print layout designer (header / body pages / footer / settings).
+// Create a host page at e.g. pages/printBuilder/index.jsx and re-export this component.
+// Open a saved layout from action code: openPrintLayout('layoutId', data)
+export { default as PrintBuilderPage } from '../pages/printBuilder/index'
+// PrintLayoutsList — browse, preview, and delete saved print layouts.
+// Create a host page at e.g. pages/printBuilder/layouts/index.jsx and re-export this component.
+export { default as PrintLayoutsList } from '../pages/printBuilder/layouts/index'
 // ViewerPage renders a saved UI Builder view (read-only production mode).
 // Create a host page at e.g. pages/viewer/[id].jsx and re-export this component.
 export { default as ViewerPage } from '../pages/viewer/[id]/index'
 // Internal list / viewer pages — use these to embed the browse/list experience
 // inside the host app with its own layout.
-export { default as ViewsList }    from '../pages/viewBuilder/views/index'
-export { default as ReportsList }  from '../pages/reportModule/reportBuilder/reports/index'
-export { default as ReportViewer } from '../pages/reportModule/reportBuilder/reportViewer/index'
+export { default as ViewsList }          from '../pages/viewBuilder/views/index'
+export { default as ReportsList }        from '../pages/reportModule/reportBuilder/reports/index'
+export { default as ReportViewer }       from '../pages/reportModule/reportBuilder/reportViewer/index'
+export { default as ReportsCard }        from '../pages/reportModule/reportBuilder/reportsPermissions/index'
 
 // ── Core Contexts & Hooks (advanced use) ─────────────────────────────────────
 // Useful when you need to read or drive builder state from the host app.

package/src/lib/layouts/BlankLayout.jsx

@@ -0,0 +1,13 @@
+import Box from '@mui/material/Box'
+
+/**
+ * BlankLayout — minimal full-height wrapper used by builder pages.
+ * Standalone replacement for @core/layouts/BlankLayout.
+ */
+const BlankLayout = ({ children }) => (
+  <Box sx={{ minHeight: '100vh', width: '100%', overflow: 'hidden' }}>
+    {children}
+  </Box>
+)
+
+export default BlankLayout

package/src/lib/providers/RoboByteFrontBuilderProvider.jsx

@@ -43,13 +43,28 @@
  *   }
  */
 
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
+import { useRouter } from 'next/router'
+import { Toaster } from 'react-hot-toast'
 import { ModuleRegistry } from 'ag-grid-community'
-import { AllEnterpriseModule, IntegratedChartsModule, LicenseManager } from 'ag-grid-enterprise'
-import { AgChartsEnterpriseModule } from 'ag-charts-enterprise'
+import { AllEnterpriseModule, LicenseManager } from 'ag-grid-enterprise'
 import { NavigationExtensionProvider } from '../navigation/NavigationExtensionContext'
 import { configureRoboByte } from '../../services/config'
 import { AuthContext } from '../../context/AuthContext'
+import { setRouter } from '../../services/routerRef'
+
+/**
+ * Keeps the routerRef singleton in sync with the current Next.js router.
+ * Must render inside a Next.js page tree so useRouter() is available.
+ * Returns null — purely a side-effect component.
+ */
+function RouterSync() {
+  const router = useRouter()
+  useEffect(() => {
+    setRouter(router)
+  }, [router])
+  return null
+}
 
 /**
  * @param {string}    [baseURL]          Root API server URL (with trailing slash)
@@ -63,6 +78,12 @@ import { AuthContext } from '../../context/AuthContext'
  *                                       Pass your key here — the provider calls
  *                                       LicenseManager.setLicenseKey() and registers
  *                                       AllEnterpriseModule automatically.
+ * @param {object}    [toasterProps]     Props forwarded to react-hot-toast's <Toaster />.
+ *                                       The provider mounts its own Toaster so the package
+ *                                       controls its own toast instance — no setup needed
+ *                                       in the host app.  Override position, toastOptions,
+ *                                       etc. here if needed.
+ *                                       Default: { position: 'top-right' }
  * @param {ReactNode} children
  */
 const RoboByteFrontBuilderProvider = ({
@@ -74,6 +95,7 @@ const RoboByteFrontBuilderProvider = ({
   navExtensions = [],
   endpoints = null,
   agGridLicenseKey = null,
+  toasterProps = {},
 }) => {
   // Apply URL + endpoint config synchronously before any child renders.
   useMemo(() => {
@@ -87,10 +109,7 @@ const RoboByteFrontBuilderProvider = ({
     if (agGridLicenseKey) {
       LicenseManager.setLicenseKey(agGridLicenseKey)
     }
-    ModuleRegistry.registerModules([
-      AllEnterpriseModule,
-      IntegratedChartsModule.with(AgChartsEnterpriseModule),
-    ])
+    ModuleRegistry.registerModules([AllEnterpriseModule])
   }, [agGridLicenseKey])
 
   // Auth context value — comes entirely from the host. No logic here.
@@ -102,7 +121,42 @@ const RoboByteFrontBuilderProvider = ({
   return (
     <AuthContext.Provider value={authValue}>
       <NavigationExtensionProvider items={navExtensions}>
+        <RouterSync />
         {children}
+        {/* Package-owned Toaster — same react-hot-toast instance used by all
+            services (GetService, PostService, …) and showToast() in action code.
+            Mounted here so the host app needs zero toast setup. */}
+        <Toaster
+          position='bottom-center'
+          gutter={10}
+          containerStyle={{ bottom: 24 }}
+          toastOptions={{
+            duration: 4000,
+            style: {
+              borderRadius: '10px',
+              background: '#1e1e2e',
+              color: '#f0f0f5',
+              fontSize: '14px',
+              fontFamily: 'inherit',
+              padding: '12px 16px',
+              boxShadow: '0 8px 24px rgba(0,0,0,0.25)',
+              maxWidth: '380px',
+            },
+            success: {
+              iconTheme: { primary: '#4ade80', secondary: '#1e1e2e' },
+              style: { borderLeft: '4px solid #4ade80' },
+            },
+            error: {
+              iconTheme: { primary: '#f87171', secondary: '#1e1e2e' },
+              style: { borderLeft: '4px solid #f87171' },
+            },
+            loading: {
+              iconTheme: { primary: '#60a5fa', secondary: '#1e1e2e' },
+              style: { borderLeft: '4px solid #60a5fa' },
+            },
+          }}
+          {...toasterProps}
+        />
       </NavigationExtensionProvider>
     </AuthContext.Provider>
   )

package/src/lib/themes/builderTheme.js

@@ -0,0 +1,41 @@
+import { createTheme } from '@mui/material/styles'
+
+const STORAGE_KEY = 'rbb:builderThemeMode'
+
+// ── Dark theme ────────────────────────────────────────────────────────────────
+export const builderDarkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary:    { main: '#9c27b0' },      // purple  (UI builder indicator)
+    secondary:  { main: '#f5a623' },      // amber   (print builder indicator)
+    background: { default: '#141618', paper: '#1e2227' },
+    divider:    '#3a3f45',
+    text:       { primary: '#e8eaed', secondary: '#9aa0aa' },
+  },
+})
+
+// ── Light theme ───────────────────────────────────────────────────────────────
+export const builderLightTheme = createTheme({
+  palette: {
+    mode: 'light',
+    primary:   { main: '#9c27b0' },
+    secondary: { main: '#f5a623' },
+    background: { default: '#f0f2f5', paper: '#ffffff' },
+    divider:   '#dde1e7',
+  },
+})
+
+export const BUILDER_THEMES = {
+  dark:  builderDarkTheme,
+  light: builderLightTheme,
+}
+
+// ── Persistence ───────────────────────────────────────────────────────────────
+export function getBuilderThemeMode() {
+  try { return localStorage.getItem(STORAGE_KEY) === 'light' ? 'light' : 'dark' }
+  catch { return 'dark' }
+}
+
+export function saveBuilderThemeMode(mode) {
+  try { localStorage.setItem(STORAGE_KEY, mode) } catch {}
+}

package/src/pages/_app.js

@@ -1,140 +1,38 @@
-// ** Next Imports
-import Head from 'next/head'
-import {Router, useRouter} from 'next/router'
-
-// ** Loader Import
-import NProgress from 'nprogress'
-
-// ** Emotion Imports
-import { CacheProvider } from '@emotion/react'
-
-// ** Config Imports
-
-import { defaultACLObj } from 'src/configs/acl'
-import themeConfig from 'src/configs/themeConfig'
-
-import { Toaster } from 'react-hot-toast'
-import 'src/configs/i18n'
-
-import UserLayout from 'src/layouts/UserLayout'
-import AclGuard from 'src/@core/components/auth/AclGuard'
-import ThemeComponent from 'src/@core/theme/ThemeComponent'
-import AuthGuard from 'src/@core/components/auth/AuthGuard'
-import GuestGuard from 'src/@core/components/auth/GuestGuard'
-import WindowWrapper from 'src/@core/components/window-wrapper'
-
-import Spinner from 'src/@core/components/spinner'
-
-import { AuthProvider } from 'src/context/AuthContext'
-import {SettingsConsumer, SettingsContext, SettingsProvider} from 'src/@core/contexts/settingsContext'
-
-import ReactHotToast from 'src/@core/styles/libs/react-hot-toast'
-
-import { createEmotionCache } from 'src/@core/utils/create-emotion-cache'
-
-import 'prismjs'
-import 'prismjs/themes/prism-tomorrow.css'
-import 'prismjs/components/prism-jsx'
-import 'prismjs/components/prism-tsx'
-
-import 'react-perfect-scrollbar/dist/css/styles.css'
-
-import '../../styles/globals.css'
-import 'src/services/helper/yupCutomization'
-import { SystemProvider } from 'context/SystemContext'
-import {useContext, useEffect} from "react";
-import { NavigationExtensionProvider } from 'src/lib/navigation/NavigationExtensionContext'
-
-const clientSideEmotionCache = createEmotionCache()
-// ** Pace Loader
-if (themeConfig.routingLoader) {
-  Router.events.on('routeChangeStart', () => {
-    NProgress.start()
-  })
-  Router.events.on('routeChangeError', () => {
-    NProgress.done()
-  })
-  Router.events.on('routeChangeComplete', () => {
-    NProgress.done()
-  })
-}
-
-const Guard = ({ children, authGuard, guestGuard }) => {
-  if (guestGuard) {
-    return <GuestGuard fallback={<Spinner />}>{children}</GuestGuard>
-  } else if (!guestGuard && !authGuard) {
-    return <>{children}</>
-  } else {
-    return <AuthGuard fallback={<Spinner />}>{children}</AuthGuard>
-  }
-
-
+/**
+ * _app.js — Dev bootstrap for running robobyte-front-builder standalone.
+ *
+ * Wraps every page with RoboByteFrontBuilderProvider so all builder pages
+ * (viewBuilder, reportModule, navigatorBuilder, etc.) have access to the
+ * configured API URLs, AG Grid license, and auth context.
+ *
+ * Auth is mocked for development: a static dev user + token are used so you
+ * can navigate all builders without a real auth server.
+ */
+
+import RoboByteFrontBuilderProvider from '../lib/providers/RoboByteFrontBuilderProvider'
+
+// ── Dev credentials ────────────────────────────────────────────────────────
+// Replace these with real values (or wire a login form) when needed.
+const DEV_USER = {
+  id: 1,
+  name: 'Dev User',
+  email: 'dev@robobyte.local',
+  role: 'admin',
 }
+const DEV_ACCESS_TOKEN = null // Set to a real token string if your API requires auth
 
-// ** Configure JSS & ClassName
-const App = props => {
-  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props
-  const router = useRouter();
-  // Variables
-  const getLayout = Component.getLayout ?? (page => <UserLayout>{page}</UserLayout>)
-  const setConfig = Component.setConfig ?? undefined
-  const authGuard = Component.authGuard ?? true
-  const guestGuard = Component.guestGuard ?? false
-  const context = useContext(SettingsContext)
-
-  const settings = context?.settings
-  const saveSettings = context?.saveSettings
-  const aclAbilities = Component.acl ?? defaultACLObj
-
-  useEffect(()=>{
-    if (router.pathname === '/mainHome' || router.pathname === '/finance' || router.pathname === '/realStateManagement' || router.pathname == '/authModule' || router.pathname == '/reports') {
-        document.body.classList.add('home-page-body');
-        saveSettings({...settings,navHidden:true})
-    } else {
-      document.body.classList.remove('home-page-body');
-      saveSettings({...settings,navHidden:false})
-    }
-  }, [router.pathname])
+export default function App({ Component, pageProps }) {
+  const getLayout = Component.getLayout ?? (page => page)
 
   return (
-    <CacheProvider value={emotionCache}>
-      <Head>
-        <title>{`${themeConfig.templateName} - By RoboByte`}</title>
-        {/* <meta
-          name='description'
-          content={`${themeConfig.templateName} – Material Design React Admin Dashboard Template – is the most developer friendly & highly customizable Admin Dashboard Template based on MUI v5.`}
-        /> */}
-        {/* <meta name='keywords' content='Material Design, MUI, Admin Template, React Admin Template' /> */}
-        <meta name='viewport' content='initial-scale=1, width=device-width' />
-      </Head>
-      <AuthProvider>
-        <NavigationExtensionProvider>
-        <SystemProvider>
-          <SettingsProvider {...(setConfig ? { pageSettings: setConfig() } : {})}>
-            <SettingsConsumer>
-              {({ settings }) => {
-                return (
-                  <ThemeComponent settings={settings}>
-                    <WindowWrapper>
-                      <Guard authGuard={authGuard} guestGuard={guestGuard}>
-                      <AclGuard aclAbilities={aclAbilities} guestGuard={guestGuard}>
-                          {getLayout(<Component {...pageProps} />)}
-                        </AclGuard>
-                      </Guard>
-                    </WindowWrapper>
-                    <ReactHotToast>
-                      <Toaster position={settings.toastPosition} toastOptions={{ className: 'react-hot-toast' }} />
-                    </ReactHotToast>
-                  </ThemeComponent>
-                )
-              }}
-            </SettingsConsumer>
-          </SettingsProvider>
-        </SystemProvider>
-        </NavigationExtensionProvider>
-      </AuthProvider>
-    </CacheProvider>
+    <RoboByteFrontBuilderProvider
+      baseURL={process.env.NEXT_PUBLIC_API_BASE_URL || 'http://140.82.34.191:3400/'}
+      apiURL={process.env.NEXT_PUBLIC_API_URL || 'http://140.82.34.191:3400/api/'}
+      user={DEV_USER}
+      accessToken={DEV_ACCESS_TOKEN}
+      agGridLicenseKey={process.env.NEXT_PUBLIC_AG_GRID_LICENSE_KEY}
+    >
+      {getLayout(<Component {...pageProps} />)}
+    </RoboByteFrontBuilderProvider>
   )
 }
-
-export default App

package/src/pages/api/ai.js

@@ -0,0 +1,87 @@
+/**
+ * POST /api/ai
+ *
+ * Thin proxy that forwards builder AI requests to the configured provider.
+ * Runs server-side — API keys are never exposed to the browser.
+ *
+ * Body: { messages: [{role, content}], systemPrompt: string, provider?: string }
+ * Response: { content: string }
+ */
+
+const PROVIDERS = {
+  claude: {
+    url:     'https://api.anthropic.com/v1/messages',
+    apiKey:  () => process.env.CLAUDE_API_KEY ?? '',
+    model:   () => process.env.NEXT_PUBLIC_CLAUDE_MODEL ?? 'claude-sonnet-4-6',
+    headers: (key) => ({
+      'Content-Type':      'application/json',
+      'x-api-key':         key,
+      'anthropic-version': '2023-06-01',
+    }),
+    body: (model, messages, system) => ({
+      model,
+      max_tokens: 8096,
+      system,
+      messages,
+    }),
+    extract: (data) => data?.content?.[0]?.text ?? '',
+  },
+
+  openai: {
+    url:     'https://api.openai.com/v1/chat/completions',
+    apiKey:  () => process.env.OPENAI_API_KEY ?? '',
+    model:   () => process.env.NEXT_PUBLIC_OPENAI_MODEL ?? 'gpt-4o',
+    headers: (key) => ({
+      'Content-Type': 'application/json',
+      Authorization:  `Bearer ${key}`,
+    }),
+    body: (model, messages, system) => ({
+      model,
+      max_tokens: 8096,
+      messages: [{ role: 'system', content: system }, ...messages],
+    }),
+    extract: (data) => data?.choices?.[0]?.message?.content ?? '',
+  },
+}
+
+export default async function handler(req, res) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' })
+  }
+
+  const { messages, systemPrompt, provider: providerOverride } = req.body
+
+  if (!messages || !systemPrompt) {
+    return res.status(400).json({ error: 'Missing messages or systemPrompt' })
+  }
+
+  const providerId = providerOverride ?? process.env.NEXT_PUBLIC_AI_PROVIDER ?? 'claude'
+  const provider   = PROVIDERS[providerId] ?? PROVIDERS.claude
+  const apiKey     = provider.apiKey()
+  const model      = provider.model()
+
+  if (!apiKey) {
+    return res.status(500).json({
+      error: `No API key configured for provider "${providerId}". Set ${providerId.toUpperCase()}_API_KEY in .env.local.`,
+    })
+  }
+
+  try {
+    const upstream = await fetch(provider.url, {
+      method:  'POST',
+      headers: provider.headers(apiKey),
+      body:    JSON.stringify(provider.body(model, messages, systemPrompt)),
+    })
+
+    if (!upstream.ok) {
+      const body = await upstream.text().catch(() => '')
+      return res.status(upstream.status).json({ error: `Provider error (${upstream.status}): ${body}` })
+    }
+
+    const data    = await upstream.json()
+    const content = provider.extract(data)
+    return res.status(200).json({ content })
+  } catch (err) {
+    return res.status(500).json({ error: err.message })
+  }
+}

package/src/pages/builders/report/index.js

@@ -0,0 +1 @@
+export { default } from '../../reportModule/reportBuilder'

package/src/pages/builders/report/list/index.js

@@ -0,0 +1 @@
+export { default } from '../../../reportModule/reportBuilder/reports'

package/src/pages/builders/report/viewer/index.js

@@ -0,0 +1 @@
+export { default } from '../../../reportModule/reportBuilder/reportViewer'