Changes in Dashboard weidget Attendance and Monthly weidget when no data show.

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">
+      <div className="flex-grow-1 d-flex align-items-center justify-content-center ">
-        {view === "chart" ? (
+        {!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>

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>

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 && (

src/components/Dashboard/ExpenseByProject.jsx

@@ -117,8 +117,7 @@ const ExpenseByProject = () => {
           {["1M", "3M", "6M", "12M", "All"].map((item) => (
             <button
               key={item}
-              className={`border-0 px-2 py-1 text-sm rounded ${
+              className={`border-0 px-2 py-1 text-sm rounded ${range === item
-                range === item
                   ? "text-white bg-primary"
                   : "text-body bg-transparent"
                 }`}
@@ -148,15 +147,16 @@ const ExpenseByProject = () => {
       </div>
 
       {/* Chart */}
-      <div
+      <div className="card-body bg-white text-dark p-3 rounded" style={{ minHeight: "210px" }}>
-        className="card-body bg-white text-dark p-3 rounded"
-      >
         {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} />
         )}
       </div>
+
     </div>
   );
 };

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 */}

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">

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,7 +429,7 @@ const EmployeeList = () => {
                 </div>
 
               </div>
-
+              <div className="table-responsive text-nowrap">
                 <table
                   className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
                   id="DataTables_Table_0"
@@ -692,6 +692,9 @@ const EmployeeList = () => {
                       ))}
                   </tbody>
                 </table>
+              </div>
+
+
 
               {displayData.length > 0 && (
                 <Pagination