robobyte-front-builder 1.0.25 → 1.0.27

package/docs/printLayout.md

@@ -0,0 +1,405 @@
+# Print Layouts — Calling Them From Host-App Code
+
+> **Scope.** This document covers triggering a print layout **from outside the UI Builder** — from a regular page, action handler, dialog, hook, or anywhere else in host-app code.
+>
+> The layout *itself* is designed in the **Print Layout Builder** at `/printBuilder` and persisted via the backend. This guide only covers how the host renders + prints a saved layout, not how to design one.
+>
+> If you're triggering print from inside the builder's Calculation runtime (`actionsConfig.code`, `viewerActions.code`, `onSubmit`, etc.), use the auto-injected `openPrintLayout(layoutId, data)` — see [`training/49-printLayout.md`](../training/49-printLayout.md) for the full Calculation-scope reference (data shape, when to fire, recipes for row / viewer / form-submit triggers, pitfalls). This doc is for everything else: regular host-app React, dialogs, hooks, pages outside any builder context.
+
+---
+
+## 1. Quick start
+
+```jsx
+import { useRef } from 'react'
+import PrintDialog from 'views/builder/viewer/PrintDialog'
+
+export default function InvoicesPage() {
+  // 1. Allocate a ref the dialog will register itself on.
+  const printDialogRef = useRef(null)
+
+  // 2. Build the minimum viewerContext the dialog needs.
+  const viewerContext = {
+    printDialogRef,
+    data: {},        // becomes printData inside the layout
+    setData: () => {},
+    form: {},
+    setForm: () => {},
+    mode: 'preview',
+    isEditMode: false,
+    isPreviewMode: true,
+    isPrintContext: true,
+  }
+
+  // 3. Mount the dialog once. It stays hidden until you open it.
+  // 4. Open it from anywhere with the saved layout id + the data the
+  //    layout should render against.
+  return (
+    <>
+      <Button
+        variant='contained'
+        onClick={() =>
+          printDialogRef.current?.open('invoice-layout-id', {
+            invoiceNumber: 'INV-1042',
+            customerName:  'Acme Corp',
+            lines: [{ sku: 'A', qty: 2 }, { sku: 'B', qty: 5 }],
+          })
+        }
+      >
+        Print Invoice
+      </Button>
+
+      <PrintDialog viewerContext={viewerContext} />
+    </>
+  )
+}
+```
+
+The dialog fetches the layout by `id`, renders the multi-zone preview, exposes a Print button, injects print CSS for `@page`, and on print fills in page numbers / clones fixed header & footer per page.
+
+---
+
+## 2. Prerequisites
+
+### 2.1 The layout exists on the backend
+
+You design the layout in the host app's `/printBuilder` (the page wrapper for `PrintBuilderPage`), give it a title, and save it. The backend persists it as `{ id, title, value: JSON-stringified-schema }` under `Endpoints.PrintLayout.*`. The dialog fetches it on `open(layoutId, data)`.
+
+### 2.2 `<RoboByteFrontBuilderProvider>` at app root
+
+`PrintDialog` uses `Services.GetService` to fetch the layout, which reads `apiURL` and `accessToken` from the provider. AG Grid (for `reportViewer` zones inside a layout) also reads its license from the provider. Without the provider, the fetch and any embedded grids fail silently.
+
+### 2.3 `next.config.js` bare-alias resolution
+
+The import path is bare-aliased — `views/builder/viewer/PrintDialog`. Your host's `next.config.js` `NormalModuleReplacementPlugin` resolves `views/*` to the package's source when the importing file is inside the package, and to the host's source otherwise. See [INTEGRATION.md](../INTEGRATION.md). When importing `PrintDialog` from **host** code, you need to point the alias at the package explicitly because the importing file is in the host tree.
+
+The simplest cross-tree import is to add this to your host's `package.json` `dependencies` and just import via package subpath:
+
+```js
+// works wherever next-transpile-modules is active
+import PrintDialog from 'robobyte-front-builder/src/views/builder/viewer/PrintDialog'
+```
+
+Or expose it from your host via `next.config.js`:
+
+```js
+// next.config.js — point bare 'views/builder/viewer/PrintDialog' at the package
+const packageOwned = [
+  'services/reportData/fetchReportData',
+  'views/builder/viewer/PrintDialog',     // ← add this
+]
+packageOwned.forEach(mod => {
+  config.plugins.push(
+    new NormalModuleReplacementPlugin(
+      new RegExp(`^${mod.replace(/\//g, '\\/')}(\\.jsx?)?$`),
+      resource => { resource.request = path.join(builderSrc, mod) }
+    )
+  )
+})
+```
+
+After that, `import PrintDialog from 'views/builder/viewer/PrintDialog'` works from any host file.
+
+---
+
+## 3. How it works
+
+The dialog is a **mounted-but-hidden** React component that exposes an imperative ref:
+
+```ts
+printDialogRef.current = {
+  open(layoutId: string, data?: object): void,        // fetch + open
+  openWithSchema(schema: object, data?: object): void, // open with a pre-loaded schema
+  close(): void,
+}
+```
+
+When `open(layoutId, data)` is called:
+
+1. The dialog calls `Endpoints.PrintLayout.Get.GetById?id=layoutId` and parses the schema.
+2. It stores `data` as the `printData` (read inside the layout as `data` in any Calculation / expression).
+3. It opens a full-screen `<Dialog>` showing a multi-page preview built by `PrintPreviewCanvas`, plus a "Print" button.
+4. Print CSS for `@page` (margins, paper size, header / footer height) is injected globally so `Ctrl+P` from inside the dialog respects the layout's settings.
+5. When the user clicks Print, the dialog closes, page numbers are filled in (`{page}` / `{pages}` tokens), fixed header / footer zones are cloned per body page, then `window.print()` is fired. An `afterprint` event listener cleans everything up.
+
+Because the print mechanism uses the browser's native `window.print()`, the user gets the OS print dialog — no PDF library, no server round-trip. Saving as PDF is just "Save to PDF" in the OS print dialog.
+
+---
+
+## 4. The `data` you pass to `open(...)`
+
+The second argument to `open` becomes the layout's `data` scope. Inside the layout (designed in the builder), expressions and Calculations read this object as `data`:
+
+```js
+// In the layout, a label component's text expression:
+data.invoiceNumber                                  // → 'INV-1042'
+data.lines.reduce((sum, l) => sum + l.qty, 0)      // → 7
+```
+
+There are no constraints on shape — pass whatever the layout's bindings expect. A typical pattern:
+
+```js
+printDialogRef.current.open('invoice-layout', {
+  // header
+  invoiceNumber: order.id,
+  invoiceDate:   formatDate(order.createdAt),
+  customerName:  order.customer.name,
+  customerAddr:  order.customer.address,
+
+  // body
+  lines:         order.lines,
+  subtotal:      order.subtotal,
+  tax:           order.tax,
+  total:         order.total,
+
+  // footer
+  notes:         order.notes,
+})
+```
+
+> **Tip.** Keep a clear contract between the layout designer and the caller. The layout's Settings tab has a "Test Data" JSON field — the designer uses that to preview against representative data; that same shape is what the caller should pass at runtime.
+
+---
+
+## 5. Three mounting patterns
+
+### 5.1 Mount per page (simplest)
+
+Allocate the ref + mount the dialog where you need it. Best when print is page-specific.
+
+```jsx
+function OrdersPage() {
+  const printDialogRef = useRef(null)
+  const ctx = {
+    printDialogRef,
+    data: {}, setData: () => {}, form: {}, setForm: () => {},
+    mode: 'preview', isEditMode: false, isPreviewMode: true, isPrintContext: true,
+  }
+
+  const printOrder = (order) =>
+    printDialogRef.current?.open('order-layout-id', { order })
+
+  return (
+    <>
+      <OrdersTable onPrint={printOrder} />
+      <PrintDialog viewerContext={ctx} />
+    </>
+  )
+}
+```
+
+### 5.2 Mount at app root (cleanest for multi-page apps)
+
+If you want `printLayout(id, data)` callable from anywhere, mount once at the `_app.js` level and put the ref + helper in a context.
+
+```jsx
+// host: contexts/PrintContext.jsx
+import { createContext, useContext, useRef, useCallback } from 'react'
+import PrintDialog from 'views/builder/viewer/PrintDialog'
+
+const PrintCtx = createContext({ openPrintLayout: () => {} })
+
+export function PrintProvider({ children }) {
+  const printDialogRef = useRef(null)
+
+  const openPrintLayout = useCallback((layoutId, data) => {
+    if (!printDialogRef.current) {
+      console.warn('[openPrintLayout] PrintDialog is not mounted yet')
+      return
+    }
+    printDialogRef.current.open(layoutId, data)
+  }, [])
+
+  const closePrintLayout = useCallback(() => {
+    printDialogRef.current?.close()
+  }, [])
+
+  const viewerContext = {
+    printDialogRef,
+    data: {}, setData: () => {}, form: {}, setForm: () => {},
+    mode: 'preview', isEditMode: false, isPreviewMode: true, isPrintContext: true,
+  }
+
+  return (
+    <PrintCtx.Provider value={{ openPrintLayout, closePrintLayout }}>
+      {children}
+      <PrintDialog viewerContext={viewerContext} />
+    </PrintCtx.Provider>
+  )
+}
+
+export const usePrintLayout = () => useContext(PrintCtx)
+```
+
+```jsx
+// host: pages/_app.js
+<RoboByteFrontBuilderProvider {...}>
+  <PrintProvider>
+    <Component {...pageProps} />
+  </PrintProvider>
+</RoboByteFrontBuilderProvider>
+```
+
+```jsx
+// any host page
+import { usePrintLayout } from '@/contexts/PrintContext'
+
+function InvoiceRow({ invoice }) {
+  const { openPrintLayout } = usePrintLayout()
+  return (
+    <Button onClick={() => openPrintLayout('invoice-layout', invoice)}>
+      Print
+    </Button>
+  )
+}
+```
+
+> This is the recommended pattern for any non-trivial host app — every page gets `usePrintLayout()` without re-mounting the dialog.
+
+### 5.3 With a preloaded schema (skip the fetch)
+
+If your host already has the layout's schema in memory — e.g. from a custom backend bundle, a fixture, or a recently-saved layout — bypass the API fetch and call `openWithSchema(schema, data)`:
+
+```jsx
+const someSchema = await fetch('/api/my-cached-layout').then(r => r.json())
+printDialogRef.current.openWithSchema(someSchema, { invoiceId: 42 })
+```
+
+This is what the Print Builder's "Test Print" button uses — the in-progress schema isn't on the server yet, so it gets pushed in directly.
+
+---
+
+## 6. Discovering and listing layouts
+
+If users should pick a layout at runtime, two paths:
+
+### 6.1 Embed the built-in `PrintLayoutsList` page
+
+```jsx
+import { PrintLayoutsList } from 'robobyte-front-builder'
+
+<PrintLayoutsList />
+```
+
+Renders the same list view as `/printBuilder/layouts` — browse, preview, delete.
+
+### 6.2 Roll your own with the endpoint
+
+```jsx
+import { Services, Endpoints } from 'services/Endpoints'
+
+async function loadLayouts() {
+  const r = await Services.GetService(Endpoints.PrintLayout.Get.GetAll, false, {})
+  return r?.data ?? []   // [{ id, title, value }, ...]
+}
+```
+
+`value` is the JSON-stringified schema. Pass `id` to `printDialogRef.current.open(id, data)` to render.
+
+---
+
+## 7. Recipes
+
+### 7.1 Print right after a save
+
+```js
+async function saveAndPrint(orderDraft) {
+  const r = await PostService(Endpoints.Orders.Post.Create, true, orderDraft)
+  if (r?.data) {
+    openPrintLayout('order-layout', { ...orderDraft, id: r.data.id })
+  }
+}
+```
+
+### 7.2 Print a filtered grid (no per-row template)
+
+For "print the report exactly as it is on screen", let the user click the **PDF export** icon in the report toolbar — it uses `jspdf-autotable` and respects current filters / columns. Use `openPrintLayout` only when you have a designed template the data should populate.
+
+### 7.3 Bulk print one layout per selected row
+
+```js
+function bulkPrint(rows) {
+  // Print one at a time — opening multiple PrintDialogs at once would race.
+  // Easiest pattern: concat into a single layout that accepts an array.
+  openPrintLayout('packing-slips', { slips: rows })
+}
+```
+
+The layout iterates `data.slips` via a `repeater` and the print engine paginates automatically.
+
+### 7.4 Programmatic close (e.g. cancel from a parent)
+
+```js
+printDialogRef.current?.close()
+// OR via the provider pattern:
+const { closePrintLayout } = usePrintLayout()
+closePrintLayout()
+```
+
+### 7.5 Print a layout from a `<reportViewer>` viewer action
+
+If you've wired the `PrintProvider` (section 5.2), pull `openPrintLayout` from the hook inside your `viewerActions` `onClick`:
+
+```jsx
+import { usePrintLayout } from '@/contexts/PrintContext'
+
+function OrdersReport() {
+  const { openPrintLayout } = usePrintLayout()
+  const [api, setApi] = useState(null)
+
+  const viewerActions = [
+    {
+      label: 'Print Selected',
+      icon:  'PrintOutlined',
+      variant: 'contained',
+      onClick: () => {
+        const selected = api?.getSelectedRows() ?? []
+        if (selected.length === 0) return
+        openPrintLayout('order-layout', { orders: selected })
+      },
+    },
+  ]
+
+  return (
+    <ReportViewer pageId='ORDERS' setOutGridApi={setApi} viewerActions={viewerActions} />
+  )
+}
+```
+
+---
+
+## 8. Pitfalls
+
+- **Ref not registered yet.** `PrintDialog` registers `printDialogRef.current` in a `useEffect` after mount. Calling `open()` before the first render completes throws "PrintDialog is not mounted". In practice this only matters for SSR — wrap calls in `useEffect` or `requestAnimationFrame` if you must trigger on first paint.
+- **Multiple mounted dialogs.** Each `<PrintDialog>` instance writes to its own ref. Mounting two with the same ref is undefined; mounting two with different refs is fine but you'll have stacking print CSS. Use the provider pattern (section 5.2) to enforce a single instance.
+- **Provider missing.** Without `<RoboByteFrontBuilderProvider>`, `Services.GetService` has no base URL or auth — the layout fetch fails silently and the dialog stays in its loading state.
+- **The `viewerContext` shape matters.** The dialog reads `printDialogRef` from it. The other fields (`data`, `setData`, `form`, …) are forwarded to every zone's render context. Pass at least the keys shown in section 1 — missing keys will show up as `undefined` inside the layout's expressions.
+- **`data` is the layout's runtime scope, not arbitrary metadata.** Inside the layout, every Calculation and expression reads `data.x`. If you pass `{ order: {...} }`, expressions need to write `data.order.x`. Match the shape the designer designed against.
+- **Saving as PDF is a browser print operation.** There's no programmatic "save to PDF" — it goes through the OS print dialog. Users on Chromium pick "Save as PDF"; users on Safari pick the print → PDF flow. If you need server-rendered PDFs, that's out of scope for this package.
+- **`@page` settings only kick in after the first `open` of a session.** The CSS is injected on schema load. If you change the layout's `settings.margins` and call `open` again, the new CSS replaces the old. Don't try to set `@page` from outside the layout.
+- **Print preview shows the AG Grid as a static HTML table.** When a layout includes a `reportViewer`, the print path fetches **all rows with `isPagination: false`** and renders a plain table (AG Grid virtualization breaks under `window.print()`). For very large reports, expect the print preview to take several seconds to populate.
+
+---
+
+## 9. Cheat sheet
+
+1. Import: `import PrintDialog from 'views/builder/viewer/PrintDialog'` (bare alias; add the package-owned plugin rule in `next.config.js` if you're importing from host code).
+2. Allocate `const printDialogRef = useRef(null)`.
+3. Mount `<PrintDialog viewerContext={{ printDialogRef, data: {}, setData: () => {}, form: {}, setForm: () => {}, mode: 'preview', isEditMode: false, isPreviewMode: true, isPrintContext: true }} />` once in your tree.
+4. Call `printDialogRef.current.open('layout-id', dataObject)` to fetch + show.
+5. Or `printDialogRef.current.openWithSchema(schema, dataObject)` if you already have the schema in memory.
+6. Call `printDialogRef.current.close()` to dismiss.
+7. For multi-page apps: wrap once in a `PrintProvider` and expose `usePrintLayout()` (section 5.2).
+8. The `dataObject` becomes `data` inside the layout — match the shape the designer designed against.
+
+---
+
+## Cross-references
+
+- **In-builder usage** (`openPrintLayout` auto-injected into Calculation scope): [`training/49-printLayout.md`](../training/49-printLayout.md). Also covered briefly in README's *Calculation Scope Reference* and *Print Layout Builder* sections.
+- **Designing layouts**: visit `/printBuilder` in the host app (the `PrintBuilderPage` re-export).
+- **Listing / managing saved layouts**: `<PrintLayoutsList />` (re-export), or roll your own via `Endpoints.PrintLayout.Get.GetAll`.
+- **Host-app integration**: [INTEGRATION.md](../INTEGRATION.md) for `next.config.js`, peer deps, provider setup.
+- **AG Grid theme customization** (relevant for `reportViewer` zones inside a print layout): README → *AG Grid theme*.
+- **`<ReportViewer>` host-app usage**: [docs/ReportViewer.md](./ReportViewer.md).
+- **`fetchReportDataByPageId` host-app usage**: [docs/fetchReportData.md](./fetchReportData.md).

package/package.json

@@ -1,7 +1,31 @@
 {
   "name": "robobyte-front-builder",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "RoboByte low-code UI builder, Report builder, and navigation extension system",
+  "keywords": [
+    "low-code",
+    "ui-builder",
+    "report-builder",
+    "print-layout",
+    "next.js",
+    "react",
+    "ag-grid",
+    "mui",
+    "drag-and-drop",
+    "schema-driven",
+    "form-builder",
+    "navigation"
+  ],
+  "homepage": "https://github.com/Hossny37/RoboByteFrontBuilder#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Hossny37/RoboByteFrontBuilder.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Hossny37/RoboByteFrontBuilder/issues"
+  },
+  "license": "MIT",
+  "author": "Hossny37",
   "main": "src/lib/index.js",
   "files": [
     "src",
@@ -9,7 +33,11 @@
     "styles",
     "next.config.js",
     "jsconfig.json",
+    "LICENSE",
     "INTEGRATION.md",
+    "docs",
+    "training/*.md",
+    "training/examples",
     "RoboByteBuilder_User_Manual.docx"
   ],
   "exports": {

package/src/lib/agGridTheme.js

@@ -0,0 +1,58 @@
+/**
+ * Centralized AG Grid theme configuration.
+ *
+ * Every <AgGridReact> in the package reads its theme from a single source —
+ * the React context provided by `AgGridThemeProvider` (wrapped automatically
+ * inside RoboByteFrontBuilderProvider). The default lives here, in code.
+ *
+ * Host apps can override theme params by passing `agGridTheme` to
+ * RoboByteFrontBuilderProvider:
+ *
+ *   <RoboByteFrontBuilderProvider
+ *     agGridTheme={{ accentColor: '#3b82f6', headerHeight: 32 }}
+ *     ...
+ *   />
+ *
+ * The override object is merged on top of DEFAULT_AG_THEME_PARAMS — host
+ * params win for the keys they set, and fall back to defaults otherwise.
+ *
+ * Future: this default will be replaced with a system-settings fetch so
+ * theme params can be tweaked at runtime without a code change. Until then,
+ * editing this file is the way to change the package-wide default.
+ */
+
+import { themeQuartz } from 'ag-grid-community'
+
+/**
+ * Default Quartz theme parameters used across the package.
+ * See https://www.ag-grid.com/react-data-grid/theming/ for the full list.
+ *
+ * Add new keys here as the package grows. Host apps can override any of
+ * them by passing `agGridTheme={{ <key>: <value> }}` to the provider.
+ */
+export const DEFAULT_AG_THEME_PARAMS = Object.freeze({
+  accentColor: '#FF1185',
+  // headerHeight: 28,
+  // rowHeight:    34,
+  // fontFamily:   'inherit',
+  // fontSize:     13,
+  // borderRadius: 4,
+})
+
+/**
+ * Build a Quartz theme from optional overrides. Returns a fresh theme object
+ * (Quartz themes are immutable). Safe to call on every render — `withParams`
+ * caches by params identity.
+ *
+ * @param {Object} [overrides] - Quartz theme params to merge over the defaults.
+ * @returns {object} A ready-to-use AG Grid theme.
+ */
+export function buildAgGridTheme(overrides) {
+  return themeQuartz.withParams({
+    ...DEFAULT_AG_THEME_PARAMS,
+    ...(overrides ?? {}),
+  })
+}
+
+/** Pre-built default theme — convenient when no override is in play. */
+export const DEFAULT_AG_THEME = buildAgGridTheme()

package/src/lib/agGridThemeContext.jsx

@@ -0,0 +1,42 @@
+/**
+ * AgGridThemeContext — single source of truth for the package-wide AG Grid
+ * theme. Wrapped automatically inside RoboByteFrontBuilderProvider.
+ *
+ * Consumers call `useAgGridTheme()` to get the resolved Quartz theme and pass
+ * it to <AgGridReact theme={agTheme} />.
+ */
+
+import { createContext, useContext, useMemo } from 'react'
+import { buildAgGridTheme, DEFAULT_AG_THEME } from './agGridTheme'
+
+const AgGridThemeContext = createContext(DEFAULT_AG_THEME)
+
+/**
+ * Wraps children with the AG Grid theme context.
+ *
+ * @param {Object} [params]  - Quartz theme overrides (merged over defaults).
+ * @param {ReactNode} children
+ */
+export function AgGridThemeProvider({ params, children }) {
+  // JSON.stringify on the params object is intentional — host apps that pass
+  // an inline object literal would otherwise rebuild the theme on every
+  // parent render. Stringify keys the memo by the actual params content.
+  const theme = useMemo(
+    () => buildAgGridTheme(params),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(params ?? null)]
+  )
+  return (
+    <AgGridThemeContext.Provider value={theme}>
+      {children}
+    </AgGridThemeContext.Provider>
+  )
+}
+
+/**
+ * Returns the live AG Grid theme. Falls back to the default theme when
+ * called outside RoboByteFrontBuilderProvider, so isolated grids still work.
+ */
+export function useAgGridTheme() {
+  return useContext(AgGridThemeContext)
+}

package/src/lib/index.js

@@ -106,3 +106,10 @@ export { AuthContext } from '../context/AuthContext'
 // — both resolve to the same module thanks to the NormalModuleReplacementPlugin
 // in next.config.js, so the in-memory builderModelCache is shared.
 export { default as fetchReportDataByPageId } from '../services/reportData/fetchReportData'
+
+// ── AG Grid theme ────────────────────────────────────────────────────────────
+// Default theme params (host can override via RoboByteFrontBuilderProvider's
+// `agGridTheme` prop), a builder function for ad-hoc themes, and the hook
+// every internal grid uses to read the live theme.
+export { DEFAULT_AG_THEME_PARAMS, buildAgGridTheme, DEFAULT_AG_THEME } from './agGridTheme'
+export { AgGridThemeProvider, useAgGridTheme } from './agGridThemeContext'

package/src/lib/providers/RoboByteFrontBuilderProvider.jsx

@@ -49,6 +49,7 @@ import { Toaster } from 'react-hot-toast'
 import { ModuleRegistry } from 'ag-grid-community'
 import { AllEnterpriseModule, LicenseManager } from 'ag-grid-enterprise'
 import { NavigationExtensionProvider } from '../navigation/NavigationExtensionContext'
+import { AgGridThemeProvider } from '../agGridThemeContext'
 import { configureRoboByte } from '../../services/config'
 import { AuthContext } from '../../context/AuthContext'
 import { setRouter } from '../../services/routerRef'
@@ -95,6 +96,17 @@ const RoboByteFrontBuilderProvider = ({
   navExtensions = [],
   endpoints = null,
   agGridLicenseKey = null,
+  /**
+   * Optional Quartz theme overrides applied to every <AgGridReact> in the
+   * package. Merged on top of DEFAULT_AG_THEME_PARAMS in `lib/agGridTheme.js`.
+   *
+   * Example:
+   *   agGridTheme={{ accentColor: '#3b82f6', headerHeight: 32 }}
+   *
+   * Future: this will accept a "load from system settings" mode. For now
+   * pass a plain params object.
+   */
+  agGridTheme = null,
   toasterProps = {},
 }) => {
   // Apply URL + endpoint config synchronously before any child renders.
@@ -121,6 +133,7 @@ const RoboByteFrontBuilderProvider = ({
   return (
     <AuthContext.Provider value={authValue}>
       <NavigationExtensionProvider items={navExtensions}>
+        <AgGridThemeProvider params={agGridTheme}>
         <RouterSync />
         {children}
         {/* Package-owned Toaster — same react-hot-toast instance used by all
@@ -157,6 +170,7 @@ const RoboByteFrontBuilderProvider = ({
           }}
           {...toasterProps}
         />
+        </AgGridThemeProvider>
       </NavigationExtensionProvider>
     </AuthContext.Provider>
   )

package/src/views/builder/viewer/renderers/DataGridRenderer.jsx

@@ -1,7 +1,6 @@
 import { Box, Button, IconButton, Tooltip, Typography } from '@mui/material'
 import { useRef, useMemo, useCallback, useEffect } from 'react'
 import { AgGridReact } from 'ag-grid-react'
-import { themeQuartz } from 'ag-grid-community'
 import { AddOutlined, DeleteOutlined, TableChartOutlined } from '@mui/icons-material'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
 import RowActionsCell from './RowActionsCell'
@@ -9,9 +8,7 @@ import { resolveProps } from 'services/builderHelper/resolveProps'
 import { executeJSCode } from 'services/builderHelper/jsExecutor'
 import { processColumnDefinitions, processColumnsConfig } from 'views/genericTable/convertStringFunctions'
 import { AG_COMPONENTS } from './dataGridComponents'
-
-// ── Shared AG Grid theme (same as SGrid) ──────────────────────────────────────
-const agTheme = themeQuartz.withParams({ accentColor: '#FF1185' })
+import { useAgGridTheme } from 'src/lib/agGridThemeContext'
 
 // ── Delete-column cell renderer ───────────────────────────────────────────────
 // Defined at module level so AG Grid never receives a new component reference.
@@ -49,6 +46,9 @@ export default function DataGridRenderer({ node, viewerContext }) {
     form, data, setData, dataRef, reportRefs, openDialog, closeDialog, isEditMode,
   } = viewerContext
 
+  // Centralized AG Grid theme — see lib/agGridTheme.js / RoboByteFrontBuilderProvider.
+  const agTheme = useAgGridTheme()
+
   const main = resolveProps(node, 'main', viewerContext)
 
   const {

package/src/views/genericTable/SGrid.js

@@ -115,7 +115,7 @@ import numeral from 'numeral'
 import CustomFilterDialog from "views/customFilter/CustomFilterDialog";
 import CustomStatusBar from "views/genericTable/statusBar/rowCountStatusBar";
 import StreamService from "services/StreamService";
-import {themeQuartz} from 'ag-grid-community';
+import { useAgGridTheme } from 'src/lib/agGridThemeContext'
 import {ReportBuilderEndpoints} from "services/Endpoints/ReportBuilderEndpoints";
 import {debounce} from "lodash";
 import jsPDF from "jspdf";
@@ -330,10 +330,10 @@ const SGrid = props => {
   // ** State
   const appContext = useContext(SystemContext);
   const imageBaseUrl = appContext?.settings?.imagesStorageServer;
-  const agTheme = themeQuartz
-    .withParams({
-      accentColor: "#FF1185"
-    });
+  // Theme comes from RoboByteFrontBuilderProvider's agGridTheme prop, merged
+  // with DEFAULT_AG_THEME_PARAMS in lib/agGridTheme.js. Falls back to the
+  // bare default when used outside the provider.
+  const agTheme = useAgGridTheme()
 
   const {
     externalTimer,

package/src/views/genericTable/TAGGrid.js

@@ -37,7 +37,7 @@ import numeral from 'numeral'
 import CustomFilterDialog from "views/customFilter/CustomFilterDialog";
 import CustomStatusBar from "views/genericTable/statusBar/rowCountStatusBar";
 import StreamService from "services/StreamService";
-import {themeQuartz} from 'ag-grid-community';
+import { useAgGridTheme } from 'src/lib/agGridThemeContext'
 
 // ** Utils Import
 
@@ -52,10 +52,8 @@ const defaultFinalRequest = {
 }
 const TAGGrid = props => {
   // ** State
-  const agTheme = themeQuartz
-    .withParams({
-      accentColor: "#FF1185"
-    });
+  // Theme comes from RoboByteFrontBuilderProvider's agGridTheme prop.
+  const agTheme = useAgGridTheme()
   const {
     groupEndPoint,
     streamEndPoint,