set management role page completely

Author: sagho0or

public/Icons/index.tsx

@@ -1096,6 +1096,23 @@ export default function Icons(props: IconsProps) {
                     <path d="M9 12H7V14H9V12ZM17 12H15V14H17V12Z" fill="#FFFFFF" />
                 </svg>
             )
+        case 'active':
+            return (
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="12" cy="12" r="10" stroke="#4CAF50" stroke-width="2" fill="#4CAF50" />
+                    <path d="M8 12.5L11 15.5L16 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+
+            )
+        case 'inactive':
+            return (
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="12" cy="12" r="10" stroke="#FF5722" stroke-width="2" fill="#FF5722" />
+                    <path d="M8 8L16 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                    <path d="M16 8L8 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+
+            )
         case 'card':
             return (
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">

src/app/(pages)/api/user/add/route.ts

@@ -0,0 +1,20 @@
+import { UserDtoResponse } from '@/store/userManagement/user.interface';
+import { UserRole } from '@/store/userProfile/interface';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+    const data : UserDtoResponse = { 
+        email: 'Saghar@gmail.com',
+        isActive: false,
+        role: UserRole.User,
+        userId: 2
+    }
+    
+    return NextResponse.json({ message: 'Add user successfully', data }, { status: 200 });
+
+}
+
+
+export function GET() {
+    return NextResponse.json({ message: 'Method not allowed' }, { status: 405 });
+}

src/app/(pages)/api/user/edit/[userId]/route.ts

@@ -0,0 +1,22 @@
+
+import { UserDtoResponse } from '@/store/userManagement/user.interface';
+import { UserRole } from '@/store/userProfile/interface';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function PUT(req: NextRequest) {
+    const { role } = await req.json();
+    const data : UserDtoResponse = { 
+        email: 'Saghar@gmail.com',
+        isActive: false,
+        role: role,
+        userId: 2
+    }
+    
+    return NextResponse.json({ message: 'Update user successfully', data }, { status: 200 });
+
+}
+
+
+export function GET() {
+    return NextResponse.json({ message: 'Method not allowed' }, { status: 405 });
+}

src/app/(pages)/api/user/list/route.ts

@@ -0,0 +1,32 @@
+import { UserDtoResponse } from '@/store/userManagement/user.interface';
+import { UserRole } from '@/store/userProfile/interface';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(req: NextRequest) {
+    const data : Array<UserDtoResponse> = [{ 
+        email: 'Connor@gmail.com',
+        isActive: false,
+        role: UserRole.Admin,
+        userId: 2
+    },
+    { 
+        email: 'Saghar@gmail.com',
+        isActive: false,
+        role: UserRole.User,
+        userId: 3
+    },{ 
+        email: 'Yannies@gmail.com',
+        isActive: true,
+        role: UserRole.Developer,
+        userId: 4
+    }]
+
+    
+    return NextResponse.json({ message: 'Add user successfully', data }, { status: 200 });
+
+}
+
+
+export function POST() {
+    return NextResponse.json({ message: 'Method not allowed' }, { status: 405 });
+}

src/app/(pages)/management/page.tsx

@@ -1,7 +1,52 @@
+'use client'
 import Management from "@/app/components/Management";
+import Sidebar from "@/app/components/Sidebar";
+import { useShowInnerComponent } from "@/app/ShowInnerComponentContext";
+import isMobileView from "@/app/utils/isMobileView";
+import Icons from "../../../../public/Icons";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import defaultSidebarStatus from "@/app/utils/defaultSidebarStatus";
 
 export default function ManagementPage() {
+    const { setShowInnerComponent } = useShowInnerComponent();
+    const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(defaultSidebarStatus);
+    const router = useRouter();
+
     return (
-        <Management />
+        <>
+        {isMobileView ? (
+            <div className={'text-secondary-17 bg-secondary-02' + `${isMobileView ? ' w-screen h-screen' : ''}`}>
+            <div className={'bg-secondary-01 px-3 py-9' + ` ${isMobileView ? 'space-y-3' : 'hidden'}`}>
+                {isMobileView &&
+                    <div className={'mb-8'}>
+                        <button 
+                        className={'absolute'}
+                        onClick={() => { setShowInnerComponent(false)}}
+                        >
+                            <Icons name={'right-arrow-key'} />
+                        </button>
+                        <h1 className={'font-bold w-fit m-auto'}>Management</h1>
+                    </div>
+                }
+
+            </div>
+
+            <Management/>
+
+        </div>
+          
+        ) : (
+            <Sidebar isSidebarOpen={isSidebarOpen} setIsSidebarOpen={setIsSidebarOpen}
+            children={<>
+                
+                <Management/>
+
+            </>} />
+        )}
+      </>
+
+        
+        
     )
 }

src/app/components/Management/RoleManagement/index.tsx

@@ -1,67 +1,103 @@
 import Icons from "../../../../../public/Icons";
 import IInput from "@/app/components/Common/Input";
-import React, { ChangeEvent, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import IButton from "@/app/components/Common/Button";
-import checkPasswordFormat from "@/app/utils/checkPasswordFormat";
-import { useDispatch, useSelector } from "react-redux";
-import toast from "react-hot-toast";
-import IModal from "@/app/components/Common/Modal";
 import isMobileView from "@/app/utils/isMobileView";
-import { RoleManagementProps, User } from "./interface";
+import { User } from "./interface";
 import PasswordInputWithToggle from "./PasswordInputWithToggle";
+import { UserRole } from "@/store/userProfile/interface";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchUserManagementResponse } from "@/store/userManagement/new/slice";
+import toast from "react-hot-toast";
+import { updateUserRequest } from "@/store/userManagement/update/slice";
+import { fetchUserList } from "@/store/userManagement/list/slice";
+import { UserDtoResponse } from "@/store/userManagement/user.interface";
 
 export default function RoleManagement() {
-    const [users, setUsers] = useState<User[]>([
-        // Initial users can be fetched from an API or predefined
-        { email: "manager@example.com", password: "manager123" },
-        { email: "user@example.com", password: "user123" },
-    ]);
-    const [newUser, setNewUser] = useState<User>({ email: '', password: '' });
+    const [users, setUsers] = useState<UserDtoResponse[]>([]);
+    const [newUser, setNewUser] = useState<User>({ email: '', password: '', role: UserRole.Guest });
     const [showPasswords, setShowPasswords] = useState<{ [key: number]: boolean }>({});
     const [passwordType, setPasswordType] = useState<string>('password');
+    const [isValid, setIsValid] = useState<boolean>();
+
+    const dispatch = useDispatch();
+    const userManagementState = useSelector((state: any) => state.userManagement);
+    const updateUserState = useSelector((state: any) => state.updateUser);
+    const userListState = useSelector((state: any) => state.userList);
+    
+    function handleInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+        const value = e.target.value;
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        setNewUser({ ...newUser, email: e.target.value })
+        setIsValid(emailRegex.test(value));
+
+    }
+    useEffect(() => {
+        dispatch(fetchUserList());
+    }, []);
 
+    useEffect(() => {
+        if (userListState.isDone && userListState.response){
+            if(userListState.response.data)
+                setUsers(userListState.response.data)
+        }
+    }, [userListState.isDone, userListState.response]);
+    
+    useEffect(() => {
+        if (userManagementState.isDone && userManagementState.response) {
+            if (userManagementState.response.data.userId) {
+                setUsers([...users, userManagementState.response.data]);
+                setNewUser({ email: '', password: '', role: UserRole.Guest });
+                toast.success('user has been added successfully');
+            }
+        }
+    }, [userManagementState.isDone, userManagementState.response]);
+
+    useEffect(() => {
+        if (updateUserState.isDone && updateUserState.response) {
+            toast.success('user has been updated successfully');
+        }
+    }, [updateUserState.isDone, updateUserState.response]);
 
     const handleAddUser = () => {
-        if (newUser.email && newUser.password) {
-            setUsers([...users, newUser]);
-            setNewUser({ email: '', password: '' });
+        if (isValid && newUser.email && newUser.password && newUser.role !== UserRole.Guest) {
+            dispatch(fetchUserManagementResponse(newUser))
         }
     };
 
-    const togglePasswordVisibility = (index: number) => {
-        setShowPasswords({ ...showPasswords, [index]: !showPasswords[index] });
+    const handleRoleChange = (index: number, newRole: UserRole) => {
+        const updatedUsers = users.map((user, i) =>
+            i === index ? { ...user, role: newRole } : user
+        );
+        setUsers(updatedUsers);
     };
 
-    const dispatch = useDispatch();
-    const editPasswordStates = useSelector((state: any) => state.editPassword)
-
+    const handleUserEditSubmit = (index: number) => {
+        debugger;
+        const user = users[index];
+        dispatch(updateUserRequest(user));
 
-    useEffect(() => {
-        if (editPasswordStates?.isDone) {
-            toast.success('Password has been changed successfully')
-        }
-    }, [editPasswordStates]);
+    };
 
     return (
         <>
-            <div className={'bg-secondary-01 px-3 pb-9' + ` ${isMobileView ? 'space-y-3' : 'rounded-xl'}`}>
+            <div className={'bg-secondary-01 px-3 pb-9 mb-4' + ` ${isMobileView ? 'space-y-3' : 'rounded-xl'}`}>
                 <h4 className={'font-semibold center py-2 border-b-2 mb-5'}>Add New User</h4>
                 <div className={'flex w-full flex-wrap items-end gap-5'}>
-
                     <IInput inputId={'email'}
                         label={'Email'}
                         value={newUser.email}
-                        onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
+                        onChange={handleInputChange}
                         style={'secondaryOutline'}
-                        type={'email'} containerCustomStyle= {'flex-1'}/>
-                        
+                        type={'email'} containerCustomStyle={'flex-1'} />
+
                     <IInput
                         label={'Password'}
                         inputId={'password'}
                         type={passwordType}
                         onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
                         value={newUser.password}
-                        containerCustomStyle= {'flex-1'}
+                        containerCustomStyle={'flex-1'}
                         suffix={
                             <div
                                 className={'cursor-pointer'}
@@ -70,7 +106,26 @@ export default function RoleManagement() {
                             </div>
                         }
                     />
-                    <IButton style={'primaryOutline'} onClick={handleAddUser}>
+                    <div className="flex-1">
+                        <label className="font-semibold">
+                            Role
+                        </label>
+                        <select
+                            className="flex justify-between items-center h-12 text-sm font-bold p-2 mt-2 rounded-xl bg-transparent text-secondary-17 border border-secondary-02 focus-within:border-primary focus-within:border w-full my-4 cursor-pointer"
+                            value={newUser.role}
+                            onChange={(e) => setNewUser({ ...newUser, role: e.target.value as UserRole })}
+                        >
+                            <option value={UserRole.Guest} disabled>Select...</option>
+                            <option value={UserRole.User}>User</option>
+                            <option value={UserRole.Management}>Management</option>
+                            <option value={UserRole.Admin}>Admin</option>
+                            <option value={UserRole.Developer}>Developer</option>
+                        </select>
+                    </div>
+
+                    <IButton style={'primaryOutline'}
+                        disabled={!isValid || !newUser.password || !newUser.role}
+                        onClick={handleAddUser}>
                         <p className={'font-medium'}>Add User</p>
                     </IButton>
                 </div>
@@ -81,19 +136,40 @@ export default function RoleManagement() {
                 <h4 className={'font-semibold center py-2 border-b-2 mb-5'}>Current Users</h4>
                 <ul className="space-y-4">
                     {users.map((user, index) => (
-                        <li key={index} className="flex justify-between items-center border-b border-secondary-02 py-2">
-                            <span>{user.email}</span>
-                            <PasswordInputWithToggle
-                                password={user.password}
-                                isVisible={showPasswords[index]}
-                                onToggleVisibility={() => togglePasswordVisibility(index)}
-                            />
+                        <li key={index} className="flex md:items-center border-b border-secondary-02 py-2 md:flex-row md:justify-between	flex-col">
+                            <div className="text-sm flex flex-1">
+                                <Icons name={`${user.isActive ? 'active' : 'inactive'}`} />
+                                <span className="ml-2">{user.email}</span>
+                            </div>
+                            <div className="flex flex-1  md:items-center md:flex-row flex-col">
+                                {/* <PasswordInputWithToggle
+                                    password={user.password}
+                                    isVisible={showPasswords[index]}
+                                    onToggleVisibility={() => togglePasswordVisibility(index)}
+                                /> */}
+
+                                <select
+                                    className="md:my-0 my-2 border border-gray-300 rounded px-2 py-1 md:ml-2 text-xs py-2 cursor-pointer"
+                                    value={user.role}
+                                    onChange={(e) => handleRoleChange(index, e.target.value as UserRole)}
+                                >
+                                    <option value={UserRole.User}>User</option>
+                                    <option value={UserRole.Management}>Management</option>
+                                    <option value={UserRole.Admin}>Admin</option>
+                                    <option value={UserRole.Developer}>Developer</option>
+                                </select>
+                                <IButton
+                                    style={'primaryOutline'}
+                                    onClick={() => handleUserEditSubmit(index)}
+                                    customStyle={'md:ml-2 ml-0 h-auto py-1 text-xs rounded-md'}
+                                >
+                                    Save
+                                </IButton>
+                            </div>
                         </li>
                     ))}
                 </ul>
             </div>
-
-
         </>
-    )
-}
+    );
+}

src/app/components/Management/RoleManagement/interface.ts

@@ -1,6 +1,9 @@
+import { UserRole } from "@/store/userProfile/interface";
+
 export interface User {
     email: string;
     password: string;
+    role: UserRole;
 }
 export interface RoleManagementProps {
     setIsEditPasswordOpen: (isOpen: boolean) => void;