robobyte-front-builder 1.0.0

package/src/pages/authModule/users/index.js

@@ -0,0 +1,210 @@
+import Box from '@mui/material/Box'
+import { Grid } from '@mui/material';
+import Typography from '@mui/material/Typography'
+import CardHeader from '@mui/material/CardHeader'
+import { DotsVerticalCircleOutline, Plus } from 'mdi-material-ui'
+import { useEffect,useState } from 'react'
+import { Endpoints, Services } from 'services/Endpoints'
+import handleChange from 'services/helper/handleChange'
+import {
+  Avatar,
+  Button,
+  ButtonGroup,
+  Card,
+  Dialog,
+  IconButton,
+  Popover,
+} from '@mui/material'
+import { useRouter } from 'next/router'
+import ContactManage from 'views/users/ContactManage'
+import { Filter1Outlined, FilterAlt, RefreshOutlined } from "@mui/icons-material";
+import TAGGrid from "views/genericTable/TAGGrid";
+import ResetPasswordDialog from 'views/users/ResetPasswordDialog'
+import AddUserNameDialog from "views/users/AddUserNameDialog";
+
+const contactMetaData =  {
+  pageId : '48b09dd4-5be1-40fc-9494-e6fe5ccd36c9',
+  name : 'UserPage',
+  description : 'User Page'
+}
+
+const ContactsPage = props => {
+  const [anchorEl, setAnchorEl] = useState(null)
+  const router = useRouter()
+  const [selectedChildRow, setSelectedChildRow] = useState()
+  const [refresh, setRefresh] = useState(false)
+  const [className, setClassName] = useState(null)
+  const { userType } = router.query
+  const [Filter, setFilter] = useState(() => {
+    const isValidUserType = userType !== null && userType !== undefined && userType !== '';
+    return {
+      ...(isValidUserType && {
+        fixedTFilter: [
+          {
+            path: 'userType',
+            method: 'Equals',
+            value: userType,
+          },
+        ],
+      }),
+      Tfilter: [],
+      LocalTfilter: [],
+    };
+  });
+  const [openDialogs, setOpenDialogs] = useState({
+    resetPassword: false,
+    updateUser: false,
+    userInfo: false,
+    CustomFilter: false,
+  })
+
+  const actions = (params) => {
+    return <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <IconButton
+        sx={{ color: 'primary.light' }}
+        onClick={e => {
+          setAnchorEl(e.currentTarget)
+          setSelectedChildRow(params.data)
+        }}
+      >
+        <DotsVerticalCircleOutline />
+      </IconButton>
+    </Box>
+  }
+  function handleFilterChange(field, value) {
+    handleChange(setFilter, field, value)
+  }
+  const handleToggleDialogs = dialog => {
+    handleChange(setOpenDialogs, dialog, !openDialogs[dialog])
+  }
+  async function handleEnableContact(userId, isDisabled) {
+    try {
+      let data = {
+        id: userId,
+        isDisabled: !isDisabled
+      }
+      await Services.UpdateService(Endpoints.Contacts.Put.EnableContact, true, {}, data)
+    } catch (error) {
+      console.error("Error toggling user status:", error);
+    } finally {
+      setRefresh(prev => !prev)
+      setAnchorEl(null)
+    }
+  }
+  useEffect(() => {
+    if (userType !== null && userType !== undefined && userType !== '') {
+      setFilter({
+          fixedTFilter: [
+            {
+              path: 'userType',
+              method: 'Equals',
+              value: userType,
+            },
+          ],
+        }
+      )
+    }
+  }, [userType]);
+
+  return (
+    <Card>
+      <Grid container>
+        <Grid size={12}>
+          <CardHeader
+            title={
+              <Box>
+                <Typography variant='h5'>{`قائمة الاشخاص`}</Typography>
+              </Box>
+            }
+            sx={{ pb: 4, '& .MuiCardHeader-title': { letterSpacing: '.15px' } }}
+            action={
+              <Grid container size={12} spacing={1}>
+                <Grid item>
+                  <IconButton color={'primary'} onClick={() => { handleToggleDialogs('userInfo'), setSelectedChildRow(null) }}>
+                    <Plus />
+                  </IconButton>
+                </Grid>
+
+              </Grid>
+            }
+          />
+          <Grid container spacing={3}>
+            <Grid size={12}>
+              <TAGGrid
+                pagedEndPoint={Endpoints.Contacts.Post.AllGets}
+                groupEndPoint={Endpoints.Contacts.Post.AllGets}
+                streamEndPoint={Endpoints.Contacts.Post.AllGets}
+                actions={actions}
+                refresh={refresh}
+                level={0}
+                setClassName={setClassName}
+                filter={Filter}
+              />
+            </Grid>
+          </Grid>
+          <Popover
+            anchorEl={anchorEl}
+            open={anchorEl != null && selectedChildRow != null}
+            onClose={() => {
+              setAnchorEl(null)
+            }}
+            onClick={() => setAnchorEl(null)}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'center'
+            }}
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'center'
+            }}
+          >
+            <Box sc={{ display: 'flex' }} padding='4px'>
+              <ButtonGroup size='small' orientation='vertical' variant='text'>
+                <Button
+                  onClick={() => {
+                    handleToggleDialogs('userInfo')
+                  }}
+                >
+                  تحديث معلومات المستخدم
+                </Button>
+                <Button
+                  onClick={() => {
+                    handleEnableContact(selectedChildRow?.id, selectedChildRow?.isDisabled)
+                  }}
+                >
+                  {selectedChildRow?.isDisabled ? 'تفعيل الحساب' : 'تعطيل الحساب'}
+                </Button>
+                <Button
+                  onClick={() => {
+                    handleToggleDialogs('resetPassword')
+                  }}
+                >
+                  تغيير كلمة السر
+                </Button>
+              </ButtonGroup>
+            </Box>
+          </Popover>
+        </Grid>
+      </Grid >
+      <Dialog
+        fullWidth
+        open={openDialogs.userInfo}
+        maxWidth='md'
+        scroll='body'
+        onClose={() => {
+          handleToggleDialogs('userInfo')
+        }}
+      >
+        <ContactManage userType={userType} handleToggleDialogs={handleToggleDialogs} contact={selectedChildRow} dialog={'userInfo'} setRefresh={setRefresh} />
+      </Dialog>
+    </Card >
+  )
+}
+
+ContactsPage.acl = {
+  action: 'view',
+  subject: 'users'
+}
+
+
+export default ContactsPage

package/src/pages/index.js

@@ -0,0 +1,44 @@
+// ** React Imports
+import { useEffect } from 'react'
+
+// ** Next Imports
+import { useRouter } from 'next/router'
+
+// ** Spinner Import
+import Spinner from 'src/@core/components/spinner'
+
+// ** Hook Imports
+import { useAuth } from 'src/hooks/useAuth'
+import jwt_decode from 'jwt-decode';
+
+export const getHomeRoute = role => {
+  return '/mainHome'
+}
+
+export const getLoginRoute = () => {
+  return '/login'
+}
+const Home = () => {
+  // ** Hooks
+  const auth = useAuth()
+  const router = useRouter()
+  useEffect(() => {
+    if (!router.isReady) {
+      return
+    }
+
+    if (auth.user) {
+        const homeRoute = getHomeRoute()
+        router.replace(homeRoute)
+      }
+     else {
+      const loginRoute = getLoginRoute()
+      router.replace(loginRoute)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return <Spinner />
+}
+
+export default Home

package/src/pages/login/index.js

@@ -0,0 +1,328 @@
+// ** React Imports
+import { useEffect, useState } from 'react'
+
+// ** Next Imports
+import Link from 'next/link'
+
+// ** MUI Components
+import Alert from '@mui/material/Alert'
+import MuiLink from '@mui/material/Link'
+import Button from '@mui/material/Button'
+import Divider from '@mui/material/Divider'
+import Checkbox from '@mui/material/Checkbox'
+import TextField from '@mui/material/TextField'
+import InputLabel from '@mui/material/InputLabel'
+import IconButton from '@mui/material/IconButton'
+import Box from '@mui/material/Box'
+import FormControl from '@mui/material/FormControl'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import OutlinedInput from '@mui/material/OutlinedInput'
+import { styled, useTheme } from '@mui/material/styles'
+import FormHelperText from '@mui/material/FormHelperText'
+import InputAdornment from '@mui/material/InputAdornment'
+import Typography from '@mui/material/Typography'
+import MuiFormControlLabel from '@mui/material/FormControlLabel'
+
+// ** Icons Imports
+import Google from 'mdi-material-ui/Google'
+import Github from 'mdi-material-ui/Github'
+import Twitter from 'mdi-material-ui/Twitter'
+import Facebook from 'mdi-material-ui/Facebook'
+import EyeOutline from 'mdi-material-ui/EyeOutline'
+import EyeOffOutline from 'mdi-material-ui/EyeOffOutline'
+
+// ** Third Party Imports
+import * as yup from 'yup'
+import { useForm, Controller } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
+
+// ** Hooks
+import { useAuth } from 'src/hooks/useAuth'
+import useBgColor from 'src/@core/hooks/useBgColor'
+import { useSettings } from 'src/@core/hooks/useSettings'
+
+// ** Configs
+import themeConfig from 'src/configs/themeConfig'
+
+// ** Layout Import
+import BlankLayout from 'src/@core/layouts/BlankLayout'
+
+// ** Demo Imports
+import FooterIllustrationsV2 from 'src/views/pages/auth/FooterIllustrationsV2'
+import { CircularProgress } from 'node_modules/@mui/material/index'
+
+// ** Styled Components
+const LoginIllustrationWrapper = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(20),
+  paddingRight: '0 !important',
+  [theme.breakpoints.down('lg')]: {
+    padding: theme.spacing(10)
+  }
+}))
+
+const LoginIllustration = styled('img')(({ theme }) => ({
+  maxWidth: '48rem',
+  [theme.breakpoints.down('xl')]: {
+    maxWidth: '38rem'
+  },
+  [theme.breakpoints.down('lg')]: {
+    maxWidth: '30rem'
+  }
+}))
+
+const RightWrapper = styled(Box)(({ theme }) => ({
+  width: '100%',
+  [theme.breakpoints.up('md')]: {
+    maxWidth: 400
+  },
+  [theme.breakpoints.up('lg')]: {
+    maxWidth: 450
+  }
+}))
+
+const BoxWrapper = styled(Box)(({ theme }) => ({
+  width: '100%',
+  [theme.breakpoints.down('md')]: {
+    maxWidth: 400
+  }
+}))
+
+const TypographyStyled = styled(Typography)(({ theme }) => ({
+  fontWeight: 600,
+  letterSpacing: '0.18px',
+  marginBottom: theme.spacing(1.5),
+  [theme.breakpoints.down('md')]: { marginTop: theme.spacing(8) }
+}))
+
+const FormControlLabel = styled(MuiFormControlLabel)(({ theme }) => ({
+  '& .MuiFormControlLabel-label': {
+    fontSize: '0.875rem',
+    color: theme.palette.text.secondary
+  }
+}))
+
+const schema = yup.object().shape({
+  userName: yup.string().min(5).required(),
+  password: yup.string().min(5).required()
+})
+
+const defaultValues = {
+  password: '',
+  userName: ''
+}
+
+const LoginPage = () => {
+  const [showPassword, setShowPassword] = useState(false)
+
+  // ** Hooks
+  const auth = useAuth()
+  const theme = useTheme()
+  const bgClasses = useBgColor()
+  const { settings } = useSettings()
+  const hidden = useMediaQuery(theme.breakpoints.down('md'))
+  const [IsSubmitting, setIsSubmitting] = useState(false)
+
+  // ** Vars
+  const { skin } = settings
+
+  const {
+    control,
+    setError,
+    handleSubmit,
+    formState: { errors }
+  } = useForm({
+    defaultValues,
+    mode: 'onBlur',
+    resolver: yupResolver(schema)
+  })
+
+  const onSubmit = data => {
+    setIsSubmitting(true)
+    const { userName, password } = data
+    auth.login({ userName, password }, () => {
+      setError('userName', {
+        type: 'manual',
+        message: 'Username or Password is invalid'
+      })
+      setIsSubmitting(false)
+    })
+  }
+  const imageSource = skin === 'bordered' ? 'auth-v2-login-illustration-bordered' : 'auth-v2-login-illustration'
+
+  return (
+    <Box className='content-right'>
+      {!hidden ? (
+        <Box sx={{ flex: 1, display: 'flex', position: 'relative', alignItems: 'center', justifyContent: 'center' }}>
+          <LoginIllustrationWrapper>
+            <LoginIllustration
+              alt='login-illustration'
+              src={`/images/pages/${imageSource}-${theme.palette.mode}.png`}
+            />
+          </LoginIllustrationWrapper>
+          <FooterIllustrationsV2 />
+        </Box>
+      ) : null}
+      <RightWrapper sx={skin === 'bordered' && !hidden ? { borderLeft: `1px solid ${theme.palette.divider}` } : {}}>
+        <Box
+          sx={{
+            p: 7,
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'background.paper'
+          }}
+        >
+          <BoxWrapper>
+            <Box
+              sx={{
+                top: 30,
+                left: 40,
+                display: 'flex',
+                position: 'absolute',
+                alignItems: 'center',
+                justifyContent: 'center'
+              }}
+            >
+              {/*<img src={'/images/appicon.png'} width={40} />*/}
+              <Typography variant='h6' sx={{ ml: 2, lineHeight: 1, fontWeight: 700, fontSize: '1.5rem !important' }}>
+                {themeConfig.templateName}
+              </Typography>
+            </Box>
+            <Box sx={{ mb: 6 }}>
+              <TypographyStyled variant='h5'>{`Welcome to ${themeConfig.templateName}! 👋🏻`}</TypographyStyled>
+              <Typography variant='body2'>Please sign-in to your account and start the adventure</Typography>
+            </Box>
+
+            <form noValidate autoComplete='off' onSubmit={handleSubmit(onSubmit)}>
+              <FormControl fullWidth sx={{ mb: 4 }}>
+                <Controller
+                  name='userName'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field: { value, onChange, onBlur } }) => (
+                    <TextField
+                      autoFocus
+                      label='اسم المستخدم'
+                      value={value}
+                      onBlur={onBlur}
+                      onChange={onChange}
+                      error={Boolean(errors.userName)}
+                      placeholder=''
+                    />
+                  )}
+                />
+                {errors.userName && (
+                  <FormHelperText sx={{ color: 'error.main' }}>{errors.userName.message}</FormHelperText>
+                )}
+              </FormControl>
+              <FormControl fullWidth>
+                <InputLabel htmlFor='auth-login-v2-password' error={Boolean(errors.password)}>
+                  كلمة السر
+                </InputLabel>
+                <Controller
+                  name='password'
+                  control={control}
+                  rules={{ required: true }}
+                  render={({ field: { value, onChange, onBlur } }) => (
+                    <OutlinedInput
+                      value={value}
+                      onBlur={onBlur}
+                      label='كلمة السر'
+                      onChange={onChange}
+                      id='auth-login-v2-password'
+                      error={Boolean(errors.password)}
+                      type={showPassword ? 'text' : 'password'}
+                      endAdornment={
+                        <InputAdornment position='end'>
+                          <IconButton
+                            edge='end'
+                            onMouseDown={e => e.preventDefault()}
+                            onClick={() => setShowPassword(!showPassword)}
+                          >
+                            {showPassword ? <EyeOutline /> : <EyeOffOutline />}
+                          </IconButton>
+                        </InputAdornment>
+                      }
+                    />
+                  )}
+                />
+                {errors.password && (
+                  <FormHelperText sx={{ color: 'error.main' }} id=''>
+                    {errors.password.message}
+                  </FormHelperText>
+                )}
+              </FormControl>
+              <Box
+                sx={{ mb: 4, display: 'flex', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'space-between' }}
+              >
+                {/* <FormControlLabel
+                  label='Remember Me'
+                  control={<Checkbox />}
+                  sx={{ '& .MuiFormControlLabel-label': { color: 'text.primary' } }}
+                /> */}
+                {/* <Link passHref href='/forgot-password'>
+                  <Typography component={MuiLink} variant='body2' sx={{ color: 'primary.main' }}>
+                    Forgot Password?
+                  </Typography>
+                </Link> */}
+              </Box>
+              <Button fullWidth 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>
+              {/* <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
+                <Typography sx={{ mr: 2, color: 'text.secondary' }}>New on our platform?</Typography>
+                <Typography>
+                  <Link passHref href='/register'>
+                    <Typography component={MuiLink} sx={{ color: 'primary.main' }}>
+                      Create an account
+                    </Typography>
+                  </Link>
+                </Typography>
+              </Box> */}
+              {/*<Divider sx={{ mt: 5, mb: 7.5, '& .MuiDivider-wrapper': { px: 4 } }}>تواصل معنا</Divider>*/}
+              {/*<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>*/}
+              {/*  <Link href='/' passHref>*/}
+              {/*    <IconButton component='a' onClick={e => e.preventDefault()}>*/}
+              {/*      <Facebook sx={{ color: '#497ce2' }} />*/}
+              {/*    </IconButton>*/}
+              {/*  </Link>*/}
+              {/*  <Link href='/' passHref>*/}
+              {/*    <IconButton component='a' onClick={e => e.preventDefault()}>*/}
+              {/*      <Twitter sx={{ color: '#1da1f2' }} />*/}
+              {/*    </IconButton>*/}
+              {/*  </Link>*/}
+              {/*  <Link href='/' passHref>*/}
+              {/*    <IconButton component='a' onClick={e => e.preventDefault()}>*/}
+              {/*      <Github*/}
+              {/*        sx={{ color: theme => (theme.palette.mode === 'light' ? '#272727' : theme.palette.grey[300]) }}*/}
+              {/*      />*/}
+              {/*    </IconButton>*/}
+              {/*  </Link>*/}
+              {/*  <Link href='/' passHref>*/}
+              {/*    <IconButton component='a' onClick={e => e.preventDefault()}>*/}
+              {/*      <Google sx={{ color: '#db4437' }} />*/}
+              {/*    </IconButton>*/}
+              {/*  </Link>*/}
+              {/*</Box>*/}
+            </form>
+          </BoxWrapper>
+        </Box>
+      </RightWrapper>
+    </Box>
+  )
+}
+LoginPage.getLayout = page => <BlankLayout>{page}</BlankLayout>
+LoginPage.guestGuard = true
+
+export default LoginPage