Merge pull request #22 from foyzulkarim/feature/rbac/role-crud

Add role management functionality and refactor navigation

Author: foyzulkarim

package-lock.json

@@ -25,6 +25,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@faker-js/faker": "^8.1.0",
+    "@hookform/resolvers": "^3.9.1",
     "@iconify/react": "^4.1.1",
     "@mui/icons-material": "^5.15.16",
     "@mui/lab": "^5.0.0-alpha.147",
@@ -41,9 +42,10 @@
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
-    "react-hook-form": "^7.51.3",
+    "react-hook-form": "^7.53.2",
     "react-router-dom": "^6.16.0",
-    "simplebar-react": "^3.2.4"
+    "simplebar-react": "^3.2.4",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.2.25",

package.json

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import { FormProvider as Form } from 'react-hook-form';
+
+// ----------------------------------------------------------------------
+
+export default function FormProvider({ children, methods, onSubmit }) {
+  return (
+    <Form {...methods}>
+      <form onSubmit={onSubmit}>{children}</form>
+    </Form>
+  );
+}
+
+FormProvider.propTypes = {
+  children: PropTypes.node,
+  methods: PropTypes.object,
+  onSubmit: PropTypes.func,
+};

src/components/hook-form/form-provider.jsx

@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
+
+export default function RHFMultiSelect({ name, label, options, ...other }) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <FormControl fullWidth error={!!error}>
+          <InputLabel>{label}</InputLabel>
+          <Select
+            {...field}
+            multiple
+            renderValue={(selected) => (
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                {selected.map((value) => (
+                  <Chip key={value} label={value} />
+                ))}
+              </Box>
+            )}
+            {...other}
+          >
+            {options.map((option) => (
+              <MenuItem key={option.value} value={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      )}
+    />
+  );
+}
+
+RHFMultiSelect.propTypes = {
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+};

src/components/hook-form/rhf-multi-select.jsx

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import TextField from '@mui/material/TextField';
+
+// ----------------------------------------------------------------------
+
+export default function RHFTextField({ name, helperText, ...other }) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <TextField
+          {...field}
+          fullWidth
+          error={!!error}
+          helperText={error ? error.message : helperText}
+          {...other}
+        />
+      )}
+    />
+  );
+}
+
+RHFTextField.propTypes = {
+  name: PropTypes.string,
+  helperText: PropTypes.string,
+};

src/components/hook-form/rhf-text-field.jsx

@@ -0,0 +1 @@
+export { default } from './text-highlight';

src/components/text-highlight/index.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react';
+
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+function TextHighlight({ text, searchKeyword }) {
+  const [highlightedText, setHighlightedText] = useState(text);
+
+  useEffect(() => {
+    if (searchKeyword) {
+      const regex = new RegExp(`(${searchKeyword})`, 'gi');
+      const parts = text?.split(regex) ?? [];
+      const newHighlightedText = parts.map((part, i) =>
+        part.toLowerCase() === searchKeyword.toLowerCase() ? (
+          <mark key={i}>{part}</mark>
+        ) : (
+          part
+        )
+      );
+      setHighlightedText(newHighlightedText);
+    } else {
+      setHighlightedText(text); // Reset to original text
+    }
+  }, [text, searchKeyword]);
+
+  return (
+    <Stack direction="row" spacing={1}>
+      <Typography variant="subtitle2">
+        {highlightedText}
+      </Typography>
+    </Stack>
+  );
+}
+
+TextHighlight.propTypes = {
+  text: PropTypes.string.isRequired,
+  searchKeyword: PropTypes.string,
+}
+
+export default TextHighlight;

src/components/text-highlight/text-highlight.jsx

@@ -1,7 +1,3 @@
-import CodeOutlinedIcon from '@mui/icons-material/CodeOutlined';
-import SourceOutlinedIcon from '@mui/icons-material/SourceOutlined';
-import RssFeedOutlinedIcon from '@mui/icons-material/RssFeedOutlined';
-
 import SvgColor from 'src/components/svg-color';
 
 // ----------------------------------------------------------------------
@@ -12,30 +8,30 @@ const icon = (name) => (
 
 const navConfig = [
   {
-    title: 'feed',
+    title: 'Feed',
     path: '/',
-    icon: <RssFeedOutlinedIcon />,
+    icon: icon('ic_feed'),
   },
   {
-    title: 'Users',
-    path: '/user',
-    icon: icon('ic_user'),
+    title: 'repositories',
+    path: '/repositories',
+    icon: icon('ic_repository'),
   },
   {
-    title: 'Add repository',
-    path: '/add-repository',
-    icon: <CodeOutlinedIcon />,
+    title: 'users',
+    path: '/user',
+    icon: icon('ic_user'),
   },
   {
-    title: 'Repositories',
-    path: '/repositories',
-    icon: <SourceOutlinedIcon />,
+    title: 'roles',
+    path: '/role',
+    icon: icon('ic_role'),
   },
   {
     title: 'analytics',
     path: '/analytics',
     icon: icon('ic_analytics'),
-  }
+  },
 ];
 
 export default navConfig;

src/layouts/dashboard/config-navigation.jsx

@@ -0,0 +1,17 @@
+import { Helmet } from 'react-helmet-async';
+
+import { RoleView } from 'src/sections/role/view';
+
+// ----------------------------------------------------------------------
+
+export default function RolePage() {
+  return (
+    <>
+      <Helmet>
+        <title> Roles | CommitStreams </title>
+      </Helmet>
+
+      <RoleView />
+    </>
+  );
+}

src/pages/role.jsx

@@ -0,0 +1,7 @@
+export const paths = {
+  feed: '/',
+  repositories: '/repositories',
+  user: '/user',
+  role: '/role',
+  analytics: '/analytics',
+};

src/routes/paths.js

@@ -16,6 +16,7 @@ export const RepositoriesView = lazy(() => import('src/pages/repositories'));
 export const FeedPage = lazy(() => import('src/pages/feed'));
 export const Page404 = lazy(() => import('src/pages/page-not-found'));
 export const RegisterPage = lazy(() => import('src/pages/register'));
+export const RolePage = lazy(() => import('src/pages/role'));
 
 // ----------------------------------------------------------------------
 
@@ -51,6 +52,7 @@ export default function Router() {
         { path: 'repositories', element: <RepositoriesView /> },
         { path: 'analytics', element: <IndexPage /> },
         { element: <FeedPage />, index: true },
+        { path: 'role', element: <RolePage /> },
       ],
     },
     {