Service Dashboard Integration in Merciglobal Cloud ERP

This guide outlines how the Service Dashboard module is constructed and rendered within the Merciglobal Cloud ERP ecosystem. It includes the JavaScript functions used for invoking drawers, handling UI, filters, renderers, and additional settings needed to empower end users with a robust dashboard interface.

---

📌 Purpose

The Service Dashboard is designed to:

• Provide a real-time overview of service tickets.
• Allow filtering and drill-down by various fields.
• Enable customized rendering of ticket data.
• Enhance user engagement through dynamic, card-based UI.

---

⚙️ Code Overview

1. serviceDashboard() Function

This initializes and opens the Service Dashboard drawer.

function serviceDashboard(){
    let html = `<div class="serviceDashboard"></div>`;

    u.drawers.drawer({
        id: 'service',
        body: `<div class="ai_modulecontainer">${html}</div>`,
        width: `95vw`,
        closeOnBackgroundClick: false,
        direction: 'right',
        heading: 'Service',
        headingWidth: '85px',
        headingCss: 'background-color: var(--bs-primary); border-color: var(--bs-primary); font-size:11pt;',
    });

    RenderServiceDashboard();
}

2. RenderServiceDashboard() Function

Responsible for rendering the dashboard, setting up filters, columns, custom buttons, and sample card layout.

function RenderServiceDashboard(){
    let filters = [
        { field:'status', label:'Status', type:'select' },
        { field:'engg', label:'Engg', type:'select' },
        { field:'brand', label:'Brand', type:'select' },
        { field:'source', label:'Source', type:'select' },
    ];

    let renderers = [
        {field:'customer', renderer:renderer_customer},
        {field:'item', renderer:renderer_item},
        {field:'status', renderer:renderer_status},
        {field:'partreq', renderer:renderer_partreq},
        {field:'engg', renderer:renderer_engg, cardrenderer:rendererCard_engg}
    ];

    let hiddenCol = [
        'source', 'itemreq', 'brand', 'itemgrp',
        'specification', 'itemname', 'brandname',
        'itemgroup', 'assetid', 'customername', 'assignto'
    ];

    let customBtn = [ { caption:'Add Ticket', callback: 'addNewTicket'} ];

    let html = `
        <div class="table-scrollable" style="height:100vh; overflow-x:auto;">
            <div class="serviceDashboard"></div>

            <div class="serviceDashboardCardSample col-12 col-md-6 col-lg-3 mb-3 hidden">
                <div class="card" style="box-shadow: 1px 8px 3px 0 #00000016;">
                    <div class="card-body">
                        <div style="font-weight:bold">Ticket No: <span data-bind="ticketno" style="font-size:14pt;"></span></div>
                        <div class="mb-2">Date: <span data-bind="date"></span></div>
                        <div style="color:var(--bs-primary);">Customer: <span data-bind="customer"></span></div>
                        <div>Engg: <span data-bind="engg"></span></div>
                        <div>Item: <span data-bind="item" style="font-weight:bold;color:purple;"></span></div>
                    </div>
                </div>
            </div>
        </div>`;

    $('.ai_modulecontainer').html( html );

    smartTable('.serviceDashboard','trn_servicerequest',filters,renderers,hiddenCol,customBtn,'auto');
}

---

🔍 Feature Highlights

• Drawer-Based Layout: Utilizes a drawer panel that slides from the right, offering a clean workspace.
• Card UI Design: Sample card template helps present data visually, ideal for dashboards.
• Flexible Filters: Add or remove fields like Status, Engineer, Brand, etc.
• Custom Buttons: You can inject additional user actions like Add Ticket.
• Smart Table Integration: smartTable() handles the dynamic table rendering with renderer and filter support.

---

🧰 For Developers

• You can modify filter options or add new renderer functions for custom behavior.
• Extend the hiddenCol array to exclude specific fields from the grid.
• Add custom card renderers for better mobile responsiveness.

---

🛠️ Use Cases in Merciglobal Cloud ERP

• Track all service request tickets in one centralized dashboard.
• Easily assign tickets to engineers.
• View service ticket data visually with essential customer/item info.
• Add new service requests directly from the dashboard interface.

---

📂 Backend Integration with smarttable.php

The smartTable() method in the frontend relies on the smarttable.php backend script to fetch and manipulate service request data. Here’s what it handles:

Main Functions:

• getTableData: Fetches data from trn_servicerequest table with customer, item, brand, engineer, and follow-up information.
• updateFollowup: Inserts a new follow-up action entry for a service request.
• getEngineers: Retrieves the list of engineers based on their group ID.
• assignEngineer: Records engineer assignment for a specific ticket.
• getItems: Provides a list of items for part requests.
• savePartRequest: Saves a part request linked to a service ticket.

Highlights:

• Uses dynamic SQL generation depending on table.
• Retrieves structured metadata using stru($table) for dynamic table building.
• Ensures data consistency using session and company/year identification via GetCompanyID() and GetYearid().
• Inserts include auditlog() to maintain logs for each automated entry.

This script plays a pivotal role in enabling all dynamic operations you see in the dashboard interface.

---

📞 Support

For any queries or customizations related to the Service Dashboard in Merciglobal Cloud ERP, reach out to the internal MerciGlobal Dev Team or open a support ticket.

🚀 Empower your service team with intuitive tools and actionable insights – only in Merciglobal Cloud ERP.