src/components/Dashboard/AttendanceChart.jsx

@@ -98,42 +98,42 @@ const AttendanceOverview = () => {
     colors: roles.map((_, i) => flatColors[i % flatColors.length]),
   };
 
-  return (
-    <div className="bg-white p-4 rounded shadow d-flex flex-column">
-      {/* Header */}
-      <div className="d-flex justify-content-between align-items-center mb-3">
-        <div className="card-title mb-0 text-start">
-          <h5 className="mb-1">Attendance Overview</h5>
-          <p className="card-subtitle">Role-wise present count</p>
-        </div>
-        <div className="d-flex gap-2">
-          <select
-            className="form-select form-select-sm w-auto"
-            value={dayRange}
-            onChange={(e) => setDayRange(Number(e.target.value))}
-          >
-            <option value={7}>Last 7 Days</option>
-            <option value={15}>Last 15 Days</option>
-            <option value={30}>Last 30 Days</option>
-          </select>
-          <button
-            className={`btn btn-sm p-1  ${
-              view === "chart" ? "btn-primary" : "btn-outline-primary"
-            }`}
-            onClick={() => setView("chart")}
-          >
-            <i class="bx  bx-bar-chart  fs-5"></i>
-          </button>
-          <button
-            className={`btn btn-sm p-1 ${
-              view === "table" ? "btn-primary" : "btn-outline-primary"
-            }`}
-            onClick={() => setView("table")}
-          >
-            <i class="bx  bx-table fs-5"></i>
-          </button>
-        </div>
-      </div>
+    return (
+        <div
+            className="bg-white p-4 rounded shadow d-flex flex-column"
+        >
+            {/* Header */}
+            <div className="d-flex justify-content-between align-items-center mb-3">
+                <div className="card-title mb-0 text-start">
+                    <h5 className="mb-1">Attendance Overview</h5>
+                    <p className="card-subtitle">Role-wise present count</p>
+                </div>
+                <div className="d-flex gap-2">
+                    <select
+                        className="form-select form-select-sm"
+                        value={dayRange}
+                        onChange={(e) => setDayRange(Number(e.target.value))}
+                    >
+                        <option value={7}>Last 7 Days</option>
+                        <option value={15}>Last 15 Days</option>
+                        <option value={30}>Last 30 Days</option>
+                    </select>
+                    <button
+                        className={`btn btn-sm ${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 ${view === "table" ? "btn-primary" : "btn-outline-primary"}`}
+                        onClick={() => setView("table")}
+                        title="Table View"
+                    >
+                        <i className="bx bx-task text-success"></i>
+                    </button>
+                </div>
+            </div>
 
       {/* Content */}
       <div className="flex-grow-1 d-flex align-items-center justify-content-center">