robobyte-front-builder 1.0.0

package/src/views/users/ContactManage.js

@@ -0,0 +1,449 @@
+// ** React Imports
+// ** MUI Imports
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+import {
+  Autocomplete,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  FormControl,
+  FormHelperText,
+  Grid,
+  MenuItem,
+  InputLabel,
+  Paper,
+  IconButton,
+  Select,
+  TextField,
+  Typography, FormControlLabel, Checkbox
+} from '@mui/material'
+import Tab from '@mui/material/Tab';
+import TabContext from '@mui/lab/TabContext';
+import TabList from '@mui/lab/TabList';
+import TabPanel from '@mui/lab/TabPanel';
+import Box from '@mui/material/Box'
+import { Close, Plus, Pencil, Checkbook, Refresh } from 'mdi-material-ui'
+import { useEffect, useState } from 'react'
+import { useForm, Controller } from 'react-hook-form'
+import { Endpoints, Services } from 'src/services/Endpoints'
+import handleChange from 'src/services/helper/handleChange'
+import UserTypeEnum from 'src/services/enums/UserTypeEnum'
+import { Warning } from "@mui/icons-material";
+import UniversalAutocomplete from 'services/components/universalAutoComplete';
+import { IdAndName } from 'services/Dto/GenericDtos'
+import path from 'path';
+// ** Third Party Imports
+// ** Icons Imports
+// ** Styled Components
+
+const defaultItem = {
+  id: '',
+  displayName: '',
+  userName: '',
+  phone: '',
+  password: '',
+  confirmPassword: '',
+  userType: '',
+  email: '',
+  supplyContract: null,
+  createUser: false,
+  userForm: { userName: '', password: '' },
+  cashAccount: null,
+}
+
+const ContactManage = props => {
+  // ** Props
+  const { handleToggleDialogs, userType, dialog, contact, setRefresh } = props
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [cashAccounts, setCashAccounts] = useState([])
+  const [supplierContracts, setSupplierContracts] = useState([])
+
+  const [tabValue, setTabValue] = useState("1")
+
+  const schema = yup.object().shape({
+    name: yup.string().required(),
+    address: yup.string().required(),
+    userForm: yup.object().default(defaultItem.userForm)
+      .nullable()
+      .when('createUser', {
+        is: createUser => createUser === true,
+        then: schema => yup.object().shape({
+          userName: yup.string().required('Username is required').min(3, 'Username must be at least 3 characters long'),
+          address: yup.string().required('Address is required'),
+          password: yup.string().min(6).required(),
+          confirmPassword: yup.string().oneOf([yup.ref('password'), null], 'كلمة المرور غير متطابقة'),
+        }).required().default(defaultItem.userForm)
+      }),
+    userType: yup.string().required(),
+  })
+  const {
+    register,
+    handleSubmit,
+    clearErrors,
+    getValues,
+    setValue,
+    reset,
+    watch,
+    setError,
+    formState: { errors }
+  } = useForm({
+    mode: 'onChange',
+    reValidateMode: 'onBlur',
+    resolver: yupResolver(schema),
+    defaultValues: defaultItem
+  })
+
+
+  const handleGetContactByFilter = async () => {
+    let filter = {
+      tFilter: [
+        {
+          path: 'id',
+          method: 'Equals',
+          value: contact?.id
+        }
+      ],
+      tIncludes: ['user']
+    }
+    try {
+      const response = await Services.PostService(Endpoints.Contacts.Post.GetSingleByFilter, true, filter)
+    }
+    catch (error) {
+      console.error('error fetching contact:', error);
+    }
+  }
+
+  async function handleSave(fields) {
+    try {
+      let response = null
+
+      setIsSubmitting(true)
+      let data = {
+        ...fields,
+        userForm: fields.createUser ? fields.userForm : null,
+        cashAccount: fields.cashAccount ? fields.cashAccount : null,
+      }
+      if (getValues('id') == '') {
+        response = await Services.PostService(Endpoints.Contacts.Post.Add, true, data)
+      } else {
+        response = await Services.UpdateService(Endpoints.Contacts.Put.UpdateContact, true, data, { id: getValues('id') })
+      }
+      if (response) {
+        handleClose()
+        Refresh()
+      }
+    } catch (error) {
+      console.log(error)
+    } finally {
+      setIsSubmitting(false)
+      setRefresh(preValue => !preValue)
+    }
+  }
+
+
+
+  const handleSetDefaults = () => {
+    reset()
+  }
+
+
+  const handleClose = async () => {
+    clearErrors()
+    handleSetDefaults()
+    handleToggleDialogs(dialog)
+  }
+
+  async function handleGetCashAccounts() {
+    try {
+      let response = null
+      response = await Services.PostService(Endpoints.CashAccounts.Post.GetAll, false, {})
+      if (response) {
+        response.data = response.data.map((value, index) => ({ ...value, key: index + 1 }))
+        setCashAccounts(response.data)
+      } else {
+        setCashAccounts([])
+      }
+    } catch (error) {
+      false
+    } finally {
+    }
+  }
+
+  async function handleGetSupplierContracts() {
+    try {
+      let response = null
+      response = await Services.PostService(Endpoints.SupplierContract.Post.GetForDropListByFilter, false, {})
+      if (response) {
+        response.data = response.data.map((value, index) => ({ ...value, key: index + 1 }))
+        setSupplierContracts(response.data)
+      } else {
+        setSupplierContracts([])
+      }
+    } catch (error) {
+      false
+    } finally {
+    }
+  }
+
+  const handleInput = (event) => {
+    const value = event.target.value;
+    const allowedCharactersRegex = /[^a-zA-Z0-9-.]/g;
+    if (allowedCharactersRegex.test(value)) {
+      event.target.value = value.replace(allowedCharactersRegex, '');
+    }
+  };
+
+  useEffect(() => {
+    if (!contact) {
+      handleGetSupplierContracts()
+      handleGetCashAccounts()
+    }
+    else
+      handleGetContactByFilter()
+
+  }, [])
+
+  useEffect(() => {
+    if (contact) {
+      reset({ ...contact, shop: contact?.branch?.shop })
+    }
+  }, [contact, reset, setValue])
+
+  useEffect(() => {
+    if (watch('userType') === 'ShopOwner') {
+      setValue('createUser', true)
+    }
+  }, [watch('userType'), setValue])
+
+  return (
+    <>
+      <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={handleClose} sx={{ cursor: 'pointer' }} />
+        </Box>
+      </Box>
+      <form
+        onSubmit={handleSubmit(data => {
+          handleSave(data)
+        })}
+      >
+        <DialogContent className='sidebar-body'>
+          <Grid container spacing={2}>
+            <Grid size={12}>
+              <TextField
+                {...register('name')}
+                type='text'
+                size='small'
+                value={watch('name')}
+                fullWidth
+                label='الاسم'
+                placeholder='الاسم'
+                error={Boolean(errors.name)}
+              />
+              <FormHelperText>{errors.name?.message}</FormHelperText>
+            </Grid>
+
+            <Grid size={12}>
+              <TextField
+                {...register('phone')}
+                type='phone'
+                size='small'
+                value={watch('phone')}
+                fullWidth
+                label='رقم الهاتف'
+                placeholder='رقم الهاتف'
+                error={Boolean(errors.phone)}
+              />
+              <FormHelperText>{errors.phone?.message}</FormHelperText>
+            </Grid>
+
+            <Grid size={12}>
+              <TextField
+                {...register('address')}
+                type='address'
+                size='small'
+                value={watch('address')}
+                fullWidth
+                label='العنوان'
+                placeholder='العنوان'
+                error={Boolean(errors.address)}
+              />
+              <FormHelperText>{errors.address?.message}</FormHelperText>
+            </Grid>
+
+            <Grid size={12}>
+              <FormControl fullWidth {...register('userType')}>
+                <InputLabel size='small' id='demo-simple-select-label'>{`نوع الحساب`}</InputLabel>
+                <Select
+                  fullWidth
+                  size='small'
+                  label='نوع الحساب'
+                  value={watch('userType')}
+                  onChange={e => {
+                    setValue('userType', e.target.value)
+                  }}
+                >
+                  {UserTypeEnum.list.map((type, index) => {
+                    return (
+                      <MenuItem key={index} value={type.value}>
+                        {type.arName}
+                      </MenuItem>
+                    )
+                  })}
+                </Select>
+              </FormControl>
+              <FormHelperText>{errors.userType?.message}</FormHelperText>
+            </Grid>
+
+            <Grid size={12}>
+              <TabContext value={tabValue}>
+                <Box>
+                  <TabList onChange={(e, newValue) => setTabValue(newValue)} aria-label="lab API tabs example">
+                    {watch('createUser') == true &&
+                      <Tab label={<Box sx={{ display: 'flex', justifyContent: 'center' }}> تسحيل الدخول {
+                        errors?.userForm && <Warning sx={{ color: 'red', marginX: '4px' }} />} </Box>} value="1" />
+                    }
+                    <Tab label={<Box sx={{ display: 'flex', justifyContent: 'center' }}>الحسابات {
+                      errors?.userForm && <Warning sx={{ color: 'red', marginX: '4px' }} />} </Box>} value="2" />
+                  </TabList>
+                </Box>
+                {watch('createUser') == true &&
+                  <TabPanel value="1" sx={{ backgroundColor: 'background.default', borderRadius: '0px 0px 8px 8px' }}>
+                    <Grid item container size={12} spacing={2}>
+                      <Grid size={12}>
+                        <TextField
+                          {...register('userForm.userName')}
+                          type='text'
+                          value={watch('userForm.userName')}
+                          fullWidth
+                          onInput={handleInput}
+                          label='اسم المستخدم'
+                          placeholder='اسم المستخدم'
+                          error={Boolean(errors.userForm?.userName)}
+                        />
+                        <FormHelperText>{errors.userForm?.userName?.message}</FormHelperText>
+                      </Grid>
+                      <Grid size={12}>
+                        <TextField
+                          {...register('userForm.password')}
+                          type='password'
+                          value={watch('userForm.password')}
+                          fullWidth
+                          label='كلمة المرور'
+                          placeholder='كلمة المرور'
+                          error={Boolean(errors.userForm?.password)}
+                        />
+                        <FormHelperText>{errors.userForm?.password?.message}</FormHelperText>
+                      </Grid>
+                      <Grid size={12}>
+                        <TextField
+                          {...register('userForm.confirmPassword')}
+                          type='password'
+                          value={watch('userForm.confirmPassword')}
+                          fullWidth
+                          label='تأكيد كلمة المرور'
+                          placeholder='تأكيد كلمة المرور'
+                          error={Boolean(errors.userForm?.confirmPassword)}
+                        />
+                        <FormHelperText>{errors.userForm?.confirmPassword?.message}</FormHelperText>
+                      </Grid>
+                    </Grid></TabPanel>}
+                <TabPanel value="2" sx={{ backgroundColor: 'background.default', borderRadius: '0px 0px 8px 8px' }}>
+                  <Grid item container size={12} spacing={2}>
+                    <Grid size={12}>
+                      <FormControl fullWidth>
+                        <Autocomplete
+                          {...register('cashAccount.receivableCashAccount')}
+                          value={watch('cashAccount.receivableCashAccount')}
+                          fullWidth
+                          options={cashAccounts}
+                          onChange={(e, value) => {
+                            setValue('cashAccount.receivableCashAccount', value);
+                            setValue('cashAccount.receivableCashAccountId', value?.id);
+                          }}
+                          getOptionLabel={(option) => option?.name ?? ''}
+                          renderOption={(props, option) => <li {...props} key={option.key}>{option.name}</li>}
+                          renderInput={(params) => <TextField label="حساب المدين" {...params} />}
+                        />
+                      </FormControl>
+                    </Grid>
+
+                    <Grid size={12}>
+                      <FormControl fullWidth>
+                        <Autocomplete
+                          {...register('cashAccount.payableCashAccount')}
+                          value={watch('cashAccount.payableCashAccount')}
+                          fullWidth
+                          options={cashAccounts}
+                          onChange={(e, value) => {
+                            setValue('cashAccount.payableCashAccount', value);
+                            setValue('cashAccount.payableCashAccountId', value?.id);
+                          }}
+                          getOptionLabel={(option) => option?.name ?? ''}
+                          renderOption={(props, option) => <li {...props} key={option.key}>{option.name}</li>}
+                          renderInput={(params) => <TextField label="حساب الدائن" {...params} />}
+                        />
+                      </FormControl>
+                    </Grid>
+                    <Grid size={12}>
+                      <FormControl fullWidth>
+                        <Autocomplete
+                          {...register('supplyContract')}
+                          value={watch('supplyContract')}
+                          fullWidth
+                          options={supplierContracts}
+                          onChange={(e, value) => {
+                            setValue('supplyContract', value);
+                            setValue('supplyContractId', value?.id);
+                          }}
+                          getOptionLabel={(option) => option?.name ?? ''}
+                          renderOption={(props, option) => <li {...props} key={option.key}>{option.name}</li>}
+                          renderInput={(params) => <TextField label="عقد التجهيز" {...params} />}
+                        />
+                      </FormControl>
+                    </Grid>
+                  </Grid>
+                </TabPanel>
+              </TabContext>
+            </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={() => handleClose()}>
+              الغاء
+            </Button>
+            <Button variant='outlined' color='secondary' onClick={() => reset()}>
+              reset
+            </Button>
+          </DialogActions>
+        </DialogContent>
+      </form>
+    </>
+  )
+}
+
+export default ContactManage

package/src/views/users/ResetPasswordDialog.js

@@ -0,0 +1,242 @@
+// ** React Imports
+
+// ** MUI Imports
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+import {
+  Button,
+  CircularProgress,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormHelperText,
+  Grid,
+  Paper,
+  TextField,
+  Typography,
+  OutlinedInput,
+  FormControl,
+  InputLabel,
+  InputAdornment,
+  IconButton
+} from '@mui/material'
+import Box from '@mui/material/Box'
+import { Close, Eye, EyeOff } from 'mdi-material-ui'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { Endpoints, Services } from 'src/services/Endpoints'
+import handleChange from 'src/services/helper/handleChange'
+
+// ** Third Party Imports
+
+// ** Icons Imports
+
+// ** Styled Components
+
+const defaultItem = {
+  currentPassword: '',
+  confirmPassword: '',
+  password: '',
+  userId: 0
+}
+
+const ResetPasswordDialog = props => {
+  // ** Props
+  const { handleToggleDialogs, userId, currentUser } = props
+  const [IsSubmitting, setIsSubmitting] = useState(false)
+  const [showPassword, setShowPassword] = useState({
+    currentPassword: false,
+    password: false,
+    confirmPassword: false
+  })
+  const [Item, setItem] = useState(defaultItem)
+  let schema = yup.object().shape({
+    password: yup.string().required(),
+    confirmPassword: yup
+      .string()
+      .required()
+      .oneOf([yup.ref('password'), null], 'كلمة المرور غير متطابقة')
+  })
+  if (currentUser) {
+    schema = yup.object().shape({
+      ...schema.fields,
+      currentPassword: yup.string().required()
+    })
+  }
+  const {
+    register,
+    reset,
+    watch,
+    getValues,
+    setValue,
+    handleSubmit,
+    clearErrors,
+    formState: { errors }
+  } = useForm({
+    mode: 'onBlur',
+    reValidateMode: 'onBlur',
+    resolver: yupResolver(schema)
+  })
+  // ** States
+  async function handleSave(values) {
+    try {
+      setIsSubmitting(true)
+      let data = {
+        ...values,
+        userId: userId
+      }
+      let response = await Services.PostService(Endpoints.Users.Post.PasswordReset, true, data)
+      if (response) {
+        handleDialogClose()
+      }
+    } catch (error) {
+      setIsSubmitting(false)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+  const handleSetDefaults = () => {
+    setItem(defaultItem)
+  }
+
+  const handleDialogClose = async () => {
+    clearErrors()
+    handleSetDefaults()
+    handleToggleDialogs('resetPassword')
+  }
+  const handleShowPasswordChange = (field, value) => {
+    handleChange(setShowPassword, field, value)
+
+  }
+  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(data => {
+            handleSave(data)
+          })}
+        >
+          <Grid container spacing={6}>
+            {currentUser && (
+              <Grid size={12}>
+                <FormControl fullWidth variant='outlined' sx={{ marginTop: 3 }} {...register('currentPassword')}>
+                  <InputLabel>كلمة المرور الحالية</InputLabel>
+                  <OutlinedInput
+                    fullWidth
+                    value={watch('currentPassword')}
+                    onChange={e => setValue('currentPassword', e.target.value)}
+                    type={showPassword.currentPassword ? 'text' : 'password'}
+                    endAdornment={
+                      <InputAdornment position='end'>
+                        <IconButton
+                          aria-label='toggle password visibility'
+                          onClick={() => handleShowPasswordChange('currentPassword', !showPassword.currentPassword)}
+                          edge='end'
+                        >
+                          {showPassword.currentPassword ? <EyeOff /> : <Eye />}
+                        </IconButton>
+                      </InputAdornment>
+                    }
+                    label='كلمة المرور الحالية'
+                    placeholder='كلمة المرور الحالية'
+                    error={Boolean(errors.currentPassword)}
+                  />
+                </FormControl>
+                <FormHelperText>{errors.currentPassword?.message}</FormHelperText>
+              </Grid>
+            )}
+            <Grid size={12}>
+              <FormControl fullWidth variant='outlined' sx={{ marginTop: 3 }} {...register('password')}>
+                <InputLabel>كلمة المرور الجديدة</InputLabel>
+                <OutlinedInput
+                  fullWidth
+                  value={watch('password')}
+                  onChange={e => setValue('password', e.target.value)}
+                  type={showPassword.password ? 'text' : 'password'}
+                  endAdornment={
+                    <InputAdornment position='end'>
+                      <IconButton
+                        aria-label='toggle password visibility'
+                        onClick={() => handleShowPasswordChange('password', !showPassword.password)}
+                        edge='end'
+                      >
+                        {showPassword.password ? <EyeOff /> : <Eye />}
+                      </IconButton>
+                    </InputAdornment>
+                  }
+                  label='كلمة المرور الجديدة'
+                  placeholder='كلمة المرور الجديدة'
+                  error={Boolean(errors.password)}
+                />
+              </FormControl>
+              <FormHelperText>{errors.password?.message}</FormHelperText>
+            </Grid>
+            <Grid size={12}>
+              <FormControl fullWidth variant='outlined' sx={{ marginTop: 3 }} {...register('confirmPassword')}>
+                <InputLabel>تأكيد كلمة المرور</InputLabel>
+                <OutlinedInput
+                  fullWidth
+                  value={watch('confirmPassword')}
+                  onChange={e => setValue('confirmPassword', e.target.value)}
+                  type={showPassword.confirmPassword ? 'text' : 'password'}
+                  endAdornment={
+                    <InputAdornment position='end'>
+                      <IconButton
+                        aria-label='toggle password visibility'
+                        onClick={() => handleShowPasswordChange('confirmPassword', !showPassword.confirmPassword)}
+                        edge='end'
+                      >
+                        {showPassword.confirmPassword ? <EyeOff /> : <Eye />}
+                      </IconButton>
+                    </InputAdornment>
+                  }
+                  label='تأكيد كلمة المرور'
+                  placeholder='تأكيد كلمة المرور'
+                  error={Boolean(errors.confirmPassword)}
+                />
+              </FormControl>
+              <FormHelperText>{errors.confirmPassword?.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 ResetPasswordDialog