robobyte-front-builder 1.0.25 → 1.0.27

package/src/views/rolePermissions/UpdateReportPermissionDialog.js

@@ -21,8 +21,11 @@ import {Endpoints, Services} from 'src/services/Endpoints'
 import {toast} from 'react-hot-toast'
 import {AgGridReact} from "ag-grid-react";
 import {AutocompleteEditorWrapper} from "views/genericTable/cellEditors/autocompleteEditor";
+import { useAgGridTheme } from 'src/lib/agGridThemeContext'
 
 const UpdateReportPermissionsDialog = props => {
+  // Centralized AG Grid theme.
+  const agTheme = useAgGridTheme()
   // ** Props
   const {handleToggleDialogs, report, dialog, setRefresh} = props
   const [IsSubmitting, setIsSubmitting] = useState(false)
@@ -266,6 +269,7 @@ const UpdateReportPermissionsDialog = props => {
           <Grid container size={{ xs: 12 }}>
             <div style={{width: "100%", height: "40vh", direction: 'ltr'}}>
               <AgGridReact
+                theme={agTheme}
                 enableRtl={true}
                 columnDefs={colDefs}
                 rowData={ReportPermissions}

package/training/00-index.md

@@ -0,0 +1,168 @@
+# RoboByte Front Builder — Component Training Reference
+
+Complete reference for all components. Use these files to train a local AI model to generate valid builder schemas.
+
+---
+
+## Schema Structure
+
+Every schema follows this structure:
+```json
+{
+  "root": { "type": "layout", "props": { "cols": 1 }, "children": [ ... ] },
+  "dialogs": [],
+  "actions": [],
+  "timers": []
+}
+```
+
+- **Root is always a `layout`** — never use `container` (banned).
+- Direct children of `layout` must be `layout-cell` nodes.
+- Each `layout-cell` contains one component (or a nested `layout` for complex layouts).
+
+### Prop Wrapping (internal)
+In the actual builder schema, props are wrapped in `{ valueType: 'value', value: ... }` objects. The AI generates **simplified** schemas (flat props), and the `schemaTransformer` wraps them automatically:
+
+```json
+// AI generates:
+{ "type": "input", "props": { "key": "name", "label": "Name" }, "style": { "width": "100%" } }
+
+// Builder stores internally:
+{ "id": "cmp_xxx", "type": "input", "props": { "main": { "key": { "valueType": "value", "value": "name" }, "label": { "valueType": "value", "value": "Name" } }, "style": { "width": { "valueType": "value", "value": "100%" } }, "advanced": {} }, "children": [] }
+```
+
+---
+
+## Component Categories
+
+### Field Components (Form Inputs)
+| File | Component | Purpose |
+|------|-----------|---------|
+| 01-input.md | `input` | Single-line text input |
+| 02-checkbox.md | `checkbox` | Boolean checkbox |
+| 03-dropdown.md | `dropdown` | Select from list |
+| 04-datepicker.md | `datepicker` | Date selection |
+| 05-radio.md | `radio` | Mutually exclusive options |
+| 06-number.md | `number` | Numeric input with formatting |
+| 07-textarea.md | `textarea` | Multi-line text |
+| 08-richtext.md | `richtext` | WYSIWYG HTML editor |
+| 09-tag.md | `tag` | Multi-value chip input |
+| 10-time.md | `time` | Time picker |
+| 11-toggle.md | `toggle` | On/off switch |
+| 12-signature.md | `signature` | Canvas signature pad |
+| 13-autocomplete.md | `autocomplete` | Searchable select with async |
+
+### Display Components
+| File | Component | Purpose |
+|------|-----------|---------|
+| 14-button.md | `button` | Action button (submit/reset/custom) |
+| 15-label.md | `label` | Body text display (MUI Typography) |
+| 16-header.md | `header` | Heading text h1–h6 |
+| 17-divider.md | `divider` | Horizontal/vertical separator line |
+| 18-image.md | `image` | Image from URL |
+| 19-link.md | `link` | Clickable hyperlink |
+| 20-banner.md | `banner` | Alert/notification banner |
+| 21-progress-circle.md | `progress-circle` | Circular progress indicator |
+| 22-progress-line.md | `progress-line` | Horizontal progress bar |
+| 23-menu.md | `menu` | Tab navigation bar |
+| 24-popover.md | `popover` | Floating panel triggered by button |
+
+### Structure Components
+| File | Component | Purpose |
+|------|-----------|---------|
+| 25-layout.md | `layout` | CSS Grid container (PRIMARY STRUCTURE) |
+| 26-layout-cell.md | `layout-cell` | Grid cell (child of layout) |
+| 27-card.md | `card` | MUI card with title/subheader |
+| 28-wizard.md | `wizard` | Multi-step stepper form |
+| 29-wizard-step.md | `wizard-step` | Single step inside wizard |
+| 30-repeater.md | `repeater` | Repeat template per data array item |
+| 31-dialog.md | `dialog` | Modal overlay |
+| 32-breadcrumb.md | `breadcrumb` | Navigation trail or step indicator |
+
+### Data Components
+| File | Component | Purpose |
+|------|-----------|---------|
+| 33-dataGrid.md | `dataGrid` | AG Grid editable table |
+| 34-dataTableViewer.md | `dataTableViewer` | Simple read-only HTML table |
+| 35-reportViewer.md | `reportViewer` | Server-fetched AG Grid report |
+| 36-viewRenderer.md | `viewRenderer` | Embed another saved view |
+| 37-treeView.md | `treeView` | Hierarchical tree component |
+
+### KPI Components
+| File | Component | Purpose |
+|------|-----------|---------|
+| 38-kpi-metric.md | `kpi-metric` | Single numeric KPI value |
+| 39-kpi-trend.md | `kpi-trend` | Delta/change with direction icon |
+| 40-kpi-badge.md | `kpi-badge` | Colored status chip/badge |
+| 41-kpi-statusDot.md | `kpi-statusDot` | Small status indicator dot |
+| 42-kpi-iconBox.md | `kpi-iconBox` | Boxed icon with threshold coloring |
+| 43-kpi-gauge.md | `kpi-gauge` | Semicircular arc gauge |
+| 44-kpi-bulletChart.md | `kpi-bulletChart` | Bullet chart (actual vs target) |
+| 45-kpi-colorScale.md | `kpi-colorScale` | Color-scale bar with markers |
+| 46-kpi-rating.md | `kpi-rating` | Star/heart/circle rating |
+| 47-kpi-countdown.md | `kpi-countdown` | Countdown timer to a target date |
+
+---
+
+## Universal Style Props (available on every component's style tab)
+
+Every component style tab supports two escape-hatch props for arbitrary CSS:
+
+| Prop | Type | Notes |
+|------|------|-------|
+| `elementStyle` | expression | CSS **object** merged at highest priority onto the component wrapper. E.g. `{ outline: '2px solid #f00', transition: 'all 0.2s' }`. |
+| `elementCss` | expression | CSS **string** merged at highest priority. Use when you need shorthand syntax that's hard to express as a JS object. E.g. `"outline: 2px solid red; background: linear-gradient(135deg, #667eea, #764ba2)"`. |
+
+> `elementCss` takes effect after `elementStyle`. Both are processed and merged last, so they override ALL other style tab settings.
+
+---
+
+## Critical Rules
+
+1. **Root must be `layout`** — never `container` (banned).
+2. **`layout` children must be `layout-cell`** — no other components directly.
+3. **One component per cell** for multi-column layouts (`cols ≥ 2`). For single-column (`cols: 1`), cells can contain nested layouts.
+4. **Use `style` key** (not inside `props`) for layout-cell visual styling: `backgroundColor`, `padding`, `borderRadius`, `boxShadow`.
+5. **Use `props` key** for component behavior props: `key`, `label`, `value`, etc.
+6. **Data is accessed via expressions**: `data.fieldName`, `form.fieldName`, `dataItem.field` (inside repeater).
+7. **Dialogs are siblings of root**, not nested inside it.
+8. **KPI components are leaf nodes** — they have no children.
+
+---
+
+## Quick Decision Guide
+
+| Need | Component |
+|------|-----------|
+| Text input | `input` |
+| Multi-line text | `textarea` |
+| Rich formatted text | `richtext` |
+| Number with formatting | `number` |
+| Date | `datepicker` |
+| Time | `time` |
+| Yes/No toggle | `toggle` or `checkbox` |
+| Select one from list | `dropdown` (small list) or `autocomplete` (large/async) |
+| Select multiple | `dropdown` + `multiple: true` or `tag` |
+| Select mutually exclusive (visible) | `radio` |
+| Signature capture | `signature` |
+| Display text | `label` |
+| Display heading | `header` |
+| Display number/metric | `kpi-metric` |
+| Display status | `kpi-badge` or `kpi-statusDot` |
+| Display trend | `kpi-trend` |
+| Display gauge | `kpi-gauge` |
+| Display progress | `progress-line` or `progress-circle` |
+| Display table (static) | `dataTableViewer` |
+| Display table (server) | `reportViewer` |
+| Editable table | `dataGrid` |
+| Tree hierarchy | `treeView` |
+| Embed another view | `viewRenderer` |
+| Repeat a template | `repeater` |
+| Multi-step form | `wizard` + `wizard-step` |
+| Tabs | `menu` |
+| Modal | `dialog` |
+| Floating panel | `popover` |
+| Navigation trail | `breadcrumb` |
+| Alert/notification | `banner` |
+| Action button | `button` |
+| Page structure | `layout` + `layout-cell` |

package/training/01-input.md

@@ -0,0 +1,144 @@
+# Component: input
+
+A single-line text input field. Supports labels, placeholders, icons, and real-time validation feedback.
+
+---
+
+## Props — Main Tab
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `key` | expression | Unique identifier. The user's typed value is stored in `data[key]` and `form[key]`. |
+| `label` | expression | Label text shown above/beside the field. |
+| `labelPosition` | select | `top` · `left` · `right` · `none` |
+| `required` | boolean | Marks field as required; shows asterisk on label. |
+| `value` | expression | Initial/controlled value. Bind to `data.someKey` to pre-fill. |
+| `placeholder` | text | Greyed hint text shown when empty. |
+| `size` | select | `small` · `medium` · `large` |
+| `prefix` | icon | MUI icon displayed at the start of the input. |
+| `suffix` | icon | MUI icon displayed at the end of the input. |
+| `labelPrefix` | icon | Icon displayed before the label text. |
+| `labelSuffix` | icon | Icon displayed after the label text. |
+| `labelIconSize` | expression | Size of label icons, e.g. `"18px"`. |
+| `labelIconColor` | expression | Color of label icons, e.g. `"primary.main"`. |
+| `labelFontSize` | expression | Label text size, e.g. `"14px"`. |
+| `labelFontWeight` | expression | Label font weight, e.g. `"600"`. |
+| `labelColor` | expression | Label text color, e.g. `"#333"` or `"text.secondary"`. |
+| `labelFontStyle` | select | `normal` · `italic` · `oblique` |
+| `labelLetterSpacing` | expression | Letter spacing for label, e.g. `"0.05em"`. |
+| `disabled` | boolean | Disables the field entirely. |
+| `enabled` | boolean | Enables/disables the field from an expression, e.g. `data.isEditable`. |
+
+---
+
+## Props — Style Tab
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `elementStyle` | expression | CSS object applied directly to the component wrapper as a style override. Highest priority. E.g. `{ outline: '2px solid red' }`. |
+| `elementCss` | expression | CSS string applied to the component wrapper. Alternative to `elementStyle` for shorthand CSS. E.g. `"outline: 2px solid red; transition: all 0.2s"`. |
+| `color` | select | `default` · `primary` · `secondary` · `error` · `warning` · `info` · `success` — MUI color variant for the field border/focus ring. |
+| `display` | expression | CSS display, e.g. `"flex"`. |
+| `width` | expression | Field width, e.g. `"100%"` or `"320px"`. |
+| `height` | expression | Field height override. |
+| `margin` | expression | Outer spacing, e.g. `"0 8px"`. |
+| `padding` | expression | Inner padding override. |
+| `flexDirection` | select | `row` · `column` · `row-reverse` · `column-reverse` |
+| `justifyContent` | select | `flex-start` · `center` · `flex-end` · `space-between` · `space-around` · `space-evenly` |
+| `alignItems` | select | `flex-start` · `center` · `flex-end` · `stretch` · `baseline` |
+| `gap` | expression | Gap between label and input when stacked. |
+
+---
+
+## Props — Actions Tab
+
+| Event | Type | Notes |
+|-------|------|-------|
+| `onChange` | action (custom) | Fires every time the user changes the input value. Use to trigger calculations, show/hide elements, or call APIs. |
+| `onBlur` | action (custom) | Fires when the field loses focus. Use for validation or save-on-leave patterns. |
+
+---
+
+## Use Cases
+
+**When to use:**
+- Collecting short free-text: names, emails, usernames, search queries, addresses.
+- Any single-line form field that needs validation or a label.
+- Fields requiring icons (e.g. a search icon prefix or password-eye suffix).
+
+**When NOT to use:**
+- Multi-line text → use `textarea` or `richtext`.
+- Number input with formatting → use `number`.
+- Date input → use `datepicker`.
+- Selection from a list → use `dropdown`, `radio`, or `autocomplete`.
+
+---
+
+## Schema Examples
+
+### Minimal text input
+```json
+{
+  "type": "input",
+  "props": {
+    "key": "firstName",
+    "label": "First Name",
+    "placeholder": "Enter your first name",
+    "required": true
+  }
+}
+```
+
+### Pre-filled, sized, with icons
+```json
+{
+  "type": "input",
+  "props": {
+    "key": "email",
+    "label": "Email Address",
+    "labelPosition": "top",
+    "value": "data.userEmail",
+    "placeholder": "user@example.com",
+    "prefix": "EmailOutlined",
+    "size": "medium",
+    "required": true
+  },
+  "style": {
+    "width": "100%",
+    "color": "primary"
+  }
+}
+```
+
+### Disabled read-only field
+```json
+{
+  "type": "input",
+  "props": {
+    "key": "userId",
+    "label": "User ID",
+    "value": "data.userId",
+    "labelPosition": "left",
+    "disabled": true
+  }
+}
+```
+
+### With onChange action
+```json
+{
+  "type": "input",
+  "props": {
+    "key": "searchQuery",
+    "label": "Search",
+    "prefix": "SearchOutlined",
+    "placeholder": "Type to filter..."
+  },
+  "actions": {
+    "onChange": {
+      "type": "custom",
+      "code": "setData({ filteredList: data.fullList.filter(i => i.name.includes(form.searchQuery)) })"
+    }
+  }
+}
+```

package/training/02-checkbox.md

@@ -0,0 +1,107 @@
+# Component: checkbox
+
+A boolean toggle rendered as a checkbox. Stores `true`/`false` in `data[key]`.
+
+---
+
+## Props — Main Tab
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `key` | expression | Unique identifier. Value stored as boolean in `data[key]` and `form[key]`. |
+| `label` | expression | Label text shown next to the checkbox. |
+| `labelPosition` | select | `top` · `left` · `right` · `none` |
+| `required` | boolean | Marks field required. |
+| `value` | expression | Controlled checked state, e.g. `data.isActive`. |
+| `size` | select | `small` · `medium` · `large` |
+| `disabled` | boolean | Prevents toggling. |
+| `enabled` | boolean | Enable/disable from an expression. |
+
+---
+
+## Props — Style Tab
+
+Same as Input style tab:
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `color` | select | `default` · `primary` · `secondary` · `error` · `warning` · `info` · `success` |
+| `display` | expression | CSS display override. |
+| `width` | expression | Wrapper width. |
+| `height` | expression | Wrapper height. |
+| `margin` | expression | Outer margin. |
+| `padding` | expression | Inner padding. |
+| `flexDirection` | select | `row` · `column` · `row-reverse` · `column-reverse` |
+| `justifyContent` | select | `flex-start` · `center` · `flex-end` · `space-between` · `space-around` · `space-evenly` |
+| `alignItems` | select | `flex-start` · `center` · `flex-end` · `stretch` · `baseline` |
+| `gap` | expression | Gap between elements. |
+
+---
+
+## Props — Actions Tab
+
+| Event | Type | Notes |
+|-------|------|-------|
+| `onChange` | action (custom) | Fires when the checkbox is toggled. The new value is in `form[key]`. |
+
+---
+
+## Use Cases
+
+**When to use:**
+- Accept terms & conditions.
+- Boolean flags on forms: `isActive`, `rememberMe`, `newsletter`.
+- Feature toggles in a settings panel.
+- Multi-select when combined with multiple checkboxes (or use `tag`/`dropdown multiple`).
+
+**When NOT to use:**
+- Mutually exclusive options → use `radio`.
+- On/Off toggle with a different appearance → use `toggle`.
+- Multiple-choice with a list → use `dropdown` with `multiple: true`.
+
+---
+
+## Schema Examples
+
+### Simple boolean checkbox
+```json
+{
+  "type": "checkbox",
+  "props": {
+    "key": "acceptTerms",
+    "label": "I accept the terms and conditions",
+    "required": true
+  }
+}
+```
+
+### Controlled with expression
+```json
+{
+  "type": "checkbox",
+  "props": {
+    "key": "isActive",
+    "label": "Active",
+    "value": "data.record.isActive",
+    "labelPosition": "right",
+    "color": "success"
+  }
+}
+```
+
+### With onChange
+```json
+{
+  "type": "checkbox",
+  "props": {
+    "key": "showDetails",
+    "label": "Show additional details"
+  },
+  "actions": {
+    "onChange": {
+      "type": "custom",
+      "code": "setData({ detailsVisible: form.showDetails })"
+    }
+  }
+}
+```

package/training/03-dropdown.md

@@ -0,0 +1,135 @@
+# Component: dropdown
+
+A select input letting users choose one or multiple options from a list. Options can be static or data-driven.
+
+---
+
+## Props — Main Tab
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `key` | expression | Unique identifier. Selected value(s) stored in `data[key]` and `form[key]`. |
+| `label` | expression | Label text. |
+| `labelPosition` | select | `top` · `left` · `right` · `none` |
+| `required` | boolean | Marks field required. |
+| `value` | expression | Controlled value. For multiple, pass an array. |
+| `placeholder` | text | Greyed hint text when nothing is selected. |
+| `size` | select | `small` · `medium` · `large` |
+| `disabled` | boolean | Disables the dropdown. |
+| `enabled` | boolean | Enable/disable from an expression. |
+| `fullWidth` | boolean | Stretches the dropdown to fill its container. |
+| `options` | options-editor | Static list of `{ label, value }` pairs. Can also be bound to `data.someArray`. |
+| `multiple` | boolean | Allows selecting multiple items (value becomes an array). |
+| `native` | boolean | Renders as a native HTML `<select>` element instead of MUI. |
+
+---
+
+## Props — Style Tab
+
+| Prop | Type | Options / Notes |
+|------|------|-----------------|
+| `color` | select | `default` · `primary` · `secondary` · `error` · `warning` · `info` · `success` |
+| `display` | expression | CSS display. |
+| `width` | expression | e.g. `"100%"` or `"280px"`. |
+| `height` | expression | Height override. |
+| `margin` | expression | Outer spacing. |
+| `padding` | expression | Inner padding override. |
+| `flexDirection` | select | `row` · `column` · `row-reverse` · `column-reverse` |
+| `justifyContent` | select | `flex-start` · `center` · `flex-end` · `space-between` · `space-around` · `space-evenly` |
+| `alignItems` | select | `flex-start` · `center` · `flex-end` · `stretch` · `baseline` |
+| `gap` | expression | Gap between elements. |
+
+---
+
+## Props — Actions Tab
+
+| Event | Type | Notes |
+|-------|------|-------|
+| `onChange` | action (custom) | Fires when selection changes. New value is in `form[key]`. |
+
+---
+
+## Use Cases
+
+**When to use:**
+- Choosing from a fixed list (countries, categories, statuses).
+- Filtering data by a field when bound to data array.
+- Multi-select: `multiple: true` for tag-like selection with a list.
+
+**When NOT to use:**
+- Only 2–4 choices visible at once → use `radio`.
+- Freeform text with suggestions → use `autocomplete`.
+- Boolean on/off → use `checkbox` or `toggle`.
+
+---
+
+## Schema Examples
+
+### Static options
+```json
+{
+  "type": "dropdown",
+  "props": {
+    "key": "status",
+    "label": "Status",
+    "required": true,
+    "placeholder": "Select status",
+    "options": [
+      { "label": "Active", "value": "active" },
+      { "label": "Inactive", "value": "inactive" },
+      { "label": "Pending", "value": "pending" }
+    ]
+  },
+  "style": { "width": "100%", "color": "primary" }
+}
+```
+
+### Dynamic options from data
+```json
+{
+  "type": "dropdown",
+  "props": {
+    "key": "departmentId",
+    "label": "Department",
+    "value": "data.employee.departmentId",
+    "options": "data.departments",
+    "fullWidth": true
+  }
+}
+```
+
+### Multiple select
+```json
+{
+  "type": "dropdown",
+  "props": {
+    "key": "roles",
+    "label": "Roles",
+    "multiple": true,
+    "options": [
+      { "label": "Admin", "value": "admin" },
+      { "label": "Editor", "value": "editor" },
+      { "label": "Viewer", "value": "viewer" }
+    ],
+    "fullWidth": true
+  }
+}
+```
+
+### With onChange to cascade another field
+```json
+{
+  "type": "dropdown",
+  "props": {
+    "key": "countryId",
+    "label": "Country",
+    "options": "data.countries"
+  },
+  "actions": {
+    "onChange": {
+      "type": "custom",
+      "code": "setData({ cities: [], selectedCity: null }); fetchCities(form.countryId)"
+    }
+  }
+}
+```