Cosmatic changes for Attendance Widget

src/components/Dashboard/Attendance.jsx

@@ -13,18 +13,24 @@ const Attendance = () => {
   const storedProjectId = localStorage.getItem(LOCAL_STORAGE_PROJECT_KEY);
   const initialProjectId = storedProjectId || "all";
   const [selectedProjectId, setSelectedProjectId] = useState(initialProjectId);
-    const [displayedProjectName, setDisplayedProjectName] = useState("Select Project");
+  const [displayedProjectName, setDisplayedProjectName] =
-    const [activeTab, setActiveTab] = useState("all");
+    useState("Select Project");
+  const [activeTab, setActiveTab] = useState("Summary");
 
-    const { dashboard_Attendancedata: AttendanceData, isLoading, error: isError } =
+  const {
-        useDashboard_AttendanceData(selectedDate, selectedProjectId);
+    dashboard_Attendancedata: AttendanceData,
+    isLoading,
+    error: isError,
+  } = useDashboard_AttendanceData(selectedDate, selectedProjectId);
 
   useEffect(() => {
     if (selectedProjectId === "all") {
       setDisplayedProjectName("All Projects");
     } else if (projects) {
       const foundProject = projects.find((p) => p.id === selectedProjectId);
-            setDisplayedProjectName(foundProject ? foundProject.name : "Select Project");
+      setDisplayedProjectName(
+        foundProject ? foundProject.name : "Select Project"
+      );
     } else {
       setDisplayedProjectName("Select Project");
     }
@@ -42,11 +48,11 @@ const Attendance = () => {
 
   return (
     <div className="card h-100">
-            <div className="card-header">
+      <div className="card-header  mb-1 pb-0 ">
-                <div className="d-flex flex-wrap justify-content-between align-items-center mb-0">
+        <div className="d-flex flex-wrap justify-content-between align-items-center mb-0 pb-0 ">
           <div className="card-title mb-0 text-start">
             <h5 className="mb-1">Attendance</h5>
-                        <p className="card-subtitle">Attendance Progress Chart</p>
+            <p className="card-subtitle">Daily Attendance Data</p>
           </div>
 
           <div className="btn-group">
@@ -60,7 +66,10 @@ const Attendance = () => {
             </button>
             <ul className="dropdown-menu">
               <li>
-                                <button className="dropdown-item" onClick={() => handleProjectSelect("all")}>
+                <button
+                  className="dropdown-item"
+                  onClick={() => handleProjectSelect("all")}
+                >
                   All Projects
                 </button>
               </li>
@@ -79,8 +88,38 @@ const Attendance = () => {
         </div>
       </div>
 
+      <div className="d-flex flex-wrap justify-content-between align-items-center mb-0 mt-0 me-5 ms-5">
+        {/* Tabs */}
+        <div>
+          <ul className="nav nav-tabs " role="tablist">
+            <li className="nav-item">
+              <button
+                type="button"
+                className={`nav-link ${
+                  activeTab === "Summary" ? "active" : ""
+                }`}
+                onClick={() => setActiveTab("Summary")}
+                data-bs-toggle="tab"
+              >
+                Summary
+              </button>
+            </li>
+            <li className="nav-item">
+              <button
+                type="button"
+                className={`nav-link ${
+                  activeTab === "Details" ? "active" : ""
+                }`}
+                onClick={() => setActiveTab("Details")}
+                data-bs-toggle="tab"
+              >
+                Details
+              </button>
+            </li>
+          </ul>
+        </div>
         {/* ✅ Date Picker Aligned Left with Padding */}
-            <div className="d-flex justify-content-start ps-6 mb-3 mt-0">
+        <div className="ps-6 mb-3 mt-0">
           <div style={{ width: "120px" }}>
             <input
               type="date"
@@ -91,31 +130,7 @@ const Attendance = () => {
             />
           </div>
         </div>
-
+      </div>
-
-            {/* Tabs */}
-            <ul className="nav nav-tabs " role="tablist">
-                <li className="nav-item">
-                    <button
-                        type="button"
-                        className={`nav-link ${activeTab === "Summary" ? "active" : ""}`}
-                        onClick={() => setActiveTab("Summary")}
-                        data-bs-toggle="tab"
-                    >
-                        Summary
-                    </button>
-                </li>
-                <li className="nav-item">
-                    <button
-                        type="button"
-                        className={`nav-link ${activeTab === "Details" ? "active" : ""}`}
-                        onClick={() => setActiveTab("Details")}
-                        data-bs-toggle="tab"
-                    >
-                        Details
-                    </button>
-                </li>
-            </ul>
 
       <div className="card-body">
         {activeTab === "Summary" && (
@@ -147,11 +162,13 @@ const Attendance = () => {
               )}
             </div>
           </div>
-
         )}
 
         {activeTab === "Details" && (
-                    <div className="table-responsive" style={{ maxHeight: "300px", overflowY: "auto" }}>
+          <div
+            className="table-responsive"
+            style={{ maxHeight: "300px", overflowY: "auto" }}
+          >
             <table className="table table-hover mb-0 text-start">
               <thead>
                 <tr>
@@ -161,25 +178,38 @@ const Attendance = () => {
                 </tr>
               </thead>
               <tbody>
-                                {AttendanceData?.attendanceTable && AttendanceData.attendanceTable.length > 0 ? (
+                {AttendanceData?.attendanceTable &&
+                AttendanceData.attendanceTable.length > 0 ? (
                   AttendanceData.attendanceTable.map((record, index) => (
                     <tr key={index}>
-                                            <td>{record.firstName}  {record.lastName}</td>
+                      <td>
-                                            <td>{new Date(record.inTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</td>
+                        {record.firstName} {record.lastName}
-                                            <td>{new Date(record.outTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</td>
+                      </td>
-
+                      <td>
+                        {new Date(record.inTime).toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
+                      </td>
+                      <td>
+                        {new Date(record.outTime).toLocaleTimeString([], {
+                          hour: "2-digit",
+                          minute: "2-digit",
+                        })}
+                      </td>
                     </tr>
                   ))
                 ) : (
                   <tr>
-                                        <td colSpan="3" className="text-center">No attendance data available</td>
+                    <td colSpan="3" className="text-center">
+                      No attendance data available
+                    </td>
                   </tr>
                 )}
               </tbody>
             </table>
           </div>
         )}
-
       </div>
     </div>
   );