ui-soxo-bootstrap-core 2.4.24

package/core/lib/elements/complex/qrscanner/qrscanner.js

@@ -0,0 +1,57 @@
+/**
+ * @file QrScanner
+ * @description
+ * This component handles real-time QR code scanning using the device camera.
+ * It uses the `html5-qrcode` library to initialize the camera and process QR code data.
+ * When a valid QR code is detected, the scanner stops automatically,
+ * and callback functions are invoked to handle the scanned result and close the scanner.
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { Html5Qrcode } from 'html5-qrcode';
+
+/**
+ * QrScanner Component
+ *
+ * @component
+ * @param {Function} onScanSuccess - Callback function to handle the scanned QR code value.
+ * @param {Function} onClose - Callback function triggered when the scanner is stopped (can be used for cleanup or redirection).
+ *
+ * @returns  A div element where the camera stream and QR scanning UI will appear.
+ */
+
+const QrScanner = ({ onScanSuccess, onClose }) => {
+  const scannerRef = useRef(null);
+  const isStopped = useRef(false);
+
+  useEffect(() => {
+    const scanner = new Html5Qrcode('qr-scanner-region');
+    scannerRef.current = scanner;
+
+    scanner
+      .start({ facingMode: 'environment' }, { fps: 10, qrbox: 250 }, async (decodedText) => {
+        if (!isStopped.current) {
+          isStopped.current = true;
+          await scanner.stop(); // Ensure it's stopped only once
+          onScanSuccess(decodedText);
+          onClose(); // Let parent control redirection
+        }
+      })
+      .catch((err) => {
+        console.error('QR Scan Error:', err);
+      });
+
+    return () => {
+      if (!isStopped.current) {
+        isStopped.current = true;
+        scanner.stop().catch((e) => {
+          // console.warn("Stop error (likely already stopped):", e.message);
+        });
+      }
+    };
+  }, [onScanSuccess, onClose]);
+
+  return <div id="qr-scanner-region" style={{ width: '100%', height: 300 }} />;
+};
+
+export default QrScanner;

package/core/lib/elements/complex/search-debounce/search-debounce.js

@@ -0,0 +1,37 @@
+/**
+ * @author Hasna
+ * Component to debounce api without debounce function
+ */
+import React, { useState, useEffect } from 'react'
+
+import { Input } from 'antd'
+
+const { Search } = Input
+
+export default function SearchDebounce({ value, onChange }) {
+  // To store query
+  const [query, setQuery] = useState(value)
+
+  /**
+   * To avoid repeated call of Api, function will be triggered whenever query changes
+   */
+  useEffect(() => {
+    const getData = setTimeout(() => {
+      // Api that has to be called at repeated intervals
+      onChange(query)
+    }, 900)
+
+    return () => clearTimeout(getData)
+  }, [query])
+
+  return (
+    // Component to search query
+    <Search
+      placeholder="Enter Search Value"
+      value={query}
+      onChange={(e) => {
+        setQuery(e.target.value)
+      }}
+    />
+  )
+}

package/core/lib/elements/complex/statistic-card/dashboard-statistic-card.js

@@ -0,0 +1,76 @@
+/**
+ * DashboardStatisticCard
+ * Renders a title and a list of key–value stats.
+ * Values are formatted as currency using formatMoneyGlobal().
+ */
+export default function DashboardStatisticCard({ result, title, ...props }) {
+  if (!result) return null;
+
+  // Extract stat labels
+  const keys = Object.keys(result);
+
+  return (
+    <div style={styles.container}>
+      {title && <span style={styles.title}>{title}</span>}
+
+      {keys.map((key,index) => (
+        <div
+          key={key}
+          style={{
+            ...styles.row,
+            borderBottom: index === keys.length - 1 ? 'none' : '1px solid #f0f0f0',
+          }}
+        >
+          <span style={styles.label}>{key}</span>
+          <span style={styles.value}>{formatMoneyGlobal(result[key])}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * formatMoneyGlobal
+ * Converts any numeric value to "1,234.56" format.
+ * Non-numeric values are returned unchanged.
+ */
+export const formatMoneyGlobal = (value) => {
+  if (value == null || value === '') return '0.00';
+
+  const num = Number(value);
+  if (isNaN(num)) return value;
+
+  return num.toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+};
+
+// Inline styles
+const styles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '10px',
+    cursor: 'pointer',
+    width: '100%',
+    padding: '1px',
+  },
+  title: {
+    fontSize: '15px',
+    fontWeight: 600,
+    marginBottom: '4px',
+  },
+  row: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    paddingBottom: '4px',
+    borderBottom: '1px solid #f0f0f0',
+  },
+  label: {
+    fontSize: '14px',
+  },
+  value: {
+    fontSize: '15px',
+  },
+};

package/core/lib/elements/complex/statistic-card/statistic-card.js

@@ -0,0 +1,28 @@
+
+
+
+import React from "react";
+
+import { Statistic } from "antd";
+
+
+
+/**
+ * Basic Tabular
+ *
+ * @param {*} param0
+ * @returns
+ */
+export default function StatisticCard({ result, ...props }) {
+    return (
+        <>
+            {Object.keys(result).map((key) => {
+                return (
+                    <>
+                        <Statistic title={key} value={result[key]} {...props} />
+                    </>
+                );
+            })}
+        </>
+    );
+}

package/core/lib/elements/index.js

@@ -0,0 +1,226 @@
+/**
+ *
+ * All the basic elements of the core library
+ *
+ *
+ * We are creating wrappers for all existing components so that
+ * we can build a design system .
+ *
+ *
+ */
+
+// Typography elements
+
+import Title from './basic/title/title';
+
+// Typography elements Ends
+
+// Loaders
+
+import Skeleton from './basic/skeleton/skeleton';
+
+// Loaders Ends
+
+// Buttons
+
+// Buttons Ends
+
+// Table
+
+import BasicTable from './complex/basic-table/basic-table';
+
+import Table from './basic/table/table';
+
+import Modal from './basic/modal/modal';
+
+import Select from './basic/select/select';
+
+import Tag from './basic/tag/tag';
+
+// Table Ends
+
+// Card
+
+import Card from './basic/card/card';
+
+// Card Ends
+
+// Image Starts
+import Image from './basic/image/image';
+
+import ImageWrapper from '../components/image-wrapper/image-wrapper';
+
+// import { PdfViewer } from '../components';
+
+// Image Ends
+
+// Modal
+
+// Modal Ends
+
+// Form Elements
+
+import Form from './basic/form/form';
+
+import InputComponent from './basic/input/input';
+
+import FileUpload from '../components/file-upload/file-upload';
+
+import CountryPhoneInput from './basic/country-phone-input/country-phone-input';
+
+// Select Box
+
+import SelectBox from './basic/select-box/select-box';
+
+import ReferenceSelect from './basic/reference-select/reference-select';
+
+import DatePicker from './basic/datepicker/datepicker';
+
+import DraggableWrapper from './basic/dragabble-wrapper/draggable-wrapper';
+// import SelectBox from "./basic/select-box/select-box";
+
+// import ReferenceSelect from "./basic/reference-select/reference-select";
+
+// Select Box Ends
+
+import Switch from './basic/switch/switch';
+
+import Button from './basic/button/button';
+
+import RangePicker from './basic/rangepicker/rangepicker';
+
+import Checkbox from './basic/checkbox/checkbox';
+
+import JSONInput from './basic/json-input/json-input';
+
+// Form Elements Ends
+
+// Graph Elements
+
+import PieChart from './complex/pie-chart/pie-chart';
+
+import LineGraph from './complex/line-graph/line-graph';
+
+import BarGraph from './complex/bargraph/bar-graph';
+
+import StatisticCard from './complex/statistic-card/statistic-card';
+
+// Graph Elements Ends
+
+// Maps
+
+import GoogleMap from './complex/google-map/google-map';
+
+// import MapContainer from './complex/google-location-input/map-container-library-load'
+
+import LocationSearchInput from './complex/location-search-input/location-search-input';
+
+// Maps Ends
+
+// Interfaces
+
+import CopyToClipBoard from './basic/copy-to-clipboard/copy-to-clipboard';
+
+import QRcode from './complex/qr-code/qr-code';
+
+import Barcode from './complex/barcode/barcode';
+
+
+import QrScanner from './complex/qrscanner/qrscanner';
+import Popconfirm from './basic/popconfirm/popconfirm';
+
+// Interfaces Ends
+
+//import  GoogleApiWrapper  from 'google-maps-react';
+// import ImageViewer from './basic/image-viewer/image-viewer';
+// import ScriptInput from '../components/script-input/script-input';
+// import PopQueryDashboard from './complex/pop-query-dashboard';
+
+import UserSearch from './basic/user-search/user-search';
+
+import Radio from './basic/radio/radio';
+
+import Popover from './basic/popover/popover';
+
+import Tabs from './basic/tab/tab';
+
+import Empty from './basic/empty/empty';
+
+import Space from './basic/space/space';
+
+import Row from './basic/row/row';
+
+import Col from './basic/col/col';
+
+import TimeLine from './basic/timeline/timeline';
+
+import MenuDashBoardComponent from './basic/menu-dashboard/menu-dashboard';
+
+// import message from './basic/message/message'
+// import UserSearch from "./basic/user-search/user-search";
+
+export {
+  // Typography Elements
+  Title,
+  // Typography Elements Ends
+  // Loaders
+  Skeleton,
+  TimeLine,
+  Row,
+  Col,
+  Tabs,
+  Empty,
+  Space,
+  // message,
+
+  // Loaders Ends
+
+  // Form Elements
+  Form,
+  DatePicker,
+  DraggableWrapper,
+  Tag,
+  Popconfirm,
+  Popover,
+
+  // Form Elements Ends
+  Select,
+  SelectBox,
+  ReferenceSelect,
+  Switch,
+  Modal,
+  Button,
+  Radio,
+  Card,
+  Table,
+  QRcode,
+  QrScanner,
+  Barcode,
+  RangePicker,
+  JSONInput,
+  BasicTable,
+  LineGraph,
+  BarGraph,
+  StatisticCard,
+  // SelectBox,
+  // PopQueryDashboard,
+  CopyToClipBoard,
+  LocationSearchInput,
+  //GoogleApiWrapper,
+  // MapContainer,
+  PieChart,
+  GoogleMap,
+  InputComponent,
+  CountryPhoneInput,
+  // PdfViewer,
+
+  // ImageViewer
+  Image,
+  FileUpload,
+  ImageWrapper,
+  UserSearch,
+  Checkbox,
+  MenuDashBoardComponent,
+
+  // ScriptInput
+};

package/core/lib/hooks/device-detect.js

@@ -0,0 +1,26 @@
+// utils/useDeviceDetect.js
+import React, { useEffect, useState } from "react";
+
+export default function useDeviceDetect() {
+  const [isMobile, setMobile] = useState(false);
+
+  useEffect(() => {
+
+    // const userAgent =
+    //   typeof window.navigator === "undefined" ? "" : navigator.userAgent;
+
+    // const mobile = Boolean(
+    //   userAgent.match(
+    //     /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
+    //   )
+    // );
+
+    let mobile = ((window.innerWidth <= 800))
+    // || (window.innerHeight <= 700))
+
+    setMobile(mobile);
+
+  }, []);
+
+  return { isMobile };
+}

package/core/lib/hooks/index.js

@@ -0,0 +1,19 @@
+
+
+
+import useDeviceDetect from './device-detect';
+
+import useWindowSize from './use-window-size';
+
+import useFormUtils from './../utils/form/form.utils';
+import useLocation from './use-location';
+
+
+export {
+    useDeviceDetect,
+    useWindowSize,
+
+
+    useFormUtils,
+    useLocation
+}

package/core/lib/hooks/use-location.js

@@ -0,0 +1,33 @@
+
+import React, { useEffect } from 'react';
+
+
+/**
+ * Hook will listen to location change and trigger the listener
+ * 
+ * @returns 
+ */
+export default function useLocation() {
+
+    const [path, setPath] = React.useState(window.location.pathname);
+
+    const listenToPopstate = () => {
+
+        const winPath = window.location.pathname;
+        
+        setPath(winPath);
+    };
+
+    useEffect(() => {
+
+        window.addEventListener("popstate", listenToPopstate);
+
+        return () => {
+            window.removeEventListener("popstate", listenToPopstate);
+        };
+
+    }, []);
+
+    return path;
+
+};

package/core/lib/hooks/use-window-size.js

@@ -0,0 +1,34 @@
+
+
+import React, { useState, useEffect, useRef } from 'react';
+
+
+// Hook
+export default function useWindowSize() {
+
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [windowSize, setWindowSize] = useState({
+        width: undefined,
+        height: undefined,
+    });
+
+    useEffect(() => {
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []); // Empty array ensures that effect is only run on mount
+    return windowSize;
+}
+

package/core/lib/i18n.js

@@ -0,0 +1,70 @@
+/**
+ * Component to initialize i18n
+ */
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+
+i18n
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    debug: false,
+    useSuspense: true,
+    lng: localStorage.selectedLanguage || process.env.REACT_APP_LANGUAGE || 'en',
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+    resources: {
+      en: {
+        translation: {
+          description: {
+            part1: 'Edit <1>src/App.js</1> and save to reload.',
+            part2: 'Learn React',
+            part3: "Download",
+            part4: "New Appointment"
+          }
+        }
+      },
+      hi: {
+        translation: {
+          description: {
+            part1: 'Ändere <1>src/App.js</1> und speichere um neu zu laden.',
+            part2: 'Lerne React',
+            part3: "डाउनलोड करना",
+            part4: "नव नियुक्ति"
+          }
+        }
+      },
+      ja: {
+        translation: {
+          description: {
+            part1: 'ثثثثثثثثثثثث',
+            part2: 'ثثثثثثثثثثثث',
+            part3: "ダウンロード",
+            part4: "新しい予定"
+          }
+        }
+      },
+      ma: {
+        translation: {
+          description: {
+            part1: 'afspraken',
+            part2: 'ثثثثثثثثثثثث',
+            part3: "татаж авах",
+            part4: "Шинэ уулзалт"
+          }
+        }
+      }
+    }
+  });
+
+export default i18n;