+
+ );
+}
+
+export default TableUserRole;
diff --git a/src/features/userRole/userRoleSlice.tsx b/src/features/userRole/userRoleSlice.tsx
new file mode 100644
index 00000000..38951cab
--- /dev/null
+++ b/src/features/userRole/userRoleSlice.tsx
@@ -0,0 +1,132 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+interface UserRole {
+ id: number;
+ name: string;
+ permissions: string[];
+}
+
+interface UserRoleState {
+ roles: UserRole[];
+ status: 'idle' | 'loading' | 'succeeded' | 'failed';
+ error: string | null;
+}
+
+const initialState: UserRoleState = {
+ roles: [],
+ status: 'idle',
+ error: null,
+};
+
+export const fetchUserRoles = createAsyncThunk(
+ 'userRoles/fetchUserRoles',
+ async () => {
+ const response = await axios.get(
+ `${import.meta.env.VITE_BASE_URL}/roles/get_roles`
+ );
+ return response.data.roles;
+ }
+);
+
+export const deleteUserRole = createAsyncThunk(
+ 'userRoles/deleteUserRole',
+ async (id: number) => {
+ try {
+ await axios.delete(
+ `${import.meta.env.VITE_BASE_URL}/roles/delete_role/${id}`
+ );
+ return id;
+ } catch (error) {
+ throw new Error('Failed to delete role');
+ }
+ }
+);
+
+export const createUserRole = createAsyncThunk(
+ 'userRoles/createUserRole',
+ async (roleData: { name: string; permissions: string[] }) => {
+ const response = await axios.post(
+ `${import.meta.env.VITE_BASE_URL}/roles/create_role`,
+ roleData
+ );
+ return response.data.role;
+ }
+);
+
+export const updateUserRole = createAsyncThunk(
+ 'userRoles/updateUserRole',
+ async (roleData: { id: number; name: string; permissions: string[] }) => {
+ const response = await axios.put(
+ 'https://dynamites-ecomm-be.onrender.com/api/v1/roles/update_role',
+ roleData
+ );
+ return response.data;
+ }
+);
+
+const userRoleSlice = createSlice({
+ name: 'userRoles',
+ initialState,
+ reducers: {},
+ extraReducers: (builder) => {
+ builder
+ .addCase(fetchUserRoles.pending, (state) => {
+ state.status = 'loading';
+ })
+ .addCase(
+ fetchUserRoles.fulfilled,
+ (state, action: PayloadActionManage User Role
+
+
+
+
+
+
+
+ | + ID + | ++ Role Name + | ++ Action + | +
|---|---|---|
| + + | +||
|
+
+ Failed to load roles...
+
+ |
+ ||
| {role.id} | +{role.name} | +
+
+
+
+
+
+ |
+
+ {}}
+ />
+
+
+
+
+ {mode === 'delete' && (
+
+ 
+
+ Register Role
+
+
+ setRoleName(e.target.value)}
+ className="w-[100%] border relative bg-grayLight text-black duration-100 outline-none justify-between flex items-center gap-2 px-3 rounded-md font-light group-hover:border-grayDark p-3 mb-5 lg:w-[70%] md:w-[70%]"
+ />
+
+
+
+
+
+
+
+
+
+ {permissions.map((permission, index) => (
+
+ {permission}
+
+
+ ))}
+
+
+ setNewPermission(e.target.value)}
+ className="w-[100%] border relative bg-grayLight duration-100 outline-none justify-between flex items-center gap-2 px-3 rounded-md font-light group-hover:border-grayDark p-3 lg:w-[70%] md:w-[70%]"
+ />
+
+
+
+ {editRole ? (
+
+ ) : (
+
+ )}
+
+
+ setModalVisible(false)}
+ onConfirm={() => setDeleting(true)}
+ message="Are you sure you want to delete this user role?"
+ />
+
+ )}
+
+ {isPopupVisible && (
+
+
+ )}
+
+
+
+
+
+
+
+ DELETE ROLE
+{popupMessage}
+