Update Roles - Copy this React, Tailwind Component to your project

import React, { useEffect, useState } from "react"; import { useUserStore } from "@/stores/user/userStore"; interface AddRolesModalProps { id: number | null; isOpen: boolean; onClose: () => void; onSuccess: () => void; } const roles = [ { id: 1, name: "Super Admin" }, { id: 2, name: "Admin" }, { id: 3, name: "Administration" }, { id: 4, name: "Creator" }, { id: 5, name: "User" }, ]; const AddRolesModal: React.FC<AddRolesModalProps> = ({ id, isOpen, onClose, onSuccess, }) => { const [selectedRoles, setSelectedRoles] = useState<number[]>([]); const [isSubmitting, setIsSubmitting] = useState<boolean>(false); const userData = useUserStore((state) => state.UserAlls); const userWithId1 = userData?.find((user) => user.id === id); // Sync selected roles with user roles when modal opens useEffect(() => { if (isOpen && userWithId1) { const userRoleIds = userWithId1.roles?.map((role) => role.id) || []; setSelectedRoles(userRoleIds); } }, [isOpen, userWithId1]); const handleRoleUpdate = async () => { if (selectedRoles.length === 0 || !id) return; setIsSubmitting(true); try { await fetch( `https://back.opportunitiessharing.com/api/roleChange/${id}?${selectedRoles .map((roleId) => `roleIds[]=${roleId}`) .join("&")}`, { method: "PATCH", headers: { "Content-Type": "application/json", }, } ); onSuccess(); onClose(); } catch (error) { console.error("Failed to update roles:", error); } finally { setIsSubmitting(false); } }; const handleRoleChange = (roleId: number) => { setSelectedRoles((prevRoles) => prevRoles.includes(roleId) ? prevRoles.filter((id) => id !== roleId) // Remove role if already selected : [...prevRoles, roleId] // Add role if not selected ); }; if (!isOpen) return null; return ( <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"> <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full"> <h2 className="text-lg font-bold mb-4">Update Roles</h2> <label className="block text-sm font-medium text-gray-700 mb-2"> Select Roles </label> <div className="border border-gray-300 rounded-md shadow-sm p-2 max-h-40 overflow-y-auto"> {roles.map((role) => ( <div key={role.id} className="flex items-center gap-2"> <input type="checkbox" id={`role-${role.id}`} value={role.id} checked={selectedRoles.includes(role.id)} onChange={() => handleRoleChange(role.id)} className="h-4 w-4 text-blue-600 border-gray-300 rounded" /> <label htmlFor={`role-${role.id}`} className="text-sm text-gray-700"> {role.name} </label> </div> ))} </div> <div className="mt-6 flex justify-end gap-4"> <button onClick={onClose} className="px-4 py-2 bg-gray-300 text-black rounded-md" disabled={isSubmitting} > Cancel </button> <button onClick={handleRoleUpdate} className={`px-4 py-2 bg-blue-500 text-white rounded-md ${ isSubmitting ? "opacity-50 cursor-not-allowed" : "" }`} disabled={isSubmitting || selectedRoles.length === 0} > {isSubmitting ? "Saving..." : "Update Roles"} </button> </div> </div> </div> ); }; export default AddRolesModal; // redesign this in best ways