Department Management - Copy this React, Tailwind Component to your project

Import React, { useEffect, useMemo, useState } from "react"; import { FiEdit, FiTrash2, FiPlusCircle } from "react icons/fi"; import { useDispatch, useSelector } from "react redux"; import { deleteDepartment, getAllDepartments, } from "../../api/services/department.service"; import { department } from "../../features/states"; import AddEditDepartment from "./AddEditDepartment"; const gradients = [ "bg gradient to br from yellow 600 to yellow 800", "bg gradient to br from green 600 to green 700", "bg gradient to br from red 400 to red 700", "bg gradient to br from purple 400 to purple 500", "bg gradient to br from pink 400 to pink 600", "bg gradient to br from indigo 400 to indigo 700", "bg gradient to br from blue 400 to blue 600", ]; const Department = () => { const dispatch = useDispatch(); const { departments } = useSelector(department); const [isLoading, setIsLoading] = useState(false); const [deleteLoading, setDeleteLoading] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); const [editDepartmentData, setEditDepartmentData] = useState(null); const handleAddDepartment = () => { setEditDepartmentData(null); // Ensure it's not in edit mode setIsModalOpen(true); }; useEffect(() => { getAllDepartments(setIsLoading, dispatch); }, [dispatch]); const data = useMemo(() => departments, [departments]); const handleEdit = (department) => { setEditDepartmentData(department); // Pass department data to modal for editing setIsModalOpen(true); }; const handleDelete = (department) => { if (window.confirm("Are you sure you want to delete this department?")) { deleteDepartment(department.id, setDeleteLoading, dispatch); } }; return ( <> <div className="container mx auto "> {/* Header Section */} <div className="flex justify between items center mb 8"> <h2 className="text 2xl font extrabold text gray 800">Departments</h2> <button onClick={handleAddDepartment} className="flex items center gap 2 bg gradient to r from blue 500 to blue 700 text white hover:from blue 600 hover:to blue 800 px 5 py 2 rounded lg shadow lg transform hover:scale 105 transition transform duration 300" > <FiPlusCircle size={20} /> <span className="text sm font medium">Add Department</span> </button> </div> {/* Cards or Skeleton Loader */} {isLoading ? ( <div className="space y 3"> {Array.from({ length: 6 }).map((_, index) => ( <div key={index} className="h 28 bg gray 200 animate pulse rounded md" ></div> ))} </div> ) : ( <div className="flex flex wrap"> {data.map((dept, index) => ( <div key={dept.id} className="w full sm:w 1/2 lg:w 1/3 px 4 mb 6"> <div className={`block p 8 rounded 2xl relative overflow hidden group shadow lg transform transition transform duration 500 hover:scale 105 hover:shadow 2xl ${ gradients[index % gradients.length] }`} > {/* Hover Circle Animation */} <div className="absolute top [ 50px] right [ 50px] w 32 h 32 bg white opacity 20 rounded full transition transform duration 500 group hover:scale 150"></div> {/* Department Title */} <div className="relative z 10 text white font extrabold text 2xl mb 4"> {dept.name} </div> {/* Department Remark */} <div className="relative z 10 text white text lg mb 6"> {dept.remarks || "N/A"} </div> {/* Action Buttons */} <div className="relative z 10 flex gap 3"> <button onClick={() => handleEdit(dept)} className="flex items center gap 1 bg white text green 600 hover:bg green 500 hover:text white text sm px 4 py 2 rounded md shadow md transition all" > <FiEdit size={16} /> Edit </button> <button onClick={() => handleDelete(dept)} className="flex items center gap 1 bg white text red 600 hover:bg red 500 hover:text white text sm px 4 py 2 rounded md shadow md transition all" > <FiTrash2 size={16} /> Delete </button> </div> </div> </div> ))} </div> )} </div> {isModalOpen && ( <AddEditDepartment isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} editDepartmentData={editDepartmentData} /> )} </> ); }; export default Department; The card button design and text design need to be made more beautiful and the color combination needs to be improved.