user-mapping-package/src/components/Lists/TotalUserList.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

import { useState } from 'react';
import { List, Button, LoadPanel } from 'devextreme-react';
import 'devextreme/dist/css/dx.light.css';

const TotalUserList = ({ users = [], onAddUsers, isFetching }) => {
  const [selectedUsers, setSelectedUsers] = useState([]);
  const [isSelectingAll, setIsSelectingAll] = useState(false);

  const handleSelectionChange = (e) => {
    const selectedKeys = e.component.option('selectedItemKeys');
    if (selectedKeys.length === users.length && selectedKeys.length > 0) {
      setIsSelectingAll(true);
      setTimeout(() => setIsSelectingAll(false), 1000); // Hide after 1s, adjust as needed
    }
    setSelectedUsers(selectedKeys);
  };

  const handleAddClick = () => {
    console.log('Adding selected users:', selectedUsers);
    onAddUsers(selectedUsers);
    setSelectedUsers([]);
  };

  return (
    <div className="totaluserlist w-1/2 p-4" style={{ position: 'relative' }}>
      <LoadPanel
        visible={isFetching || isSelectingAll}
        shading={false}
        position={{ of: '.totaluserlist' }}
        showPane={true}
        container=".totaluserlist"
      />
      <div className="totaluserheadercount">
        <h3 className="text-lg font-semibold mb-2">
          Total User Count ({users.length})
        </h3>
        <h3 className="text-lg font-semibold mb-2">
          Selected User Count ({selectedUsers.length})
        </h3>
        <Button
          text="Add Selected Users"
          type="default"
          onClick={handleAddClick}
          className="addselectbtn"
          disabled={selectedUsers.length === 0 || isFetching || isSelectingAll}
        />
      </div>
      <div className="mb-2">
        <List
          dataSource={users}
          displayExpr="NT_UserName"
          valueExpr="Id"
          selectionMode="all"
          showSelectionControls={true}
          selectAllMode="allPages"
          searchEnabled={true}
          searchExpr={['Name', 'NT_UserName', 'EmpId', 'EmailId']}
          height={450}
          onSelectionChanged={handleSelectionChange}
          selectedItemKeys={selectedUsers}
          pageLoadMode="scrollBottom"
        />
      </div>
    </div>
  );
};

export default TotalUserList;