shoc-frontend-new/src/components/ActionBar.js

import React, { useState } from "react";
import "./ActionBar.css";

export default function ActionBar({
  moduleName = "Items",
  moduleIcon = "fa-list",
  onNew,
  onBulkEdit,
  onImportExport,
  onSearch,
  selectedCount = 0
}) {
  const [workspaceOpen, setWorkspaceOpen] = useState(false);
  const [moduleOpen, setModuleOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const [selectedWorkspace, setSelectedWorkspace] = useState("All");

  const handleWorkspaceSelect = (workspace) => {
    setSelectedWorkspace(workspace);
    setWorkspaceOpen(false);
  };

  const toggleWorkspace = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setWorkspaceOpen(!workspaceOpen);
    setModuleOpen(false);
    setSearchOpen(false);
  };

  const toggleModule = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setModuleOpen(!moduleOpen);
    setWorkspaceOpen(false);
    setSearchOpen(false);
  };

  const toggleSearch = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setSearchOpen(!searchOpen);
    setWorkspaceOpen(false);
    setModuleOpen(false);
  };

  // Close dropdowns when clicking outside
  React.useEffect(() => {
    const handleClickOutside = () => {
      setWorkspaceOpen(false);
      setModuleOpen(false);
      setSearchOpen(false);
    };

    if (workspaceOpen || moduleOpen || searchOpen) {
      document.addEventListener("click", handleClickOutside);
      return () => document.removeEventListener("click", handleClickOutside);
    }
  }, [workspaceOpen, moduleOpen, searchOpen]);

  return (
    <div className="actionBar">
      <ul className="actionBarNav">
        {/* Settings/Filter Button */}
        <li>
          <a href="#" className="actionBarLink" title="Settings">
            <i className="fa fa-filter"></i>
          </a>
        </li>

        {/* Workspace Selector */}
        <li className={`actionBarDropdown ${workspaceOpen ? 'open' : ''}`}>
          <a
            href="#"
            className="actionBarLink"
            onClick={toggleWorkspace}
            title="Change your workspace"
          >
            <i className="fa fa-inbox"></i>
            <span className="actionBarText">{selectedWorkspace}</span>
            <i className="fa fa-angle-down"></i>
          </a>
          {workspaceOpen && (
            <ul className="actionBarDropdownMenu">
              <li><a href="#" onClick={(e) => { e.preventDefault(); handleWorkspaceSelect("All"); }}>All</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); handleWorkspaceSelect("Everyone else"); }}>Everyone else</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); handleWorkspaceSelect("Only Me"); }}>Only Me</a></li>
              <li className="divider"></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); handleWorkspaceSelect("Custom"); }}>Specific people...</a></li>
            </ul>
          )}
        </li>

        {/* Module Actions (New, Edit, Import/Export) */}
        <li className={`actionBarDropdown ${moduleOpen ? 'open' : ''}`}>
          <a
            href="#"
            className="actionBarLink"
            onClick={toggleModule}
            title={moduleName}
          >
            <i className={`fa ${moduleIcon}`}></i>
            <span className="actionBarText">{moduleName}</span>
            <i className="fa fa-angle-down"></i>
          </a>
          {moduleOpen && (
            <ul className="actionBarDropdownMenu">
              <li>
                <a href="#" onClick={(e) => { e.preventDefault(); setModuleOpen(false); onNew && onNew(); }}>
                  New
                </a>
              </li>
              <li>
                <a href="#" onClick={(e) => { e.preventDefault(); setModuleOpen(false); onBulkEdit && onBulkEdit(); }}>
                  Edit <span className="countLabel">({selectedCount})</span>
                </a>
              </li>
              <li className="divider"></li>
              <li>
                <a href="#" onClick={(e) => { e.preventDefault(); }}>
                  Import/Export <i className="fa fa-angle-right pull-right"></i>
                </a>
              </li>
            </ul>
          )}
        </li>

        {/* Search & Report */}
        <li className={`actionBarDropdown ${searchOpen ? 'open' : ''}`}>
          <a
            href="#"
            className="actionBarLink"
            onClick={toggleSearch}
            title="Search & Report"
          >
            <i className="fa fa-search"></i>
            <span className="actionBarText">Search</span>
            <i className="fa fa-angle-down"></i>
          </a>
          {searchOpen && (
            <ul className="actionBarDropdownMenu">
              <li>
                <a href="#" onClick={(e) => { e.preventDefault(); setSearchOpen(false); onSearch && onSearch('smart'); }}>
                  Smart Search
                </a>
              </li>
              <li>
                <a href="#" onClick={(e) => { e.preventDefault(); setSearchOpen(false); onSearch && onSearch('open'); }}>
                  Open
                </a>
              </li>
              <li>
                <a href="#" onClick={(e) => { e.preventDefault(); }}>
                  Recent <i className="fa fa-angle-right pull-right"></i>
                </a>
              </li>
            </ul>
          )}
        </li>
      </ul>
    </div>
  );
}