feat(rbac): ui components and hooks for rbac

frontend/src/hooks/api/roles/index.tsx

@@ -0,0 +1,2 @@
+export { useCreateRole, useDeleteRole,useUpdateRole } from "./mutation";
+export { useGetRoles } from "./queries";

frontend/src/hooks/api/roles/mutation.tsx

@@ -0,0 +1,42 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { roleQueryKeys } from "./queries";
+import { TCreateRoleDTO, TDeleteRoleDTO, TUpdateRoleDTO } from "./types";
+
+export const useCreateRole = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (dto: TCreateRoleDTO) => apiRequest.post("/api/v1/roles", dto),
+    onSuccess: (_, { orgId, workspaceId }) => {
+      queryClient.invalidateQueries(roleQueryKeys.getRoles({ orgId, workspaceId }));
+    }
+  });
+};
+
+export const useUpdateRole = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, ...dto }: TUpdateRoleDTO) => apiRequest.patch(`/api/v1/roles/${id}`, dto),
+    onSuccess: (_, { orgId, workspaceId }) => {
+      queryClient.invalidateQueries(roleQueryKeys.getRoles({ orgId, workspaceId }));
+    }
+  });
+};
+
+export const useDeleteRole = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ orgId, id }: TDeleteRoleDTO) =>
+      apiRequest.delete(`/api/v1/roles/${id}`, {
+        data: { orgId }
+      }),
+    onSuccess: (_, { orgId, workspaceId }) => {
+      queryClient.invalidateQueries(roleQueryKeys.getRoles({ orgId, workspaceId }));
+    }
+  });
+};

frontend/src/hooks/api/roles/queries.tsx

@@ -0,0 +1,27 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TGetRolesDTO, TRole } from "./types";
+
+export const roleQueryKeys = {
+  getRoles: ({ orgId, workspaceId }: TGetRolesDTO) => ["roles", { orgId, workspaceId }] as const
+};
+
+const getRoles = async ({ orgId, workspaceId }: TGetRolesDTO) => {
+  const { data } = await apiRequest.get<{ data: { roles: TRole[] } }>("/api/v1/roles", {
+    params: {
+      workspaceId,
+      orgId
+    }
+  });
+
+  return data.data.roles;
+};
+
+export const useGetRoles = ({ orgId, workspaceId }: TGetRolesDTO) =>
+  useQuery({
+    queryKey: roleQueryKeys.getRoles({ orgId, workspaceId }),
+    queryFn: () => getRoles({ orgId, workspaceId }),
+    enabled: Boolean(orgId)
+  });

frontend/src/hooks/api/roles/types.ts

@@ -0,0 +1,43 @@
+export type TGetRolesDTO = {
+  orgId: string;
+  workspaceId?: string;
+};
+
+export type TRole = {
+  _id: string;
+  organization: string;
+  workspace: string;
+  name: string;
+  description: string;
+  slug: string;
+  permissions: TPermission[];
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type TPermission = {
+  condition?: Record<string, any>;
+  action: "read" | "edit" | "create" | "delete";
+  subject: string;
+};
+
+export type TCreateRoleDTO = {
+  orgId: string;
+  workspaceId?: string;
+  name: string;
+  description?: string;
+  slug: string;
+  permissions: TPermission[];
+};
+
+export type TUpdateRoleDTO = {
+  orgId: string;
+  id: string;
+  workspaceId?: string;
+} & Partial<Omit<TCreateRoleDTO, "orgId" | "workspaceId">>;
+
+export type TDeleteRoleDTO = {
+  orgId: string;
+  id: string;
+  workspaceId?: string;
+};