ui-soxo-bootstrap-core 2.4.24

package/core/lib/elements/basic/json-input/json-input.js

@@ -0,0 +1,51 @@
+
+
+
+/**
+ * JSON Input Component
+ */
+
+import React from 'react';
+
+import JSONInput from 'react-json-editor-ajrm';
+
+import locale from 'react-json-editor-ajrm/locale/en';
+
+
+//  import './card.scss';
+
+/**
+ * Use `Card` for Card you need to keep.
+ */
+export default function JSONInputComponent({
+    className,
+    onChange,
+    value = {}
+}) {
+
+
+    const onCallback = (value, arg) => {
+
+        console.log(value, arg);
+
+        onChange(value.jsObject);
+        // onChange()
+    }
+
+
+
+    return <div className={`card card-shadow ${className}`}>
+
+        <JSONInput
+            waitAfterKeyPress={800}
+            onChange={onCallback}
+            id='a_unique_id'
+            placeholder={value}
+            // colors={darktheme}
+            locale={locale}
+            height='505px'
+            width='100%'
+        />
+
+    </div>;
+}

package/core/lib/elements/basic/menu-dashboard/menu-dashboard.js

@@ -0,0 +1,216 @@
+/**
+ * MenuDashBoard Component
+ *
+ * This component is responsible for rendering the menu dashboard.
+ * It fetches dashboard data based on user roles and displays them using `MenuDashboardCard` components.
+ */
+
+import { useState, useEffect, useContext } from 'react';
+import { Skeleton, Row, Card } from 'antd';
+import { GlobalContext } from '../../../Store';
+import MenuDashboardCard from '../../../../modules/dashboard/components/dashboard-card/menu-dashboard-card';
+import { Dashboard } from '../../../../models';
+
+import './menu-dashboard.scss';
+
+/**
+ * MenuDashBoard Component
+ *
+ * Renders the dashboard menu based on the provided `dashBoardIds`.
+ * Fetches dashboard data and updates the UI accordingly.
+ *
+ * @param {Object} props - The component props
+ * @param {Array} props.dashBoardIds - List of dashboard IDs to fetch data for
+ * @param {Function} props.callback - Callback function for handling dashboard interactions
+ * @returns {JSX.Element} The rendered MenuDashBoard component
+ */
+export default function MenuDashBoardComponent({ dashBoardIds, scope, dbPtr, callback, record, homePage, activeId }) {
+  const { user = {} } = useContext(GlobalContext);
+
+  const [loading, setLoading] = useState(false);
+  const [visible, setVisible] = useState(true);
+  const [list, setList] = useState([]);
+
+  const [selectedCardId, setSelectedCardId] = useState(false);
+
+  /**
+   * useEffect Hook
+   *
+   * Triggers the `getDashboard` function whenever the `user` object changes.
+   * Ensures dashboard data is fetched whenever a user logs in or changes.
+   */
+  useEffect(() => {
+    if (dashBoardIds) {
+      getDashboard(); //Patiant list get function
+    }
+  }, [user]);
+
+  // if active Id exist highlight that card
+  useEffect(() => {
+    if (activeId) {
+      setSelectedCardId(activeId);
+    } else {
+      setSelectedCardId(false);
+    }
+  }, [activeId]);
+
+  /**
+   * getDashboard Function
+   *
+   * Fetches the dashboard menu items based on `dashBoardIds`.
+   * Updates the `list` state with the fetched data.
+   */
+  async function getDashboard() {
+    setLoading(true);
+
+    // Check if there are dashboard IDs to fetch data for
+    if (dashBoardIds.length > 0) {
+      if (!dbPtr) dbPtr = localStorage.db_ptr;
+      await Dashboard.loadMenuDashboards(dashBoardIds, dbPtr).then((response) => {
+        let apiResponse = {};
+        // @todo When the reporting tool is build , we have to consider all of these
+        if (response.result && response.result.length) {
+          apiResponse = response.result;
+        } else if (response && response.length) {
+          apiResponse = response;
+        }
+
+        // Group by groupPtr inside other_details
+        const groupedData = {};
+
+        apiResponse.forEach((item) => {
+          try {
+            const otherDetails = item.other_details ? JSON.parse(item.other_details) : {};
+
+            const groupPtr = otherDetails.groupPtr;
+            const dashboardItem = {
+              ...item, // Spread other properties of the item
+            };
+            const groupCaption = otherDetails.groupcaption || ''; // default empty string if not available
+            if (groupPtr) {
+              if (!groupedData[groupPtr]) {
+                groupedData[groupPtr] = {
+                  groupPtr,
+                  groupCaption,
+                  otherDetails,
+                  // colorCode,
+                  dashboards: [],
+                };
+              }
+
+              // Optional: update groupCaption if it exists newly (in case not present earlier)
+              if (groupCaption) {
+                groupedData[groupPtr].groupCaption = groupCaption;
+              }
+
+              // Create a new dashboard item that includes style and colorCode
+
+              // Push the new dashboard item into the dashboards array
+              groupedData[groupPtr].dashboards.push(dashboardItem);
+            } else {
+              //Define a default key for dashboards that don't belong to any group
+              const defaultKey = 'noGroup';
+              //// Check if the "noGroup" entry does not exist in groupedData
+              if (!groupedData[defaultKey]) {
+                // If it doesn’t exist, initialize it with default structure
+                groupedData[defaultKey] = {
+                  groupPtr: null, // or ''
+                  groupCaption: '',
+                  otherDetails: {},
+                  dashboards: [],
+                };
+              }
+
+              groupedData[defaultKey].dashboards.push(dashboardItem);
+            }
+          } catch (error) {
+            console.error('Error parsing other_details:', error);
+          }
+        });
+
+        // Convert groupedData to array format
+        const groupedArray = Object.values(groupedData);
+
+        setList(groupedArray);
+
+        setLoading(false);
+      });
+    }
+
+    setLoading(false);
+  }
+
+  function onValueChange() {
+    setVisible(false);
+  }
+  //  access the style configuration for ".menu-dashboard"
+  const dashboardStyle = list[0]?.otherDetails?.style?.['.menu-dashboard'];
+
+  return (
+    <>
+      {loading ? (
+        <Skeleton />
+      ) : visible ? (
+        homePage ? (
+          <div
+            className="dashboard-section"
+            style={{
+              ...dashboardStyle?.['.dashboard-section'],
+              marginTop: window.innerWidth < 600 ? 10 : -15,
+            }}
+          >
+            {list.map((group) => (
+              <Card key={group.groupPtr} bordered={group.groupCaption}>
+                <h3 style={dashboardStyle?.['.group-catption']}>{group.groupCaption}</h3>
+
+                <Row gutter={20}>
+                  {group.dashboards
+                    .sort((a, b) => a.slno - b.slno)
+                    .map((entry, key) => (
+                      <MenuDashboardCard
+                          scope={scope}
+                          dbPtr={dbPtr}
+                          key={key}
+                          record={entry}
+                          callback={callback}
+                          selectedCardId={selectedCardId}
+                          onSelect={() => setSelectedCardId(entry.id)}
+                          homePage={true}
+                      />
+                    ))}
+                </Row>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="dashboard-section" style={dashboardStyle?.['.dashboard-section']}>
+            {list.map((group) => (
+              <Card key={group.groupPtr} bordered={false}>
+                <h4>{group.groupCaption}</h4>
+
+                <Row gutter={10} style={{gap:"6px"}}>
+                  {group.dashboards
+                  .sort((a, b) => a.slno - b.slno)
+                  .map((entry, key) => (
+                    <MenuDashboardCard
+                      key={key}
+                      scope={scope}
+                      dbPtr={dbPtr}
+                      record={entry}
+                      callback={callback}
+                      selectedCardId={selectedCardId}
+                      onSelect={() => setSelectedCardId(entry.id)}
+                      homePage={false}
+                    />
+                  ))}
+                </Row>
+              </Card>
+            ))}
+          </div>
+        )
+      ) : (
+        <>No result</>
+      )}
+    </>
+  );
+}

package/core/lib/elements/basic/menu-dashboard/menu-dashboard.scss

@@ -0,0 +1,28 @@
+.dashboard-section {
+  margin-bottom: 10px;
+  gap: 10px;
+  padding: 5px;
+  @media only screen and (max-width: 768px) {
+    .ant-row {
+      max-width: 100%;
+      overflow: scroll;
+    }
+  }
+
+  .ant-card {
+    background: transparent !important;
+    box-shadow: none !important;
+    border: none !important;
+  }
+
+  .ant-card-body {
+    background: transparent !important;
+    margin-top: 0px !important;
+    padding-top: 0px !important;
+  }
+}
+
+// .ant-card-body{
+//     margin-left: 10px;
+//     margin-right: 10px;
+// }

package/core/lib/elements/basic/modal/modal.js

@@ -0,0 +1,64 @@
+/**
+ * @author Sameena Ammed
+ * This component is used as the custom modal
+ * antd Modal is imported here
+ */
+import React, { useState } from "react";
+import { Modal as AntdModal, Button } from "antd";
+import PropTypes from "prop-types";
+// import 'antd/dist/antd.css';
+
+export default function Modal({
+  children,
+  onOk = () => {},
+  onCancel = () => {},
+  destroyOnClose = false,
+  width = "50%",
+}) {
+  const [visible, setVisible] = useState(false);
+
+  const showModal = () => {
+    setVisible(true);
+  };
+
+  const handleOk = () => {
+    setVisible(false);
+    onOk();
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+    onCancel();
+  };
+
+  return (
+    <>
+      <Button onClick={showModal}>Open Modal</Button>
+      <AntdModal
+        visible={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        destroyOnClose={destroyOnClose}
+        width={width}
+      >
+        {children}
+      </AntdModal>
+    </>
+  );
+}
+
+
+Modal.propTypes = {
+  /** A boolean value indicating whether the modal is visible or hidden. */
+  visible: PropTypes.bool.isRequired,
+  /** The content of the modal, typically a set of components. */
+  children: PropTypes.node.isRequired,
+  /** A function to be called when the user clicks the "Ok" button. If not provided, a default empty function is used. */
+  onOk: PropTypes.func,
+  /** A function to be called when the user clicks the "Cancel" button. If not provided, a default empty function is used. */
+  onCancel: PropTypes.func,
+  /** A boolean value indicating whether the modal should be destroyed when closed. If set to true, the modal will be removed from the DOM when closed. Default value is false. */
+  destroyOnClose: PropTypes.bool,
+  /** A string value representing the width of the modal. Default value is "50%". */
+  width: PropTypes.string,
+};

package/core/lib/elements/basic/modal/readme.md

@@ -0,0 +1,62 @@
+## Usage
+
+Modals can be used for displaying forms, images, videos, or any other type of content that requires user interaction. As like every component, you can use Modal by importing the Modal component into your React application.
+
+```jsx
+import Modal from "./modal";
+
+<Modal
+  visible={true}
+  onOk={() => console.log('OK clicked')}
+  onCancel={() => console.log('Cancel clicked')}
+  destroyOnClose={true}
+  width="40%"
+>
+  <p>Modal content goes here</p>
+</Modal>;
+```
+
+```sh
+import React from "react";
+import { Modal as AntdModal } from "antd";
+
+export default function Modal({
+  children,
+  onOk = () => {},
+  onCancel = () => {},
+  destroyOnClose = false,
+  width = "50%",
+}) {
+  const [visible, setVisible] = useState(false);
+
+  const showModal = () => {
+    setVisible(true);
+  };
+
+  const handleOk = () => {
+    setVisible(false);
+    onOk();
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+    onCancel();
+  };
+
+  return (
+    <>
+      <Button onClick={showModal}>Open Modal</Button>
+      <AntdModal
+        visible={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        destroyOnClose={destroyOnClose}
+        width={width}
+      >
+        {children}
+      </AntdModal>
+    </>
+  );
+}
+
+```

package/core/lib/elements/basic/popconfirm/popconfirm.js

@@ -0,0 +1,18 @@
+/**
+ *  
+ * Component for antd pop confirm
+ */
+import { Popconfirm as AntdPopconfirm } from "antd";
+export default function Popconfirm({ title, onConfirm, onCancel, okText, cancelText, children }) {
+          return (
+                    <AntdPopconfirm
+                              title={title}
+                              onConfirm={onConfirm}
+                              onCancel={onCancel}
+                              okText={okText}
+                              cancelText={cancelText}>
+                              {children}
+
+                    </AntdPopconfirm>
+          )
+}

package/core/lib/elements/basic/popover/popover.js

@@ -0,0 +1,13 @@
+/**
+ *  
+ * Component for antd pop over
+ */
+
+import { Popover as AntdPopover } from "antd";
+export default function Popover({content,title,children}){
+          return (
+                    <AntdPopover content={content} title={title}>
+                              {children}
+                    </AntdPopover>
+          )
+}

package/core/lib/elements/basic/radio/radio.js

@@ -0,0 +1,18 @@
+/**
+ *  @author Sameena
+ * Component for antd Radio
+ */
+
+import React from "react";
+
+
+import { Radio } from 'antd';
+import Group from 'antd/lib/radio/group';
+import Button from 'antd/lib/radio/radioButton';
+
+
+const AntdRadio=Object.assign(Radio,{
+  Group,
+  Button
+})
+export default AntdRadio;

package/core/lib/elements/basic/rangepicker/rangepicker.js

@@ -0,0 +1,51 @@
+import { DatePicker } from 'antd';
+import moment from 'moment-timezone';
+import PropTypes from 'prop-types';
+import './rangepicker.scss';
+
+const { RangePicker } = DatePicker;
+
+export default function RangePickerComponent({ onChange, value, ranges }) {
+  // value is still: [moment, moment]
+  const startDate = value[0];
+  const endDate = value[1];
+
+  function handleChange(dates) {
+    if (!dates) {
+      onChange(null);
+      return;
+    }
+
+    // Convert dayjs → moment so your external code does NOT break
+    const converted = [moment(dates[0].toDate()), moment(dates[1].toDate())];
+
+    onChange(converted);
+  }
+
+  // Convert your old "ranges" object into AntD presets array
+  const presets = Object.entries(ranges).map(([label, range]) => ({
+    label,
+    value: range,
+  }));
+
+  return (
+    <div className="rangepicker">
+      <RangePicker
+        allowClear={false}
+        inputReadOnly
+        format="DD/MM/YYYY"
+        // moment → allowed
+        value={[startDate, endDate]}
+        onChange={handleChange}
+        presets={presets}
+        ranges={ranges}
+      />
+    </div>
+  );
+}
+
+RangePickerComponent.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.arrayOf(PropTypes.instanceOf(moment)).isRequired,
+  ranges: PropTypes.object,
+};

package/core/lib/elements/basic/rangepicker/rangepicker.scss

@@ -0,0 +1,18 @@
+.rangepicker {
+  .ant-picker {
+    max-height: 30px;
+  }
+
+  .rangepicker .ant-picker {
+    border: none !important;
+    box-shadow: none !important;
+    width: 100% !important;
+    // min-width: auto !important;
+  }
+
+  .rangepicker .ant-picker:hover,
+  .rangepicker .ant-picker-focused {
+    border: none !important;
+    box-shadow: none !important;
+  }
+}

package/core/lib/elements/basic/rangepicker/readme.md

@@ -0,0 +1,82 @@
+## Usage
+
+To use the Ant Design Date Picker component in your React application, you'll need to import the DatePicker or RangePicker component from the antd package.
+
+Here's an example of how to use the RangePicker component:
+
+```jsx
+import RangePicker from "./rangepicker";
+import moment from "moment-timezone";
+
+<RangePicker
+  onChange={(value) => console.log(value)} // handle onChange event
+  value={[moment().subtract(1, "week"), moment()]} // set initial value
+/>
+
+```
+
+```sh
+import React, { useState, useContext } from "react";
+import DateRangePicker from "react-bootstrap-daterangepicker";
+import moment from "moment-timezone";
+import "./rangepicker.scss";
+
+export default function RangePicker({ onChange, value }) {
+  // const [value, setValue] = useState(initialValue);
+
+  // console.log(value);
+
+  // console.log();
+
+  let startDate = value[0].format("DD/MM/YYYY");
+
+  let endDate = value[1].format("DD/MM/YYYY");
+
+  // console.log(startDate, endDate);
+
+  function onCallback(event, picker) {
+    onChange([picker.startDate, picker.endDate]);
+  }
+
+  return (
+    <>
+      <div className="rangepicker">
+        <DateRangePicker
+          initialSettings={{
+            startDate,
+            endDate,
+            locale: {
+              format: "DD/MM/YYYY",
+            },
+          }}
+          onApply={onCallback}
+          range={{
+            Today: [moment(), moment()],
+
+            Yesterday: [
+              moment().subtract(1, "days").startOf("day"),
+              moment().subtract(1, "days").endOf("day"),
+            ],
+
+            "This Week": [moment().startOf("week"), moment().endOf("week")],
+
+            "Last Week": [
+              moment().subtract(1, "week").startOf("week"),
+              moment().subtract(1, "week").endOf("week"),
+            ],
+
+            "This Month": [moment().startOf("month"), moment().endOf("month")],
+
+            "Last Month": [
+              moment().subtract(1, "month").startOf("month"),
+              moment().subtract(1, "month").endOf("month"),
+            ],
+          }}
+        >
+          <input />
+        </DateRangePicker>
+      </div>
+    </>
+  );
+}
+```

package/core/lib/elements/basic/reference-select/readme.md

@@ -0,0 +1,19 @@
+## Usage
+
+To use the Select component, you will need to import it from the react-select library:
+
+```jsx
+import React, { useState } from 'react';
+import ReferenceSelect from './reference-select';
+
+<ReferenceSelect
+  options={[
+    { value: 'ref1', label: 'Reference 1' },
+    { value: 'ref2', label: 'Reference 2' },
+    { value: 'ref3', label: 'Reference 3' },
+  ]}
+  value="ref1"
+  onSelect={selectedOption => console.log(selectedOption)}
+/>
+
+```