robobyte-front-builder 1.0.0

package/public/locales/ar.json

@@ -0,0 +1,35 @@
+{
+  "Home":"الرئيسية",
+  "Users List":"قائمة المستخدمين",
+  "Users":"ادارة المستخدمين",
+  "Dashboards": "لوحة القيادة",
+  "Reports" : "التقارير",
+  "Settings" : "الاعدادات",
+  "Permissions":"الصلاحيات",
+  "System Permission":"صلاحيات النظام",
+  "Roles Permissions":"الصلاحيات والادوار",
+  "System Users Management":"ادارة جميع المستخدمين",
+  "Customer Management" : "ادارة الزبائن",
+  "Supplier Management" : "ادارة الموردين",
+  "CashAccounts":"الصناديق",
+  "Transactions":"الحركات الحسابية",
+  "Invoices" : "الوصولات",
+  "Notifications" : "الاشعارات",
+  "Sectors" : "ادارة المناطق",
+  "Projects" : "المشاريع",
+  "Steps" : "الخطوات",
+  "Payment and Invoices" : "االوصولات والمدفوعات",
+  "Adjustment Receipts" : "قيود التسوية",
+  "Expenses" : "المصاريف",
+  "Loans" : "القروض",
+  "Payment Order" : "وصولات الدفع",
+  "shopCategory": "اصناف المتاجر",
+  "Supplier": "الموردين",
+  "Customer": "الزبائن",
+  "Users Management": "ادارة المستخدمين",
+  "Picker": "مجهزين الطلب",
+  "ShopOwner": "التجار",
+  "ServiceProvider": "مزود الخدمة",
+  "Admin": "مستخدمين النظام",
+  "System Users": "ادارة المستخدمين"
+}

package/public/navigationTest/Navigation.json

@@ -0,0 +1,13 @@
+[
+  {
+    "title": "mainHome",
+    "children": [
+      {
+        "title": "New Item",
+        "type": "dynamic",
+        "path": "/viewer/22",
+        "viewId": 22
+      }
+    ]
+  }
+]

package/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

package/src/@core/components/auth/AclGuard.js

@@ -0,0 +1,55 @@
+// ** React Imports
+import { useState } from 'react'
+
+// ** Next Imports
+import { useRouter } from 'next/router'
+
+// ** Context Imports
+import { AbilityContext } from 'src/layouts/components/acl/Can'
+
+// ** Config Import
+import { buildAbilityFor } from 'src/configs/acl'
+
+// ** Component Import
+import NotAuthorized from 'src/pages/401'
+import BlankLayout from 'src/@core/layouts/BlankLayout'
+
+// ** Hooks
+import { useAuth } from 'src/hooks/useAuth'
+
+const AclGuard = props => {
+  // ** Props
+  const { aclAbilities, children, guestGuard } = props
+  const [ability, setAbility] = useState(undefined)
+
+  // ** Hooks
+  const auth = useAuth()
+  const router = useRouter()
+  console.log(auth)
+  // If guestGuard is true and user is not logged in or its an error page, render the page without checking access
+  if (guestGuard || router.route === '/404' || router.route === '/500' || router.route === '/') {
+    return <>{children}</>
+  }
+
+  // User is logged in, build ability for the user based on his role
+  if (auth.user && auth.user.permissions && !ability) {
+    console.log(auth.user.permissions)
+    setAbility(buildAbilityFor(auth.user.permissions, auth.user.userType))
+  }
+  console.log(ability)
+  // Check the access of current user and render pages
+  if (ability && ability.can(aclAbilities.action, aclAbilities.subject)) {
+    console.log('Auth')
+
+    return <AbilityContext.Provider value={ability}>{children}</AbilityContext.Provider>
+  }
+  console.log('UnAuth')
+  // Render Not Authorized component if the current user has limited access
+  return (
+    <BlankLayout>
+      <NotAuthorized />
+    </BlankLayout>
+  )
+}
+
+export default AclGuard

package/src/@core/components/auth/AuthGuard.js

@@ -0,0 +1,40 @@
+// ** React Imports
+import { useEffect } from 'react'
+
+// ** Next Imports
+import { useRouter } from 'next/router'
+
+// ** Hooks Import
+import { useAuth } from 'src/hooks/useAuth'
+
+const AuthGuard = props => {
+  const { children, fallback } = props
+  const auth = useAuth()
+  const router = useRouter()
+  useEffect(
+    () => {
+      if (!router.isReady) {
+        return
+      }
+      if (auth.user === null && !window.localStorage.getItem('userData')) {
+        if (router.asPath !== '/') {
+          router.replace({
+            pathname: '/login',
+            query: { returnUrl: router.asPath }
+          })
+        } else {
+          router.replace('/login')
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [router.route]
+  )
+  if (auth.loading || auth.user === null || auth.user.permissions == null) {
+    return fallback
+  }
+
+  return <>{children}</>
+}
+
+export default AuthGuard

package/src/@core/components/auth/GuestGuard.js

@@ -0,0 +1,30 @@
+// ** React Imports
+import { useEffect } from 'react'
+
+// ** Next Imports
+import { useRouter } from 'next/router'
+
+// ** Hooks Import
+import { useAuth } from 'src/hooks/useAuth'
+
+const GuestGuard = props => {
+  const { children, fallback } = props
+  const auth = useAuth()
+  const router = useRouter()
+  useEffect(() => {
+    if (!router.isReady) {
+      return
+    }
+    if (window.localStorage.getItem('userData') != null) {
+      router.replace('/')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router.route])
+  if (auth.loading || (!auth.loading && auth.user !== null && auth.user.permissions !== null)) {
+    return fallback
+  }
+
+  return <>{children}</>
+}
+
+export default GuestGuard

package/src/@core/components/custom-inputs/Horizontal.jsx

@@ -0,0 +1,143 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import Radio from '@mui/material/Radio'
+import Checkbox from '@mui/material/Checkbox'
+import Typography from '@mui/material/Typography'
+import { styled } from '@mui/material/styles'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+const Root = styled('div', {
+  name: 'MuiCustomInputHorizontal',
+  slot: 'root'
+})(({ theme }) => ({
+  blockSize: '100%',
+  display: 'flex',
+  gap: theme.spacing(1),
+  borderRadius: 'var(--mui-shape-borderRadius)',
+  cursor: 'pointer',
+  position: 'relative',
+  alignItems: 'flex-start',
+  border: '1px solid var(--mui-palette-customColors-inputBorder)',
+  padding: theme.spacing(4),
+  color: 'var(--mui-palette-text-primary)',
+  transition: theme.transitions.create(['border-color'], {
+    duration: theme.transitions.duration.shorter
+  }),
+  '&:hover': {
+    borderColor: 'var(--mui-palette-action-active)'
+  },
+  '&.active': {
+    borderColor: 'var(--mui-palette-primary-main)',
+    '& i, & svg': {
+      color: 'var(--mui-palette-primary-main) !important'
+    }
+  }
+}))
+
+const Title = styled(Typography, {
+  name: 'MuiCustomInputHorizontal',
+  slot: 'title'
+})(({ theme }) => ({
+  fontWeight: theme.typography.fontWeightMedium,
+  color: 'var(--mui-palette-text-primary) !important'
+}))
+
+const Meta = styled(Typography, {
+  name: 'MuiCustomInputHorizontal',
+  slot: 'meta'
+})(({ theme }) => ({
+  ...theme.typography.body2,
+  color: 'var(--mui-palette-text-disabled) !important'
+}))
+
+const Content = styled(Typography, {
+  name: 'MuiCustomInputHorizontal',
+  slot: 'content'
+})(({ theme }) => ({
+  ...theme.typography.body2
+}))
+
+const RadioInput = styled(Radio, {
+  name: 'MuiCustomInputHorizontal',
+  slot: 'input'
+})(({ theme }) => ({
+  marginBlockStart: theme.spacing(-0.25),
+  marginInlineStart: theme.spacing(-0.25)
+}))
+
+const CheckboxInput = styled(Checkbox, {
+  name: 'MuiCustomInputHorizontal',
+  slot: 'input'
+})(({ theme }) => ({
+  marginBlockStart: theme.spacing(-0.25),
+  marginInlineStart: theme.spacing(-0.25)
+}))
+
+const CustomInputHorizontal = props => {
+  // Props
+  const { type, data, name, selected, gridProps, handleChange, color = 'primary' } = props
+
+  // Vars
+  const { meta, title, value, content } = data
+
+  const renderData = () => {
+    if (meta && title && content) {
+      return (
+        <div className='flex flex-col bs-full is-full gap-1.5'>
+          <div className='flex items-start justify-between is-full mbs-1.5 gap-1.5'>
+            {typeof title === 'string' ? <Title>{title}</Title> : title}
+            {typeof meta === 'string' ? <Meta>{meta}</Meta> : meta}
+          </div>
+          {typeof content === 'string' ? <Content>{content}</Content> : content}
+        </div>
+      )
+    } else if (meta && title && !content) {
+      return (
+        <div className='flex items-start justify-between is-full mbs-1.5 gap-1.5'>
+          {typeof title === 'string' ? <Title>{title}</Title> : title}
+          {typeof meta === 'string' ? <Meta>{meta}</Meta> : meta}
+        </div>
+      )
+    } else if (!meta && title && content) {
+      return (
+        <div className='flex flex-col bs-full gap-1.5 mbs-1.5'>
+          {typeof title === 'string' ? <Title>{title}</Title> : title}
+          {typeof content === 'string' ? <Content>{content}</Content> : content}
+        </div>
+      )
+    } else if (!meta && !title && content) {
+      return typeof content === 'string' ? <Content className='mbs-1.5'>{content}</Content> : content
+    } else if (!meta && title && !content) {
+      return typeof title === 'string' ? <Title className='mbs-1.5'>{title}</Title> : title
+    } else {
+      return null
+    }
+  }
+
+  return data ? (
+    <Grid {...gridProps}>
+      <Root
+        onClick={() => handleChange(value)}
+        className={classnames({
+          active: type === 'radio' ? selected === value : selected.includes(value)
+        })}
+      >
+        {type === 'radio' ? (
+          <RadioInput name={name} color={color} value={value} onChange={handleChange} checked={selected === value} />
+        ) : (
+          <CheckboxInput
+            color={color}
+            name={`${name}-${value}`}
+            checked={selected.includes(value)}
+            onChange={() => handleChange(value)}
+          />
+        )}
+        {renderData()}
+      </Root>
+    </Grid>
+  ) : null
+}
+
+export default CustomInputHorizontal

package/src/@core/components/custom-inputs/Image.jsx

@@ -0,0 +1,78 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import Checkbox from '@mui/material/Checkbox'
+import { styled } from '@mui/material/styles'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+const Root = styled('div', {
+  name: 'MuiCustomImage',
+  slot: 'Root'
+})({
+  blockSize: '100%',
+  display: 'flex',
+  borderRadius: 'var(--mui-shape-borderRadius)',
+  cursor: 'pointer',
+  overflow: 'hidden',
+  position: 'relative',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  border: '1px solid var(--mui-palette-customColors-inputBorder)',
+  '&:hover': {
+    borderColor: 'var(--mui-palette-action-active)'
+  },
+  '&.active': {
+    borderColor: 'var(--mui-palette-primary-main)'
+  },
+  '&:not(.active):not(:hover) .MuiCheckbox-root': {
+    display: 'none'
+  }
+})
+
+const CheckboxInput = styled(Checkbox, {
+  name: 'MuiCustomImage',
+  slot: 'Input'
+})({
+  top: 8,
+  right: 8,
+  position: 'absolute'
+})
+
+const Image = styled('img', {
+  name: 'MuiCustomImage',
+  slot: 'Image'
+})({
+  maxInlineSize: '100%'
+})
+
+const CustomCheckboxImg = props => {
+  // Props
+  const { type, data, name, selected, gridProps, handleChange, color = 'primary' } = props
+
+  // Vars
+  const { alt, img, value } = data
+
+  const renderComponent = () => {
+    return (
+      <Grid {...gridProps}>
+        <Root className={classnames({ active: selected.includes(value) })} onClick={() => handleChange(value)}>
+          {typeof img === 'string' ? <Image src={img} alt={alt ?? `checkbox-image-${value}`} /> : img}
+          {type === 'radio' ? null : (
+            <CheckboxInput
+              color={color}
+              name={`${name}-${value}`}
+              checked={selected.includes(value)}
+              onChange={() => handleChange(value)}
+            />
+          )}
+        </Root>
+      </Grid>
+    )
+  }
+
+  return data ? renderComponent() : null
+}
+
+export default CustomCheckboxImg

package/src/@core/components/custom-inputs/Vertical.jsx

@@ -0,0 +1,113 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import Radio from '@mui/material/Radio'
+import Checkbox from '@mui/material/Checkbox'
+import Typography from '@mui/material/Typography'
+import { styled } from '@mui/material/styles'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+const Root = styled('div', {
+  name: 'MuiCustomInputVertical',
+  slot: 'root'
+})(({ theme }) => ({
+  display: 'flex',
+  blockSize: '100%',
+  cursor: 'pointer',
+  position: 'relative',
+  alignItems: 'center',
+  gap: theme.spacing(2),
+  flexDirection: 'column',
+  padding: theme.spacing(4),
+  borderRadius: 'var(--mui-shape-borderRadius)',
+  border: '1px solid var(--mui-palette-customColors-inputBorder)',
+  color: 'var(--mui-palette-text-primary)',
+  transition: theme.transitions.create(['border-color'], { duration: theme.transitions.duration.shorter }),
+  '&:hover': {
+    borderColor: 'var(--mui-palette-action-active)'
+  },
+  '&.active': {
+    borderColor: 'var(--mui-palette-primary-main)',
+    '& > svg, & > i': {
+      color: 'var(--mui-palette-primary-main) !important'
+    }
+  },
+  '&.radio-only .MuiRadio-root': {
+    marginBlockStart: theme.spacing(-2)
+  },
+  '&.checkbox-only .MuiCheckbox-root': {
+    marginBlockStart: theme.spacing(-2)
+  }
+}))
+
+const Title = styled(Typography, {
+  name: 'MuiCustomInputVertical',
+  slot: 'title'
+})(({ theme }) => ({
+  fontWeight: theme.typography.fontWeightMedium,
+  color: 'var(--mui-palette-text-primary) !important'
+}))
+
+const Content = styled(Typography, {
+  name: 'MuiCustomInputVertical',
+  slot: 'content'
+})(({ theme }) => ({
+  ...theme.typography.body2,
+  textAlign: 'center'
+}))
+
+const RadioInput = styled(Radio, {
+  name: 'MuiCustomInputVertical',
+  slot: 'input'
+})(({ theme }) => ({
+  marginBlockEnd: theme.spacing(-2)
+}))
+
+const CheckboxInput = styled(Checkbox, {
+  name: 'MuiCustomInputVertical',
+  slot: 'input'
+})(({ theme }) => ({
+  marginBlockEnd: theme.spacing(-2)
+}))
+
+const CustomInputVertical = props => {
+  // Props
+  const { type, data, name, selected, gridProps, handleChange, color = 'primary' } = props
+
+  // Vars
+  const { title, value, content, asset } = data
+
+  const renderComponent = () => {
+    return (
+      <Grid {...gridProps}>
+        <Root
+          onClick={() => handleChange(value)}
+          className={classnames({
+            'radio-only': type === 'radio' && !asset && !title && !content,
+            'checkbox-only': type === 'checkbox' && !asset && !title && !content,
+            active: type === 'radio' ? selected === value : selected.includes(value)
+          })}
+        >
+          {asset || null}
+          {title ? typeof title === 'string' ? <Title>{title}</Title> : title : null}
+          {content ? typeof content === 'string' ? <Content>{content}</Content> : content : null}
+          {type === 'radio' ? (
+            <RadioInput name={name} color={color} value={value} onChange={handleChange} checked={selected === value} />
+          ) : (
+            <CheckboxInput
+              color={color}
+              name={`${name}-${value}`}
+              checked={selected.includes(value)}
+              onChange={() => handleChange(value)}
+            />
+          )}
+        </Root>
+      </Grid>
+    )
+  }
+
+  return data ? renderComponent() : null
+}
+
+export default CustomInputVertical