ui-soxo-bootstrap-core 2.6.6 → 2.6.7

package/core/modules/dashboard/components/dashboard-card/menu-dashboard-card.js

@@ -1,430 +1,430 @@
-import { useState, useEffect } from 'react';
-
-import { Modal, Skeleton, Alert, Typography, Button, Drawer } from 'antd';
-
-import { Dashboard } from './../../../../models/';
-
-import PopQueryDashboard from '../pop-query-dashboard/pop-query-dashboard';
-
-import { StatisticCard, BasicTable, ExtraInfoDetail } from './../../../../lib';
-
-import ReportingDashboard from '../../../reporting/components/reporting-dashboard/reporting-dashboard';
-
-import DashboardStatisticCard from '../../../../lib/elements/complex/statistic-card/dashboard-statistic-card';
-
-/** Title */
-const { Title } = Typography;
-
-/**
- * Dashboard Card
- *
- * @param {*} param0
- * @returns {string}
- */
-export default function MenuDashboardCard({ record, selectedCardId, scope, dbPtr, callback, onSelect, style, handleHide, homePage }) {
-  const isSelected = selectedCardId === record.id;
-
-  const [visible, setVisible] = useState(false);
-  const [popquery, setPopquery] = useState(false);
-
-  const [loading, setLoading] = useState(true);
-
-  const [result, setResult] = useState({});
-
-  const [showDrawer, setShowDrawer] = useState(false);
-
-  const [otherDetails, setOtherDetails] = useState({});
-  /**
-   * useEffect Hook
-   *
-   * Executes the `executeQuery` function when the component mounts.
-   */
-
-  useEffect(() => {
-    executeQuery(record.id);
-  }, []);
-
-  /**
-   * Executes the dashboard query and sets the result state with the fetched data.
-   * Handles both success and error responses.
-   *
-   * @param {string|number} id - The ID used to execute the query and fetch dashboard data.
-   * @returns {void} This function does not return anything.
-   */
-  async function executeQuery(id) {
-    setLoading(true);
-    if (dbPtr) {
-      dbPtr = dbPtr;
-    } else {
-      dbPtr = localStorage.db_ptr;
-    }
-
-    // Execute dashboard
-    try {
-      let response = await Dashboard.execDashboard(id, scope, dbPtr);
-
-      let reportData = {};
-
-      if (response.result) {
-        reportData = response.result[0];
-      } else {
-        if (response[0]) {
-          reportData = response[0];
-        }
-      }
-      if (reportData.length > 0) {
-        setResult(reportData);
-      } else {
-        // handleHide();
-      }
-
-      setLoading(false);
-      // })
-    } catch (error) {
-      setResult({ error: 'Error' });
-    }
-  }
-
-  /**
-   * Parses `other_details` from the record and applies styles.
-   * If `other_details` exists, it is parsed as JSON; otherwise, an empty object is used.
-   *
-   * @type {Object}
-   */
-  let styles = {};
-
-  if (record.other_details) {
-    styles = JSON.parse(record.other_details);
-  }
-
-  /**
-   * Opens a pop-up modal and passes the record to the callback function.
-   *
-   * @param {Object} record - The record data to be passed.
-   * @returns {void} This function does not return anything.
-   */
-
-  function viewPopQueryModal(record) {
-    let otherDetails;
-
-    if (record.other_details) {
-      otherDetails = JSON.parse(record.other_details);
-    }
-
-    if (otherDetails?.script_id) {
-      //If viewMode = 'modal' → open modal
-      if (otherDetails?.viewMode === 'modal') {
-        setVisible(true);
-        //If viewMode = 'drawer' → open drawer
-      } else if (otherDetails?.viewMode === 'drawer') {
-        setShowDrawer(true);
-        // callback(record, scope)
-      } else {
-        //Otherwise → fallback callback
-        callback(record);
-      }
-      //No script_id but has viewMode → set popquery
-    } else if (otherDetails?.viewMode) {
-      // No script_id but has viewMode
-      setPopquery(true);
-    } else {
-      // Default
-      callback(record);
-    }
-
-    setOtherDetails(otherDetails);
-    onSelect();
-  }
-
-  /**
-   *
-   */
-  // function executePopQuery() { }
-
-  var props = {};
-  /**
-   * Stores component properties, including the loading state.
-   *
-   * @type {Object}
-   */
-
-  if (loading) {
-    props.loading = true;
-  }
-  function onCancel() {
-    setVisible(false);
-  }
-
-  /**
-   * Convert nested style objects into a valid CSS string.
-   * @param {*} parentClass
-   * @param {*} nestedStyles
-   * @returns
-   */
-  const convertNestedStylesToCSS = (parentClass, nestedStyles) => {
-    let css = '';
-    // Iterate through each child selector and its corresponding style object
-    for (const [childSelector, styleObj] of Object.entries(nestedStyles)) {
-      if (typeof styleObj !== 'object') continue;
-
-      const fullSelector = `${parentClass} ${childSelector}`;
-      const rules = Object.entries(styleObj)
-        .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}:${value};`)
-        .join(' ');
-      css += `${fullSelector} { ${rules} }\n`;
-    }
-    // Append the formatted CSS block
-    return css;
-  };
-
-  /**
-   * defaultStyles for the cards
-   */
-  const defaultStyles = {
-    '.menu-dashboard-card': {
-      '.text-section': {
-        fontSize: '13px',
-        textAlign: 'justify',
-      },
-      '.table-section': {
-        width: '100%',
-      },
-      height: '11px',
-      // minWidth: '130px',
-      padding: '17px 7px',
-      fontSize: '10px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      // margin: '10px',
-      cursor: 'pointer',
-      borderRadius:'30px',
-      boxShadow: "0 0.5px 0.5px rgba(0,0,0,0.08)",
-
-      '&.selected': {
-        border: '2px solid #b1ceeb',
-      },
-
-      '.statistic-card-container': {
-        '.ant-statistic-title': {
-          color: 'rgba(0, 0, 0, 0.45)',
-          fontSize: '10px',
-          marginBottom: '0px',
-        },
-        '.ant-statistic-content': {
-          color: 'rgba(0, 0, 0, 0.85)',
-          fontSize: '10px',
-          display: 'flex',
-          justifyContent: 'center',
-        },
-        '.ant-statistic':{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          gap:'5px'
-        }
-      },
-    },
-  };
-  // Extract nested styles for the ".statistic-card-container"
-  // from the deeply nested style object (if available).
-  const nestedStyles = styles?.style?.['.menu-dashboard']?.['.menu-dashboard-card']?.['.statistic-card-container'];
-
-  // Generate the dynamic CSS string using convertNestedStylesToCSS.
-  // 1. Base selector: ".statistic-card-container"
-  // 2. Styles: Use `nestedStyles` if available,
-  //    otherwise fall back to default styles from `defaultStyles`.
-  const dynamicCSS = convertNestedStylesToCSS(
-    '.statistic-card-container',
-    nestedStyles || defaultStyles['.menu-dashboard-card']?.['.statistic-card-container'] || {}
-  );
-  /**
-   * Renders different dashboard tiles based on the `tiletypeptr` of the record.
-   *
-   * @param {Object} record - The record containing the tile information and tile type.
-   * @returns {JSX.Element | string} The rendered dashboard tile component or an empty string.
-   */
-  let span = 24;
-  function displayDashboardTile(record) {
-    switch (record.tiletypeptr) {
-      case 'BASIC': {
-        if (homePage) {
-      
-          return (
-            <div className={`menu-dashboard-card card ${isSelected ? 'selected' : ''}`} onClick={() => viewPopQueryModal(record)} style={{padding:"14px 20px",width:"320px",border: "1px solid rgb(239 ,230 ,230)" ,boxShadow: "0 0.5px 0.5px rgba(0,0,0,0.08)"}}>
-              <Title
-                    // Apply styles for the ".text-section"
-                    // Priority: use custom styles from `styles` if provided,
-                    // otherwise fallback to default styles
-                    style={
-                      styles?.style?.['.menu-dashboard']?.['.menu-dashboard-card']?.['.text-section'] ||
-                      defaultStyles['.menu-dashboard-card']?.['.text-section']
-                    }
-                  >
-                    {record.text}
-              </Title>
-                {/* <StatisticCard result={result[0]} {...props} /> */}
-                {/* for home dashboard */}
-                <DashboardStatisticCard result={result[0]} {...props} />
-            </div>
-          );
-        } else {
-          return (
-            <div
-            // Inline style merging:
-              // 1. Base styles → from `styles` object if available, otherwise from `defaultStyles`
-              // 2. If the card is selected → merge "&.selected" styles (custom or default)
-              className={`menu-dashboard-card card ${isSelected ? 'selected' : ''}`}
-              onClick={() => viewPopQueryModal(record)}
-              style={{
-                ...(styles?.style?.['.menu-dashboard']?.['.menu-dashboard-card'] || defaultStyles['.menu-dashboard-card']),
-                ...(isSelected
-                  ? styles?.style?.['.menu-dashboard']?.['.menu-dashboard-card']?.['&.selected'] ||
-                    defaultStyles['.menu-dashboard-card']?.['&.selected'] ||
-                    {}
-                  : {}),
-              }}
-            >
-              {dynamicCSS && <style dangerouslySetInnerHTML={{ __html: dynamicCSS }} />}
-              <div className="statistic-card-container selected">
-                <StatisticCard result={result[0]} {...props} />
-              </div>
-            </div>
-          );
-        }
-      }
-      case 'TABLE':
-        return (
-          // Apply styles for the ".table-section"
-          // Priority: use custom styles from `styles` if present,
-          // otherwise fall back to default styles
-          <div style={styles?.style?.['.menu-dashboard']?.['.table-section'] || defaultStyles['.menu-dashboard-card']?.['.table-section']}>
-            <Title
-                    // Apply styles for the ".text-section"
-                    // Priority: use custom styles from `styles` if provided,
-                    // otherwise fallback to default styles
-                    style={
-                      styles?.style?.['.menu-dashboard']?.['.menu-dashboard-card']?.['.text-section'] ||
-                      defaultStyles['.menu-dashboard-card']?.['.text-section']
-                    }
-                  >
-                    {record.text}
-                  </Title>
-            <BasicTable styles={styles} result={result} {...props} />
-            {styles?.action ? (
-              <span
-                style={{ display: 'flex', justifyContent: 'flex-end', cursor: 'pointer', fontWeight: 'bold', fontSize: '16px' }}
-                className="link"
-                onClick={() => viewPopQueryModal(record)}
-              >
-                View
-              </span>
-            ) : null}
-          </div>
-        );
-
-      case 'LINEGPH':
-        return null;
-      // return <BarGraph data={result} {...props} />;
-
-      default:
-        return '';
-    }
-  }
-
-  function onClose() {
-    setShowDrawer(false);
-  }
-  function onCancelPopQuery() {
-    setPopquery(false);
-  }
-
-  return (
-    <>
-      {loading ? (
-        // <Skeleton />
-        <Skeleton
-          active
-          title={false}
-          paragraph={{ rows: 1, width: ['80%', '50%'] }}
-          style={{ width: 100, padding: 20 }}
-        />
-      ) : (
-        <>
-          {result.length > 0 ? (
-            <>
-              {/* <div className='text-section'> */}
-
-              {/* </div> */}
-
-              <div>
-                <div className="text-section">
-                  {/* <Title
-                    // Apply styles for the ".text-section"
-                    // Priority: use custom styles from `styles` if provided,
-                    // otherwise fallback to default styles
-                    style={
-                      styles?.style?.['.menu-dashboard']?.['.menu-dashboard-card']?.['.text-section'] ||
-                      defaultStyles['.menu-dashboard-card']?.['.text-section']
-                    }
-                  >
-                    {record.text}
-                  </Title> */}
-                </div>
-                <div>
-                  {result.error ? (
-                    <>
-                      <Alert message="Error loading values" type="error" showIcon />
-                    </>
-                  ) : (
-                    // <>{loading ? <Skeleton /> : {(result.length ?displayDashboardTile(record)}:null)}</>
-                    <> {loading ? <Skeleton /> : result.length ? displayDashboardTile(record) : null}</>
-                  )}
-                </div>
-              </div>
-            </>
-          ) : null}
-        </>
-      )}
-      {/* Render reporting dashboard inside the modal */}
-      <Modal
-        width="80%"
-        destroyOnClose={true}
-        visible={visible}
-        title={record.text}
-        footer={null}
-        okText="Create"
-        cancelText="Cancel"
-        onCancel={onCancel}
-        onOk={() => {}}
-      >
-        <ReportingDashboard reportId={otherDetails.script_id}></ReportingDashboard>
-      </Modal>
-      {/** end  */}
-      {/* Render the PopQueryDashboard inside the modal */}
-      <Modal
-        width="80%"
-        destroyOnClose={true}
-        visible={popquery}
-        title={record.text}
-        footer={null}
-        okText="Create"
-        cancelText="Cancel"
-        onCancel={onCancelPopQuery}
-        onOk={() => {}}
-      >
-        <PopQueryDashboard record={record} id={record.id} />
-      </Modal>
-      {/** end */}
-      <>
-        {/* Inside the drawer, render ReportingDashboard
-        Passing `reportId` and `scope` as props */}
-        {showDrawer ? (
-          <Drawer width={'85%'} title={otherDetails?.groupcaption} onClose={onClose} open={showDrawer}>
-            <ReportingDashboard reportId={otherDetails.script_id} scope={scope}></ReportingDashboard>
-          </Drawer>
-        ) : null}
-      </>
-    </>
-  );
-}
+import { useState, useEffect } from 'react';
+
+import { Modal, Skeleton, Alert, Typography, Button, Drawer } from 'antd';
+
+import { Dashboard } from './../../../../models/';
+
+import PopQueryDashboard from '../pop-query-dashboard/pop-query-dashboard';
+
+import { StatisticCard, BasicTable, ExtraInfoDetail } from './../../../../lib';
+
+import ReportingDashboard from '../../../reporting/components/reporting-dashboard/reporting-dashboard';
+
+import DashboardStatisticCard from '../../../../lib/elements/complex/statistic-card/dashboard-statistic-card';
+
+/** Title */
+const { Title } = Typography;
+
+/**
+ * Dashboard Card
+ *
+ * @param {*} param0
+ * @returns {string}
+ */
+export default function MenuDashboardCard({ record, selectedCardId, scope, dbPtr, callback, onSelect, style, handleHide, homePage }) {
+  const isSelected = selectedCardId === record.id;
+
+  const [visible, setVisible] = useState(false);
+  const [popquery, setPopquery] = useState(false);
+
+  const [loading, setLoading] = useState(true);
+
+  const [result, setResult] = useState({});
+
+  const [showDrawer, setShowDrawer] = useState(false);
+
+  const [otherDetails, setOtherDetails] = useState({});
+  /**
+   * useEffect Hook
+   *
+   * Executes the `executeQuery` function when the component mounts.
+   */
+
+  useEffect(() => {
+    executeQuery(record.id);
+  }, []);
+
+  /**
+   * Executes the dashboard query and sets the result state with the fetched data.
+   * Handles both success and error responses.
+   *
+   * @param {string|number} id - The ID used to execute the query and fetch dashboard data.
+   * @returns {void} This function does not return anything.
+   */
+  async function executeQuery(id) {
+    setLoading(true);
+    if (dbPtr) {
+      dbPtr = dbPtr;
+    } else {
+      dbPtr = localStorage.db_ptr;
+    }
+
+    // Execute dashboard
+    try {
+      let response = await Dashboard.execDashboard(id, scope, dbPtr);
+
+      let reportData = {};
+
+      if (response.result) {
+        reportData = response.result[0];
+      } else {
+        if (response[0]) {
+          reportData = response[0];
+        }
+      }
+      if (reportData.length > 0) {
+        setResult(reportData);
+      } else {
+        // handleHide();
+      }
+
+      setLoading(false);
+      // })
+    } catch (error) {
+      setResult({ error: 'Error' });
+    }
+  }
+
+  /**
+   * Parses `other_details` from the record and applies styles.
+   * If `other_details` exists, it is parsed as JSON; otherwise, an empty object is used.
+   *
+   * @type {Object}
+   */
+  let styles = {};
+
+  if (record.other_details) {
+    styles = JSON.parse(record.other_details);
+  }
+
+  /**
+   * Opens a pop-up modal and passes the record to the callback function.
+   *
+   * @param {Object} record - The record data to be passed.
+   * @returns {void} This function does not return anything.
+   */
+
+  function viewPopQueryModal(record) {
+    let otherDetails;
+
+    if (record.other_details) {
+      otherDetails = JSON.parse(record.other_details);
+    }
+
+    if (otherDetails?.script_id) {
+      //If viewMode = 'modal' → open modal
+      if (otherDetails?.viewMode === 'modal') {
+        setVisible(true);
+        //If viewMode = 'drawer' → open drawer
+      } else if (otherDetails?.viewMode === 'drawer') {
+        setShowDrawer(true);
+        // callback(record, scope)
+      } else {
+        //Otherwise → fallback callback
+        callback(record);
+      }
+      //No script_id but has viewMode → set popquery
+    } else if (otherDetails?.viewMode) {
+      // No script_id but has viewMode
+      setPopquery(true);
+    } else {
+      // Default
+      callback(record);
+    }
+
+    setOtherDetails(otherDetails);
+    onSelect();
+  }
+
+  /**
+   *
+   */
+  // function executePopQuery() { }
+
+  var props = {};
+  /**
+   * Stores component properties, including the loading state.
+   *
+   * @type {Object}
+   */
+
+  if (loading) {
+    props.loading = true;
+  }
+  function onCancel() {
+    setVisible(false);
+  }
+
+  /**
+   * Convert nested style objects into a valid CSS string.
+   * @param {*} parentClass
+   * @param {*} nestedStyles
+   * @returns
+   */
+  const convertNestedStylesToCSS = (parentClass, nestedStyles) => {
+    let css = '';
+    // Iterate through each child selector and its corresponding style object
+    for (const [childSelector, styleObj] of Object.entries(nestedStyles)) {
+      if (typeof styleObj !== 'object') continue;
+
+      const fullSelector = `${parentClass} ${childSelector}`;
+      const rules = Object.entries(styleObj)
+        .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}:${value};`)
+        .join(' ');
+      css += `${fullSelector} { ${rules} }\n`;
+    }
+    // Append the formatted CSS block
+    return css;
+  };
+
+  /**
+   * defaultStyles for the cards
+   */
+  const defaultStyles = {
+    '.menu-dashboard-card': {
+      '.text-section': {
+        fontSize: '13px',
+        textAlign: 'justify',
+      },
+      '.table-section': {
+        width: '100%',
+      },
+      height: '11px',
+      // minWidth: '130px',
+      padding: '17px 7px',
+      fontSize: '10px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      // margin: '10px',
+      cursor: 'pointer',
+      borderRadius:'30px',
+      boxShadow: "0 0.5px 0.5px rgba(0,0,0,0.08)",
+
+      '&.selected': {
+        border: '2px solid #b1ceeb',
+      },
+
+      '.statistic-card-container': {
+        '.ant-statistic-title': {
+          color: 'rgba(0, 0, 0, 0.85)',
+          fontSize: '10px',
+          marginBottom: '0px',
+        },
+        '.ant-statistic-content': {
+          color: 'rgba(0, 0, 0, 0.85)',
+          fontSize: '10px',
+          display: 'flex',
+          justifyContent: 'center',
+        },
+        '.ant-statistic':{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          gap:'5px'
+        }
+      },
+    },
+  };
+  // Extract nested styles for the ".statistic-card-container"
+  // from the deeply nested style object (if available).
+  const nestedStyles = styles?.style?.['.menu-dashboard']?.['.menu-dashboard-card']?.['.statistic-card-container'];
+
+  // Generate the dynamic CSS string using convertNestedStylesToCSS.
+  // 1. Base selector: ".statistic-card-container"
+  // 2. Styles: Use `nestedStyles` if available,
+  //    otherwise fall back to default styles from `defaultStyles`.
+  const dynamicCSS = convertNestedStylesToCSS(
+    '.statistic-card-container',
+    nestedStyles || defaultStyles['.menu-dashboard-card']?.['.statistic-card-container'] || {}
+  );
+  /**
+   * Renders different dashboard tiles based on the `tiletypeptr` of the record.
+   *
+   * @param {Object} record - The record containing the tile information and tile type.
+   * @returns {JSX.Element | string} The rendered dashboard tile component or an empty string.
+   */
+  let span = 24;
+  function displayDashboardTile(record) {
+    switch (record.tiletypeptr) {
+      case 'BASIC': {
+        if (homePage) {
+      
+          return (
+            <div className={`menu-dashboard-card card ${isSelected ? 'selected' : ''}`} onClick={() => viewPopQueryModal(record)} style={{padding:"14px 20px",width:"320px",border: "1px solid rgb(239 ,230 ,230)" ,boxShadow: "0 0.5px 0.5px rgba(0,0,0,0.08)"}}>
+              <Title
+                    // Apply styles for the ".text-section"
+                    // Priority: use custom styles from `styles` if provided,
+                    // otherwise fallback to default styles
+                    style={
+                      styles?.style?.['.menu-dashboard']?.['.menu-dashboard-card']?.['.text-section'] ||
+                      defaultStyles['.menu-dashboard-card']?.['.text-section']
+                    }
+                  >
+                    {record.text}
+              </Title>
+                {/* <StatisticCard result={result[0]} {...props} /> */}
+                {/* for home dashboard */}
+                <DashboardStatisticCard result={result[0]} {...props} />
+            </div>
+          );
+        } else {
+          return (
+            <div
+            // Inline style merging:
+              // 1. Base styles → from `styles` object if available, otherwise from `defaultStyles`
+              // 2. If the card is selected → merge "&.selected" styles (custom or default)
+              className={`menu-dashboard-card card ${isSelected ? 'selected' : ''}`}
+              onClick={() => viewPopQueryModal(record)}
+              style={{
+                ...(styles?.style?.['.menu-dashboard']?.['.menu-dashboard-card'] || defaultStyles['.menu-dashboard-card']),
+                ...(isSelected
+                  ? styles?.style?.['.menu-dashboard']?.['.menu-dashboard-card']?.['&.selected'] ||
+                    defaultStyles['.menu-dashboard-card']?.['&.selected'] ||
+                    {}
+                  : {}),
+              }}
+            >
+              {dynamicCSS && <style dangerouslySetInnerHTML={{ __html: dynamicCSS }} />}
+              <div className="statistic-card-container selected">
+                <StatisticCard result={result[0]} {...props} />
+              </div>
+            </div>
+          );
+        }
+      }
+      case 'TABLE':
+        return (
+          // Apply styles for the ".table-section"
+          // Priority: use custom styles from `styles` if present,
+          // otherwise fall back to default styles
+          <div style={styles?.style?.['.menu-dashboard']?.['.table-section'] || defaultStyles['.menu-dashboard-card']?.['.table-section']}>
+            <Title
+                    // Apply styles for the ".text-section"
+                    // Priority: use custom styles from `styles` if provided,
+                    // otherwise fallback to default styles
+                    style={
+                      styles?.style?.['.menu-dashboard']?.['.menu-dashboard-card']?.['.text-section'] ||
+                      defaultStyles['.menu-dashboard-card']?.['.text-section']
+                    }
+                  >
+                    {record.text}
+                  </Title>
+            <BasicTable styles={styles} result={result} {...props} />
+            {styles?.action ? (
+              <span
+                style={{ display: 'flex', justifyContent: 'flex-end', cursor: 'pointer', fontWeight: 'bold', fontSize: '16px' }}
+                className="link"
+                onClick={() => viewPopQueryModal(record)}
+              >
+                View
+              </span>
+            ) : null}
+          </div>
+        );
+
+      case 'LINEGPH':
+        return null;
+      // return <BarGraph data={result} {...props} />;
+
+      default:
+        return '';
+    }
+  }
+
+  function onClose() {
+    setShowDrawer(false);
+  }
+  function onCancelPopQuery() {
+    setPopquery(false);
+  }
+
+  return (
+    <>
+      {loading ? (
+        // <Skeleton />
+        <Skeleton
+          active
+          title={false}
+          paragraph={{ rows: 1, width: ['80%', '50%'] }}
+          style={{ width: 100, padding: 20 }}
+        />
+      ) : (
+        <>
+          {result.length > 0 ? (
+            <>
+              {/* <div className='text-section'> */}
+
+              {/* </div> */}
+
+              <div>
+                <div className="text-section">
+                  {/* <Title
+                    // Apply styles for the ".text-section"
+                    // Priority: use custom styles from `styles` if provided,
+                    // otherwise fallback to default styles
+                    style={
+                      styles?.style?.['.menu-dashboard']?.['.menu-dashboard-card']?.['.text-section'] ||
+                      defaultStyles['.menu-dashboard-card']?.['.text-section']
+                    }
+                  >
+                    {record.text}
+                  </Title> */}
+                </div>
+                <div>
+                  {result.error ? (
+                    <>
+                      <Alert message="Error loading values" type="error" showIcon />
+                    </>
+                  ) : (
+                    // <>{loading ? <Skeleton /> : {(result.length ?displayDashboardTile(record)}:null)}</>
+                    <> {loading ? <Skeleton /> : result.length ? displayDashboardTile(record) : null}</>
+                  )}
+                </div>
+              </div>
+            </>
+          ) : null}
+        </>
+      )}
+      {/* Render reporting dashboard inside the modal */}
+      <Modal
+        width="80%"
+        destroyOnClose={true}
+        visible={visible}
+        title={record.text}
+        footer={null}
+        okText="Create"
+        cancelText="Cancel"
+        onCancel={onCancel}
+        onOk={() => {}}
+      >
+        <ReportingDashboard reportId={otherDetails.script_id}></ReportingDashboard>
+      </Modal>
+      {/** end  */}
+      {/* Render the PopQueryDashboard inside the modal */}
+      <Modal
+        width="80%"
+        destroyOnClose={true}
+        visible={popquery}
+        title={record.text}
+        footer={null}
+        okText="Create"
+        cancelText="Cancel"
+        onCancel={onCancelPopQuery}
+        onOk={() => {}}
+      >
+        <PopQueryDashboard record={record} id={record.id} />
+      </Modal>
+      {/** end */}
+      <>
+        {/* Inside the drawer, render ReportingDashboard
+        Passing `reportId` and `scope` as props */}
+        {showDrawer ? (
+          <Drawer width={'85%'} title={otherDetails?.groupcaption} onClose={onClose} open={showDrawer}>
+            <ReportingDashboard reportId={otherDetails.script_id} scope={scope}></ReportingDashboard>
+          </Drawer>
+        ) : null}
+      </>
+    </>
+  );
+}