From 0dc540eec2e17719eb716123d27a408f1f43cad8 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Thu, 9 Oct 2025 10:41:32 +0530
Subject: [PATCH] =?UTF-8?q?Added=203-dots=20menu=20in=20the=20Employee=20M?=
 =?UTF-8?q?odule=20with=20=E2=80=98Show=20Inactive=20Employees=E2=80=99=20?=
 =?UTF-8?q?and=20Export=20functionalities=20inside=20the=20menu.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/employee/EmployeeList.jsx | 129 ++++++++++++----------------
 1 file changed, 57 insertions(+), 72 deletions(-)

diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 5b4740bc..3a71fee4 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -343,28 +343,6 @@ const EmployeeList = () => {
 
                   {/* Show Inactive Employees Switch */}
                   {/* {showAllEmployees && ( */}
-                  <div className="form-check form-switch text-start">
-                    <input
-                      type="checkbox"
-                      className="form-check-input"
-                      role="switch"
-                      id="inactiveEmployeesCheckbox"
-                      checked={showInactive}
-                      onChange={(e) => setShowInactive(e.target.checked)}
-                    />
-                    <label
-                      className="form-check-label ms-0"
-                      htmlFor="inactiveEmployeesCheckbox"
-                    >
-                      Show Inactive Employees
-                    </label>
-                  </div>
-                  {/* )} */}
-                </div>
-
-                {/* Right side: Search + Export + Add Employee */}
-                <div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
-                  {/* Search Input - ALWAYS ENABLED */}
                   <div className="dataTables_filter">
                     <label className="mb-0">
                       <input
@@ -378,57 +356,11 @@ const EmployeeList = () => {
                     </label>
                   </div>
 
-                  {/* Export Dropdown */}
-                  <div className="dropdown">
-                    <button
-                      aria-label="Click me"
-                      className="btn btn-sm btn-label-secondary dropdown-toggle"
-                      type="button"
-                      data-bs-toggle="dropdown"
-                      aria-expanded="false"
-                    >
-                      <i className="bx bx-export me-2 bx-sm"></i>Export
-                    </button>
-                    <ul className="dropdown-menu">
-                      <li>
-                        <a
-                          className="dropdown-item"
-                          href="#"
-                          onClick={() => handleExport("print")}
-                        >
-                          <i className="bx bx-printer me-1"></i> Print
-                        </a>
-                      </li>
-                      <li>
-                        <a
-                          className="dropdown-item"
-                          href="#"
-                          onClick={() => handleExport("csv")}
-                        >
-                          <i className="bx bx-file me-1"></i> CSV
-                        </a>
-                      </li>
-                      <li>
-                        <a
-                          className="dropdown-item"
-                          href="#"
-                          onClick={() => handleExport("excel")}
-                        >
-                          <i className="bx bxs-file-export me-1"></i> Excel
-                        </a>
-                      </li>
-                      <li>
-                        <a
-                          className="dropdown-item"
-                          href="#"
-                          onClick={() => handleExport("pdf")}
-                        >
-                          <i className="bx bxs-file-pdf me-1"></i> PDF
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
+                  {/* )} */}
+                </div>
 
+                {/* Right side: Search + Add Employee + Options */}
+                <div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
                   {/* Add Employee Button */}
                   {Manage_Employee && (
                     <button
@@ -442,7 +374,60 @@ const EmployeeList = () => {
                       </span>
                     </button>
                   )}
+
+                  {/* 3-Dots Dropdown (New Combined Menu) */}
+                  <div className="dropdown">
+                    <button
+                      className="btn btn-icon me-1"
+                      type="button"
+                      data-bs-toggle="dropdown"
+                      aria-expanded="false"
+                    >
+                      <i className="bx bx-dots-vertical-rounded bx-md"></i>
+                    </button>
+                    <ul className="dropdown-menu dropdown-menu-end shadow-sm " style={{ minWidth: "220px" }}>
+
+                      <li className="dropdown-item d-flex align-items-center justify-content-between">
+                        <div className="form-check form-switch mb-0">
+                          <input
+                            type="checkbox"
+                            className="form-check-input"
+                            role="switch"
+                            id="inactiveEmployeesCheckboxMenu"
+                            checked={showInactive}
+                            onChange={(e) => setShowInactive(e.target.checked)}
+                          />
+                        </div>
+                        <span className="ms-0">Show Inactive Employees</span>
+                      </li>
+
+
+                      <li><hr className="dropdown-divider" /></li>
+
+                      <li>
+                        <button className="dropdown-item" onClick={() => handleExport("print")}>
+                          <i className="bx bx-printer me-2"></i> Print
+                        </button>
+                      </li>
+                      <li>
+                        <button className="dropdown-item" onClick={() => handleExport("csv")}>
+                          <i className="bx bx-file me-2"></i> CSV
+                        </button>
+                      </li>
+                      <li>
+                        <button className="dropdown-item" onClick={() => handleExport("excel")}>
+                          <i className="bx bxs-file-export me-2"></i> Excel
+                        </button>
+                      </li>
+                      <li>
+                        <button className="dropdown-item" onClick={() => handleExport("pdf")}>
+                          <i className="bx bxs-file-pdf me-2"></i> PDF
+                        </button>
+                      </li>
+                    </ul>
+                  </div>
                 </div>
+
               </div>
 
               <table