// import React, { useState, useEffect } from "react";
// import { Button, Dropdown, Table, Modal, Form ,Row,Col} from "react-bootstrap";
// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// import { faEdit, faTrashAlt, faPlus ,faBars} from "@fortawesome/free-solid-svg-icons";
// import "bootstrap/dist/css/bootstrap.min.css";
// import "../Dashboard/UserMaintainanceView.css";

// function UserMaintenanceView() {
//   const [appUsers, setAppUsers] = useState([]);
//   const [isSubMenu, setIsSubMenu] = useState(false);
//   const [showAddItemPopup, setShowAddItemPopup] = useState(false);
//   const [newItemData, setNewItemData] = useState({
//     userId: "",
//     username: "",
//     fullName: "",
//     email: "",
//     mobileNumber: "",
//     isActive: true,
//     userGroupId: "",
//   });
//   const [recordsPerPage, setRecordsPerPage] = useState(10);
//   const [visibleColumns, setVisibleColumns] = useState({
//     userId: true,
//     username: true,
//     fullName: true,
//     email: true,
//     mobileNumber: true,
//     isActive: true,
//     userGroupId: true,
//     actions: true,

//   });
//   const [isEditing, setIsEditing] = useState(false);

//   useEffect(() => {
//     const apiUrl = `${process.env.REACT_APP_API_URL}/api/getAllAppUser`;
//     const token = localStorage.getItem("authToken");

//     const fetchAppUsers = async () => {
//         try {
//             const response = await fetch(apiUrl, {
//                 method: "GET",
//                 headers: {
//                     "Content-Type": "application/json",
//                     Authorization: `Bearer ${token}`,
//                 },
//             });

//             if (!response.ok) {
//                 throw new Error(`HTTP error! status: ${response.status}`);
//             }

//             const data = await response.json();
//             setAppUsers(data);
//         } catch (error) {
//             console.error("Fetching error:", error );
//         }
//     };

//     fetchAppUsers();
// }, []);

//   const toggleColumn = (column) => {
//     setVisibleColumns(prevColumns => ({
//       ...prevColumns,
//       [column]: !prevColumns[column]
//     }));
//   };
//   const handleAddItem = () => {
//     setIsEditing(false);
//     setNewItemData({
//       userId: "",
//       username: "",
//       fullName: "",
//       email: "",
//       mobileNumber: "",
//       isActive: true,
//       userGroupId: "",
//     });
//     setShowAddItemPopup(true);
//   };

//   const handleInputChange = (event) => {
//     const { name, value, type, checked } = event.target;
//     setNewItemData((prev) => ({
//       ...prev,
//       [name]: type === "checkbox" ? checked : value,
//     }));
//   };

//   const handleSubmit = (event) => {
//     event.preventDefault();
//     if (isEditing) {
//       setAppUsers(
//         appUsers.map((user) =>
//           user.userId === newItemData.userId ? newItemData : user
//         )
//       );
//     } else {
//       const newUserId = `ID${appUsers.length + 1}`;
//       setAppUsers([...appUsers, { ...newItemData, userId: newUserId }]);
//     }
//     setShowAddItemPopup(false);
//   };

//   const handleEdit = (userId) => {
//     const userToEdit = appUsers.find((user) => user.userId === userId);
//     setNewItemData(userToEdit);
//     setIsEditing(true);
//     setShowAddItemPopup(true);
//   };

//   const handleDelete = (userId) => {
//     setAppUsers(appUsers.filter((user) => user.userId !== userId));
//   };

//   return(
//     <div className="container mt-5">

//       <div className="d-flex justify-content-between align-items-center mb-4">
//       <h2 className="text-primary">User Maintenance</h2>
//         <div>
//           <Button onClick={handleAddItem} className="btn btn-primary">
//             <FontAwesomeIcon icon={faPlus} /> ADD
//           </Button>
//           {isSubMenu && (
//             <Button onClick={handleBackToMainMenu} className="btn btn-secondary">
//               Back to Main Menu
//             </Button>
//           )}
//         </div>

//       </div>

//       <div className="table-responsive">
//         <Table striped bordered hover responsive className="shadow-sm">
//           <thead className="thead-light">
//             <tr>
//               {Object.keys(visibleColumns).filter((key) => visibleColumns[key]).map((key) => (
//                 <th key={key}>
//                   {key.charAt(0).toUpperCase() + key.slice(1).toLowerCase()}
//                 </th>

//               ))}
//             </tr>
//           </thead>
//           <tbody className="tbody">
//             {appUsers.length > 0 ? (
//               appUsers.slice(0, recordsPerPage).map((user, index) => (
//                 <tr key={index}>
//                   {Object.keys(visibleColumns).filter((key) => visibleColumns[key]).map((key) => (
//                     <td key={key}>
//                       {key === "actions" ? (
//                         <div className="btn-group">
//                           <Button variant="light" size="sm" onClick={() => handleEdit(user.userId)}>
//                             <FontAwesomeIcon icon={faEdit} />
//                           </Button>
//                           <Button variant="light" size="sm" onClick={() => handleDelete(user.userId)}>
//                             <FontAwesomeIcon icon={faTrashAlt} />
//                           </Button>
//                         </div>
//                       ) : (
//                         user[key]
//                       )}
//                     </td>
//                   ))}

//                   {!isSubMenu && (
//                     <td className="text-center">
//                       <Button
//                         onClick={() => handleSubMenuClick(menuItem.menuItemId)}
//                         className="btn btn-sm btn-primary"
//                       >
//                         <FontAwesomeIcon icon={faBars} />
//                       </Button>
//                     </td>
//                   )}
//                 </tr>
//               ))
//             ) : (

//               <tr>
//                 <td colSpan={Object.keys(visibleColumns).length} className="text-center">
//                   No users found. Please add new users.
//                 </td>
//               </tr>
//               )
//             }
//           </tbody>
//         </Table>
//       </div>

//       {/* Manage Columns & Records Per Page */}
//       <Row className="mt-4">
//         <Col md={6}>
//           <Dropdown>
//             <Dropdown.Toggle variant="outline-primary">
//               Manage Columns
//             </Dropdown.Toggle>
//             <Dropdown.Menu>
//               {Object.keys(visibleColumns).map((column) => (
//                 <Dropdown.Item key={column} onClick={() => toggleColumn(column)}>
//                   <Form.Check
//                     type="checkbox"
//                     label={column.charAt(0).toUpperCase() + column.slice(1).toLowerCase()}
//                     checked={visibleColumns[column]}
//                     readOnly
//                   />
//                 </Dropdown.Item>
//               ))}
//             </Dropdown.Menu>
//           </Dropdown>
//         </Col>
//         <Col md={6} className="d-flex justify-content-end">
//           <Dropdown>
//             <Dropdown.Toggle variant="outline-primary">
//               Records Per Page
//             </Dropdown.Toggle>
//             <Dropdown.Menu>
//               {[5, 10, 20, 50].map((number) => (
//                 <Dropdown.Item key={number} onClick={() => handleRecordsPerPageChange(number)}>
//                   {number}
//                 </Dropdown.Item>
//               ))}
//             </Dropdown.Menu>
//           </Dropdown>
//         </Col>
//       </Row>
//       <Modal show={showAddItemPopup} onHide={() => setShowAddItemPopup(false)}>
//         <Modal.Header closeButton>
//           <Modal.Title>{isEditing ? "Edit User" : "Add New User"}</Modal.Title>
//         </Modal.Header>
//         <Modal.Body>
//           <Form onSubmit={handleSubmit}>
//             <Form.Group controlId="formUsername">
//               <Form.Label>Username</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="username"
//                 value={newItemData.username}
//                 onChange={handleInputChange}
//                 required
//               />
//             </Form.Group>
//             <Form.Group controlId="formFullName">
//               <Form.Label>Full Name</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="fullName"
//                 value={newItemData.fullName}
//                 onChange={handleInputChange}
//                 required
//               />
//             </Form.Group>
//             <Form.Group controlId="formEmail">
//               <Form.Label>Email</Form.Label>
//               <Form.Control
//                 type="email"
//                 name="email"
//                 value={newItemData.email}
//                 onChange={handleInputChange}
//                 required
//               />
//             </Form.Group>
//             <Form.Group controlId="formMobileNumber">
//               <Form.Label>Mobile Number</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="mobileNumber"
//                 value={newItemData.mobileNumber}
//                 onChange={handleInputChange}
//                 required
//               />
//             </Form.Group>
//             <Form.Group controlId="formActive">
//               <Form.Check
//                 type="checkbox"
//                 label="Active?"
//                 name="isActive"
//                 checked={newItemData.isActive}
//                 onChange={handleInputChange}
//               />
//             </Form.Group>
//             <Form.Group controlId="formUserGroupId">
//               <Form.Label>User Group ID</Form.Label>
//               <Form.Control
//                 type="text"
//                 name="userGroupId"
//                 value={newItemData.userGroupId}
//                 onChange={handleInputChange}
//               />
//             </Form.Group>
//             <Modal.Footer>
//               <Button variant="primary" onClick={() => setShowAddItemPopup(false)}>
//                 Close
//               </Button>
//               <Button variant="primary" type="submit">
//                 {isEditing ? "Update User" : "Add User"}
//               </Button>
//             </Modal.Footer>
//           </Form>
//         </Modal.Body>
//       </Modal>
//     </div>
//   );
// }

// export default UserMaintenanceView;

import React, { useState, useEffect } from "react";
import {
  Button,
  Dropdown,
  
  Modal,
  Form,
  Row,
  Col,
  InputGroup,
  FormControl,
  ModalFooter,
} from "react-bootstrap";
import { Table ,Pagination,
  PaginationItem,
  PaginationLink,} from 'reactstrap';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faEdit,
  faTrashAlt,
  faPlus,
  faBars,
  faTimes,
  faDownload, faUpload,
  faFileExcel
} from "@fortawesome/free-solid-svg-icons";
import { FaSearch, FaTimes } from "react-icons/fa";
import "bootstrap/dist/css/bootstrap.min.css";
import "../Dashboard/CSS/CSS/UserMaintainanceView.css";
import { BsJournals } from "react-icons/bs";
import { toast } from "react-toastify";
import Spinner from '../../UIComponants/Spinner';
import { Tooltip, OverlayTrigger } from "react-bootstrap";
import * as XLSX from "xlsx";
import { getAllUsers ,createUser,updateUser,deleteUser} from "../../APIServices/UserMaintenanceAPI.js";

function UserMaintenanceView() {
  const [currentPage, setCurrentPage] = useState(1);
  const [appUsers, setAppUsers] = useState([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [showAddItemPopup, setShowAddItemPopup] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [newItemData, setNewItemData] = useState({
    userId: "",
    username: "",
    fullName: "",
    email: "",
    mob_no: "",
    active: true,
    usrGrpId: "",
  });
  
  const [recordsPerPage, setRecordsPerPage] = useState(10);
  const [visibleColumns, setVisibleColumns] = useState({
    userId: true,
    username: true,
    fullName: true,
    email: true,
    mob_no: true,
    acitve : true,
    usrGroupId: true,
    actions: true,
  });
  const [isEditing, setIsEditing] = useState(false);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const apiUrl = `${process.env.REACT_APP_API_URL}/api/getAllAppUser`;
    const token = localStorage.getItem("authToken");

    const fetchAppUsers = async () => {
      try {
        const response = await fetch(apiUrl, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        setAppUsers(data);
      } catch (error) {
        console.error("Fetching error:", error);
      }
    };

    fetchAppUsers();
  }, []);

  useEffect(() => {
    // Simulate loading data
    setTimeout(() => {
      setLoading(false);
    }, 3000); // Simulated 3 seconds loading
  }, []);
  const toggleColumn = (column) => {
    setVisibleColumns((prevColumns) => ({
      ...prevColumns,
      [column]: !prevColumns[column],
    }));
  };

  const handleSearch = (query) => {
    setSearchQuery(query);
  };

  // const handleBack = () => {
  //   setViewMode("cards");
  // };

  const handleClose = () => {
    setShowAddItemPopup(false); // Close the modal by setting the state to false
  };

  const handleAddItem = () => {
    setIsEditing(false);
    setNewItemData({
      userId: "",
      username: "",
      fullName: "",
      email: "",
      mob_no : "",
      active : true,
      usrGrpId: "",
    });
    setShowAddItemPopup(true);
  };

  // const handleInputChange = (event) => {
  //   const { name, value, type, checked } = event.target;
  //   setNewItemData((prev) => ({
  //     ...prev,
  //     [name]: type === "checkbox" ? checked : value,
  //   }));
  // };
  const handleOpenModal = () => setShowModal(true);
  const handleCloseModal = () => setShowModal(false);
  const handleInputChange = (event) => {
    const { name, type, checked, value } = event.target;
    setNewItemData({
      ...newItemData,
      [name]: type === "checkbox" ? checked : value,
    });
  };
  // const handleSubmit = async (event) => {
  //   try {
  //     event.preventDefault();
      
  //   if (isEditing) {
  //     setAppUsers(
  //       appUsers.map((user) =>
  //         user.userId === newItemData.userId ? newItemData : user
  //       )
  //     );
  //     toast.success("User Updated Successfully...");
  //   } else {
      
  //     const newUserId = `ID${appUsers.length + 1}`;
  //     setAppUsers([...appUsers, { ...newItemData, userId: newUserId }]);
  //     toast.success("User added successfully!");  
  //   }
  //   setShowAddItemPopup(false);
  //   } catch (error) {
  //     toast.error("There was an error while submitting the USER.");
  //     console.error("Error in handleSubmit:", error); // Log the error for debugging
  //   }
  // };


  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
        if (isEditing) {
            // If editing, update the user locally
            console.log("update api is applying...");
            const data = await updateUser(newItemData);
            console.log("update user data",data);
            setAppUsers(
                appUsers.map((user) =>
                    user.userId === newItemData.userId ? newItemData : user
                )
            );
            toast.success("User Updated Successfully...");
        } else {
            console.log("post api is applying...")
            // If not editing, call the createUser API to add the new user
            const response = await createUser(newItemData);
            if (response && response.data) {
                // On success, add the new user to the local state
                const newUserId = `ID${appUsers.length + 1}`;
                setAppUsers([...appUsers, { ...newItemData, userId: newUserId }]);
                toast.success("User added successfully!");  
                console.log("User added successfully:", response.data);
            }
        }

        // Close the popup after submit
        setShowAddItemPopup(false);

    } catch (error) {
        // Handle any errors that occur during submission
        toast.error("There was an error while submitting the USER.");
        console.error("Error in handleSubmit:", error); // Log the error for debugging
    }
};


  const handleEdit = (userId) => {
    try {
      const userToEdit = appUsers.find((user) => user.userId === userId);
      setNewItemData(userToEdit);
      setIsEditing(true);
      setShowAddItemPopup(true);
      
    } catch (error) {
      
    }
   
  };

  const handleDelete = async (userId) => {
    const data = await deleteUser(userId);
    console.log("deleted data",data);
    setAppUsers(appUsers.filter((user) => user.userId !== userId));
    toast.success("User deleted ....")
  };

  const handleRecordsPerPageChange = (number) => {
    setRecordsPerPage(number);
    setCurrentPage(1);
  };

  const totalPages = Math.ceil(appUsers.length / recordsPerPage);
  
  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  const handleFileChange = (event) =>{
    const file = event.target.files[0];
    if (file) {
      console.log("Selected file:", file.name); // For debugging or processing
    }
  }

  const handleUpload = () => {
    // Simulate file upload success
    setTimeout(() => {
      toast.success("File uploaded successfully!"); // Show toaster notification
      setShowModal(false); // Close modal
    }, 1000);
  };

  const exportToExcel = () => {
    const worksheet = XLSX.utils.json_to_sheet([]);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "UserDetails");
    XLSX.writeFile(workbook, "UserMaintenance.xlsx");
  };

  const slicedUsers = appUsers
  .filter((user) =>
    user.username.toLowerCase().includes(searchQuery.toLowerCase())
  )
  .slice((currentPage - 1) * recordsPerPage, currentPage * recordsPerPage);
  
  return (
    <div style={{marginTop:"11rem"}}>
      {loading ? (
        <Spinner/>
      ):(
        <div className="container-fluid mt-5">
      {/* Header */}
      <div className="d-flex justify-content-between align-items-center mb-4">
        <h1 className="title_main">User Maintenance</h1>
      </div>

      <Row className="align-items-center my-3">
        {/* Left: Search Bar */}
        <Col
          xs={12}
          md={8}
          lg={6}
          className="d-flex justify-content-center my-3"
        >
          <InputGroup
            className="search-bar"
            style={{
              borderRadius: "10px",
              overflow: "hidden",
              boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
              width: "100%",
              maxWidth: "528px", // Set max-width to limit overall width
              paddingRight: "-15px", // Increase padding on the right side
            }}
          >
            <InputGroup.Text
              style={{
                backgroundColor: "#0E6591",
                color: "#fff",
                padding: "10px 15px",
              }}
            >
              <FaSearch />
            </InputGroup.Text>
            <FormControl
              placeholder="Search"
              value={searchQuery}
              onChange={(e) => handleSearch(e.target.value)}
              style={{
                padding: "10px",
                border: "none",
                paddingRight: "5px", // More space on the right side of input field
              }}
            />
          </InputGroup>
        </Col>

        {/*Add Icons */}
        <Col xs={12} md={4} lg={6} className="d-flex justify-content-end">
          <>
            {/* Add Icon */}
            <OverlayTrigger placement="bottom" overlay={<Tooltip>Add Items</Tooltip>}>
            <FontAwesomeIcon
              icon={faPlus}
              onClick={() => handleAddItem(true)}
              style={{
                cursor: "pointer",
                fontSize: "1.5rem",
                color: "#747264",
                marginRight: "20px",
              }}
              data-bs-toggle="tooltip"
              data-bs-placement="bottom"
              title="Add Item"
            />
            </OverlayTrigger>
           
           <OverlayTrigger  placement="bottom" overlay={<Tooltip>Download template</Tooltip>}>
           <FontAwesomeIcon
              icon={faDownload}
              onClick={() => handleAddItem(true)}
              style={{
                cursor: "pointer",
                fontSize: "1.5rem",
                color: "#747264",
                marginRight: "20px",
              }}
            />
           </OverlayTrigger>
           <OverlayTrigger  placement="bottom" overlay={<Tooltip>Import</Tooltip>}>
           <FontAwesomeIcon
              icon={faUpload}
              onClick={() =>  handleOpenModal(true)}
              style={{
                cursor: "pointer",
                fontSize: "1.5rem",
                color: "#747264",
                marginRight: "20px",
              }}
            />
           </OverlayTrigger>
           <OverlayTrigger  placement="bottom" overlay={<Tooltip>XLSX</Tooltip>}>
           <FontAwesomeIcon
              icon={faFileExcel}
              onClick={() => exportToExcel(true)}
              style={{
                cursor: "pointer",
                fontSize: "1.5rem",
                color: "#747264",
                marginRight: "20px",
              }}
            />
           </OverlayTrigger>

           <OverlayTrigger  placement="bottom" overlay={<Tooltip>Menu Items</Tooltip>}>
           <FontAwesomeIcon
              icon={faBars}
              style={{
                cursor: "pointer",
                fontSize: "1.5rem",
                color: "#747264",
              }}
            />
           </OverlayTrigger>
            
          </>
        </Col>
      </Row>

      <Modal show={showModal} onHide={handleCloseModal} centered>
        <Modal.Header closeButton>
          <Modal.Title>Import File</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group controlId="formFile" className="mb-3">
              <Form.Label>Select a file to import:</Form.Label>
              <Form.Control
                type="file"
                accept=".xlsx, .xls, .csv" // Restrict file types
                onChange={handleFileChange} // Handle file selection
              />
            </Form.Group>
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleCloseModal}>
            Cancel
          </Button>
          <Button variant="primary" onClick={handleUpload}>
            Upload
          </Button>
        </Modal.Footer>
      </Modal>

      {/* Table */}
      <div className="table-responsive">
  <Table striped hover responsive align="middle" className=" table-flush shadow-sm">
    <thead className="custom_header">
      <tr>
        {Object.keys(visibleColumns).map(
          (key) =>
            visibleColumns[key] && (
              <th key={key}>
                {key.charAt(0).toUpperCase() + key.slice(1).toLowerCase()}
              </th>
            )
        )}
      </tr>
    </thead>
    <tbody className="tbody">
    {slicedUsers.length === 0 ? (
              <tr>
                <td
                  colSpan={
                    Object.keys(visibleColumns).filter((key) => visibleColumns[key])
                      .length
                  }
                  className="text-center"
                >
                 
                </td>
              </tr>
            ) : (   slicedUsers.map((user, index) => (
        <tr key={index}>
          {Object.keys(visibleColumns).map((key) =>
            visibleColumns[key] ? (
              <td className="text-center" key={key}>
                {key === "actions" ? (
                  <div className="btn-group">
                    <FontAwesomeIcon
                      icon={faEdit}
                      onClick={() => handleEdit(user.userId)}
                      style={{
                        cursor: "pointer",
                        fontSize: "1rem",
                        color: "green", // edit icon color
                        marginRight: "15px", // space between icons
                      }}
                    />
                    <FontAwesomeIcon
                      icon={faTrashAlt}
                      onClick={() => handleDelete(user.userId)}
                      style={{
                        cursor: "pointer",
                        fontSize: "1rem",
                        color: "#dc3545", // delete icon color
                      }}
                    />
                  </div>
                ) : key === "isActive" ? (
                  <span
                    className="status"
                    style={{
                      color: user.isActive ? "green" : "red", // Dynamic text color
                      backgroundColor: user.isActive
                        ? "#d4f7d4"
                        : "#f7d4d4", // Faint green or red background
                      padding: "4px 8px", // Add some padding for the background effect
                      borderRadius: "4px", // Rounded corners
                      display: "inline-block", // Ensure the background only affects the text
                    }}
                  >
                    {user.isActive ? "Active" : "Inactive"}
                  </span>
                ) : (
                  user[key]
                )}
              </td>
            ) : null
          )}
        </tr>
      )))}
      {appUsers.length === 0 && (
        <tr>
          <td
            colSpan={
              Object.keys(visibleColumns).filter(
                (key) => visibleColumns[key]
              ).length
            }
            className="text-center"
          >
            No users found. Please add new users.
          </td>
        </tr>
      )}
    </tbody>
  </Table>
</div>

      <Row className="mt-4">
        <Col md={6} className="d-flex justify-content-start">
          <Dropdown>
            <Dropdown.Toggle
              variant="outline-primary"
              className="custom_manage_column_button"
            >
              Manage Columns
            </Dropdown.Toggle>
            <Dropdown.Menu>
              {Object.keys(visibleColumns).map((column) => (
                <Dropdown.Item
                  key={column}
                  onClick={() => toggleColumn(column)}
                >
                  <Form.Check
                    type="checkbox"
                    label={
                      column.charAt(0).toUpperCase() +
                      column.slice(1).toLowerCase()
                    }
                    checked={visibleColumns[column]}
                    readOnly
                    className="custom-checkbox"
                  />
                </Dropdown.Item>
              ))}
            </Dropdown.Menu>
          </Dropdown>
        </Col>

        <Col md={6} className="d-flex justify-content-end">
          <Dropdown>
            <Dropdown.Toggle
              variant="outline-primary"
              className="custom_manage_column_button px-4 py-2 border-2 rounded-3 shadow-sm"
              id="dropdown-custom-components"
            >
              <BsJournals />
            </Dropdown.Toggle>
            <Dropdown.Menu className="border-0 rounded-3 shadow-lg" align="end">
              {[1, 5, 10, 20, 50].map((number) => (
                <Dropdown.Item
                  key={number}
                  onClick={() => handleRecordsPerPageChange(number)}
                  className="text-dark d-flex justify-content-between align-items-center"
                >
                  <span>{number}</span>
                  <i
                    className="fa fa-check-circle"
                    style={{
                      display: recordsPerPage === number ? "inline" : "none",
                    }}
                  />
                </Dropdown.Item>
              ))}
            </Dropdown.Menu>
          </Dropdown>
        </Col>
      </Row>

      <Pagination className="pagination">
        <PaginationItem disabled={currentPage === 1}>
          <PaginationLink previous onClick={() => handlePageChange(currentPage - 1)} />
        </PaginationItem>
        {[...Array(totalPages)].map((_, index) => (
          <PaginationItem key={index} active={index + 1 === currentPage}>
            <PaginationLink onClick={() => handlePageChange(index + 1)}  style={{ color: '#0b6592' }}>
              {index + 1}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem disabled={currentPage === totalPages}>
          <PaginationLink next onClick={() => handlePageChange(currentPage + 1)} />
        </PaginationItem>
      </Pagination>

      <Modal show={showAddItemPopup} onHide={handleClose}>
      <Modal.Header>
          <Modal.Title>{isEditing ? "Edit User" : "Add New User"}</Modal.Title>
          <FontAwesomeIcon
            icon={faTimes}
            size="lg"
            onClick={handleClose}
            style={{
              position: "absolute",
              top: "25px",
              right: "25px",
              cursor: "pointer",
            }}
          />
        </Modal.Header>
        <Form onSubmit={handleSubmit}>
          <Modal.Body>
            {/* Form Content */}
            <Form.Group className="mb-3" controlId="username">
              <Form.Label>Username</Form.Label>
              <Form.Control
                type="text"
                name="username"
                value={newItemData.username}
                onChange={handleInputChange}
                required
                 className="custom-hover-border"
              />
            </Form.Group>
            <Form.Group className="mb-3" controlId="fullName">
              <Form.Label>Full Name</Form.Label>
              <Form.Control
                type="text"
                name="fullName"
                value={newItemData.fullName}
                onChange={handleInputChange}
                required
                 className="custom-hover-border"
              />
            </Form.Group>
            <Form.Group className="mb-3" controlId="email">
              <Form.Label>Email</Form.Label>
              <Form.Control
                type="email"
                name="email"
                value={newItemData.email}
                onChange={handleInputChange}
                required
                 className="custom-hover-border"
              />
            </Form.Group>
            <Form.Group className="mb-3" controlId="mobileNumber">
              <Form.Label>Mobile Number</Form.Label>
              <Form.Control
                type="text"
                name="mobileNumber"
                value={newItemData.mobaileNumber}
                onChange={handleInputChange}
               
                 className="custom-hover-border"
              />
            </Form.Group>
            <Form.Group className="mb-3" controlId="formBasicUserGroup">
              <Form.Label>User Group</Form.Label>
              <Form.Control
                type="text"
                name="userGroupId"
                value={newItemData.usrGrpId}
                onChange={handleInputChange}
                className="custom-hover-border"
              />
            </Form.Group>
            <Form.Group className="mb-3" controlId="isActive">
              <Form.Check
                type="checkbox"
                label="Active"
                name="isActive"
                checked={newItemData.active}
                onChange={handleInputChange}
              />
            </Form.Group>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="primary" type="submit" className="custom_button px-4">
              {isEditing ? "Save Changes" : "Add User"}
            </Button>
            <Button variant="secondary" onClick={handleClose} className="custom_button px-4">
              Cancel
            </Button>
          </Modal.Footer>
        </Form>
      </Modal>
    </div>
      )}
    </div>
    
  );
}

export default UserMaintenanceView;