ui-soxo-bootstrap-core 2.4.24

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

@@ -0,0 +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}
+      </>
+    </>
+  );
+}

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

@@ -0,0 +1,60 @@
+.menu-dashboard-card {
+  height: 50px;
+  min-width: 97px;
+  padding: 2px;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px;
+  cursor: pointer;
+  &.selected {
+    border: 2px solid #b1ceeb;
+  }
+  .statistic-card-container {
+    .ant-statistic-title {
+      color: rgba(0, 0, 0, 0.45);
+      font-size: 10px;
+    }
+    .ant-statistic-content {
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 10px;
+      display: flex;
+      justify-content: center;
+
+    }
+  }
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  background-color: #fee2e2;
+  color: #b91c1c;
+  padding: 4px 12px;
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  background-color: #dc2626;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 6px;
+}
+
+.read-note-btn {
+  background-color: #e0f2fe;
+  color: #2563eb;
+  border: none;
+  padding: 4px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  cursor: pointer;
+  margin-top: 22px;
+  margin-left: 20px;
+  height: 25px;
+}

package/core/modules/dashboard/components/pop-query-dashboard/pop-query-dashboard.js

@@ -0,0 +1,66 @@
+
+import React, { useEffect, useState } from "react";
+
+import { Dashboard } from './../../../../models/'
+
+import { BasicTable } from './../../../../lib'
+
+import { Skeleton, Empty } from "antd";
+
+
+export default function PopQueryDashboard({ record, id }) {
+
+    const [loading, setLoading] = useState(false);
+
+    const [result, setResult] = useState([[], 0]);
+
+    useEffect(() => {
+
+        setLoading(true);
+
+        Dashboard.execPopQuery(id)
+            .then((response) => {
+
+                let reportData = {};
+
+                if (response.result) {
+
+                    reportData = response.result[0];
+
+                } else {
+
+                    if (response && response[0]) {
+
+                        reportData = response[0];
+
+                    } else {
+
+                        reportData = response;
+
+                    }
+
+                }
+
+                setResult(reportData)
+
+                setLoading(false);
+
+
+                console.log(record.tiletypeptr, result);
+            })
+            .catch(() => {
+                // setResult({ error: 'Error' });
+            });
+    }, []);
+
+    return <>
+
+        {loading ? (
+            <Skeleton active />
+        ) : (
+            <>
+                {result.length ? <BasicTable result={result} /> : <Empty />}
+            </>
+        )}
+    </>;
+}

package/core/modules/generic/components/generic-add/generic-add.js

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+
+import { Typography, Space, message, Card, Button } from 'antd';
+
+import { FormCreator } from './../../../../lib';
+
+import { ModelColumnsAPI } from '../../../../models';
+
+import './generic-add.scss';
+
+const { Title } = Typography;
+
+const GenericAdd = ({ model, callback, formContent }) => {
+
+    const [config, setConfig] = useState({ fields: [] })
+
+    useEffect(() => {
+
+        if (model.id) {
+
+            loadModelColumns();
+
+        } else {
+
+            // let model = {
+            //     fields: result.result
+            // }
+
+            setConfig(model)
+        }
+
+    }, []);
+
+    /**
+     * Load all the model columns
+     */
+    function loadModelColumns() {
+
+        ModelColumnsAPI.getFormColumns(model.id).then((result) => {
+
+            console.log(result);
+
+            let model = {
+                fields: result.result
+            }
+
+            setConfig(model)
+
+            console.log(model + "hello")
+
+        })
+    }
+
+    /**
+     *
+     */
+    function onSubmit(values) {
+
+        if (formContent && formContent.id) {
+
+            // save the data to the model
+            return model
+                .update({ id, values, user })
+                .then(() => {
+                    message.success('Operation Successful');
+                })
+                .catch(() => {
+                    message.error('Operation Failed');
+                });
+
+        } else {
+
+            // save the data to the model
+            return model
+                .add({ values })
+                .then(() => {
+                    message.success('Operation Successful');
+                })
+                .catch(() => {
+                    message.error('Operation Failed');
+                });
+        }
+
+    }
+
+    return (
+        <div className="generic-add">
+            {/* Table Header */}
+            <div className="table-header">
+                <div className="table-title">
+                    <Title level={4}>{model.name}</Title>
+
+                    {/* <p>{loading ? 'Loading records' : `${records[model.name].length} records`}</p> */}
+                </div>
+
+                <div className="table-bar">
+                    {/* Table Filters */}
+                    <div className="table-filters"></div>
+                    {/* Table Filters Ends */}
+
+                    <div className="table-actions">
+                        <div className="button-container">
+                            <Space size="small">
+                                {/* <Button type="secondary" size={'small'}>
+                                    Cancel
+                                </Button> */}
+                            </Space>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* Table Header Ends */}
+
+            <Card className="detail-content">
+                <FormCreator fields={config.fields} model={config} onSubmit={onSubmit} />
+            </Card>
+        </div>
+    );
+};
+
+export default GenericAdd;

package/core/modules/generic/components/generic-add/generic-add.scss

@@ -0,0 +1,13 @@
+.generic-add {
+
+    margin: 0px 10px;
+
+
+    .table-header {
+        .table-bar {
+            display: flex;
+            justify-content: space-between;
+            margin: 5px 0px;
+        }
+    }
+}