From ef005162566cec89b42df8ffda34eb4ecacbbc39 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Fri, 10 Oct 2025 12:11:12 +0530
Subject: [PATCH] Changes in Dashboard weidget Attendance and Monthly weidget
 when no data show.

---
 .../Dashboard/AttendanceOverview.jsx          |   8 +-
 src/components/Dashboard/Dashboard.jsx        |   6 +-
 src/components/Dashboard/ExpenseAnalysis.jsx  |   5 +-
 src/components/Dashboard/ExpenseByProject.jsx |  14 +-
 src/components/Documents/Documents.jsx        |   2 +-
 src/components/Expenses/ExpenseList.jsx       |   2 +-
 src/pages/employee/EmployeeList.jsx           | 511 +++++++++---------
 7 files changed, 276 insertions(+), 272 deletions(-)

diff --git a/src/components/Dashboard/AttendanceOverview.jsx b/src/components/Dashboard/AttendanceOverview.jsx
index dba31a52..06b5220b 100644
--- a/src/components/Dashboard/AttendanceOverview.jsx
+++ b/src/components/Dashboard/AttendanceOverview.jsx
@@ -95,8 +95,12 @@ const AttendanceOverview = () => {
       </div>
 
       {/* Content */}
-      <div className="flex-grow-1 d-flex align-items-center justify-content-center">
-        {view === "chart" ? (
+      <div className="flex-grow-1 d-flex align-items-center justify-content-center ">
+        {!isLoading && (!attendanceData || attendanceData.length === 0) ? (
+          <div
+            className="text-muted fw-semibold d-flex align-items-center justify-content-center"
+            style={{ minHeight: "250px" }}>No data found</div>
+        ) : view === "chart" ? (
           <div className="w-100">
             <ReactApexChart options={chartOptions} series={chartSeries} type="bar" height={300} />
           </div>
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
index 9653b8cd..8f2e7a37 100644
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@@ -45,13 +45,13 @@ const Dashboard = () => {
     </div>
   </div>
 
-  <div className="row g-6">
+  <div className="row ">
     {!isAllProjectsSelected && (
-      <div className="col-6">
+      <div className="col-12 col-md-6 mb-sm-0 mb-4 ">
         <AttendanceOverview />
       </div>
     )}
-    <div className="col-6">
+    <div className="col-12 col-md-6">
       <ExpenseByProject />
     </div>
   </div>
diff --git a/src/components/Dashboard/ExpenseAnalysis.jsx b/src/components/Dashboard/ExpenseAnalysis.jsx
index 48daf6b8..283e64c8 100644
--- a/src/components/Dashboard/ExpenseAnalysis.jsx
+++ b/src/components/Dashboard/ExpenseAnalysis.jsx
@@ -65,9 +65,6 @@ const { labels, series, total } = useMemo(() => {
     },
   };
 
-  if (data?.report === 0) {
-    return <div>No data found</div>;
-  }
 
   return (
     <>
@@ -97,7 +94,7 @@ const { labels, series, total } = useMemo(() => {
 
         {/* Data display */}
         {!isLoading && report.length === 0 && (
-          <div className="text-center text-muted py-5">No data found</div>
+          <div className="text-center py-5 text-muted ">No data found</div>
         )}
 
         {!isLoading && report.length > 0 && (
diff --git a/src/components/Dashboard/ExpenseByProject.jsx b/src/components/Dashboard/ExpenseByProject.jsx
index 97cf6c7a..c0189306 100644
--- a/src/components/Dashboard/ExpenseByProject.jsx
+++ b/src/components/Dashboard/ExpenseByProject.jsx
@@ -117,11 +117,10 @@ const ExpenseByProject = () => {
           {["1M", "3M", "6M", "12M", "All"].map((item) => (
             <button
               key={item}
-              className={`border-0 px-2 py-1 text-sm rounded ${
-                range === item
+              className={`border-0 px-2 py-1 text-sm rounded ${range === item
                   ? "text-white bg-primary"
                   : "text-body bg-transparent"
-              }`}
+                }`}
               style={{ cursor: "pointer", transition: "all 0.2s ease" }}
               onClick={() => setRange(item)}
             >
@@ -148,15 +147,16 @@ const ExpenseByProject = () => {
       </div>
 
       {/* Chart */}
-      <div
-        className="card-body bg-white text-dark p-3 rounded"
-      >
+      <div className="card-body bg-white text-dark p-3 rounded" style={{ minHeight: "210px" }}>
         {isLoading ? (
           <p>Loading chart...</p>
+        ) : !expenseApiData || expenseApiData.length === 0 ? (
+          <div className="text-center text-muted py-5">No data found</div>
         ) : (
-          <Chart options={options} series={series} type="bar"  height={235} />
+          <Chart options={options} series={series} type="bar" height={235} />
         )}
       </div>
+
     </div>
   );
 };
diff --git a/src/components/Documents/Documents.jsx b/src/components/Documents/Documents.jsx
index 47eadad5..38f8a5aa 100644
--- a/src/components/Documents/Documents.jsx
+++ b/src/components/Documents/Documents.jsx
@@ -147,7 +147,7 @@ const Documents = ({ Document_Entity, Entity }) => {
   return (
     <DocumentContext.Provider value={contextValues}>
       <div className="mt-2">
-        <div className="card page-min-h d-flex p-2">
+        <div className="card page-min-h d-flex p-5">
           <DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} />
           <div className="row align-items-center">
             {/* Search */}
diff --git a/src/components/Expenses/ExpenseList.jsx b/src/components/Expenses/ExpenseList.jsx
index 7400ee0a..cacf14ee 100644
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/src/components/Expenses/ExpenseList.jsx
@@ -270,7 +270,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                         <td colSpan={8} className="text-start">
                           <div className="d-flex align-items-center">
                             {" "}
-                            <small className="fs-6 ">
+                            <small className="fs-6 py-1">
                               {displayField} :{" "}
                             </small>{" "}
                             <small className="fs-6  ms-3">
diff --git a/src/pages/employee/EmployeeList.jsx b/src/pages/employee/EmployeeList.jsx
index 3a71fee4..a243d43a 100644
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@@ -360,7 +360,7 @@ const EmployeeList = () => {
                 </div>
 
                 {/* Right side: Search + Add Employee + Options */}
-                <div className="d-flex flex-wrap align-items-center justify-content-end gap-3 flex-grow-1">
+                <div className="d-flex flex-wrap align-items-center justify-content-end flex-grow-1">
                   {/* Add Employee Button */}
                   {Manage_Employee && (
                     <button
@@ -429,269 +429,272 @@ const EmployeeList = () => {
                 </div>
 
               </div>
-
-              <table
-                className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
-                id="DataTables_Table_0"
-                aria-describedby="DataTables_Table_0_info"
-                style={{ width: "100%" }}
-                ref={tableRef}
-              >
-                <thead>
-                  <tr>
-                    <th
-                      className="sorting sorting_desc"
-                      tabIndex="0"
-                      aria-controls="DataTables_Table_0"
-                      rowSpan="1"
-                      colSpan="2"
-                      aria-label="User: activate to sort column ascending"
-                      aria-sort="descending"
-                    >
-                      <div className="text-start ms-6">Name</div>
-                    </th>
-                    <th
-                      className="sorting sorting_desc d-none d-sm-table-cell"
-                      tabIndex="0"
-                      aria-controls="DataTables_Table_0"
-                      rowSpan="1"
-                      colSpan="1"
-                      aria-label="User: activate to sort column ascending"
-                      aria-sort="descending"
-                    >
-                      <div className="text-start ms-5">Email</div>
-                    </th>
-                    <th
-                      className="sorting sorting_desc d-none d-sm-table-cell"
-                      tabIndex="0"
-                      aria-controls="DataTables_Table_0"
-                      rowSpan="1"
-                      colSpan="1"
-                      aria-label="User: activate to sort column ascending"
-                      aria-sort="descending"
-                    >
-                      <div className="text-start ms-5">Contact</div>
-                    </th>
-                    <th
-                      className="sorting sorting_desc  d-none  d-sm-table-cell"
-                      tabIndex="0"
-                      aria-controls="DataTables_Table_0"
-                      rowSpan="1"
-                      colSpan="1"
-                      aria-label="User: activate to sort column ascending"
-                      aria-sort="descending"
-                    >
-                      <div className="text-start ms-5">Designation</div>
-                    </th>
-
-                    <th
-                      className="sorting  d-none  d-md-table-cell"
-                      tabIndex="0"
-                      aria-controls="DataTables_Table_0"
-                      rowSpan="1"
-                      colSpan="1"
-                      aria-label="Plan: activate to sort column ascending"
-                    >
-                      Joining Date
-                    </th>
-                    <th
-                      className="sorting"
-                      tabIndex="0"
-                      aria-controls="DataTables_Table_0"
-                      rowSpan="1"
-                      colSpan="1"
-                      aria-label="Billing: activate to sort column ascending"
-                    >
-                      Status
-                    </th>
-                    <th
-                      className={`sorting_disabled  ${!Manage_Employee && "d-none"
-                        }`}
-                      rowSpan="1"
-                      colSpan="1"
-                      style={{ width: "50px" }}
-                      aria-label="Actions"
-                    >
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {loading && (
+              <div className="table-responsive text-nowrap">
+                <table
+                  className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
+                  id="DataTables_Table_0"
+                  aria-describedby="DataTables_Table_0_info"
+                  style={{ width: "100%" }}
+                  ref={tableRef}
+                >
+                  <thead>
                     <tr>
-                      <td colSpan={8}>
-                        <p>Loading...</p>
-                      </td>
-                    </tr>
-                  )}
-                  {/* Conditional messages for no data or no search results */}
-                  {!loading &&
-                    displayData?.length === 0 &&
-                    searchText ? (
-                    <tr>
-                      <td colSpan={8} className="border-0">
-                        <div className="py-12">
-                          <small className="muted">
-                            '{searchText}' employee not found
-                          </small>{" "}
-                        </div>
-                      </td>
-                    </tr>
-                  ) : null}
-                  {!loading &&
-                    displayData?.length === 0 &&
-                    (!searchText) ? (
-                    <tr>
-                      <td colSpan={8} className="border-0">
-                        <div className="py-12">{showInactive ? "No In-active Employeee Found" : "No Employeee Found"}</div>
-                      </td>
-                    </tr>
-                  ) : null}
+                      <th
+                        className="sorting sorting_desc"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        rowSpan="1"
+                        colSpan="2"
+                        aria-label="User: activate to sort column ascending"
+                        aria-sort="descending"
+                      >
+                        <div className="text-start ms-6">Name</div>
+                      </th>
+                      <th
+                        className="sorting sorting_desc d-none d-sm-table-cell"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        rowSpan="1"
+                        colSpan="1"
+                        aria-label="User: activate to sort column ascending"
+                        aria-sort="descending"
+                      >
+                        <div className="text-start ms-5">Email</div>
+                      </th>
+                      <th
+                        className="sorting sorting_desc d-none d-sm-table-cell"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        rowSpan="1"
+                        colSpan="1"
+                        aria-label="User: activate to sort column ascending"
+                        aria-sort="descending"
+                      >
+                        <div className="text-start ms-5">Contact</div>
+                      </th>
+                      <th
+                        className="sorting sorting_desc  d-none  d-sm-table-cell"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        rowSpan="1"
+                        colSpan="1"
+                        aria-label="User: activate to sort column ascending"
+                        aria-sort="descending"
+                      >
+                        <div className="text-start ms-5">Designation</div>
+                      </th>
 
-                  {/* Render current items */}
-                  {currentItems &&
-                    !loading &&
-                    currentItems.map((item) => (
-                      <tr className="odd" key={item.id}>
-                        <td className="sorting_1" colSpan={2}>
-                          <div className="d-flex justify-content-start align-items-center user-name">
-                            <Avatar
-                              firstName={item.firstName}
-                              lastName={item.lastName}
-                            ></Avatar>
-                            <div className="d-flex flex-column">
-                              <a
-                                onClick={() => navigate(`/employee/${item.id}`)}
-                                className="text-heading text-truncate cursor-pointer"
-                              >
-                                <span className="fw-normal">
-                                  {item.firstName} {item.middleName}{" "}
-                                  {item.lastName}
-                                </span>
-                              </a>
-                            </div>
+                      <th
+                        className="sorting  d-none  d-md-table-cell"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        rowSpan="1"
+                        colSpan="1"
+                        aria-label="Plan: activate to sort column ascending"
+                      >
+                        Joining Date
+                      </th>
+                      <th
+                        className="sorting"
+                        tabIndex="0"
+                        aria-controls="DataTables_Table_0"
+                        rowSpan="1"
+                        colSpan="1"
+                        aria-label="Billing: activate to sort column ascending"
+                      >
+                        Status
+                      </th>
+                      <th
+                        className={`sorting_disabled  ${!Manage_Employee && "d-none"
+                          }`}
+                        rowSpan="1"
+                        colSpan="1"
+                        style={{ width: "50px" }}
+                        aria-label="Actions"
+                      >
+                        Actions
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {loading && (
+                      <tr>
+                        <td colSpan={8}>
+                          <p>Loading...</p>
+                        </td>
+                      </tr>
+                    )}
+                    {/* Conditional messages for no data or no search results */}
+                    {!loading &&
+                      displayData?.length === 0 &&
+                      searchText ? (
+                      <tr>
+                        <td colSpan={8} className="border-0">
+                          <div className="py-12">
+                            <small className="muted">
+                              '{searchText}' employee not found
+                            </small>{" "}
                           </div>
                         </td>
-                        <td className="text-start  d-none  d-sm-table-cell">
-                          {item.email ? (
-                            <span className="text-truncate">
-                              <i className="bx bxs-envelope text-primary me-2"></i>
-                              {item.email}
-                            </span>
-                          ) : (
-                            <span className="text-truncate text-italic">-</span>
-                          )}
-                        </td>
-                        <td className="text-start  d-none  d-sm-table-cell">
-                          <span className="text-truncate">
-                            <i className="bx bxs-phone-call text-primary me-2"></i>
-                            {item.phoneNumber}
-                          </span>
-                        </td>
-                        <td className=" d-none  d-sm-table-cell text-start">
-                          <span className="text-truncate">
-                            <i className="bx bxs-wrench text-success  me-2"></i>
-                            {item.jobRole || "Not Assign Yet"}
-                          </span>
+                      </tr>
+                    ) : null}
+                    {!loading &&
+                      displayData?.length === 0 &&
+                      (!searchText) ? (
+                      <tr>
+                        <td colSpan={8} className="border-0">
+                          <div className="py-12">{showInactive ? "No In-active Employeee Found" : "No Employeee Found"}</div>
                         </td>
+                      </tr>
+                    ) : null}
 
-                        <td className="d-none d-md-table-cell">
-                          {item.joiningDate ? moment(item.joiningDate).format("DD-MMM-YYYY") : "NA"}
-                        </td>
-
-                        <td>
-                          {showInactive ? (
-                            <span
-                              className="badge bg-label-danger"
-                              text-capitalized=""
-                            >
-                              Inactive
-                            </span>
-                          ) : (
-                            <span
-                              className="badge bg-label-success"
-                              text-capitalized=""
-                            >
-                              Active
-                            </span>
-                          )}
-                        </td>
-                        {Manage_Employee && (
-                          <td className="text-end">
-                            <div className="dropdown">
-                              <button
-                                className="btn btn-icon dropdown-toggle hide-arrow"
-                                data-bs-toggle="dropdown"
-                              >
-                                <i className="bx bx-dots-vertical-rounded bx-md"></i>
-                              </button>
-                              <div className="dropdown-menu dropdown-menu-end">
-                                {/* View always visible */}
-                                <button
-                                  onClick={() =>
-                                    navigate(`/employee/${item.id}`)
-                                  }
-                                  className="dropdown-item py-1"
+                    {/* Render current items */}
+                    {currentItems &&
+                      !loading &&
+                      currentItems.map((item) => (
+                        <tr className="odd" key={item.id}>
+                          <td className="sorting_1" colSpan={2}>
+                            <div className="d-flex justify-content-start align-items-center user-name">
+                              <Avatar
+                                firstName={item.firstName}
+                                lastName={item.lastName}
+                              ></Avatar>
+                              <div className="d-flex flex-column">
+                                <a
+                                  onClick={() => navigate(`/employee/${item.id}`)}
+                                  className="text-heading text-truncate cursor-pointer"
                                 >
-                                  <i className="bx bx-detail bx-sm"></i> View
-                                </button>
-
-                                {/* If ACTIVE employee */}
-                                {item.isActive && (
-                                  <>
-                                    <button
-                                      className="dropdown-item py-1"
-                                      onClick={() =>
-                                        handleEmployeeModel(item.id)
-                                      }
-                                    >
-                                      <i className="bx bx-edit bx-sm"></i> Edit
-                                    </button>
-
-                                    {/* Suspend only when active */}
-                                    {item.isActive && (
-                                      <button
-                                        className="dropdown-item py-1"
-                                        onClick={() => handleOpenDelete(item)}
-                                      >
-                                        <i className="bx bx-task-x bx-sm"></i>{" "}
-                                        Suspend
-                                      </button>
-                                    )}
-
-                                    <button
-                                      className="dropdown-item py-1"
-                                      type="button"
-                                      data-bs-toggle="modal"
-                                      data-bs-target="#managerole-modal"
-                                      onClick={() =>
-                                        setEmpForManageRole(item.id)
-                                      }
-                                    >
-                                      <i className="bx bx-cog bx-sm"></i> Manage
-                                      Role
-                                    </button>
-                                  </>
-                                )}
-
-                                {/* If INACTIVE employee AND inactive toggle is ON */}
-                                {!item.isActive && showInactive && (
-                                  <button
-                                    className="dropdown-item py-1"
-                                    onClick={() => handleOpenDelete(item)}
-                                  >
-                                    <i className="bx bx-refresh bx-sm me-1"></i>{" "}
-                                    Re-activate
-                                  </button>
-                                )}
+                                  <span className="fw-normal">
+                                    {item.firstName} {item.middleName}{" "}
+                                    {item.lastName}
+                                  </span>
+                                </a>
                               </div>
                             </div>
                           </td>
-                        )}
-                      </tr>
-                    ))}
-                </tbody>
-              </table>
+                          <td className="text-start  d-none  d-sm-table-cell">
+                            {item.email ? (
+                              <span className="text-truncate">
+                                <i className="bx bxs-envelope text-primary me-2"></i>
+                                {item.email}
+                              </span>
+                            ) : (
+                              <span className="text-truncate text-italic">-</span>
+                            )}
+                          </td>
+                          <td className="text-start  d-none  d-sm-table-cell">
+                            <span className="text-truncate">
+                              <i className="bx bxs-phone-call text-primary me-2"></i>
+                              {item.phoneNumber}
+                            </span>
+                          </td>
+                          <td className=" d-none  d-sm-table-cell text-start">
+                            <span className="text-truncate">
+                              <i className="bx bxs-wrench text-success  me-2"></i>
+                              {item.jobRole || "Not Assign Yet"}
+                            </span>
+                          </td>
+
+                          <td className="d-none d-md-table-cell">
+                            {item.joiningDate ? moment(item.joiningDate).format("DD-MMM-YYYY") : "NA"}
+                          </td>
+
+                          <td>
+                            {showInactive ? (
+                              <span
+                                className="badge bg-label-danger"
+                                text-capitalized=""
+                              >
+                                Inactive
+                              </span>
+                            ) : (
+                              <span
+                                className="badge bg-label-success"
+                                text-capitalized=""
+                              >
+                                Active
+                              </span>
+                            )}
+                          </td>
+                          {Manage_Employee && (
+                            <td className="text-end">
+                              <div className="dropdown">
+                                <button
+                                  className="btn btn-icon dropdown-toggle hide-arrow"
+                                  data-bs-toggle="dropdown"
+                                >
+                                  <i className="bx bx-dots-vertical-rounded bx-md"></i>
+                                </button>
+                                <div className="dropdown-menu dropdown-menu-end">
+                                  {/* View always visible */}
+                                  <button
+                                    onClick={() =>
+                                      navigate(`/employee/${item.id}`)
+                                    }
+                                    className="dropdown-item py-1"
+                                  >
+                                    <i className="bx bx-detail bx-sm"></i> View
+                                  </button>
+
+                                  {/* If ACTIVE employee */}
+                                  {item.isActive && (
+                                    <>
+                                      <button
+                                        className="dropdown-item py-1"
+                                        onClick={() =>
+                                          handleEmployeeModel(item.id)
+                                        }
+                                      >
+                                        <i className="bx bx-edit bx-sm"></i> Edit
+                                      </button>
+
+                                      {/* Suspend only when active */}
+                                      {item.isActive && (
+                                        <button
+                                          className="dropdown-item py-1"
+                                          onClick={() => handleOpenDelete(item)}
+                                        >
+                                          <i className="bx bx-task-x bx-sm"></i>{" "}
+                                          Suspend
+                                        </button>
+                                      )}
+
+                                      <button
+                                        className="dropdown-item py-1"
+                                        type="button"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#managerole-modal"
+                                        onClick={() =>
+                                          setEmpForManageRole(item.id)
+                                        }
+                                      >
+                                        <i className="bx bx-cog bx-sm"></i> Manage
+                                        Role
+                                      </button>
+                                    </>
+                                  )}
+
+                                  {/* If INACTIVE employee AND inactive toggle is ON */}
+                                  {!item.isActive && showInactive && (
+                                    <button
+                                      className="dropdown-item py-1"
+                                      onClick={() => handleOpenDelete(item)}
+                                    >
+                                      <i className="bx bx-refresh bx-sm me-1"></i>{" "}
+                                      Re-activate
+                                    </button>
+                                  )}
+                                </div>
+                              </div>
+                            </td>
+                          )}
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+
+
 
               {displayData.length > 0 && (
                 <Pagination