-
-
- Roles List
-
-
- Permisson List
-
-
- Role Distribution chart
-
-
- Role Requests
-
-
+
+
+
+ PERMISSON LIST BY ROLE
+
+
+
);
diff --git a/client/components/lists/PermissonList.tsx b/client/components/lists/PermissonList.tsx
new file mode 100644
index 0000000..b318c89
--- /dev/null
+++ b/client/components/lists/PermissonList.tsx
@@ -0,0 +1,197 @@
+"usr client";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+import EmptyFillContainer from "../dashboard-componenets/cards/EmptyFillContainer";
+import { use, useEffect, useState } from "react";
+import useGetAllRole from "@/hooks/user_data/useGetAllRole";
+import { fetchAllPermissons } from "@/hooks/user_data/getAllPermissonList";
+import { set } from "react-hook-form";
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "../ui/alert-dialog";
+import { Button } from "../ui/button";
+import { updatePermisson } from "@/hooks/user_data/updatePermisson";
+import { Pointer, SquareMousePointer } from "lucide-react";
+
+type RolesWithPermisson = {
+ id: string;
+ name: string;
+ permissions: [
+ {
+ name: string;
+ description: string;
+ }
+ ];
+};
+
+type Permisson = {
+ name: string;
+ description: string;
+};
+
+type EditPermisson = {
+ role: string;
+ permission: string;
+ action: string;
+};
+
+function PermissonList() {
+ const { fetchAllRoles, rolesWithPermissions } = useGetAllRole();
+ const [roles, setRoles] = useState
([]);
+ const [permissions, setPermissions] = useState([]);
+ const [msg, setMsg] = useState();
+
+ async function getPermissons() {
+ setPermissions(await fetchAllPermissons());
+ }
+
+ useEffect(() => {
+ fetchAllRoles();
+ getPermissons();
+ }, []);
+
+ useEffect(() => {
+ setRoles(rolesWithPermissions);
+ //setSelectedRole(rolesWithPermissions[0]?.name);
+ }, [rolesWithPermissions]);
+
+ const [selectedRole, setSelectedRole] = useState();
+
+ return (
+
+
setSelectedRole(e)}
+ >
+ {roles.map((role) => (
+
+
+
+
+
+ {selectedRole ? (
+
+
+ {roles
+ .filter((role) => role.name === selectedRole)
+ .map((role) => (
+
+
+
+ {permissions.map((permission) => (
+
{
+ const str = role.permissions.find(
+ (perm) => perm.name === permission.name
+ )
+ ? "REMOVE"
+ : "ADD";
+ await setMsg({
+ role: role.name,
+ permission: permission.name,
+ action: str,
+ });
+ }}
+ className={
+ "flex flex-col gap-1 my-2 px-6 py-4 bg-green-100 text-card-foreground shadow-md rounded-lg hover:cursor-pointer hover:scale-110 hover:text-white" +
+ (role.permissions.find(
+ (perm) => perm.name === permission.name
+ )
+ ? " bg-green-500"
+ : " bg-red-500")
+ }
+ >
+
+ {permission.name}
+
+
{permission.description}
+
+ ))}
+
+ CONFIRM THAT YOU WANT TO{" "}
+ {msg?.action === "ADD" ? (
+
+
+ ADD "{msg?.permission}"
+ {" "}
+ PERMISSION TO{" "}
+
+ ) : (
+
+
+ REMOVE "{msg?.permission}"
+ {" "}
+ PERMISSION FROM{" "}
+
+ )}
+
{msg?.role} ?
+
+
+ ACTION : {msg?.action} PERMISSON
+
+
+ ROLE : {msg?.role}
+
+
+ PERMISSION : {msg?.permission}
+
+
+ ))}
+
+
+ ) : (
+
Select a role from above to view permissions
+ )}
+