marco.pms.web/src/Demo.jsx

// src/DualListBox.js
import React, { useState } from "react";
import { employee } from "./data/masters";

const Demo = () => {
  const [leftList, setLeftList] = useState(employee);
  const [rightList, setRightList] = useState([]);

  const moveToRight = () => {
    const selectedItems = Array.from(document.querySelectorAll("#leftList input:checked"))
      .map((item) => item.value);

    setLeftList((prevList) =>
      prevList.filter((employee) => !selectedItems.includes(employee.id.toString()))
    );
    setRightList((prevList) => [
      ...prevList,
      ...leftList.filter((employee) => selectedItems.includes(employee.id.toString())),
    ]);
  };

  const moveToLeft = () => {
    const selectedItems = Array.from(document.querySelectorAll("#rightList input:checked"))
      .map((item) => item.value);

    setRightList((prevList) =>
      prevList.filter((employee) => !selectedItems.includes(employee.id.toString()))
    );
    setLeftList((prevList) => [
      ...prevList,
      ...rightList.filter((employee) => selectedItems.includes(employee.id.toString())),
    ]);
  };
  const removeFromRight = (employeeId) => {
    // Remove from right list
    setRightList((prevList) =>
      prevList.filter((employee) => employee.id !== employeeId)
    );
    // Add back to left list
    const employeeToMove = rightList.find((employee) => employee.id === employeeId);
    setLeftList((prevList) => [...prevList, employeeToMove]);
  };

  return (
    <div className="container p-8">
      <div className="row ">
        <div className="col-md-5 ">
          <div className="list-group p-1" id="leftList" style={{
              border: "1px solid #ccc", // Add border around left list
              height: "300px", // Define height to enable scrolling
              overflowY: "auto", // Enable vertical scroll
            }}>
            {leftList.map((employee) => (
              <a key={employee.id} className="list-group-item list-group-item-action d-flex justify-content-between align-items-center border-none" style={{padding:"1px"}}>
                <div className="li-wrapper d-flex justify-content-start align-items-center">
                  <div className="avatar avatar-xs me-3 my-0 py-0">
                    <span className="avatar-initial rounded-circle bg-label-success text-xs">
                      {employee?.FirtsName?.charAt(0)}
                    </span>
                  </div>
                  <div className="list-content text-start">
                    <p className="mb-0 fs-6">{employee.FirtsName} {employee.LastName}</p>
                    <small className="text-muted">Software Developer</small>
                  </div>
                </div>
                <input
                  type="checkbox"
                  value={employee.id}
                   className="form-check-input form-check-input-xs mx-2"
                />
              </a>
            ))}
          </div>
        </div>

        <div className="col-md-2 d-flex flex-row flex-sm-column align-items-center justify-content-center m-auto mb-2 m-sm-0 gap-3">
          <button className="btn btn-sm btn-primary" onClick={moveToRight} title="Move to Selected">
            <span className="d-none d-sm-block">
              <i className="bx bx-chevron-right"></i>
            </span>
            <span className="d-block d-sm-none">
              <i className="bx bx-chevron-down"></i>
            </span>
          </button>
          <button className="btn btn-sm btn-primary" onClick={moveToLeft} title="Move to Available">
            <span className="d-none d-sm-block">
              <i className="bx bx-chevron-left"></i>
            </span>
            <span className="d-block d-sm-none">
              <i className="bx bx-chevron-up"></i>
            </span>
          </button>
        </div>

        <div className="col-md-5">
          <div className="list-group p-1" id="rightList" style={{
              border: "1px solid #ccc", // Add border around left list
              height: "300px", // Define height to enable scrolling
              overflowY: "auto", // Enable vertical scroll
            }}>
            {rightList.map((employee) => (
              <a key={employee.id} className="list-group-item list-group-item-action align-items-center d-flex justify-content-between border-none p-1 m-0">
                <div className="li-wrapper d-flex justify-content-start align-items-center">
                  <div className="avatar avatar-sm me-3 my-0 py-0">
                    <span className="avatar-initial rounded-circle bg-label-success text-sm">
                      {employee?.FirtsName?.charAt(0)}
                    </span>
                  </div>
                  <div className="list-content text-start">
                    <p className="mb-0">{employee.FirtsName} {employee.LastName}</p>
                    <small className="text-muted">Software Developer</small>
                  </div>
                </div>
                <p
                      type="button"
                      className=" btn-close-white p-0 m-0"
                      aria-label="Close"
                      onClick={() => removeFromRight(employee.id)}
                    ><i className="icon-base bx bx-x icon-md "></i></p>
                  
              </a>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};
export default Demo