Adding Color at the time of tables where value is greater then 0 and all the table times to left align.

src/components/Charts/Skelton.jsx

@@ -3,9 +3,7 @@ import React from "react";
 const ChartSkeleton = () => {
   return (
     <div className="w-100">
-      <div className="placeholder-glow mb-3" style={{ width: "100%" }}>
-        <span className="placeholder col-6" style={{ height: "50px", display: "block" }}></span>
-      </div>
+     
       <div
         className="bg-secondary bg-opacity-10 rounded"
         style={{ height: "300px", width: "100%" }}

src/components/Charts/flatColor.js

@@ -1,6 +1,6 @@
 const flatColors = [
     "#E57373", "#64B5F6", "#81C784", "#FFB74D",
-    "#FF8A65", "#4DB6AC", "#A1887F", "#DCE775",
+    "#FF8A65", "#4DB6AC", "#DCE775",
     "#7986CB", "#AED581", "#4FC3F7", "#F06292", "#E0E0E0",
     "#FFF176", "#A5D6A7", "#90CAF9", "#FFAB91",
     "#E6EE9C", "#FFCC80", "#80DEEA", "#B0BEC5",

src/components/Dashboard/AttendanceChart.jsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useMemo } from "react";
 import { useSelector } from "react-redux";
 import ReactApexChart from "react-apexcharts";
@@ -61,13 +60,30 @@ const AttendanceOverview = () => {
         },
         plotOptions: {
             bar: {
-                borderRadius: 8,
+                borderRadius: 2,
                 columnWidth: "60%",
             },
         },
         xaxis: {
             categories: tableData.map((row) => row.date),
         },
+        yaxis: {
+            show: true,
+            axisBorder: {
+                show: true,
+                color: '#78909C',
+                offsetX: 0,
+                offsetY: 0
+            },
+            axisTicks: {
+                show: true,
+                borderType: 'solid',
+                color: '#78909C',
+                width: 6,
+                offsetX: 0,
+                offsetY: 0
+            },
+        },
         legend: {
             position: "bottom",
         },
@@ -79,7 +95,7 @@ const AttendanceOverview = () => {
 
     return (
         <div
-            className="bg-white p-4 mt-5 rounded shadow d-flex flex-column"
+            className="bg-white p-4 rounded shadow d-flex flex-column"
         >
             {/* Header */}
             <div className="d-flex justify-content-between align-items-center mb-3">
@@ -132,7 +148,7 @@ const AttendanceOverview = () => {
                         className="table-responsive w-100"
                         style={{ maxHeight: "350px", overflowY: "auto" }}
                     >
-                        <table className="table table-bordered table-sm text-center align-middle mb-0">
+                        <table className="table table-bordered table-sm text-start align-middle mb-0">
                             <thead className="table-light" style={{ position: "sticky", top: 0, zIndex: 1 }}>
                                 <tr>
                                     <th style={{ background: "#f8f9fa" }}>Role</th>
@@ -145,9 +161,15 @@ const AttendanceOverview = () => {
                                 {roles.map((role) => (
                                     <tr key={role}>
                                         <td>{role}</td>
-                                        {tableData.map((row, idx) => (
-                                            <td key={idx}>{row[role]}</td>
-                                        ))}
+                                        {tableData.map((row, idx) => {
+                                            const value = row[role];
+                                            const cellStyle = value > 0 ? { backgroundColor: '#d5d5d5' } : {};
+                                            return (
+                                                <td key={idx} style={cellStyle}>
+                                                    {value}
+                                                </td>
+                                            );
+                                        })}
                                     </tr>
                                 ))}
                             </tbody>
@@ -157,7 +179,6 @@ const AttendanceOverview = () => {
             </div>
         </div>
     );
-
 };
 
-export default AttendanceOverview;
+export default AttendanceOverview;

src/components/Project/ProjectOverview.jsx

@@ -165,7 +165,7 @@ const ProjectOverview = ({ project }) => {
   }, [selectedProject]);
 
   return (
-    <div className="card mb-6" style={{ minHeight: "490px" }}>
+    <div className="card" style={{ minHeight: "490px" }}>
       <div className="card-header text-start">
         <h6 className="card-action-title mb-0">
           {" "}

src/pages/project/ProjectDetails.jsx

@@ -82,7 +82,8 @@ const ProjectDetails = () => {
               </div>
               <div className="col-lg-8 col-md-7 mt-5">
                 <ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
-                <AttendanceOverview />
+                <div className="mt-5"> <AttendanceOverview  /></div>
+               
               </div>
             </div>
           </>