robobyte-front-builder 1.0.0

package/src/pages/authModule/forgot-password/index.js

@@ -0,0 +1,228 @@
+// ** Next Imports
+import Link from 'next/link'
+
+// ** MUI Components
+import MuiLink from '@mui/material/Link'
+import Button from '@mui/material/Button'
+import TextField from '@mui/material/TextField'
+import Box from '@mui/material/Box'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { styled, useTheme } from '@mui/material/styles'
+import Typography from '@mui/material/Typography'
+
+// ** Icons Imports
+import ChevronLeft from 'mdi-material-ui/ChevronLeft'
+
+// ** Configs
+import themeConfig from 'src/configs/themeConfig'
+
+// ** Layout Import
+import BlankLayout from 'src/@core/layouts/BlankLayout'
+
+// ** Hooks
+import { useSettings } from 'src/@core/hooks/useSettings'
+
+// ** Demo Imports
+import FooterIllustrationsV2 from 'views/pages/auth/FooterIllustrationsV2'
+
+// Styled Components
+const ForgotPasswordIllustrationWrapper = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(20),
+  paddingRight: '0 !important',
+  [theme.breakpoints.down('lg')]: {
+    padding: theme.spacing(10)
+  }
+}))
+
+const ForgotPasswordIllustration = 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 ForgotPassword = () => {
+  // ** Hooks
+  const theme = useTheme()
+  const { settings } = useSettings()
+
+  // ** Vars
+  const { skin } = settings
+  const hidden = useMediaQuery(theme.breakpoints.down('md'))
+
+  const handleSubmit = e => {
+    e.preventDefault()
+  }
+
+  const imageSource =
+    skin === 'bordered' ? 'auth-v2-forgot-password-illustration-bordered' : 'auth-v2-forgot-password-illustration'
+
+  return (
+    <Box className='content-right'>
+      {!hidden ? (
+        <Box sx={{ flex: 1, display: 'flex', position: 'relative', alignItems: 'center', justifyContent: 'center' }}>
+          <ForgotPasswordIllustrationWrapper>
+            <ForgotPasswordIllustration
+              alt='forgot-password-illustration'
+              src={`/images/pages/${imageSource}-${theme.palette.mode}.png`}
+            />
+          </ForgotPasswordIllustrationWrapper>
+          <FooterIllustrationsV2 image={`/images/pages/auth-v2-forgot-password-mask-${theme.palette.mode}.png`} />
+        </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'
+              }}
+            >
+              <svg width={47} fill='none' height={26} viewBox='0 0 268 150' xmlns='http://www.w3.org/2000/svg'>
+                <rect
+                  rx='25.1443'
+                  width='50.2886'
+                  height='143.953'
+                  fill={theme.palette.primary.main}
+                  transform='matrix(-0.865206 0.501417 0.498585 0.866841 195.571 0)'
+                />
+                <rect
+                  rx='25.1443'
+                  width='50.2886'
+                  height='143.953'
+                  fillOpacity='0.4'
+                  fill='url(#paint0_linear_7821_79167)'
+                  transform='matrix(-0.865206 0.501417 0.498585 0.866841 196.084 0)'
+                />
+                <rect
+                  rx='25.1443'
+                  width='50.2886'
+                  height='143.953'
+                  fill={theme.palette.primary.main}
+                  transform='matrix(0.865206 0.501417 -0.498585 0.866841 173.147 0)'
+                />
+                <rect
+                  rx='25.1443'
+                  width='50.2886'
+                  height='143.953'
+                  fill={theme.palette.primary.main}
+                  transform='matrix(-0.865206 0.501417 0.498585 0.866841 94.1973 0)'
+                />
+                <rect
+                  rx='25.1443'
+                  width='50.2886'
+                  height='143.953'
+                  fillOpacity='0.4'
+                  fill='url(#paint1_linear_7821_79167)'
+                  transform='matrix(-0.865206 0.501417 0.498585 0.866841 94.1973 0)'
+                />
+                <rect
+                  rx='25.1443'
+                  width='50.2886'
+                  height='143.953'
+                  fill={theme.palette.primary.main}
+                  transform='matrix(0.865206 0.501417 -0.498585 0.866841 71.7728 0)'
+                />
+                <defs>
+                  <linearGradient
+                    y1='0'
+                    x1='25.1443'
+                    x2='25.1443'
+                    y2='143.953'
+                    id='paint0_linear_7821_79167'
+                    gradientUnits='userSpaceOnUse'
+                  >
+                    <stop />
+                    <stop offset='1' stopOpacity='0' />
+                  </linearGradient>
+                  <linearGradient
+                    y1='0'
+                    x1='25.1443'
+                    x2='25.1443'
+                    y2='143.953'
+                    id='paint1_linear_7821_79167'
+                    gradientUnits='userSpaceOnUse'
+                  >
+                    <stop />
+                    <stop offset='1' stopOpacity='0' />
+                  </linearGradient>
+                </defs>
+              </svg>
+              <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'>Forgot Password? 🔒</TypographyStyled>
+              <Typography variant='body2'>
+                Enter your email and we&prime;ll send you instructions to reset your password
+              </Typography>
+            </Box>
+            <form noValidate autoComplete='off' onSubmit={handleSubmit}>
+              <TextField autoFocus type='email' label='Email' sx={{ display: 'flex', mb: 4 }} />
+              <Button fullWidth size='large' type='submit' variant='contained' sx={{ mb: 5.25 }}>
+                Send reset link
+              </Button>
+              <Typography sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                <Link passHref href='/login'>
+                  <Typography
+                    component={MuiLink}
+                    sx={{ display: 'flex', alignItems: 'center', color: 'primary.main', justifyContent: 'center' }}
+                  >
+                    <ChevronLeft sx={{ mr: 1.5, fontSize: '2rem' }} />
+                    <span>Back to login</span>
+                  </Typography>
+                </Link>
+              </Typography>
+            </form>
+          </BoxWrapper>
+        </Box>
+      </RightWrapper>
+    </Box>
+  )
+}
+ForgotPassword.guestGuard = true
+ForgotPassword.getLayout = page => <BlankLayout>{page}</BlankLayout>
+
+export default ForgotPassword

package/src/pages/authModule/permissions/rolePermissions/[id]/rolePermissionsUser/index.js

@@ -0,0 +1,392 @@
+// ** React Imports
+// ** Next Import
+
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import { Grid } from '@mui/material';
+
+import Typography from '@mui/material/Typography'
+import CardHeader from '@mui/material/CardHeader'
+
+// ** Icons Imports
+import { DotsVerticalCircleOutline, Plus } from 'mdi-material-ui'
+// ** Store Imports
+
+// ** Custom Components Imports
+import { useEffect, useState } from 'react'
+import { Endpoints, Services } from 'services/Endpoints'
+import handleChange from 'services/helper/handleChange'
+import CustomPagination from 'views/pages/misc/muiTable/CustomPagination'
+import {
+  Autocomplete,
+  Button,
+  ButtonGroup,
+  Card,
+  CardContent,
+  Dialog,
+  FormControl,
+  IconButton,
+  Popover,
+  TextField
+} from '@mui/material'
+import { useRouter } from 'next/router'
+import AddUserRoleDialog from 'views/rolePermissionsUsers/AddUserRoleDialog'
+import ConfirmDelete from 'views/ConfirmDialog'
+// ** Utils Import
+
+// ** Actions Imports
+
+// ** Custom Components Imports
+
+const RoleUsersPage = props => {
+  // ** State
+  const [roleUsers, setroleUsers] = useState([])
+  const [role, setRole] = useState({})
+  const [isLoading, setIsLoading] = useState(false)
+  const [anchorEl, setAnchorEl] = useState(null)
+  const [governorates, setGovernorates] = useState([])
+  const [transferReceiptSelected, setTransferReceiptSelected] = useState(null)
+  const [sectors, setSectors] = useState([])
+
+  const router = useRouter()
+  const { id } = router.query
+  const [selectedChildRow, setSelectedChildRow] = useState()
+  const [showAddSidebar, setShowProductSidebar] = useState(false)
+  const [Filter, setFilter] = useState({
+    TotalCount: 0,
+    PageSize: 20,
+    PageNumber: 0,
+    PageCount: 1,
+    sector: null,
+    governorate: null,
+    name: ''
+  })
+  const [openDialogs, setOpenDialogs] = useState({
+    addUser: false,
+    confirmDelete: false,
+  })
+  const columns = [
+    {
+      flex: 0.2,
+      minWidth: 150,
+      field: 'id',
+      headerName: 'id',
+      renderCell: ({ row }) => {
+        return (
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>{row.id}</Typography>
+          </Box>
+        )
+      }
+    },
+
+
+    {
+      flex: 0.2,
+      minWidth: 150,
+      field: 'name',
+      headerName: 'الأسم',
+      renderCell: ({ row }) => {
+        return (
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>{row.user?.contact?.fullname}</Typography>
+          </Box>
+        )
+      }
+    },
+
+    {
+      flex: 0.2,
+      minWidth: 150,
+      field: 'userName',
+      headerName: 'اسم المستخدم',
+      renderCell: ({ row }) => {
+        return (
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography>{row.user.userName}</Typography>
+          </Box>
+        )
+      }
+    },
+    {
+      flex: 0.1,
+      minWidth: 100,
+      field: 'actions',
+      headerName: 'مهام',
+      renderCell: ({ row }) => {
+        return (
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <IconButton
+              sx={{ color: 'primary.light' }}
+              onClick={e => {
+                setAnchorEl(e.currentTarget)
+                setSelectedChildRow(row)
+              }}
+            >
+              <DotsVerticalCircleOutline />
+            </IconButton>
+          </Box>
+        )
+      }
+    }
+  ]
+
+
+  // async function handleGetSectors(fun) {
+  //   try {
+  //     let response
+  //     let filter = { governorateId: Filter.governorate.id }
+  //     response = await Services.PostService(Endpoints.Locations.Post.GetSectors, false, filter)
+  //     if (response) {
+  //       response.data = response.data.map((value, index) => ({ ...value, key: index }))
+  //       fun(response.data)
+  //     } else {
+  //       fun([])
+  //     }
+  //   } catch (error) {
+  //     false
+  //   } finally {
+  //   }
+  // }
+
+  async function handleGetUsersRole() {
+    let response = null
+    try {
+      setIsLoading(true)
+      let data = {
+        viewPermissionRoleId: id,
+      }
+      response = await Services.PostService(Endpoints.ViewPermissionRoleUsers.Post.GetViewPermissionRoleUsers, false, data, {
+        page: Filter.PageNumber + 1,
+        pageSize: Filter.PageSize
+      })
+      if (response) {
+        setroleUsers(response.data)
+        setFilter(preValue => ({
+          ...preValue,
+          TotalCount: response.totalCount,
+          PageCount: Math.ceil(response.totalCount / Filter.PageSize)
+        }))
+      } else {
+        setroleUsers([])
+        setFilter(preValue => ({
+          ...preValue,
+          TotalCount: 0,
+          PageCount: 0
+        }))
+      }
+    } catch (error) {
+      setIsLoading(false)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  async function handleGetRoleById() {
+    let response = null
+    try {
+      setIsLoading(true)
+      response = await Services.GetService(Endpoints.ViewPermissionRole.Get.GetRoleById, false, { id: id })
+      if (response) {
+        setRole(response.data)
+      } else {
+        setRole({})
+      }
+    } catch (error) {
+      setIsLoading(false)
+    } finally {
+      setIsLoading(false)
+    }
+
+
+  }
+
+  async function handleDeleteUserRole() {
+    let response
+    try {
+      setIsLoading(true)
+      response = await Services.DeleteService(
+        Endpoints.ViewPermissionRoleUsers.Delete.DeleteUserViewPermissionRole,
+        true,
+        {},
+        {
+          id: selectedChildRow.id,
+        }
+      )
+      if (response) {
+        handleGetUsersRole()
+      } else {
+
+      }
+    } catch (error) {
+      setIsLoading(false)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+
+  function handleFilterChange(field, value) {
+    handleChange(setFilter, field, value)
+  }
+
+  const handleToggleDialogs = dialog => {
+    handleChange(setOpenDialogs, dialog, !openDialogs[dialog])
+  }
+
+
+  useEffect(() => {
+    handleGetUsersRole()
+  }, [Filter.PageNumber, Filter.PageSize])
+
+  useEffect(() => {
+    handleGetRoleById()
+  }, [])
+
+  const handleAddSidebarToggle = () => setShowProductSidebar(!showAddSidebar)
+  return (
+    <Card>
+      <Grid container>
+        <Grid size={12}>
+          <CardHeader
+            title={
+              <Box>
+                <Typography variant='h6'>{`مستخدمين الدور-${role.name}`}</Typography>
+              </Box>
+            }
+            sx={{ pb: 4, '& .MuiCardHeader-title': { letterSpacing: '.15px' } }}
+            action={
+              <Grid container size={12} spacing={1}>
+                <Grid item>
+                  <Button variant='contained' onClick={() => handleGetUsersRole()}>
+                    بحث
+                  </Button>
+                </Grid>
+                <Grid item>
+                  <Button
+                    variant='contained'
+
+                    onClick={() => {
+                      handleToggleDialogs('addUser')
+                      setSelectedChildRow(null)
+                    }}
+                  >
+                    <Plus />
+                  </Button>
+                </Grid>
+              </Grid>
+            }
+          />
+          <CardContent>
+            <Grid container spacing={3}>
+              {/* <Grid size={3}>
+                <FormControl fullWidth>
+                  <Autocomplete
+                    size='small'
+                    value={Filter.governorate}
+                    fullWidth
+                    options={governorates}
+                    onChange={(e, value) => {
+                      handleFilterChange('governorate', value)
+                    }}
+                    getOptionLabel={option => option?.name}
+                    renderInput={params => (
+                      <TextField
+                        label='المحافظة'
+                        {...params}
+                        onFocus={() => {
+                          handleGetGovernorates(setGovernorates)
+                        }}
+                      />
+                    )}
+                  />
+                </FormControl>
+              </Grid> */}
+            </Grid>
+          </CardContent>
+          <DataGrid
+            columns={columns}
+            loading={isLoading}
+            autoHeight
+            rows={roleUsers}
+            disableRowSelectionOnClick
+            pageSizeOptions={[10, 25, 50]}
+            paginationMode='server'
+            rowCount={Filter.TotalCount}
+            pagination
+            paginationModel={{ page: Filter.PageNumber, pageSize: Filter.PageSize }}
+            onPaginationModelChange={model => {
+              setFilter(preValue => ({
+                ...preValue,
+                PageNumber: model.page,
+                PageSize: model.pageSize
+              }))
+            }}
+            slots={{
+              pagination: CustomPagination
+            }}
+          />
+        </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
+                color={'error'}
+                onClick={() => {
+                  handleToggleDialogs('confirmDelete')
+                }}
+              >
+                حذف
+              </Button>
+
+            </ButtonGroup>
+          </Box>
+        </Popover>
+      </Grid>
+      <Dialog
+        fullWidth
+        open={openDialogs.addUser}
+        maxWidth='lg'
+        scroll='body'
+        onClose={() => handleToggleDialogs('addUser')}
+      >
+        <AddUserRoleDialog handleToggleDialogs={handleToggleDialogs} dialog='addUser' handleGetUsersRole={handleGetUsersRole} id={id} />
+      </Dialog>
+
+      <Dialog
+        fullWidth
+        open={openDialogs.confirmDelete && selectedChildRow != null}
+        maxWidth='lg'
+        scroll='body'
+        onClose={() => handleToggleDialogs('confirmDelete')}
+      >
+        <ConfirmDelete handleToggleDialogs={handleToggleDialogs} dialog='confirmDelete' actionsFunction={handleDeleteUserRole} />
+      </Dialog>
+    </Card>
+  )
+}
+RoleUsersPage.acl = {
+  action: 'view',
+  subject: 'rolePermissionsUser'
+}
+
+export default RoleUsersPage