UI changes in Expense Weidget and Attendance weidget.

src/components/Dashboard/AttendanceChart.jsx

@@ -118,8 +118,7 @@ const AttendanceOverview = () => {
             <option value={30}>Last 30 Days</option>
           </select>
           <button
-            className={`btn btn-sm p-1 ${
+            className={`btn btn-sm p-1 ${view === "chart" ? "btn-primary" : "btn-outline-primary"
-              view === "chart" ? "btn-primary" : "btn-outline-primary"
               }`}
             onClick={() => setView("chart")}
             title="Chart View"
@@ -127,8 +126,7 @@ const AttendanceOverview = () => {
             <i className="bx bx-bar-chart-alt-2"></i>
           </button>
           <button
-            className={`btn btn-sm p-1 ${
+            className={`btn btn-sm p-1 ${view === "table" ? "btn-primary" : "btn-outline-primary"
-              view === "table" ? "btn-primary" : "btn-outline-primary"
               }`}
             onClick={() => setView("table")}
             title="Table View"
@@ -144,6 +142,9 @@ const AttendanceOverview = () => {
           <SpinnerLoader />
         ) : error ? (
           <p className="text-danger">{error}</p>
+        ) : attendanceOverviewData.length === 0 ||
+          attendanceOverviewData.every((item) => item.present === 0) ? (
+          <div className="text-center text-dark">No data found</div>
         ) : view === "chart" ? (
           <div className="w-100">
             <ReactApexChart
@@ -164,9 +165,7 @@ const AttendanceOverview = () => {
                 style={{ position: "sticky", top: 0, zIndex: 1 }}
               >
                 <tr>
-                  <th style={{ background: "#f8f9fa", textTransform: "none" }}>
+                  <th style={{ background: "#f8f9fa", textTransform: "none" }}>Role</th>
-                    Role
-                  </th>
                   {dates.map((date, idx) => (
                     <th
                       key={idx}
@@ -177,15 +176,13 @@ const AttendanceOverview = () => {
                   ))}
                 </tr>
               </thead>
-
               <tbody>
                 {roles.map((role) => (
                   <tr key={role}>
                     <td>{role}</td>
                     {tableData.map((row, idx) => {
                       const value = row[role];
-                      const cellStyle =
+                      const cellStyle = value > 0 ? { backgroundColor: "#d5d5d5" } : {};
-                        value > 0 ? { backgroundColor: "#d5d5d5" } : {};
                       return (
                         <td key={idx} style={cellStyle}>
                           {value}

src/components/Dashboard/ExpenseByProject.jsx

@@ -86,12 +86,12 @@ const ExpenseByProject = () => {
     <div className="card shadow-sm h-100 rounded ">
       {/* Header */}
       <div className="card-header">
-        <div className="d-flex justify-content-start align-items-center mb-3 mt-3">
+        <div className="d-flex justify-content-start align-items-center mb-1 mt-1">
           <div className="text-start">
             <h5 className="mb-1 me-6 card-title">Monthly Expense -</h5>
             <p className="card-subtitle m-0">{projectName}</p>
           </div>
-          <div className="btn-group mb-4 ms-n8">
+          <div className="btn-group mb-5 ms-n8">
             <button
               className="btn btn-sm dropdown-toggle fs-5"
               type="button"
@@ -168,7 +168,7 @@ const ExpenseByProject = () => {
             <SpinnerLoader />
           </div>
         ) : !expenseApiData || expenseApiData.length === 0 ? (
-          <div className="text-center text-muted py-5">No data found</div>
+          <div className="text-center text-muted py-12">No data found</div>
         ) : (
           <Chart options={options} series={series} type="bar" height={235} />
         )}