### Development Commands

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Common npm scripts for managing the development environment, including installing dependencies, running a development server, building for production, linting, and starting a mock server.

```bash
# Install dependencies
npm install

# Development server (port 9698)
npm run serve

# Production build
npm run build

# Lint and fix files
npm run lint

# Start JSON mock server (for development)
npm run json:server
```

--------------------------------

### Page Section Template Example

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Provides an example of a Nunjucks template for a page section, defining its HTML structure and using a custom component 'b-table' to display data. It shows how to bind data and fields dynamically.

```njk
<div class="card">
    <div class="card-header">
        <h5>Category Breakdown</h5>
    </div>
    <div class="card-body">
        <b-table 
            :items="{{section_data | safe}}" 
            :fields="[
                {key: 'CATEGORY', label: 'Category'},
                {key: 'AMOUNT', label: 'Amount'},
                {key: 'PERCENTAGE', label: 'Percentage'}
            ]"
            striped hover>
        </b-table>
    </div>
</div>
```

--------------------------------

### No-Code Attribute Suit Examples

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CONVERSATION-RECORD-PAGE-BUILDER.md

Provides examples from a built-in snippet library, specifically 'no-code-attribute-suit.js', demonstrating pre-built attribute usage.

```javascript
// no-code-attribute-suit.js - Example Snippets

// Example 1: Basic section embedding
// <div data-pb-section="header"></div>

// Example 2: Section with parameters
// <div data-pb-section="product-details" data-pb-section-params='{"productId": "XYZ789"}'></div>

// Example 3: Deep link with query parameters
// <a data-pb-deeplink="/users/profile" data-pb-deeplink-params='{"userId": "user123", "view": "settings"}'>User Profile</a>

// Example 4: Triggering a refresh on button click
// <button data-pb-refresh="true">Refresh Data</button>

// Example 5: Navigating to home page
// <a href="#" data-pb-goto-home-page>Back to Home</a>

```

--------------------------------

### Function Naming Convention Example

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Demonstrates how to access functions using section names as namespaces and how to trigger section reloads with an example button click.

```html
<button onclick="page3.calendar_header.handleViewChange('month')"
        data-pb-section="CALENDAR DISPLAY"
        data-pb-section-target="#calendar-display-container">
    Month View
</button>
```

--------------------------------

### No-Code Attribute Suit Examples

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CONVERSATION-RECORD.md

Provides examples from a built-in snippet library, specifically 'no-code-attribute-suit.js', demonstrating pre-built attribute usage.

```javascript
// no-code-attribute-suit.js - Example Snippets

// Example 1: Basic section embedding
// <div data-pb-section="header"></div>

// Example 2: Section with parameters
// <div data-pb-section="product-details" data-pb-section-params='{"productId": "XYZ789"}'></div>

// Example 3: Deep link with query parameters
// <a data-pb-deeplink="/users/profile" data-pb-deeplink-params='{"userId": "user123", "view": "settings"}'>User Profile</a>

// Example 4: Triggering a refresh on button click
// <button data-pb-refresh="true">Refresh Data</button>

// Example 5: Navigating to home page
// <a href="#" data-pb-goto-home-page>Back to Home</a>

```

--------------------------------

### Add Page Template

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

An HTML template example for the Page Builder, showcasing how to use context variables within the HTML structure using double curly braces for interpolation.

```html
<div class="container-fluid">
    <div class="alert alert-info">
        <h2>{{welcome_message}}</h2>
        <p>Today's Date: {{current_date}}</p>
    </div>
</div>
```

--------------------------------

### Cross-Application Navigation

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Demonstrates how to implement navigation links between different applications or sections of the page builder. It includes examples for direct links, deep links with target specification, and refresh/home actions.

```html
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="navbar-nav">
        <a class="nav-link" data-pb-link="/Viewer/Page/dashboard">Dashboard</a>
        <a class="nav-link" data-pb-deeplink="/oneview/reports" data-pb-deeplink-target="_self">Reports</a>
        <a class="nav-link" data-pb-refresh>Refresh</a>
        <a class="nav-link" data-pb-goto-home-page>Home</a>
    </div>
</nav>
```

--------------------------------

### Simple Data Table Page Script

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Example JavaScript code for fetching portfolio data from a database and preparing it for display in a table, including defining table columns.

```javascript
const SQL_DATA = await page3.DB.execSQL(`
    SELECT portfolio_code, portfolio_name, aum, returns
    FROM portfolio_summary 
    ORDER BY aum DESC
`);

context.portfolios = SQL_DATA.rows;
context.table_fields = [
    { key: 'PORTFOLIO_CODE', label: 'Code' },
    { key: 'PORTFOLIO_NAME', label: 'Name' },
    { key: 'AUM', label: 'AUM (M)', class: 'text-right' },
    { key: 'RETURNS', label: 'Returns (%)', class: 'text-right' }
];
```

--------------------------------

### Page Builder Config.json Format

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Example JSON format for `config.json` file, defining page ID, name, and the list of sections included in the page.

```json
{
  "pageid": "page_name",
  "pagename": "Page Display Name",
  "pagesections": [
    {
      "PAGESECTIONID": "section_name",
      "PAGESECTIONNAME": "SECTION DISPLAY NAME"
    }
  ],
  "is_system": "N"
}
```

--------------------------------

### Section with Dynamic Sub-sections

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

An example of a section containing a table of categories, where each category row has a button to view details. This uses `data-pb-section`, `data-pb-section-target`, and `data-pb-section-params` to dynamically load sub-section content.

```html
<div class="card">
    <div class="card-body">
        <table class="table">
            {% for category in categories %}
            <tr>
                <td>{{category.name}}</td>
                <td>
                    <button class="btn btn-sm btn-primary"
                            data-pb-section="fund_details"
                            data-pb-section-target="#fund-detail-area"
                            data-pb-section-params="[{field:'CATEGORY', value:'{{category.id}}', asgn:'eq'}]">
                        View Details
                    </button>
                </td>
            </tr>
            {% endfor %}
        </table>
        
        <div id="fund-detail-area" class="mt-3"></div>
    </div>
</div>
```

--------------------------------

### Dashboard with Multiple Sections

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

A layout example for a dashboard page, demonstrating how to load different sections (header, filters, summary cards, charts) using `data-pb-section` attributes and specifying trigger conditions like `data-pb-section-trigger-on-load`.

```html
<div class="container-fluid">
    <!-- Header loads immediately -->
    <div 
        data-pb-section="dashboard_header"
        data-pb-section-trigger-on-load="true">
    </div>
    
    <!-- Filter section -->
    <div 
        data-pb-section="dashboard_filters"
        data-pb-section-trigger-on-load="true">
    </div>
    
    <!-- Main content area -->
    <div class="row">
        <div class="col-md-6">
            <div data-pb-section="summary_cards" data-pb-section-trigger-on-load="true"></div>
        </div>
        <div class="col-md-6">
            <div data-pb-section="charts" data-pb-section-trigger-on-load="true"></div>
        </div>
    </div>
    
    <!-- Dynamic detail section -->
    <div id="detail-container"></div>
</div>
```

--------------------------------

### Session Management in Templates

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Demonstrates how to use `setSessionProcess` in HTML templates to pass client-side data to server-side scripts. This includes examples for pagination and custom user selections.

```html
<script>
    // Pass pagination data
    page3.setSessionProcess("SECTION_NAME", { 
        user_master: { 
            currentPage: 1,
            limit: 10
        }
    });
    
    // Pass custom user selections
    page3.setSessionProcess("MY_SECTION", { 
        selectedCategory: "EQUITY",
        viewMode: "detailed",
        customSettings: {
            showGraphs: true,
            dateRange: "monthly"
        }
    });
</script>
```

--------------------------------

### Page Section Script Example

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Demonstrates how to write JavaScript for a page section to fetch data, process filters, and prepare data for the template. It utilizes available variables like `filters`, `session`, and `page3.DB` for data retrieval and context management.

```javascript
const APPLIED_FILTERS = {};
filters.forEach(filter => {
    APPLIED_FILTERS[filter.field] = filter.value;
});

const pagination = {
    totalRecords: 0,
    currentPage: session?.user_master?.currentPage || 1,
    limit: session?.user_master?.limit || 10
};

const SQL_DATA = await page3.DB.find({
    table: 'category_summary',
    filters: filters,
    page: {
        start: (pagination.currentPage - 1) * pagination.limit,
        limit: pagination.limit
    }
});

context.section_data = JSON.stringify(SQL_DATA);
context.filters = filters;
context.session = session;
context.pagination = pagination;
```

--------------------------------

### Basic API Call with credCAPI

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Demonstrates how to make a basic GET request using `$credCAPI.collection().read()` to fetch data and display it in the UI. It includes error handling for unsuccessful API responses.

```javascript
module.export = {
    loadData() {
        this.$credCAPI
            .collection()
            .read({
                body: {
                    "dataobj": {
                        "category": "EQUITY",
                        "report_type": "summary"
                    }
                },
                requestURL: `/api/portfolio/data`
            })
            .then((response) => {
                if (response && response.status == "unsuccess") {
                    console.error(response.msg || response.error || `Error while processing`);
                    return;
                }
                
                // Process successful response
                document.getElementById('api-results').innerHTML =
                    JSON.stringify(response.data, null, 2);
            });
    }
}
```

--------------------------------

### Add Page Script

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Example JavaScript code for data preparation and database interaction within the Page Builder context. It demonstrates accessing context variables, executing SQL queries, and assigning results to context.

```javascript
// Simple data preparation
context.welcome_message = "Welcome to My Dashboard!";
context.current_date = new Date().toISOString().split('T')[0];

// Database example
const SQL_DATA = await page3.DB.execSQL(
    SELECT COUNT(*) as total_records FROM my_table
);
context.record_count = SQL_DATA.rows[0].TOTAL_RECORDS;
```

--------------------------------

### Filter Implementation with Input Fields

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Provides an example of implementing filters in a web page, including date input and select dropdowns, with associated data attributes for Page Builder integration.

```html
<div class="row mb-3">
    <div class="col-md-3">
        <label class="form-label">Report Date</label>
        <input type="date" 
               class="form-control" 
               data-pb-filter-field="REPORT_DATE"
               data-pb-filter-default="2024-01-01">
    </div>
    <div class="col-md-3">
        <label class="form-label">Fund Type</label>
        <select class="form-control" 
                data-pb-filter-field="FUND_TYPE">
            <option value="">All Types</option>
            <option value="EQUITY">Equity Funds</option>
            <option value="DEBT">Debt Funds</option>
            <option value="HYBRID">Hybrid Funds</option>
        </select>
    </div>
    <div class="col-md-3">
        <button type="button" 
                class="btn btn-primary mt-4"
                onclick="page3.applyFilters()">
            Apply Filters
        </button>
    </div>
</div>
```

--------------------------------

### Page Builder Client-Side Scripting

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Example of client-side JavaScript functions defined within a section's template using `<script>` tags, enabling interactivity and communication with Page Builder functions.

```html
<!-- Section template content -->
<div>...</div>

<script>
module.export = {
    functionName: () => {
        // Client-side JavaScript function
        // Can call page3.setSessionProcess() for cross-section communication
        // Can call page3.showSection() to reload other sections
    }
};
</script>
```

--------------------------------

### Attribute Handlers for Interactivity

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CONVERSATION-RECORD-PAGE-BUILDER.md

Examples of attribute handlers used in HTML for controlling section embedding, navigation, and actions within the Page Builder.

```HTML
<div data-pb-section="section-name" data-pb-attribute1="value1" data-pb-attribute2="value2">
  <!-- Section content -->
</div>

<a href="#" data-pb-deeplink="/some/path" data-pb-param-user="123">
  Navigate
</a>

<button data-pb-refresh>
  Refresh
</button>

<button data-pb-goto-home-page>
  Go to Home
</button>
```

--------------------------------

### Page Builder API Endpoints

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/Page builder.md

Defines the available API endpoints for interacting with the page builder, including GET and POST methods.

```APIDOC
page3.api.get:
  Description: Retrieves data or resources from the page builder.
  Methods:
    GET: Standard GET request to fetch resources.

page3.api.post:
  Description: Submits data or creates new resources within the page builder.
  Methods:
    POST: Standard POST request to create or update resources.
```

--------------------------------

### Page Builder Server-Side Scripting

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Example of a server-side script (`pagesection-script.js`) for Page Builder sections, focusing on data processing and avoiding client-side JavaScript.

```javascript
// ONLY for server-side data processing
module.exports = {
    load: async function ({ filters, userobj, session }) {
        // Handle context preparation, database queries, session data processing
        // Should NOT contain client-side JavaScript functions
        const sessionData = session || {};
        return { data: "processed server-side data" };
    }
}
```

--------------------------------

### Section Embedding Examples

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Illustrates how to embed sections within pages using HTML data attributes. It covers both static sections that load on page load and dynamic sections loaded via JavaScript, including how to pass parameters and specify section names.

```html
<!-- Static Section (loads immediately) -->
<div 
    data-pb-section="SECTION_NAME"
    data-pb-section-trigger-on-load>
</div>

<!-- Dynamic Section (loads based on user interaction) -->
<div id="dynamic-section-container">
    <!-- Content loaded via JavaScript -->
</div>

<script>
// Load section dynamically - Use exact PAGESECTIONNAME from config.json
page3.showSection(
    'SECTION_NAME', // Use exact PAGESECTIONNAME value from config.json
    '#dynamic-section-container',
    {
        isToggle: false,
        params: JSON.stringify([
            { field: 'CATEGORY', value: 'EQUITY', asgn: 'eq' }
        ]),
        hideSectionHeader: true
    }
);
</script>
```

--------------------------------

### CRUD Operations with credCAPI

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Provides examples for performing Create, Read, Update, and Delete (CRUD) operations on portfolio data using the `$credCAPI.collection()` methods. Each operation includes sample request bodies and error handling.

```javascript
module.export = {
    // CREATE - Add new record
    createRecord() {
        this.$credCAPI
            .collection()
            .create({
                body: {
                    "dataobj": {
                        "portfolio_name": "New Portfolio",
                        "category": "EQUITY"
                    }
                },
                requestURL: `/api/portfolio/create`
            })
            .then((response) => {
                if (response && response.status == "unsuccess") {
                    return console.error(response.msg || response.error);
                }
                console.log('Record created successfully');
            });
    },

    // READ - Get records
    readRecords() {
        this.$credCAPI
            .collection()
            .read({
                body: {
                    "dataobj": {
                        "category": "EQUITY",
                        "limit": 10
                    }
                },
                requestURL: `/api/portfolio/list`
            })
            .then((response) => {
                if (response && response.status == "unsuccess") {
                    return console.error(response.msg || response.error);
                }
                // Process data
                this.displayRecords(response.data);
            });
    },

    // UPDATE - Modify existing record
    updateRecord(recordId) {
        this.$credCAPI
            .collection()
            .update({
                body: {
                    "dataobj": {
                        "id": recordId,
                        "portfolio_name": "Updated Portfolio Name"
                    }
                },
                requestURL: `/api/portfolio/update`
            })
            .then((response) => {
                if (response && response.status == "unsuccess") {
                    return console.error(response.msg || response.error);
                }
                console.log('Record updated successfully');
            });
    },

    // DELETE - Remove record
    deleteRecord(recordId) {
        this.$credCAPI
            .collection()
            .delete({
                body: {
                    "dataobj": {
                        "id": recordId
                    }
                },
                requestURL: `/api/portfolio/delete`
            })
            .then((response) => {
                if (response && response.status == "unsuccess") {
                    return console.error(response.msg || response.error);
                }
                console.log('Record deleted successfully');
            });
    }
}
```

--------------------------------

### Interactive Session Updates in Templates

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Illustrates how user interactions in HTML templates can dynamically update session data using `setSessionProcess`. Examples include button clicks for view modes and pagination/form select for data filtering.

```html
<!-- User actions update session data -->
<b-button @click="page3.setSessionProcess('MY_PAGE', { viewMode: 'detailed' })">
    Detailed View
</b-button>

<b-pagination
    :value="page3.getSessionProcess('SECTION_NAME.user_master.currentPage')"
    @input="page => page3.setSessionProcess('SECTION_NAME', { user_master: { currentPage: page } })">
</b-pagination>

<b-form-select 
    @change="category => page3.setSessionProcess('MY_SECTION', { selectedCategory: category })">
    <option value="EQUITY">Equity</option>
    <option value="DEBT">Debt</option>
</b-form-select>
```

--------------------------------

### Initialize Page Builder Service

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Demonstrates the initialization of the Page Builder service in the main server file, specifying application instance, pages directory, database pool, and application path.

```javascript
const initPageBuilder = require("./pagebuilder");
initPageBuilder({
    "app": servicemgr.app,
    "pages_dir": path.join(__dirname, "pages"),
    "pool": DB,
    "app_path": config.APPS_DIR_PATH
});
```

--------------------------------

### Basic Page Structure with Bootstrap and Nunjucks

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Demonstrates a basic page structure using Bootstrap for layout and Nunjucks for server-side templating, including conditional rendering of data.

```html
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">{{section_title}}</h5>
                </div>
                <div class="card-body">
                    {% if data_available %}
                        <p>Records: {{total_records}}</p>
                    {% else %}
                        <p class="text-muted">No data available</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
```

--------------------------------

### Key Modules

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Describes the main functional modules of the application: Builder for page creation and editing, Viewer for page display, and CodeAssistanceArchive for reusable snippets and help.

```javascript
// Key Modules
// Builder Module (src/modules/Builder/):
//   Builder.vue: Main page creation interface
//   Components: Editor, FileUpload, Header, PagePreview, SideBar, Stage
//   Purpose: Create and edit pages with SQL scripts, HTML templates, and filters

// Viewer Module (src/modules/Viewer/):
//   Viewer.vue: Standard page viewing
//   StandaloneViewer.vue: Embeddable page viewing (/viewer-page/:pageId)
//   IndependentPageDisplay.vue: Core page rendering logic

// Code Assistance (src/modules/CodeAssistanceArchive/):
//   Snippets: Pre-built components (Cards, Charts, Grids, Tables, etc.)
//   Help: Video tutorials and documentation
//   Utility: Helper functions and tools
```

--------------------------------

### File Structure Overview

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Illustrates the physical file organization for pages and sections within the Page Builder project. It details the placement of scripts, templates, filters, and configuration files.

```text
pages/
├── PAGE_ID/
│   ├── pagescript.js          # Page data logic
│   ├── pagetemplate.njk       # Page HTML template
│   ├── pagefilter.njk         # Page filter template
│   └── SECTION_ID/
│       ├── pagesection-script.js      # Section data logic
│       └── pagesection-template.njk   # Section HTML template
├── config.json                # Page configuration (for import/export)
└── README.md                  # Documentation

Example: Fund Dashboard Structure

pages/
└── fund_insights_dashboard/
    ├── pagescript.js
    ├── pagetemplate.njk
    ├── pagefilter.njk
    ├── config.json
    ├── summarysection/
    │   ├── pagesection-script.js
    │   └── pagesection-template.njk
    ├── categoryfunds/
    │   ├── pagesection-script.js
    │   └── pagesection-template.njk
    └── attribution/
        ├── pagesection-script.js
        └── pagesection-template.njk
```

--------------------------------

### Page Builder JavaScript Module Export

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Example of exporting a JavaScript module within the page builder context, showing a function that processes view changes and updates session data.

```javascript
module.export = {
    handleViewChange: (view) => {
        // Process view change
        page3.setSessionProcess("CALENDAR DISPLAY", { view: view });
        // Attribute handler will reload target section automatically
    }
};
```

--------------------------------

### Developer Workflow

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CONVERSATION-RECORD.md

Outlines the typical steps a developer follows when working with the Page Builder project, from writing code to deploying changes.

```Markdown
1. **Write JavaScript:** Implement data logic and custom functionalities.
2. **Create Nunjucks Templates:** Define the HTML structure and server-side rendering logic.
3. **Utilize Attribute Handlers:** Add attributes like `data-pb-section`, `data-pb-deeplink`, `data-pb-refresh` to HTML elements for interactivity and dynamic behavior.
4. **Preview Changes:** Use the real-time preview feature to see the effects of your modifications.
5. **Deploy and Integrate:** Deploy the updated components and integrate them into larger applications.
```

--------------------------------

### Page Builder Workflow

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Describes the step-by-step process of creating and managing pages within the Page Builder system, from initial creation to rendering.

```javascript
// Page Builder Workflow
// 1. Page Creation: SQL script + HTML template + optional filters
// 2. Section Management: Reusable components within pages
// 3. Template System: Nunjucks templating with Bootstrap components
// 4. Data Binding: SQL_DATA exposed to templates
// 5. Viewer Rendering: Dynamic page rendering with filter support
```

--------------------------------

### Page Builder JavaScript Best Practices

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Outlines essential best practices for developing with the Page Builder system, including module export patterns, accessing global objects, data integration, session management, API call structures, and error handling.

```APIDOC
1. Use `module.export` for function exports.
2. Access exported functions via the `page3` global object.
3. Integrate template data using `{{variable | safe}}` within JavaScript.
4. Manage data persistence with `page3.setSessionProcess()`.
5. Load dynamic content using `page3.showSection()`.
6. Implement robust error handling for user interactions.
7. Structure API calls using `this.$credCAPI.collection().method()`.
8. Provide complete `requestURL` for all API endpoints.
9. Validate API responses by checking `response.status == "unsuccess"`.
10. Handle asynchronous API responses with `.then()`.
11. Organize request data within the `dataobj` property in the request body.
```

--------------------------------

### Store Modules

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Overview of the Vuex store modules used in the application, including page management, file system operations, and notification handling, as well as global state management.

```javascript
// Store Modules
// pages.store.js: Page management state
// fileSystem.store.js: File operations
// notifications.store.js: User notifications
// Global state: loading, theme, reference counting
```

--------------------------------

### Technical Stack Overview

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Lists the core technologies and libraries used in the project, including frontend frameworks, UI libraries, charting tools, code editors, and templating engines.

```javascript
// Technical Stack
// Frontend: Vue 2.6.11 + Vue Router + Vuex
// UI Framework: Bootstrap 4 + Bootstrap Vue
// Charts: Chart.js + vue-chartjs + TreeMap support
// Code Editor: Monaco Editor (JS, CSS, HTML, TS, JSON)
// Math Rendering: MathJax (bundled in /MathJax/)
// Pivot Tables: vue-pivottable
// Template Engine: Nunjucks-based templating
// Module Federation: Webpack 5 federation for micro-frontend architecture
```

--------------------------------

### Page Builder Templating with Nunjucks

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CONVERSATION-RECORD-PAGE-BUILDER.md

Demonstrates the use of Nunjucks for server-side templating in the Page Builder. This allows dynamic rendering of content from data sources like SQL scripts.

```nunjucks
{# Example Nunjucks template for a Page Builder section #}

<section>
  <h1>{{ sectionTitle }}</h1>
  <p>{{ sectionContent }}</p>

  {# Embedding another section #}
  <div data-pb-section="{{ embeddedSectionId }}">
    {# Content of the embedded section will be loaded here #}
  </div>

  {# Link to another page #}
  <a data-pb-link="{{ nextPageUrl }}">Next Page</a>
</section>
```

--------------------------------

### Page Builder Templating with Nunjucks

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CONVERSATION-RECORD.md

Demonstrates the use of Nunjucks for server-side templating in the Page Builder. This allows dynamic rendering of content from data sources like SQL scripts.

```nunjucks
{# Example Nunjucks template for a Page Builder section #}

<section>
  <h1>{{ sectionTitle }}</h1>
  <p>{{ sectionContent }}</p>

  {# Embedding another section #}
  <div data-pb-section="{{ embeddedSectionId }}">
    {# Content of the embedded section will be loaded here #}
  </div>

  {# Link to another page #}
  <a data-pb-link="{{ nextPageUrl }}">Next Page</a>
</section>
```

--------------------------------

### Page Builder System Architecture

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Visual representation of the Page Builder system components and their interactions, including UI, API services, database, and file system.

```mermaid
graph TB
    A[Page Builder UI] --> B[REST API Services]
    B --> C[Database Layer]
    B --> D[File System]
    D --> E[Page Files]
    D --> F[Section Files]
    C --> G[AB_PAGES Table]
    C --> H[AB_PAGESECTIONS Table]
```

--------------------------------

### Core Structure

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Details the fundamental structure of the micro-frontend application, including entry points, configuration loading, routing, state management, and styling.

```javascript
// Core Structure
// Entry Point: src/main.js → src/bootstrap.js (micro-frontend pattern)
// Config Loading: Dynamic configuration via config.js alias resolving to ./config/
// Router: Vue Router with lazy loading, main routes: /Builder, /Viewer
// State: Vuex store with modular architecture
// Styling: Bootstrap 4 + Bootstrap Vue + SCSS
```

--------------------------------

### Page Builder Directory Structure

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Standard directory structure for creating modular pages with sections in Page Builder, including configuration, templates, and scripts.

```text
page_name/
├── config.json
├── pagetemplate.njk
├── pagescript.js
└── section_name/
    ├── pagesection-template.njk
    └── pagesection-script.js
```

--------------------------------

### Data Script Best Practices

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Guidelines for writing safe and efficient JavaScript data scripts in the Page Builder. Covers safe filter processing, using parameterized SQL queries, and formatting data for templates.

```javascript
// Process filters safely
const APPLIED_FILTERS = {};
if (filters && filters.length > 0) {
    filters.forEach(filter => {
        APPLIED_FILTERS[filter.field] = filter.value;
    });
}

// Use parameterized queries
const SQL_DATA = await page3.DB.execSQL (
    SELECT * FROM table WHERE date_field = :date_param
, { date_param: APPLIED_FILTERS.REPORT_DATE });

// Format data for template
context.formatted_data = SQL_DATA.rows.map(row => ({
    ...row,
    AMOUNT_FORMATTED: page3.util.format(row.AMOUNT, 'currency')
}));
```

--------------------------------

### Dashboard Page Template for Summary and Details

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

This HTML template renders the dashboard's summary cards (Total Funds, Total AUM, Average Returns) using data from the page context. It also includes a placeholder section for detailed fund information that can be loaded dynamically.

```html
<div class="container-fluid">
    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h5>Total Funds</h5>
                    <h2>{{summary.TOTAL_FUNDS}}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5>Total AUM</h5>
                    <h2>{{summary.TOTAL_AUM | round}} M</h2>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h5>Average Returns</h5>
                    <h2>{{summary.AVG_RETURNS | round(2)}}%</h2>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Detailed Section -->
    <div 
        data-pb-section="fund_details" 
        data-pb-section-trigger-on-load>
    </div>
</div>
```

--------------------------------

### Page Builder Action Handlers

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Provides attributes for triggering common actions like refreshing the current page or navigating to the application home.

```html
<!-- Refresh current page/section -->
<button data-pb-refresh>Refresh Data</button>

<!-- Navigate to application home -->
<button data-pb-goto-home-page>Home</button>
```

--------------------------------

### Micro-frontend Integration using Iframe and Object Tag

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Shows two methods for embedding Page Builder pages into other applications: using an iframe and using an object tag, with options for customization.

```html
<!-- Embedded Page -->
<iframe src="/pagebuilder/viewer-page/page_id" 
        width="100%"
        height="600px"
        frameborder="0">
</iframe>

<!-- Via Object Tag -->
<object data="/pagebuilder/viewer-page/page_id#hideheader=true" 
        width="100%"
        height="600px">
</object>
```

--------------------------------

### API Layer Configuration

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Details about the API layer, including the custom credCAPI wrapper, RESTful endpoints, the use of a JSON mock server for development, and configuration-driven API base URLs.

```javascript
// API Layer
// credCAPI: Custom API wrapper (src/utils/credCAPI/)
// Endpoints: RESTful APIs for pages and sections (CRUD operations)
// Mock Server: JSON server for development (automating.tools/json-server/)
// Config-driven: API base URL determined by config.jsonserver flag
```

--------------------------------

### Making API Calls with credCAPI

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Demonstrates how to make REST API calls from templates using the `this.$credCAPI` object, including structuring the request body and handling responses.

```javascript
this.$credCAPI
    .collection()
    .read({
        body: {
            "dataobj": {
                "event": "template_load",
                "Template": "portfolio_summary"
            }
        },
        requestURL: `/api/templates/load`
    })
    .then((response) => {
        if (response && response.status == "unsuccess") {
            return console.error(response.msg || response.error);
        }
        // Process successful response
    });
```

--------------------------------

### Page Builder Deep Linking

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Enables navigation to external URLs or different applications using the `data-pb-deeplink` attribute. Supports opening in new tabs, same window, and passing URL parameters.

```html
<!-- Open in new tab (default) -->
<button data-pb-deeplink="/external/application">Open App</button>

<!-- Open in same window -->
<button 
    data-pb-deeplink="/dashboard"
    data-pb-deeplink-target="_self">
    Go to Dashboard
</button>

<!-- Pass URL parameters -->
<button 
    data-pb-deeplink="/reports#summary"
    data-pb-deeplink-params="{userId: 123, reportType: 'monthly'}">
    View Report
</button>
```

--------------------------------

### Dashboard Integration Configuration

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Illustrates the JSON configuration required to integrate a Page Builder page into a custom dashboard.

```javascript
{
    "dashboard_type": "Page Builder",
    "dashboard_id": "your_page_id",
    "title": "Your Page Title",
    "group": "Reports"
}
```

--------------------------------

### Page Builder and App Builder API Endpoints

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/

Outlines key functionalities exposed by the Page Builder and App Builder APIs. This includes operations for creating pages and collections, and embedding pages via iframes or objects.

```APIDOC
Page Builder:
  - expose/copy page url
  - embed page via iframe
  - embed page via object

App Builder:
  - create collection
  - create page
```

--------------------------------

### Page Builder Section Embedding

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Demonstrates how to embed reusable sections using the `data-pb-section` attribute. Supports auto-loading, targeting specific containers, passing parameters, toggling visibility, hiding headers, and custom tab names.

```html
<!-- Basic section embedding - Use PAGESECTIONNAME from config.json -->
<div data-pb-section="SECTION_NAME"></div>

<!-- Auto-load section on page load -->
<div 
    data-pb-section="SECTION_NAME"
    data-pb-section-trigger-on-load="true">
</div>

<!-- Load section into specific container -->
<div 
    data-pb-section="SECTION_NAME"
    data-pb-section-target="#my-container">
</div>
<div id="my-container"></div>

<!-- Pass filter parameters to section -->
<div 
    data-pb-section="SECTION_NAME"
    data-pb-section-params="[{field:'DATE', value:'2024-01-01', asgn:'eq'}]">
</div>

<!-- Toggle section visibility -->
<button
    data-pb-section="SECTION_NAME"
    data-pb-section-toggle="true">
    Toggle Section
</button>

<!-- Hide section header bar -->
<div 
    data-pb-section="SECTION_NAME"
    data-pb-section-hide-header="true">
</div>

<!-- Custom tab name for section -->
<div 
    data-pb-section="SECTION_NAME"
    data-pb-tab-name="Custom Tab Title">
</div>
```

--------------------------------

### Page Builder API Endpoints

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Overview of the RESTful API endpoints exposed by the Page Builder for managing pages and sections.

```APIDOC
Page Builder API Structure:

Base Path: /pagebuilder/

Pages:
  - /pagebuilder/page/*
  - Description: CRUD operations for pages.

Sections:
  - /pagebuilder/pagesection/*
  - Description: CRUD operations for page sections.
```

--------------------------------

### Page Builder Internal Linking

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Facilitates navigation within the Page Builder application using the `data-pb-link` attribute. Allows navigation to other pages and passing parameters.

```html
<!-- Navigate to another page -->
<button data-pb-link="/Viewer/Page/dashboard">View Dashboard</button>

<!-- Navigate with parameters -->
<button 
    data-pb-link="/Viewer/Page/reports"
    data-pb-link-params="{filter: 'active', date: '2024-01-01'}">
    Filtered Report
</button>
```

--------------------------------

### Page Template Structure

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Defines the HTML structure and layout of a page using Nunjucks templating syntax, Bootstrap components, and Vue.js integration. It supports data binding from the page script.

```html
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row">
        <div class="col-12">
            <h1>{{page_title}}</h1>
        </div>
    </div>
    
    <!-- Data Display -->
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Summary</h5>
                    <p>Total Records: {{total_records}}</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Section Placeholder -->
    <div 
        data-pb-section="SECTION_NAME" 
        data-pb-section-trigger-on-load
    ></div>
</div>

```

--------------------------------

### JavaScript Form Handling in Template

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Demonstrates how to handle form submissions using JavaScript, including preventing default behavior, accessing form data, setting session data, and refreshing the page.

```html
<form onSubmit="page3.handleFormSubmit(event)">
    <input type="text" id="portfolioCode" placeholder="Portfolio Code">
    <button type="submit">Search</button>
</form>

<script>
    module.export = {
        handleFormSubmit(event) {
            event.preventDefault();
            
            const portfolioCode = document.getElementById('portfolioCode').value;
            
            // Set session data and refresh
            page3.setSessionProcess('current_page', {
                searchCode: portfolioCode
            });
            
            // Refresh current page with new data
            location.reload();
        }
    }
</script>
```

--------------------------------

### WebActionKit for Custom Events

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CONVERSATION-RECORD-PAGE-BUILDER.md

Showcases the WebActionKit.js file, which handles custom events for actions like refresh and navigation within the Page Builder.

```javascript
/*
 * WebActionKit.js - Custom Events for Page Builder
 */

class WebActionKit {
  constructor() {
    this.eventListeners = {};
  }

  // Register an event listener
  on(eventName, callback) {
    if (!this.eventListeners[eventName]) {
      this.eventListeners[eventName] = [];
    }
    this.eventListeners[eventName].push(callback);
  }

  // Trigger an event
  trigger(eventName, data) {
    if (this.eventListeners[eventName]) {
      this.eventListeners[eventName].forEach(callback => {
        callback(data);
      });
    }
  }

  // Example: Method to handle page refresh
  handleRefresh() {
    this.trigger('page:refresh');
  }

  // Example: Method to handle navigation
  handleNavigation(url) {
    this.trigger('navigate', { url: url });
  }
}

// Usage Example:
// const actionKit = new WebActionKit();
// actionKit.on('page:refresh', () => { console.log('Page refreshed!'); });
// actionKit.handleRefresh();

```

--------------------------------

### Simple Data Table Page Template

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

HTML template for displaying a simple data table using Bootstrap and a Vue.js table component, populated with data fetched by the page script.

```html
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Portfolio Summary</h4>
                </div>
                <div class="card-body">
                    <b-table 
                        :items="{{portfolios | safe}}"
                        :fields="{{table_fields | safe}}"
                        striped hover responsive>
                    </b-table>
                </div>
            </div>
        </div>
    </div>
</div>
```

--------------------------------

### WebActionKit for Custom Events

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CONVERSATION-RECORD.md

Showcases the WebActionKit.js file, which handles custom events for actions like refresh and navigation within the Page Builder.

```javascript
/*
 * WebActionKit.js - Custom Events for Page Builder
 */

class WebActionKit {
  constructor() {
    this.eventListeners = {};
  }

  // Register an event listener
  on(eventName, callback) {
    if (!this.eventListeners[eventName]) {
      this.eventListeners[eventName] = [];
    }
    this.eventListeners[eventName].push(callback);
  }

  // Trigger an event
  trigger(eventName, data) {
    if (this.eventListeners[eventName]) {
      this.eventListeners[eventName].forEach(callback => {
        callback(data);
      });
    }
  }

  // Example: Method to handle page refresh
  handleRefresh() {
    this.trigger('page:refresh');
  }

  // Example: Method to handle navigation
  handleNavigation(url) {
    this.trigger('navigate', { url: url });
  }
}

// Usage Example:
// const actionKit = new WebActionKit();
// actionKit.on('page:refresh', () => { console.log('Page refreshed!'); });
// actionKit.handleRefresh();

```

--------------------------------

### Page Scripting with JavaScript

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Write JavaScript to fetch and prepare data for your page. This script utilizes available variables like filters, userobj, session, context, and database connections to manipulate data and pass it to the template.

```javascript
// Process filters from page
const APPLIED_FILTERS = {};
filters.forEach(filter => {
    APPLIED_FILTERS[filter.field] = filter.value;
});

// Use session data (e.g., for pagination)
const currentPage = session?.pagination?.currentPage || 1;
const limit = session?.pagination?.limit || 10;

// Fetch data from database
const SQL_DATA = await page3.DB.execSQL(`
    SELECT portfolio_code, portfolio_name, aum, returns
    FROM portfolio_summary 
    WHERE report_date = :report_date
`, { report_date: APPLIED_FILTERS.REPORT_DATE });

// Pass data to template
context.portfolios = SQL_DATA.rows;
context.total_count = SQL_DATA.rows.length;
context.filters = filters;
context.session = session;
context.user_info = userobj;

```

--------------------------------

### Monaco Editor Configuration

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Configuration details for the Monaco Editor, highlighting the languages it supports and its integration via a Webpack plugin.

```javascript
// Monaco: Webpack plugin for code editor
// Monaco editor configured for web development languages (JS, CSS, HTML, TS, JSON)
```

--------------------------------

### Cross-Section Communication Pattern

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/CLAUDE.md

Illustrates the proper flow for cross-section communication using `page3.setSessionProcess` and the combined attribute handler pattern for interactive elements.

```html
<!-- Combines onclick function with section reload -->
<button onclick="page3.section_name.function()"
        data-pb-section="TARGET SECTION"
        data-pb-section-target="#target-container">
    Interactive Button
</button>
```

--------------------------------

### JavaScript Section Interaction in Template

Source: https://github.com/credence-analytics/page-builder-docs/blob/main/README.md

Illustrates how to define a JavaScript function to dynamically load content into a specific section of a page, using `page3.showSection` with parameters.

```html
<button onClick="page3.loadSection('summary_section')">Load Summary</button>
<div id="dynamic-content"></div>

<script>
    module.export = {
        loadSection(sectionName) {
            // Load section dynamically
            page3.showSection(
                sectionName,
                '#dynamic-content',
                {
                    params: JSON.stringify([
                        { field: 'CATEGORY', value: 'EQUITY', asgn: 'eq' }
                    ]),
                    hideSectionHeader: true
                }
            );
        }
    }
</script>
```