robobyte-front-builder 1.0.0

package/src/services/enums/ReportBuilderTypeEnum.js

@@ -0,0 +1,18 @@
+const values = [
+  { value: 'Report', arName: 'انتظار', Name: 'Report', color: 'primary' },
+  { value: 'SystemPage', arName: 'جاري التحويل', Name: 'SystemPage', color: 'warning' },
+  { value: 'SystemDto', arName: 'تم التحويل', Name: 'SystemDto', color: 'success' },
+]
+
+const translate = value => {
+  let defaultResult = { value: '', arName: '', Name: '', color: 'primary' }
+  let foundResult = values.find(x => x.value == value)
+  if (foundResult != null) return foundResult
+  else return defaultResult
+}
+const ReportBuilderTypeEnum = {
+  list: values,
+  translate: translate
+}
+
+export default ReportBuilderTypeEnum

package/src/services/helper/FilterFormat.js

@@ -0,0 +1,70 @@
+
+export function FilterFormat(tFilter) {
+  console.log(tFilter);
+  let processedTfilter = []
+  if (tFilter) {
+    tFilter.forEach(filter => {
+      let updatedFilter = { ...filter }
+      // Handling localProperty and value updates
+      if (filter.localProperty === 'Class' && filter.value && filter.value.id) {
+        updatedFilter.value = filter.value.id
+      } else if (filter.localProperty === 'Enum' && filter.value && filter.value.value) {
+        updatedFilter.value = filter.value.value
+      }
+      // Handling different method cases
+      if (filter.method === 'checkForNull') {
+        updatedFilter.method = 'Equals'
+        if (updatedFilter.path && updatedFilter.path.endsWith('.Id')) {
+          updatedFilter.path = updatedFilter.path.slice(0, -3);
+        }
+      }
+      if (filter.method === 'NotContains') {
+        updatedFilter.isNot = true
+        updatedFilter.method = 'Contains'
+      }
+      if (filter.method === 'NotEquals') {
+        updatedFilter.isNot = true
+        updatedFilter.method = 'Equals'
+      }
+      if ((filter.isOrList || filter.method === 'Orlist' || filter.method === 'NotOrlist') && filter.value) {
+        if (filter.method === 'NotOrlist') {
+          updatedFilter.isNot = true;
+        }
+        updatedFilter.method = filter.localProperty === 'String' ? filter.path === 'Id' || filter.path?.toLowerCase().endsWith('.id')? 'Equals' : 'Contains' : 'Equals';
+        const needsId =
+          filter.localProperty === 'Class' ||
+          filter.localProperty === 'Enum' ||
+          filter.path === 'Id' ||
+          filter.path?.toLowerCase().endsWith('.id');
+        updatedFilter.value = Array.isArray(filter.value)
+          ? filter.value
+            .map(v => {
+              if (needsId && typeof v === 'object') {
+                return v?.id ?? v?.value ?? null;
+              }
+              return v;
+            })
+            .filter(v => v !== null && v !== undefined)
+          : [];
+      }
+
+      // Handling Set/NotSet values
+      if (filter.value === 'Set') {
+        updatedFilter.value = true
+      }
+      if (filter.value === 'NotSet') {
+        updatedFilter.value = false
+      }
+      // Handling isBetween method
+      if (filter.method === 'isBetween' && filter.value) {
+        let lowerBoundFilter = { ...updatedFilter, value: filter.value.fromValue, method: 'GreaterThanOrEqual' }
+        let upperBoundFilter = { ...updatedFilter, value: filter.value.toValue, method: 'LessThanOrEqual' }
+        processedTfilter.push(lowerBoundFilter, upperBoundFilter)
+      } else {
+        processedTfilter.push(updatedFilter)
+      }
+
+    })
+  }
+  return processedTfilter
+}

package/src/services/helper/FormatCurrencyIQD.js

@@ -0,0 +1,11 @@
+export const FormatCurrencyIQD = (value) => {
+  const numericValue = typeof value === 'string' ? parseFloat(value) : value;
+  const options = {
+    style: 'currency',
+    currency: 'IQD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  };
+  const formattedValue = new Intl.NumberFormat('en-US', options).format(numericValue);
+  return formattedValue;
+};

package/src/services/helper/datagridEditComponents.js

@@ -0,0 +1,38 @@
+import { useGridApiContext } from '@mui/x-data-grid'
+import { handleUpdateItems } from './handleChange'
+import { TextField } from '@mui/material'
+import { useRef,useEffect } from 'react'
+export function CustomEditComponent(props) {
+  const { id, value, field, items, setItems } = props
+  const apiRef = useGridApiContext()
+  const inputRef = useRef(null) // Create a reference to the input field
+
+  const handleValueChange = event => {
+    const newValue = event.target.value 
+    apiRef.current.setEditCellValue({ id, field, value: newValue })
+  }
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus() 
+    }
+  }, [])
+
+  return (
+    <TextField
+      key={id}
+      size='small'
+      type='number'
+      dir='ltr'
+      value={value}
+      onChange={handleValueChange}
+      onBlur={e => {
+        handleUpdateItems(id, field, value, items, setItems)
+      }}
+      inputRef={inputRef}
+      onKeyDown={event => {
+        if(event.keyCode === 13) handleUpdateItems(id, field, value, items, setItems)
+      }}
+    />
+  )
+}

package/src/services/helper/dateFormat.js

@@ -0,0 +1,30 @@
+//a simple date formatting function
+//format can be add to the function parameter for globalization
+export default function dateFormat(inputDate, format = "yyyy-MM-dd") {
+  if (inputDate == null || inputDate == "") inputDate = new Date();
+  try {
+    const date = new Date(inputDate);
+
+    //extract the parts of the date
+    const day = date.getDate();
+    const month = date.getMonth() + 1;
+    const year = date.getFullYear();
+
+    //replace the month
+    format = format.replace("MM", month.toString().padStart(2, "0"));
+
+    //replace the year
+    if (format.indexOf("yyyy") > -1) {
+      format = format.replace("yyyy", year.toString());
+    } else if (format.indexOf("yy") > -1) {
+      format = format.replace("yy", year.toString().substr(2, 2));
+    }
+    //replace the day
+    format = format.replace("dd", day.toString().padStart(2, "0"));
+  } catch (error) {
+    return "";
+  }
+  //parse the input date
+
+  return format;
+}

package/src/services/helper/formData.js

@@ -0,0 +1,21 @@
+
+export function jsonToFormData(json, formData = new FormData(), parentKey = null) {
+    if (json && typeof json === 'object' && !(json instanceof Date) && !(json instanceof File)) {
+      Object.keys(json).forEach(key => {
+        const value = json[key];
+        // Construct the form key
+        let formKey = parentKey ? `${parentKey}[${key}]` : key;   
+        // If the value is an object, but not a File, recurse.
+        if (typeof value === 'object' && !(value instanceof Date) && !(value instanceof File)) {
+          jsonToFormData(value, formData, formKey);
+        } else {
+          // Convert Date objects to strings
+          const valueToSend = value instanceof Date ? value.toISOString() : value;
+          formData.append(formKey, valueToSend);
+        }
+      });
+    } else {
+      formData.append(parentKey, json);
+    }
+    return formData;
+}

package/src/services/helper/getPropByString.js

@@ -0,0 +1,18 @@
+export default function getPropByString(obj, propString) {
+  if (!propString) return "";
+  if (!obj) return "";
+  var prop,
+    props = propString.split(".");
+
+  for (var i = 0, iLen = props.length - 1; i < iLen; i++) {
+    prop = props[i];
+
+    var candidate = obj[prop];
+    if (candidate !== undefined) {
+      obj = candidate;
+    } else {
+      break;
+    }
+  }
+  return obj[props[i]];
+}

package/src/services/helper/handleChange.js

@@ -0,0 +1,26 @@
+export default async function handleChange(func, property, value) {
+  if (property != null) {
+    func(preValue => ({
+      ...preValue,
+      [property]: value
+    }))
+  } else {
+    func(value)
+  }
+}
+
+export async function handleUpdateItems(id, key, value, oldItems, func) {
+  let items = [...oldItems]
+  let index = items.findIndex(x => x.id == id)
+  items[index] = { ...items[index], [key]: value }
+  func(items)
+}
+export async function handleDeleteItem(id, oldItems, func) {
+
+  let items = [...oldItems]
+  let index = items.findIndex(x => x.id == id)
+  items.splice(index, 1)
+
+  func(items)
+}
+

package/src/services/helper/helper.js

@@ -0,0 +1,105 @@
+function filterArrayByIndices(arr, indices) {
+  return indices.map(index => arr[index])
+}
+
+export const getUTCDateTime = date => {
+  if (date == null) return null
+
+  const year = date.getUTCFullYear()
+  const month = date.getUTCMonth()
+  const day = date.getUTCDate()
+  const hours = date.getUTCHours()
+  const minutes = date.getUTCMinutes()
+  const seconds = date.getUTCSeconds()
+  const utcDate = new Date(Date.UTC(year, month, day, hours, minutes, seconds, 0))
+  console.log(utcDate)
+  return utcDate.toISOString()
+}
+
+export function getRandomInt(min, max) {
+  min = Math.ceil(min) // Ensure the minimum value is an integer
+  max = Math.floor(max) // Ensure the maximum value is an integer
+  return Math.floor(Math.random() * (max - min + 1)) + min // The maximum is inclusive and the minimum is inclusive
+}
+
+function generateGUID() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = (Math.random() * 16) | 0,
+      v = c === 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
+
+function enumTrans(enumName, enumValue) {
+  switch (enumName) {
+    default:
+      return enumValue
+  }
+}
+
+function getFileExtension(filename) {
+  return filename.split('.').pop()
+}
+
+function getDocumentPath(file, type, category) {
+  const guid = generateGUID()
+  const extension = getFileExtension(file)
+  const fileName = guid + '.' + extension
+  switch (type) {
+    case 'Image':
+      return 'images/' + category + '/' + fileName
+    default:
+      return 'files/' + category + '/' + fileName
+  }
+}
+
+function convertSecondsToTime(seconds) {
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const secs = seconds % 60
+
+  const format = value => value.toString().padStart(2, '0')
+  return `${format(hours)}:${format(minutes)}:${format(secs)}`
+}
+
+function convertMetersToKilometers(meters) {
+  return meters / 1000 // 1 kilometer = 1000 meters
+}
+
+function getRotatedIcon(svgUrl, angle, size = 50) {
+  return new Promise(resolve => {
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    const img = new Image()
+
+    img.onload = () => {
+      const center = size / 2
+      canvas.width = size
+      canvas.height = size
+
+      ctx.clearRect(0, 0, size, size)
+      ctx.translate(center, center)
+      ctx.rotate((angle * Math.PI) / 180)
+      ctx.drawImage(img, -center, -center, size, size)
+
+      resolve(canvas.toDataURL()) // Convert canvas to base64 image
+    }
+
+    img.src = svgUrl
+  })
+}
+
+function toCamelCaseDotNet(str) {
+  if (!str) return str
+  return str[0].toLowerCase() + str.slice(1)
+}
+
+export const Helper = {
+  FilterArrayByIndices: filterArrayByIndices,
+  getUTCDateTime: getUTCDateTime,
+  getDocumentPath: getDocumentPath,
+  convertSecondsToTime: convertSecondsToTime,
+  convertMetersToKilometers: convertMetersToKilometers,
+  enumTrans: enumTrans,
+  toCamelCaseDotNet: toCamelCaseDotNet
+}

package/src/services/helper/multiSelectEditor.js

@@ -0,0 +1,226 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import Chip from '@mui/material/Chip';
+import { createRoot } from 'react-dom/client';
+import ThemeComponent from 'src/@core/theme/ThemeComponent';
+import moment from 'moment';
+import Typography from "@mui/material/Typography";
+import { darken, lighten, styled } from "@mui/material/styles";
+import izColors from "src/configs/izColors.json"
+import { SettingsConsumer } from "src/@core/contexts/settingsContext";
+const AutocompleteEditor = React.memo(
+  forwardRef((props, ref) => {
+    // Initialize as an array for multi-selection.
+    const [selectedValue, setSelectedValue] = useState(props.value ?? null);    // Initialize options from props.
+    const [options, setOptions] = useState(props.options || []);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
+    const [loading, setLoading] = useState(false);
+    const inputRef = useRef(null);
+
+    // If an asyncFetchOptions function is provided via cellEditorParams, call it immediately on mount.
+    useEffect(() => {
+      if (props.asyncFetchOptions) {
+        setLoading(true);
+        props.asyncFetchOptions()
+          .then(fetchedOptions => {
+            setOptions(fetchedOptions);
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      }
+    }, [props.asyncFetchOptions]);
+
+    // Debounce searchTerm changes.
+    useEffect(() => {
+      const handler = setTimeout(() => {
+        setDebouncedSearchTerm(searchTerm);
+      }, 300);
+      return () => clearTimeout(handler);
+    }, [searchTerm]);
+
+    // Optionally, if you want to refetch options on debounced search term changes,
+    // call the asyncFetchOptions function with the search term as argument.
+    useEffect(() => {
+      if (props.asyncFetchOptions) {
+        setLoading(true);
+        // If your asyncFetchOptions function accepts a search term, pass debouncedSearchTerm.
+        props.asyncFetchOptions(debouncedSearchTerm)
+          .then(fetchedOptions => {
+            setOptions(fetchedOptions);
+          })
+          .finally(() => {
+            setLoading(false);
+          });
+      }
+    }, [debouncedSearchTerm, props.asyncFetchOptions]);
+
+    const handleChange = (event, value) => {
+      setSelectedValue(value);
+    };
+
+    const handleBlur = () => {
+      props.api.stopEditing();
+    };
+
+    // Utility: Get nested property if needed.
+    function getNestedProperty(obj, path) {
+      if (!Array.isArray(path)) {
+        return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+      } else {
+        let result;
+        let i = 0;
+        path.forEach((p) => {
+          if (i === 0) result = p.split('.').reduce((acc, part) => acc && acc[part], obj);
+          else result = result + ' - ' + p.split('.').reduce((acc, part) => acc && acc[part], obj);
+          i++;
+        });
+        return result;
+      }
+    }
+
+    const formatValueByType = (value, type) => {
+      let result = value;
+      if (type === 'datetime') result = moment(result).format('L');
+      return result;
+    };
+
+    // Update selected value when props.value changes.
+    useEffect(() => {
+      if (props.value) {
+        setSelectedValue(Array.isArray(props.value) ? props.value : []);
+      }
+    }, [props.value]);
+
+
+    useImperativeHandle(ref, () => {
+      console.log(ref)
+      return ({
+
+        getValue: () => props?.targetValue != null ? getNestedProperty(selectedValue, props?.targetValue) : selectedValue,
+      })
+    });
+
+    useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, []);
+
+    const GroupHeader = styled('div')(({ theme }) => ({
+      position: 'sticky',
+      top: '-8px',
+      padding: '4px 10px',
+      color: theme.palette.primary.main,
+      backgroundColor: lighten(izColors.grey, 0.70),
+    }));
+
+    const GroupItems = styled('ul')({
+      padding: 0,
+    });
+
+    return (
+      <SettingsConsumer>
+        {({ settings }) => (
+          <ThemeComponent settings={settings}>
+            <Autocomplete
+              multiple={!props.isSingle === true}
+              size="small"
+              loading={loading}
+              options={options || []}
+              groupBy={option => {
+                return props.groupByField == null ? null : getNestedProperty(option, props.groupByField);
+              }}
+              renderGroup={(params) => (
+                <li key={params.key}>
+                  {props.groupByField && <GroupHeader>{params.group}</GroupHeader>}
+                  <GroupItems>{params.children}</GroupItems>
+                </li>
+              )}
+              onBlur={handleBlur}
+              disableCloseOnSelect={!props.isSingle === true}
+              isOptionEqualToValue={(option, value) => option?.id === value?.id}
+              getOptionLabel={(option) => {
+                let result = props.fieldName == null ? option?.name : getNestedProperty(option, props.fieldName);
+                if (props.type != null) result = formatValueByType(result, props.type);
+                return result;
+                // if (!option) return '';
+                // return option.name?.toString() || '';
+              }}
+              value={selectedValue}
+              onChange={handleChange}
+              renderInput={(params) => {
+                params.InputProps.disableUnderline = true;
+                return (
+                  <TextField
+                    autoFocus
+                    {...params}
+                    variant="standard"
+                    size="small"
+                    hiddenLabel
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    inputRef={inputRef}
+                  />
+                );
+              }}
+              renderTags={(value, getTagProps) =>
+                value.map((option, index) => (
+                  <Chip
+                    key={option?.id ?? index}
+                    label={option?.name}
+                    {...getTagProps({ index })}
+                    onMouseDown={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                    }}
+                  />
+                ))
+              }
+            />
+          </ThemeComponent>
+        )}
+      </SettingsConsumer>
+    );
+  })
+);
+
+export class MultiSelectEditorWrapper {
+  constructor() {
+    this.eInput = document.createElement('div');
+    this.eInput.style = 'width: 100%; height: 100%;';
+  }
+
+  init(params) {
+    this.params = params;
+    this.root = createRoot(this.eInput);
+    this.root.render(
+      <AutocompleteEditor {...params} ref={(input) => (this.reactComponent = input)} />
+    );
+  }
+
+  getGui() {
+    return this.eInput;
+  }
+
+  afterGuiAttached() {
+    // Optionally focus after attachment.
+  }
+
+  getValue() {
+    return this.reactComponent.getValue();
+  }
+
+  destroy() {
+    if (this.root) {
+      setTimeout(() => {
+        this.root.unmount();
+      }, 0);
+    }
+  }
+
+  isPopup() {
+    return false;
+  }
+}

package/src/services/helper/translateOrderReturnStatus.js

@@ -0,0 +1,12 @@
+export default function translateStatus(status) {
+  switch (status) {
+    case "Pending":
+      return { label: "معلق", color: "warning" };
+    case "Approved":
+      return { label: "موافق", color: "success" };
+    case "Cancelled":
+      return { label: "ملغي", color: "error" };
+    default:
+      return { label: status, color: "default" };
+  }
+}

package/src/services/helper/translateRole.js

@@ -0,0 +1,24 @@
+export default function translateDivisions(role) {
+  let result = ''
+  switch (role) {
+    case 'Admin':
+      result = 'Admin'
+      break
+    case 'Owner':
+      result = 'ادارة'
+      break
+    case 'Dealer':
+      result = 'مزود'
+      break
+    case 'POS':
+      result = 'نقطة بيع'
+      break
+    case 'Supervisor':
+      result = 'مشرف'
+      break
+
+    default:
+      break
+  }
+  return result
+}

package/src/services/helper/translateStatus.js

@@ -0,0 +1,12 @@
+export default function translateStatus(status) {
+  switch (status) {
+    case "Pending":
+      return { label: "معلق", color: "warning" };
+    case "Approved":
+      return { label: "موافق", color: "success" };
+    case "Cancelled":
+      return { label: "ملغي", color: "error" };
+    default:
+      return { label: status, color: "default" };
+  }
+}

package/src/services/helper/translateTransferReceiptType.js

@@ -0,0 +1,67 @@
+export default function translateTransferReceiptType(value) {
+  let result = {
+    ar: '',
+    color: 'primary'
+  }
+
+  switch (value) {
+    case 'Import':
+      result = {
+        ar: 'استيراد',
+        color: 'primary'
+      }
+      break
+      case 'Transfer':
+      result = {
+        ar: 'نقل',
+        color: 'primary'
+      }
+      break
+     case 'Dismantling':
+        result = {
+          ar: 'تفكيك',
+          color: 'primary'
+        }
+      break
+      case 'Packaging':
+        result = {
+          ar: 'تعبئة',
+          color: 'primary'
+        }
+      break
+      case 'Dispose':
+        result = {
+          ar: 'اتلاف',
+          color: 'primary'
+        }
+      break
+      case 'ImportReturn':
+        result = {
+          ar: 'راجع استيراد',
+          color: 'primary'
+        }
+      break
+      case 'OrderReturn ':
+        result = {
+          ar: 'راجع طلب',
+          color: 'primary'
+        }
+      break  
+      case 'Order':
+      result = {
+        ar: 'طلب',
+        color: 'primary'
+      }
+      break
+    case 'Transfer':
+      result = {
+        ar: 'نقل',
+        color: 'primary'
+      }
+      break
+
+    default:
+      break
+  }
+  return result
+}