robobyte-front-builder 1.0.19 → 1.0.23

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,107 @@
+/**
+ * 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 ?? '',
+  },
+
+  // Together AI — OpenAI-compatible API. Set TOGETHER_API_KEY and
+  // (optionally) NEXT_PUBLIC_TOGETHER_MODEL — point this at the base
+  // model for testing, or at your fine-tuned model id once a fine-tune
+  // job has finished (e.g. "username/llama-3.3-70b-rbb-ft-2026-05-10").
+  together: {
+    url:     'https://api.together.xyz/v1/chat/completions',
+    apiKey:  () => process.env.TOGETHER_API_KEY ?? '',
+    model:   () => process.env.NEXT_PUBLIC_TOGETHER_MODEL ?? 'meta-llama/Llama-3.3-70B-Instruct-Turbo',
+    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'

package/src/pages/index.js

@@ -1,44 +1,95 @@
-// ** React Imports
-import { useEffect } from 'react'
+/**
+ * Dev landing page — quick links to every builder page.
+ * Not shipped in the npm package (only appears when running `next dev` directly).
+ */
 
-// ** Next Imports
 import { useRouter } from 'next/router'
+import { Box, Button, Typography, Stack, Divider, Chip } from '@mui/material'
 
-// ** Spinner Import
-import Spinner from 'src/@core/components/spinner'
+const PAGES = [
+  { label: 'UI Builder', path: '/viewBuilder', color: '#4a90e2' },
+  { label: 'UI Views List', path: '/viewBuilder/views', color: '#4a90e2' },
+  { label: 'Report Builder', path: '/reportModule/reportBuilder', color: '#7b68ee' },
+  { label: 'Report Viewer', path: '/reportModule/reportBuilder/reportViewer', color: '#7b68ee' },
+  { label: 'Reports List', path: '/reportModule/reportBuilder/reports', color: '#7b68ee' },
+  { label: 'Reports Permissions', path: '/reportModule/reportBuilder/reportsPermissions', color: '#7b68ee' },
+  { label: 'Navigator Builder', path: '/navigatorBuilder', color: '#50c878' },
+  { label: 'Print Layout Builder', path: '/printBuilder', color: '#f5a623' },
+]
 
-// ** Hook Imports
-import { useAuth } from 'src/hooks/useAuth'
-import jwt_decode from 'jwt-decode';
+export default function DevIndex() {
+  const router = useRouter()
 
-export const getHomeRoute = role => {
-  return '/mainHome'
-}
+  return (
+    <Box
+      sx={{
+        minHeight: '100vh',
+        bgcolor: '#0f1117',
+        color: '#e0e0e0',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        p: 4,
+      }}
+    >
+      <Box sx={{ maxWidth: 480, width: '100%' }}>
+        <Stack direction='row' alignItems='center' spacing={1} mb={1}>
+          <Typography variant='h5' fontWeight={700} color='#fff'>
+            RoboByte Front Builder
+          </Typography>
+          <Chip label='DEV' size='small' sx={{ bgcolor: '#2e7d32', color: '#fff', fontWeight: 700, fontSize: 10 }} />
+        </Stack>
 
-export const getLoginRoute = () => {
-  return '/login'
-}
-const Home = () => {
-  // ** Hooks
-  const auth = useAuth()
-  const router = useRouter()
-  useEffect(() => {
-    if (!router.isReady) {
-      return
-    }
-
-    if (auth.user) {
-        const homeRoute = getHomeRoute()
-        router.replace(homeRoute)
-      }
-     else {
-      const loginRoute = getLoginRoute()
-      router.replace(loginRoute)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  return <Spinner />
-}
+        <Typography variant='body2' color='#888' mb={3}>
+          Running standalone — pick a builder page to open.
+        </Typography>
 
-export default Home
+        <Divider sx={{ borderColor: '#2a2a2a', mb: 3 }} />
+
+        <Stack spacing={1.5}>
+          {PAGES.map(({ label, path, color }) => (
+            <Button
+              key={path}
+              fullWidth
+              variant='outlined'
+              onClick={() => router.push(path)}
+              sx={{
+                justifyContent: 'flex-start',
+                borderColor: '#2a2a2a',
+                color: '#e0e0e0',
+                textTransform: 'none',
+                py: 1.2,
+                px: 2,
+                borderRadius: 2,
+                '&:hover': { borderColor: color, color: color, bgcolor: 'transparent' },
+              }}
+            >
+              <Box
+                component='span'
+                sx={{
+                  display: 'inline-block',
+                  width: 8,
+                  height: 8,
+                  borderRadius: '50%',
+                  bgcolor: color,
+                  mr: 1.5,
+                  flexShrink: 0,
+                }}
+              />
+              {label}
+              <Typography variant='caption' color='#555' ml='auto'>
+                {path}
+              </Typography>
+            </Button>
+          ))}
+        </Stack>
+
+        <Divider sx={{ borderColor: '#2a2a2a', mt: 3, mb: 2 }} />
+
+        <Typography variant='caption' color='#444'>
+          API: {process.env.NEXT_PUBLIC_API_BASE_URL || 'http://140.82.34.191:3400/'}
+        </Typography>
+      </Box>
+    </Box>
+  )
+}