From 7b1ed97452baaf4f7dc045b9a68f92453dc56f42 Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Fri, 31 Oct 2025 16:42:07 +0530
Subject: [PATCH] UI changes in Expense Weidget and Attendance weidget.

---
 src/components/Dashboard/AttendanceChart.jsx  | 21 ++++++++-----------
 src/components/Dashboard/ExpenseByProject.jsx |  8 +++----
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/Dashboard/AttendanceChart.jsx b/src/components/Dashboard/AttendanceChart.jsx
index ea3e2ba4..71d14e48 100644
--- a/src/components/Dashboard/AttendanceChart.jsx
+++ b/src/components/Dashboard/AttendanceChart.jsx
@@ -118,18 +118,16 @@ const AttendanceOverview = () => {
             <option value={30}>Last 30 Days</option>
           </select>
           <button
-            className={`btn btn-sm p-1 ${
-              view === "chart" ? "btn-primary" : "btn-outline-primary"
-            }`}
+            className={`btn btn-sm p-1 ${view === "chart" ? "btn-primary" : "btn-outline-primary"
+              }`}
             onClick={() => setView("chart")}
             title="Chart View"
           >
             <i className="bx bx-bar-chart-alt-2"></i>
           </button>
           <button
-            className={`btn btn-sm p-1 ${
-              view === "table" ? "btn-primary" : "btn-outline-primary"
-            }`}
+            className={`btn btn-sm p-1 ${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" }}>
-                    Role
-                  </th>
+                  <th style={{ background: "#f8f9fa", textTransform: "none" }}>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 =
-                        value > 0 ? { backgroundColor: "#d5d5d5" } : {};
+                      const cellStyle = value > 0 ? { backgroundColor: "#d5d5d5" } : {};
                       return (
                         <td key={idx} style={cellStyle}>
                           {value}
diff --git a/src/components/Dashboard/ExpenseByProject.jsx b/src/components/Dashboard/ExpenseByProject.jsx
index 9d617efe..37b9d211 100644
--- a/src/components/Dashboard/ExpenseByProject.jsx
+++ b/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"
@@ -162,13 +162,13 @@ const ExpenseByProject = () => {
       </div>
 
       {/* Chart */}
-       <div className="card-body bg-white text-dark p-3 rounded" style={{ minHeight: "210px" }}>
+      <div className="card-body bg-white text-dark p-3 rounded" style={{ minHeight: "210px" }}>
         {isLoading ? (
           <div className="d-flex justify-content-center align-items-center py-5">
             <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} />
         )}