Merge pull request 'pramod_Enhancement#76_ImproveEmpl_ListView' (#15) from pramod_Enhancement#76_ImproveEmpl_ListView into Feature_Task_Management

Reviewed-on: #15

src/components/Employee/SuspendEmp.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const SuspendEmp = ({onClose}) => {
+  return (
+    <div className="modal-dialog modal-md modal-simple mx-sm-auto mx-1 edit-project-modal" role="document">
+      <div className="modal-content">
+        <div className="modal-body p-sm-4 p-0">
+          <button
+            type="button"
+            className="btn-close"
+          
+            onClick={onClose}
+            aria-label="Close"
+          ></button>
+          <div className="text-center mb-2">
+            <h6>Coming Soon</h6>
+                </div>
+            </div></div>
+    </div>
+
+  )
+}
+
+export default SuspendEmp

src/components/common/Avatar.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-const Avatar = ({ firstName, lastName }) => {
+const Avatar = ({ firstName, lastName, size='sm' }) => {
   function generateAvatarText(firstName, lastName) {
     if (!firstName) return "";
     if (!lastName || lastName.trim() === "") {
@@ -27,7 +27,7 @@ const Avatar = ({ firstName, lastName }) => {
   return (
     <>
       <div className="avatar-wrapper p-1">
-        <div className="avatar me-2">
+        <div className={`avatar avatar-${size} me-2`}>
           <span
             className={`avatar-initial rounded-circle ${getRandomBootstrapBgClass()}`}
           >

src/pages/employee/EmployeeList.jsx

@@ -10,6 +10,7 @@ import { useProfile } from "../../hooks/useProfile";
 import { hasUserPermission } from "../../utils/authUtils";
 import { MANAGE_EMPLOYEES } from "../../utils/constants";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import SuspendEmp from "../../components/Employee/SuspendEmp";
 
 const EmployeeList = () =>
 {
@@ -26,10 +27,11 @@ const EmployeeList = () =>
   const [employeeList, setEmployeeList] = useState([]);
   const [modelConfig, setModelConfig] = useState();
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(5);
+  const [itemsPerPage] = useState(10);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [searchText, setSearchText] = useState("");
-  const [filteredData, setFilteredData] = useState([]);
+  const [ filteredData, setFilteredData ] = useState( [] );
+  const [showModal, setShowModal] = useState(false);
   const navigate = useNavigate();
 
   const handleSearch = (e) => {
@@ -74,7 +76,6 @@ const EmployeeList = () =>
 
   const closeModal = () => {
     setIsCreateModalOpen(false);
-
     const modalElement = document.getElementById("managerole-modal");
     if (modalElement) {
       modalElement.classList.remove("show");
@@ -83,6 +84,8 @@ const EmployeeList = () =>
       document.querySelector(".modal-backdrop").remove();
     }
   };
+  const handleShow = () => setShowModal(true);
+  const handleClose = () => setShowModal( false );
   
   const handleConfigData = (config) => {
     setModelConfig(config);
@@ -99,6 +102,17 @@ const EmployeeList = () =>
       {isCreateModalOpen && (
         <ManageEmp employeeId={modelConfig} onClosed={closeModal} />
       )}
+    
+    <div
+        className={`modal fade ${showModal ? 'show' : ''}`}
+        tabIndex="-1"
+        role="dialog"
+        style={{ display: showModal ? 'block' : 'none' }}
+        aria-hidden={!showModal}
+      >
+         <SuspendEmp onClose={handleClose}/>
+      </div>
+
       <div className="container-xxl flex-grow-1 container-p-y">
         <Breadcrumb
           data={[
@@ -184,35 +198,8 @@ const EmployeeList = () =>
                                 className="dropdown-item"
                                 href="#"
                               >
-                                <i className="bx bx-printer me-1"></i>
+                                {/* <i className="bx bx-printer me-1"></i> */}
-                                Print
+                                Coming Soon
-                              </a>
-                            </li>
-                            <li>
-                              <a
-                                aria-label="dropdown item another action"
-                                className="dropdown-item"
-                                href="#"
-                              >
-                                <i className="bx bx-file me-1"></i>
-                                Csv
-                              </a>
-                            </li>
-                            <li>
-                              <a
-                                aria-label="dropdown item something else here"
-                                className="dropdown-item"
-                                href="#"
-                              >
-                                <i className="bx bxs-file-export me-1"></i>
-                                Excel
-                              </a>
-                            </li>
-
-                            <li>
-                              <a className="dropdown-item" href="#">
-                                <i className="bx bxs-file-pdf me-1"></i>
-                                Pdf
                               </a>
                             </li>
                           </ul>
@@ -442,7 +429,7 @@ const EmployeeList = () =>
                                     >
                                       Edit
                                     </Link>
-                                    <button className="dropdown-item">
+                                    <button className="dropdown-item" onClick={handleShow}>
                                       Suspend
                                     </button>
                                     <button