permissions handle

src/Components/SideBar/index.jsx

@@ -10,7 +10,7 @@
 import { RiLogoutCircleRLine } from "react-icons/ri";
 import { useNavigate } from "react-router-dom";
 import AuthContext, { useAuth } from "../../Context/auth";
 import { usePermissions, checkModule } from "../../Utils/permission";
 import { getRoleById } from "../../Services/RoleService/roleService";
 
 export default function SideBar() {
@@ -19,10 +19,10 @@
   const navigate = useNavigate();
   const context = useContext(AuthContext);
   const { user } = useAuth();
   const permissions = usePermissions();
   const [role, setRole] = useState("");
 
-  useEffect(() => {}, [navigate]);
+  useEffect(() => { }, [navigate]);
 
   const handleItemClick = async (user) => {
     if (user) {
@@ -80,6 +80,15 @@
         setIsSideBarOpen(false);
       }}
     />,
+    <SideButton
+      // hidden={checkModule(permissions, "benefits") ? "flex" : "none"}
+      key="permissions"
+      text="PERMISSIONS"
+      onClick={() => {
+        navigate("/permissions");
+        setIsSideBarOpen(false);
+      }}
+    />,
     <SideButton
       hidden={user ? "none" : "flex"}
       key="login"

src/Pages/Protected/Permissions/permissionsHandler.jsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Box, Button, TextField, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, IconButton } from '@mui/material';
+import { Delete, Edit, Search } from '@mui/icons-material';
+import { APIUsers } from "./../../../Services/BaseService/index";
+import { getToken, getUser } from "./../../../Services/Functions/loader";
+
+
+const PermissionCRUD = () => {
+  const [permissions, setPermissions] = useState([]);
+  const [form, setForm] = useState({ name: '' });
+  const [searchQuery, setSearchQuery] = useState('');
+  const [search, setSearch] = useState("");
+  const [editId, setEditId] = useState(null);
+
+  useEffect(() => {
+    fetchPermissions();
+  }, []);
+
+  const fetchPermissions = async () => {
+    try {
+      const response = await APIUsers.get('permission');
+      setPermissions(response.data);
+    } catch (error) {
+      console.error('Error fetching permissions:', error);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      if (editId) {
+        await APIUsers.patch(`permission/patch/${editId}`, form);
+      } else {
+        await APIUsers.post('permission/create/', form);
+      }
+      setForm({ name: '' });
+      setEditId(null);
+      fetchPermissions();
+    } catch (error) {
+      console.error('Error saving permission:', error);
+    }
+  };
+
+  const handleEdit = (permission) => {
+    setForm({ name: permission.name });
+    setEditId(permission._id);
+  };
+
+  const handleDelete = async (id) => {
+    try {
+      await APIUsers.delete(`permission/delete/${id}`);
+      fetchPermissions();
+    } catch (error) {
+      console.error('Error deleting permission:', error);
+    }
+  };
+
+  const handleSearch = async () => {
+    try {
+      const response = await APIUsers.get(`permissions/search`, 
+        { name: searchQuery }, 
+        {headers: {
+            Authorization: `Bearer ${getToken()}`,          
+        }}
+      );
+      setPermissions(response.data);
+    } catch (error) {
+      console.error('Error searching permissions:', error);
+    }
+  };
+
+  const filteredPermissions = permissions.filter((permission) =>
+    permission.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <Box sx={{ padding: 4 }}>
+      <Typography variant="h4" gutterBottom>
+        Permission Management
+      </Typography>
+
+      <Box component="form" onSubmit={handleSubmit} sx={{ marginBottom: 4 }}>
+        <TextField
+          label="Permission Name"
+          value={form.name}
+          onChange={(e) => setForm({ ...form, name: e.target.value })}
+          required
+          fullWidth
+          margin="normal"
+        />
+        <Button  sx={{ backgroundColor: '#ae883c', '&:hover': { backgroundColor: '#936d30' }}} type="submit" variant="contained" color="primary">
+          {editId ? 'Atualizar Permissão' : 'Criar Permissão'}
+        </Button>
+      </Box>
+
+      <TableContainer component={Paper}>
+        <Table sx={{ backgroundColor: '#eae3d7', '&:hover': { backgroundColor: '#eae3d7' }}}>
+          <TableHead>
+            <TableRow>
+              <TableCell>Name</TableCell>
+              <TableCell>Actions</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {filteredPermissions.map((permission, index) => (
+              <TableRow key={permission._id}>
+                <TableCell>{permission.name}</TableCell>
+                <TableCell>
+                  <IconButton color="primary" onClick={() => handleEdit(permission)}>
+                    <Edit />
+                  </IconButton>
+                  <IconButton color="error" onClick={() => handleDelete(permission._id)}>
+                    <Delete />
+                  </IconButton>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+};
+
+export default PermissionCRUD;

src/Routes/protectedRoutes.jsx

@@ -34,6 +34,7 @@ import FinancialUpdate from "../Pages/Protected/FinancialMovements/FinancialUpda
 import ContributionHistoric from "../Pages/Protected/FinancialMovements/ContributionHistoric";
 import Unauthorized from "../Pages/Protected/Unauthorized";
 import GenerateFinancialReport from "../Pages/Protected/FinancialMovements/GenerateFinancialReport";
+import PermissionCRUD from "../Pages/Protected/Permissions/permissionsHandler.jsx";
 
 const ProtectedRoutes = () => {
   return (
@@ -81,6 +82,17 @@ const ProtectedRoutes = () => {
         }
       />
 
+      <Route
+        path="/permissions"
+        element={
+          <PermissionProtect
+            element={<PermissionCRUD />}
+            moduleName="users"
+          actions={["create", "update", "read", "delete"]
+            }
+          />
+        }
+      />
       <Route path="/user" element={<UserUpdate />} />
 
       <Route path="/usuarios/editar/:nome" element={<UserUpdatePage />} />