robobyte-front-builder 1.0.0

package/src/views/pages/users/UserManageDialog.js

@@ -0,0 +1,283 @@
+// ** React Imports
+import { useEffect, useState } from 'react'
+
+// ** MUI Imports
+import Select from '@mui/material/Select'
+import Button from '@mui/material/Button'
+import MenuItem from '@mui/material/MenuItem'
+import TextField from '@mui/material/TextField'
+import InputLabel from '@mui/material/InputLabel'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import FormControl from '@mui/material/FormControl'
+import FormHelperText from '@mui/material/FormHelperText'
+
+// ** Third Party Imports
+import * as yup from 'yup'
+import { setLocale } from 'yup'
+
+import { yupResolver } from '@hookform/resolvers/yup'
+import { useForm, Controller } from 'react-hook-form'
+
+// ** Icons Imports
+import Close from 'mdi-material-ui/Close'
+
+// ** Store Imports
+import {
+  CircularProgress,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControlLabel,
+  Grid,
+  IconButton,
+  Switch
+} from '@mui/material'
+import handleChange from 'src/services/helper/handleChange'
+import { Endpoints, Services } from 'src/services/Endpoints'
+
+// ** Actions Imports
+
+const UserManageDialog = props => {
+  const { setShowDialog, dealerId, userRole } = props
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [classifications, setClassifications] = useState([])
+  const [modUser, setModUser] = useState({
+    displayName: '',
+    userName: '',
+    phone: '',
+    userRole: 'POS',
+    email: `Test@GBSimSystem.com`,
+    dealerId: dealerId,
+    userClassId: 0
+  })
+
+  const schema = yup.object().shape({
+    userName: yup.string().notOneOf([' ']).required(),
+    displayName: yup.string().required(),
+    phone: yup.string().length(11).required(),
+    userRole: yup.mixed().required().default(modUser.userRole),
+    password: yup.string().min(6).required(),
+    userClassId: yup.number().when('userRole', {
+      is: x => x == 'POS',
+      then: yup.number().moreThan(0, 'يرجى اختيار الصنف')
+    }),
+    confirmPassword: yup
+      .string()
+      .required()
+      .oneOf([yup.ref('password')], 'كلمة المرور غير متطابقة')
+  })
+  function handleUserChange(field, value) {
+
+
+    handleChange(setModUser, field, value)
+  }
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm({
+    defaultValues: { userClassId: 0 },
+    mode: 'onBlur',
+    reValidateMode: 'onBlur',
+    resolver: yupResolver(schema)
+  })
+  async function handleSave() {
+    try {
+      setIsSubmitting(true)
+
+      let data = {
+        ...modUser,
+        dealerId: dealerId,
+        userClassId: modUser.userClassId == 0 ? null : modUser.userClassId,
+        email: `${modUser.userName}@GBSimSystem.com`
+      }
+
+      await Services.PostService(Endpoints.Users.Post.Register, true, data)
+    } catch (error) {
+      setIsSubmitting(false)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  async function handleGetClassifications() {
+    try {
+      let response = null
+      response = await Services.GetService(Endpoints.Classifications.Get.GetAll, true)
+
+      if (response) {
+        response = response.data.map(item => ({ ...item, userClassId: item.userClass != null ? item.userClass.id : 0 }))
+        setClassifications(response)
+      } else {
+        setClassifications([])
+      }
+    } catch (error) {
+      false
+    } finally {
+    }
+  }
+
+  useEffect(() => {
+    handleGetClassifications()
+  }, [])
+  return (
+    <>
+      <form
+        onSubmit={handleSubmit(e => {
+          handleSave()
+        })}
+      >
+        <DialogContent sx={{ pb: 6, px: { xs: 8, sm: 15 }, pt: { xs: 8, sm: 12.5 }, position: 'relative' }}>
+          <IconButton
+            size='small'
+            sx={{ position: 'absolute', left: '1rem', top: '1rem' }}
+            onClick={() => setShowDialog(false)}
+          >
+            <Close />
+          </IconButton>
+          <DialogTitle title='Test'>
+            <Box sx={{ mb: 8, textAlign: 'center' }}>
+              <Typography variant='h5' sx={{ mb: 3, lineHeight: '2rem' }}>
+                تسجيل مستخدم جديد
+              </Typography>
+              <Typography variant='body2'>جميع الحقول مطلوبة</Typography>
+            </Box>
+          </DialogTitle>
+
+          <Grid container spacing={6}>
+            <Grid item sm={6} size={12}>
+              <TextField
+                {...register('userName')}
+                fullWidth
+                label='اسم المستخدم'
+                placeholder='اسم المستخدم'
+                value={modUser.userName}
+                onChange={e => handleUserChange('userName', e.target.value)}
+                error={Boolean(errors.userName)}
+              />
+              <FormHelperText>{errors.userName?.message}</FormHelperText>
+            </Grid>
+            <Grid item sm={6} size={12}>
+              <TextField
+                {...register('displayName')}
+                value={modUser.displayName}
+                onChange={e => handleUserChange('displayName', e.target.value)}
+                fullWidth
+                label='صاحب الحساب'
+                placeholder='صاحب الحساب'
+                error={Boolean(errors.displayName)}
+              />
+              <FormHelperText>{errors.displayName?.message}</FormHelperText>
+            </Grid>
+
+            <Grid item sm={6} size={12}>
+              <TextField
+                type='number'
+                {...register('phone')}
+                value={modUser.phone}
+                onChange={e => handleUserChange('phone', e.target.value)}
+                fullWidth
+                label='رقم الهاتف'
+                placeholder='رقم الهاتف'
+                error={Boolean(errors.phone)}
+              />
+              <FormHelperText>{errors.phone?.message}</FormHelperText>
+            </Grid>
+            <Grid item sm={6} size={12}>
+              <FormControl fullWidth>
+                <InputLabel id='status-select'>نوع الحساب</InputLabel>
+                <Select
+                  {...register('userRole')}
+                  value={modUser.userRole}
+                  fullWidth
+                  labelId='status-select'
+                  label='نوع الحساب'
+                  onChange={e => handleUserChange('userRole', e.target.value)}
+                  error={Boolean(errors.userRole)}
+                >
+                  {userRole == 'Owner' && <MenuItem value='Dealer'>مزود</MenuItem>}
+                  {userRole == 'Owner' && <MenuItem value='Supervisor'>مشرف</MenuItem>}
+                  <MenuItem value='POS'>نقطة بيع</MenuItem>
+                </Select>
+              </FormControl>
+              <FormHelperText>{errors.userRole?.message}</FormHelperText>
+            </Grid>
+            <Grid item sm={6} size={12}>
+              <TextField
+                {...register('password')}
+                onChange={e => handleUserChange('password', e.target.value)}
+                value={modUser.password}
+                type='password'
+                fullWidth
+                label='كلمة المرور'
+                placeholder='كلمة المرور'
+                error={Boolean(errors.password)}
+              />
+              <FormHelperText>{errors.password?.message}</FormHelperText>
+            </Grid>
+            <Grid item sm={6} size={12}>
+              <TextField
+                {...register('confirmPassword')}
+                onChange={e => handleUserChange('confirmPassword', e.target.value)}
+                value={modUser.confirmPassword}
+                type='password'
+                fullWidth
+                label='تأكيد كلمة المرور'
+                placeholder='تأكيد كلمة المرور'
+                error={Boolean(errors.confirmPassword)}
+              />
+              <FormHelperText>{errors.confirmPassword?.message}</FormHelperText>
+            </Grid>
+            {modUser.userRole == 'POS' && (
+              <Grid item size={12} sm={6}>
+                <FormControl fullWidth>
+                  <InputLabel>التصنيف</InputLabel>
+                  <Select
+                    {...register('userClassId')}
+                    error={Boolean(errors.userClassId)}
+                    required
+                    label='التصنيف'
+                    value={modUser.userClassId}
+                    onChange={e => {
+                      handleUserChange('userClassId', e.target.value)
+                    }}
+                  >
+                    <MenuItem value={0}>يرجى اختيار الصنف</MenuItem>
+
+                    {classifications.map((item, index) => (
+                      <MenuItem key={index} value={item.id}>
+                        {item.name}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                  <FormHelperText>{errors.userClassId?.message}</FormHelperText>
+                </FormControl>
+              </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={() => setShowDialog(false)}>
+              الغاء
+            </Button>
+          </DialogActions>
+        </DialogContent>
+      </form>
+    </>
+  )
+}
+
+export default UserManageDialog

package/src/views/pages/users/UserViewPage.js

@@ -0,0 +1,199 @@
+// ** React Imports
+import { useEffect, useState } from 'react'
+
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import Card from '@mui/material/Card'
+import TabList from '@mui/lab/TabList'
+import TabPanel from '@mui/lab/TabPanel'
+import TabContext from '@mui/lab/TabContext'
+import { styled } from '@mui/material/styles'
+import MuiTab from '@mui/material/Tab'
+
+// ** Icons Imports
+import AccountOutline from 'mdi-material-ui/AccountOutline'
+import LockOpenOutline from 'mdi-material-ui/LockOpenOutline'
+import { HandshakeOutline, BallotOutline, ChartBoxOutline, WalletOutline, AccountGroupOutline } from 'mdi-material-ui'
+// ** Demo Tabs Imports
+
+import UserTabAccount from '../users/tabs/UserTabAccount'
+
+import UserTabSecurity from '../users/tabs/UserTabSecurity'
+
+// ** Third Party Styles Imports
+import 'react-datepicker/dist/react-datepicker.css'
+import UserTabDeals from './tabs/UserTabDeals'
+import { Endpoints, Services } from 'src/services/Endpoints'
+import UserTabRequests from './tabs/UserTabRequests'
+import UserTabSummary from './tabs/UserTabSummary'
+import UserTabFinance from './tabs/UserTabFinance'
+import UserTabPOS from './tabs/UserTabPOS'
+import UserTabSuperUsers from './tabs/UserTabSuperUsers'
+
+const Tab = styled(MuiTab)(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    minWidth: 100
+  },
+  [theme.breakpoints.down('sm')]: {
+    minWidth: 67
+  }
+}))
+
+const TabName = styled('span')(({ theme }) => ({
+  lineHeight: 1.71,
+  marginLeft: theme.spacing(2.5),
+  [theme.breakpoints.down('md')]: {
+    display: 'none'
+  }
+}))
+
+const UserViewPage = props => {
+  // ** State
+  const { userId, tab } = props
+  const [value, setValue] = useState(tab ?? 'account')
+  const handleChange = (event, newValue) => {
+    setValue(newValue)
+  }
+  const [user, setUser] = useState(null)
+  async function handleGetUser() {
+    try {
+      let response = null
+      response = await Services.GetService(Endpoints.Users.Get.GetUserById, false, { userId: userId })
+      if (response) setUser(response)
+    } catch (error) {
+      false
+    } finally {
+    }
+  }
+  useEffect(() => {
+    if (userId != null) handleGetUser()
+  }, [userId])
+  return (
+    <Card>
+      <TabContext value={value}>
+        <TabList
+          onChange={handleChange}
+          aria-label='account-settings tabs'
+          sx={{ borderBottom: theme => `1px solid ${theme.palette.divider}` }}
+          variant='scrollable'
+        >
+          <Tab
+            value='account'
+            label={
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <AccountOutline sx={{ fontSize: '1.125rem' }} />
+                <TabName>معلومات الحساب</TabName>
+              </Box>
+            }
+          />
+          <Tab
+            value='security'
+            label={
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <LockOpenOutline sx={{ fontSize: '1.125rem' }} />
+                <TabName>الامان</TabName>
+              </Box>
+            }
+          />
+          {user?.roles[0] == 'Dealer' && (
+            <Tab
+              value='deals'
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <HandshakeOutline sx={{ fontSize: '1.125rem' }} />
+                  <TabName>الاتفاقات</TabName>
+                </Box>
+              }
+            />
+          )}
+          {(user?.roles[0] == 'Dealer' || user?.roles[0] == 'POS') && (
+            <Tab
+              value='requests'
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <BallotOutline sx={{ fontSize: '1.125rem' }} />
+                  <TabName>الطلبات</TabName>
+                </Box>
+              }
+            />
+          )}
+          {(user?.roles[0] == 'Dealer' || user?.roles[0] == 'POS') && (
+            <Tab
+              value='summary'
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <ChartBoxOutline sx={{ fontSize: '1.125rem' }} />
+                  <TabName>احصائيات</TabName>
+                </Box>
+              }
+            />
+          )}
+          <Tab
+            value='finance'
+            label={
+              <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                <WalletOutline sx={{ fontSize: '1.125rem' }} />
+                <TabName>الحسابات المالية</TabName>
+              </Box>
+            }
+          />
+          {user?.roles[0] == 'Dealer' && (
+            <Tab
+              value='pos'
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <AccountGroupOutline sx={{ fontSize: '1.125rem' }} />
+                  <TabName>نقاط البيع</TabName>
+                </Box>
+              }
+            />
+          )}
+          {user?.roles[0] == 'Supervisor' && (
+            <Tab
+              value='superUsers'
+              label={
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <AccountGroupOutline sx={{ fontSize: '1.125rem' }} />
+                  <TabName>الحسابات</TabName>
+                </Box>
+              }
+            />
+          )}
+        </TabList>
+
+        <TabPanel sx={{ p: 0 }} value='account'>
+          <UserTabAccount userId={userId} />
+        </TabPanel>
+        <TabPanel sx={{ p: 0 }} value='security'>
+          <UserTabSecurity userId={userId} />
+        </TabPanel>
+        {user?.roles[0] == 'Dealer' && (
+          <TabPanel sx={{ p: 0 }} value='deals'>
+            <UserTabDeals userId={userId} userRole={user?.roles[0]} />
+          </TabPanel>
+        )}
+        <TabPanel sx={{ p: 0 }} value='requests'>
+          <UserTabRequests userId={userId} userRole={user?.roles[0]} />
+        </TabPanel>
+        <TabPanel sx={{ p: 0 }} value='summary'>
+          <UserTabSummary userId={userId} userRole={user?.roles[0]} />
+        </TabPanel>
+        <TabPanel sx={{ p: 0 }} value='finance'>
+          <UserTabFinance userId={userId} userRole={user?.roles[0]} />
+        </TabPanel>
+        {user?.roles[0] == 'Dealer' && (
+          <TabPanel sx={{ p: 0 }} value='pos'>
+            <UserTabPOS userId={userId} userRole={user?.roles[0]} />
+          </TabPanel>
+        )}
+        {user?.roles[0] == 'Supervisor' && (
+          <TabPanel sx={{ p: 0 }} value='superUsers'>
+            <UserTabSuperUsers userId={userId} userRole={user?.roles[0]} />
+          </TabPanel>
+        )}
+      </TabContext>
+    </Card>
+  )
+}
+
+export default UserViewPage

package/src/views/users/AddUserNameDialog.js

@@ -0,0 +1,162 @@
+// ** 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,
+} from '@mui/material'
+import Box from '@mui/material/Box'
+import { Close } 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'
+import { useEffect } from 'react'
+const defaultItem = {
+  userName: null,
+}
+const schema = yup.object().shape({
+  userName: yup.string().required('اسم المستخدم مطلوب')
+})
+
+
+const AddUserNameDialog = props => {
+  // ** Props
+  const { handleToggleDialogs, dialog, user, setRefresh } = props
+  const [IsSubmitting, setIsSubmitting] = useState(false)
+  const schema = yup.object().shape({
+  })
+  const {
+    register,
+    handleSubmit,
+    clearErrors,
+    control,
+    getValues,
+    setValue,
+    reset,
+    watch,
+    formState: { errors }
+  } = useForm({
+    mode: 'onChange',
+    reValidateMode: 'onBlur',
+    resolver: yupResolver(schema),
+    defaultValues: defaultItem
+  })
+  async function handleSave(values) {
+
+
+    try {
+      let response = null
+      setIsSubmitting(true)
+      let data = {
+        userName: values?.userName,
+      }
+      response = await Services.UpdateService(Endpoints.Users.Put.UpdateUser, true, data, { id: user.id })
+      if (response) {
+        handleToggleDialogs(dialog)
+        setRefresh()
+      }
+    } catch (error) {
+      setIsSubmitting(false)
+    } finally {
+      setIsSubmitting(false)
+    }
+
+  }
+
+
+
+  function handleFilterChange(field, value) {
+    handleChange(setFilter, field, value)
+  }
+
+  const handleSetDefaults = () => {
+    reset()
+  }
+
+  const handleDialogClose = async () => {
+    handleToggleDialogs(dialog)
+  }
+
+  useEffect(() => {
+    reset({ ...user })
+    console.log(user)
+  }, [user])
+
+
+
+  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 size={12}>
+              <TextField
+                sx={{ marginTop: 3 }}
+                {...register('userName')}
+                type='text'
+                size='small'
+                value={watch('userName') || ''}
+                fullWidth
+                label='اسم المستخدم'
+                placeholder='لاسم المستخدم'
+                error={Boolean(errors.userName)}
+              />
+              <FormHelperText>{errors.userName?.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 AddUserNameDialog