robobyte-front-builder 1.0.0

package/src/views/genericTable/cellEditors/autocompleteEditor.js

@@ -0,0 +1,229 @@
+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.options);
+    // 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;
+              }}
+              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}
+                    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;
+  }
+}
+
+export class AutocompleteEditorWrapper {
+}

package/src/views/genericTable/cellRenderers/imageRenderer.js

@@ -0,0 +1,14 @@
+import { Avatar, IconButton } from "@mui/material";
+import { BaseURL } from "services/Endpoints";
+import { CloudUploadOutline } from "mdi-material-ui";
+import { Box } from "@mui/system";
+import { useContext } from "react";
+import { SystemContext } from "context/SystemContext";
+
+export const ImageRenderer = (params, path) => {
+  const systemContext = useContext(SystemContext)
+  console.log(path)
+  return <Box sx={{ display: 'flex', height: '100%', alignItems: 'center' }}><Avatar sx={{ height: '35px', width: '35px' }}
+    variant='rounded' alt='M'
+    src={path != '' ? systemContext?.bunny?.fileStorageZone?.storageServer + path : systemContext?.bunny?.fileStorageZone?.storageServer + params?.data?.imageUrl} /></Box>
+}

package/src/views/genericTable/statusBar/rowCountStatusBar.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react';
+import {Box} from "@mui/system";
+
+const CustomStatusBar = ({ api }) => {
+  const [totalRows, setTotalRows] = useState(0);
+  const [selectedRows, setSelectedRows] = useState(0);
+
+  useEffect(() => {
+    if (!api) return;
+
+    const updateStatus = () => {
+      setTotalRows(api.getDisplayedRowCount());
+      setSelectedRows(api.getSelectedRows().length);
+    };
+
+    // Listen to row changes
+    api.addEventListener('modelUpdated', updateStatus);
+    api.addEventListener('selectionChanged', updateStatus);
+
+    // Initial call
+    updateStatus();
+
+    return () => {
+      api.removeEventListener('modelUpdated', updateStatus);
+      api.removeEventListener('selectionChanged', updateStatus);
+    };
+  }, [api]);
+
+  return (
+    <Box sx={{display:'flex',p:'10px'}}>
+      <Box sx={{p:'0px'}}>Total Rows: {totalRows.toLocaleString()}</Box>
+      {/*<div>✅ Selected: {selectedRows}</div>*/}
+    </Box>
+  );
+};
+
+export default CustomStatusBar;

package/src/views/genericTable/template/addTemplate.js

@@ -0,0 +1,187 @@
+// ** React Imports
+
+// ** MUI Imports
+import {yupResolver} from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+import {
+  Button,
+  CircularProgress,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormHelperText,
+  Grid,
+  TextField,
+  Typography,
+  Checkbox,
+  FormControlLabel
+} from '@mui/material'
+import Box from '@mui/material/Box'
+import {Close} from 'mdi-material-ui'
+import {useEffect, useState} from 'react'
+import {useForm} from 'react-hook-form'
+import {BaseURL, Endpoints, Services} from 'src/services/Endpoints'
+
+// ** Third Party Imports
+
+// ** Icons Imports
+
+// ** Styled Components
+
+const defaultItem = {
+  id: 0,
+  name: '',
+  isDefault: false,
+}
+
+const AddTemplateDialog = props => {
+  // ** Props
+  const {handleToggleDialogs, pageName, template, item,userId} = props
+  const [IsSubmitting, setIsSubmitting] = useState(false)
+  let schema = yup.object().shape({
+    name: yup.string().required(),
+  })
+  const {
+    register,
+    handleSubmit,
+    clearErrors,
+    control,
+    getValues,
+    setValue,
+    reset,
+    watch,
+    formState: {errors}
+  } = useForm({
+    mode: 'onChange',
+    reValidateMode: 'onBlur',
+    resolver: yupResolver(schema),
+    defaultValues: defaultItem
+  })
+
+  // ** States
+  async function handleSave(values) {
+    try {
+      let response = null
+      setIsSubmitting(true)
+      let data = {
+        name: values.name,
+        pageName: pageName,
+        isDefault: values.isDefault,
+        value: template,
+        userId : userId
+      }
+      if (item == null) {
+
+        response = await Services.PostService(Endpoints.UserTableTemplates.Post.AddTemplate, true, data)
+      } else {
+        response = await Services.UpdateService(Endpoints.UserTableTemplates.Put.UpdateTemplate, true, data, {
+          id: item.id
+        })
+
+      }
+
+      if (!response.error) {
+        handleDialogClose()
+      }
+    } catch (error) {
+      setIsSubmitting(false)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const handleSetDefaults = () => {
+    reset(defaultItem)
+  }
+
+  const handleDialogClose = async () => {
+    clearErrors()
+    handleSetDefaults()
+    handleToggleDialogs('addTemplate')
+  }
+
+  useEffect(() => {
+    reset({...item})
+  }, [item]);
+
+
+  return (
+    <>
+      <DialogTitle id='confirmation-dialog-title' sx={{padding: 0, marginBottom: 5}}>
+        <Box
+          className='sidebar-header'
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            backgroundColor: 'background.default',
+            p: theme => theme.spacing(3, 3.255, 3, 5.255)
+          }}
+        >
+          <Typography variant='h6'>{'حفظ شكل النموذج'}</Typography>
+          <Box sx={{display: 'flex', alignItems: 'center'}}>
+            <Close fontSize='small' onClick={handleDialogClose} sx={{cursor: 'pointer'}}/>
+          </Box>
+        </Box>
+      </DialogTitle>
+
+      <DialogContent className='dialog-body'>
+        <form
+          onSubmit={handleSubmit(values => {
+            handleSave(values)
+          })}
+        >
+          <Grid container spacing={6}>
+            <Grid item mt={2} size={12}>
+              <TextField
+                {...register('name')}
+                type='text'
+                value={watch('name')}
+                onChange={e => setValue('name', e.target.value)}
+                fullWidth
+                label='اسم النموذج'
+                placeholder='اسم النموذج'
+                error={Boolean(errors.name)}
+              />
+              <FormHelperText>{errors.name?.message}</FormHelperText>
+            </Grid>
+            <Grid size={12}>
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    {...register('isDefault')}
+                    onChange={e => {
+                      setValue('isDefault', e.target.checked)
+                    }}
+                    checked={watch('isDefault')}
+                  />
+                }
+                label='النموذج الافتراضي'
+              />
+              <FormHelperText>{errors.isDefault?.message}</FormHelperText>
+            </Grid>
+          </Grid>
+          <DialogActions sx={{pb: {xs: 8}, justifyContent: 'center'}}>
+            <Button type='submit' variant='contained' sx={{mr: 2}} disabled={IsSubmitting}>
+              {IsSubmitting ? (
+                <CircularProgress
+                  sx={{
+                    color: 'common.white',
+                    width: '20px !important',
+                    height: '20px !important',
+                    mr: theme => theme.spacing(2)
+                  }}
+                />
+              ) : null}
+              حفظ
+            </Button>
+            <Button variant='outlined' color='secondary' onClick={() => handleDialogClose()}>
+              الغاء
+            </Button>
+          </DialogActions>
+        </form>
+      </DialogContent>
+    </>
+  )
+}
+
+export default AddTemplateDialog

package/src/views/genericTable/toolPanels/CustomColumnsToolPanel.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import {provideGlobalGridOptions} from "ag-grid-enterprise";
+
+
+export default function CustomColumnsToolPanel(props) {
+  console.log(props);
+  return (
+    <div className="ag-column-select">
+      {/* Original Columns Tool Panel */}
+      {/*<ColumnsToolPanelModule {...props} />*/}
+
+      {/* Your Custom Section */}
+      <div className="ag-column-select-column-group">
+        <div className="ag-column-select-column-group-title">
+          <span>Custom Controls</span>
+        </div>
+        <div className="ag-column-select-list">
+          <div className="ag-column-select-column">
+            <div className="ag-column-select-column-label">
+              <button
+                className="ag-button ag-button-text"
+                onClick={() => alert('Custom action triggered!')}
+              >
+                Custom Action 1
+              </button>
+            </div>
+          </div>
+          <div className="ag-column-select-column">
+            <div className="ag-column-select-column-label">
+              <button
+                className="ag-button ag-button-text"
+                onClick={() => console.log('Custom action 2')}
+              >
+                Custom Action 2
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+

package/src/views/pages/auth/FooterIllustrationsV2.js

@@ -0,0 +1,40 @@
+// ** React Imports
+import { Fragment } from 'react'
+
+// ** MUI Components
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { styled, useTheme } from '@mui/material/styles'
+
+// Styled Components
+const MaskImg = styled('img')(({ theme }) => ({
+  zIndex: -1,
+  bottom: '7%',
+  width: '100%',
+  position: 'absolute',
+  [theme.breakpoints.down('lg')]: {
+    bottom: '17.5%'
+  }
+}))
+
+const FooterIllustrationsV2 = props => {
+  // ** Props
+  const { image } = props
+
+  // ** Hook
+  const theme = useTheme()
+
+  // ** Vars
+  const hidden = useMediaQuery(theme.breakpoints.down('md'))
+  const src = image || `/images/pages/auth-v2-login-mask-${theme.palette.mode}.png`
+  if (!hidden) {
+    return (
+      <Fragment>
+        <MaskImg alt='mask' src={src} />
+      </Fragment>
+    )
+  } else {
+    return null
+  }
+}
+
+export default FooterIllustrationsV2

package/src/views/pages/misc/FooterIllustrations.js

@@ -0,0 +1,47 @@
+// ** React Imports
+import { Fragment } from 'react'
+
+// ** MUI Components
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { styled, useTheme } from '@mui/material/styles'
+
+// Styled Components
+const MaskImg = styled('img')(() => ({
+  bottom: 0,
+  zIndex: -1,
+  width: '100%',
+  position: 'absolute'
+}))
+
+const ShapeImg = styled('img')(({ theme }) => ({
+  left: '15%',
+  bottom: '12%',
+  position: 'absolute',
+  [theme.breakpoints.down('lg')]: {
+    bottom: '7%'
+  }
+}))
+
+const FooterIllustrations = props => {
+  // ** Props
+  const { image } = props
+
+  // ** Hook
+  const theme = useTheme()
+
+  // ** Vars
+  const hidden = useMediaQuery(theme.breakpoints.down('md'))
+  const src = image || '/images/pages/misc-coming-soon-object.png'
+  if (!hidden) {
+    return (
+      <Fragment>
+        <ShapeImg alt='shape' src={src} />
+        <MaskImg alt='mask' src={`/images/pages/misc-mask-${theme.palette.mode}.png`} />
+      </Fragment>
+    )
+  } else {
+    return null
+  }
+}
+
+export default FooterIllustrations

package/src/views/pages/misc/muiTable/CustomPagination.js

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import Box from '@mui/material/Box'
+import {
+  gridPageCountSelector,
+  GridPagination,
+  gridPaginationModelSelector,
+  useGridApiContext,
+  useGridSelector
+} from '@mui/x-data-grid'
+import MuiPagination from '@mui/material/Pagination'
+import { Grid } from '@mui/material'
+
+function Pagination({ page, onPageChange, className }) {
+  const apiRef = useGridApiContext()
+  const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector)
+
+  return (
+    <MuiPagination
+      variant='outlined'
+      shape='rounded'
+      color='primary'
+      className={className}
+      count={Math.ceil(apiRef.current.getRowsCount() / paginationModel.pageSize)}
+      page={page + 1}
+      onChange={(event, newPage) => {
+        onPageChange(event, newPage - 1)
+      }}
+    />
+  )
+}
+
+export default function CustomPagination(props) {
+  return <GridPagination ActionsComponent={Pagination} {...props} />
+}