diff --git a/index.html b/index.html
index acbe7277..f6530280 100644
--- a/index.html
+++ b/index.html
@@ -46,7 +46,7 @@
   <!-- Helpers -->
   <script src="/assets/vendor/js/helpers.js"></script>
   <script src="/assets/js/config.js"></script>
-  
+
   <!-- Timer Picker -->
   <!-- Flatpickr CSS -->
   <link rel="stylesheet" href="/assets/vendor/libs/flatpickr/flatpickr.css" />
@@ -71,12 +71,12 @@
   <script src="/assets/vendor/libs/select2/select2.js"></script>
   <script src="/assets/vendor/js/menu.js"></script>
 
-  
+
 
 
 
   <!-- endbuild -->
-   
+
 
 
   <!-- Vendors JS -->
@@ -84,8 +84,8 @@
   <script src="/assets/vendor/libs/bootstrap-select/bootstrap-select.js"></script>
   <script src="/assets/vendor/libs/select2/select2.js"></script>
   <script src="/assets/vendor/libs/apex-charts/apexcharts.js"></script>
-  <script src="/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js" ></script>
-  <script src="/assets/vendor/libs/flatpickr/flatpickr.js" ></script>
+  <!-- <script src="/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js" ></script> -->
+  <script src="/assets/vendor/libs/flatpickr/flatpickr.js"></script>
   <!-- Main JS -->
   <script src="/assets/js/main.js"></script>
 
@@ -94,15 +94,15 @@
   <script src="/assets/js/dashboards-analytics.js"></script>
 
   <!-- component -->
-  <script src="./public/js/timppick.js"></script>
+  <!-- <script src="./public/js/timppick.js"></script> -->
 
-  <script src="/assets/vendor/libs/sweetalert2/sweetalert2.js" ></script>
+  <script src="/assets/vendor/libs/sweetalert2/sweetalert2.js"></script>
 
 
   <!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script> -->
 
-<!-- Flatpickr JS -->
+  <!-- Flatpickr JS -->
 
 </body>
 
diff --git a/src/components/Activities/ReportTask.jsx b/src/components/Activities/ReportTask.jsx
index 7503a84e..d6370f38 100644
--- a/src/components/Activities/ReportTask.jsx
+++ b/src/components/Activities/ReportTask.jsx
@@ -6,9 +6,8 @@ import { z } from "zod";
 import showToast from "../../services/toastService";
 import { TasksRepository } from "../../repositories/TaskRepository";
 
-export const ReportTask = ({ report,closeModal,refetch }) => {
-  const [ loading, setloading ] = useState( false );
-  
+export const ReportTask = ({ report, closeModal, refetch }) => {
+  const [loading, setloading] = useState(false);
 
   const schema = z.object({
     completedTask: z
@@ -32,149 +31,156 @@ export const ReportTask = ({ report,closeModal,refetch }) => {
   });
 
   const onSubmit = async (data) => {
-    try
-    {
-      setloading(true)
-        const reportData = {
-          ...data,
+    try {
+      setloading(true);
+      const reportData = {
+        ...data,
         id: report?.id,
         reportedDate: new Date().toISOString(),
-        };
-    
-      
-      let response = await TasksRepository.reportTsak( reportData )
-      showToast( "succesfully", "success" )
-      refetch()
-      closeModal()
-     
+      };
+
+      let response = await TasksRepository.reportTsak(reportData);
+      showToast("succesfully", "success");
+      refetch();
+      closeModal();
     } catch (error) {
       showToast("Somthing wrog", "error");
     }
   };
   const handleClose = () => {
-    closeModal();  
+    closeModal();
   };
 
   return (
+    <div
+      className="modal-dialog modal-md modal-simple report-task-modal"
+      role="document"
+    >
+      <div className="modal-content">
+        <div className="modal-body px-1">
+          <button
+            type="button"
+            className="btn-close"
+            onClick={handleClose}
+            aria-label="Close"
+          ></button>
 
-
-    <div className="modal-dialog modal-md modal-simple report-task-modal" role="document">
-    <div className="modal-content">
-      <div className="modal-body px-1">
-        <button
-          type="button"
-          className="btn-close"
-        
-          onClick={handleClose}
-          aria-label="Close"
-        ></button>
-       
-    <div className="container  m-0">
-      <div className="d-flex justify-content-between">
-     
-              <figure class="text-start p-0 m-0">
-          <blockquote class="blockquote">
-            <small>  Assigned Date : {formatDate(report?.assignmentDate)}</small>
+          <div className="container  m-0">
+            <div className="d-flex justify-content-between">
+              <figure className="text-start p-0 m-0">
+                <blockquote className="blockquote">
+                  <small>
+                    {" "}
+                    Assigned Date : {formatDate(report?.assignmentDate)}
+                  </small>
                 </blockquote>
-                </figure>
-        <figure class="text-end p-0 m-0">
-          <blockquote class="blockquote">
-            <small>Assigned By</small>
-          </blockquote>
-          <figcaption className="blockquote-footer mb-0">
-            {/* <div className="d-flex avatar avatar-xs">
+              </figure>
+              <figure className="text-end p-0 m-0">
+                <blockquote className="blockquote">
+                  <small>Assigned By</small>
+                </blockquote>
+                <figcaption className="blockquote-footer mb-0">
+                  {/* <div className="d-flex avatar avatar-xs">
             <span className="avatar-initial rounded-circle bg-label-primary">
               {report?.assignedBy?.firstName.slice(0, 1)}
             </span> */}
-            <cite title="Source Title m-0">{` ${report?.assignedBy.firstName} ${report?.assignedBy.lastName}`}</cite>
-            {/* </div> */}
-          </figcaption>
-        </figure>
-      </div>
+                  <cite title="Source Title m-0">{` ${report?.assignedBy.firstName} ${report?.assignedBy.lastName}`}</cite>
+                  {/* </div> */}
+                </figcaption>
+              </figure>
+            </div>
 
-      <div className="d-flex  p-0 m-0">
-        <div className="flex-shrink-0 mt-1 mx-sm-0 px-2  mx-auto">
-          <i class="bx bx-buildings"></i>
-        </div>
-        <p class="lead">{report?.workItem?.workArea?.floor?.building?.name}</p>
-        <p class="lead ms-12">{report?.workItem?.workArea?.floor?.floorName}</p>
-      </div>
-      <dl class="row text-start ms-3">
-        <dt class="col-sm-6">
-          Work Area : {report?.workItem?.workArea?.areaName}
-        </dt>
-        <dd class="col-sm-6">
-          <small> {report?.workItem?.activityMaster.activityName}</small>
-        </dd>
-      </dl>
-      <dl class="row text-start ms-3">
-        <dt class="col-sm-4">Team</dt>
-
-        <dd class="col-sm-4 d-flex align-items-center avatar-group justify-content-start">
-          {report?.teamMembers.map((member) => (
-            <>
-              <div
-                data-bs-toggle="tooltip"
-                data-bs-html="true"
-                data-popup="tooltip-custom"
-                data-bs-placement="top"
-                title={`${member.firstName} ${member.lastName}`}
-                className="avatar avatar-xs"
-              >
-                {/* <img src="..." alt="Avatar" class="rounded-circle pull-up" /> */}
-                <span className="avatar-initial rounded-circle bg-label-primary">
-                  {member?.firstName.slice(0, 1)}
-                </span>
+            <div className="d-flex  p-0 m-0">
+              <div className="flex-shrink-0 mt-1 mx-sm-0 px-2  mx-auto">
+                <i className="bx bx-buildings"></i>
               </div>
-            </>
-          ))}
-        </dd>
-        <dt class="col-sm-4 text-start">Planned : {report?.plannedTask}</dt>
-      </dl>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="row p-0">
-          <div className="col-4">
-            <input
-              {...register("completedTask", { valueAsNumber: true })}
-              id="smallInput"
-              className="form-control form-control-sm"
-              type="number"
-              placeholder="Completed Work"
-            />
-            {errors.completedTask && (
-              <div className="text-danger">{errors.completedTask.message}</div>
-            )}
-          </div>
-          <div className="col-8">
-            <textarea
-              {...register("comment")}
-              className="form-control"
-              id="exampleFormControlTextarea1"
-              rows="1"
-              placeholder="Enter comment"
-            />
-            {errors.comment && (
-              <div className="text-danger">{errors.comment.message}</div>
-            )}
-          </div>
-        </div>
+              <p className="lead">
+                {report?.workItem?.workArea?.floor?.building?.name}
+              </p>
+              <p className="lead ms-12">
+                {report?.workItem?.workArea?.floor?.floorName}
+              </p>
+            </div>
+            <dl className="row text-start ms-3">
+              <dt className="col-sm-6">
+                Work Area : {report?.workItem?.workArea?.areaName}
+              </dt>
+              <dd className="col-sm-6">
+                <small> {report?.workItem?.activityMaster.activityName}</small>
+              </dd>
+            </dl>
+            <dl className="row text-start ms-3">
+              <dt className="col-sm-4">Team</dt>
 
-        <div className="col-12 text-center my-2">
-          <button type="submit" className="btn btn-sm btn-primary me-3">
-            {loading ? "Please wait":"Submit Report"}
-          </button>
-          <button
-            type="button"
-            className="btn btn-sm btn-label-secondary"
-            onClick={handleClose}
-          >
-            Cancel
-          </button>
-        </div>
-      </form>
+              <dd className="col-sm-4 d-flex align-items-center avatar-group justify-content-start">
+                {report?.teamMembers.map((member) => (
+                  <>
+                    <div
+                      data-bs-toggle="tooltip"
+                      data-bs-html="true"
+                      data-popup="tooltip-custom"
+                      data-bs-placement="top"
+                      title={`${member.firstName} ${member.lastName}`}
+                      className="avatar avatar-xs"
+                    >
+                      {/* <img src="..." alt="Avatar" className="rounded-circle pull-up" /> */}
+                      <span className="avatar-initial rounded-circle bg-label-primary">
+                        {member?.firstName.slice(0, 1)}
+                      </span>
+                    </div>
+                  </>
+                ))}
+              </dd>
+              <dt className="col-sm-4 text-start">
+                Planned : {report?.plannedTask}
+              </dt>
+            </dl>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <div className="row p-0">
+                <div className="col-4">
+                  <input
+                    {...register("completedTask", { valueAsNumber: true })}
+                    id="smallInput"
+                    className="form-control form-control-sm"
+                    type="number"
+                    placeholder="Completed Work"
+                  />
+                  {errors.completedTask && (
+                    <div className="text-danger">
+                      {errors.completedTask.message}
+                    </div>
+                  )}
+                </div>
+                <div className="col-8">
+                  <textarea
+                    {...register("comment")}
+                    className="form-control"
+                    id="exampleFormControlTextarea1"
+                    rows="1"
+                    placeholder="Enter comment"
+                  />
+                  {errors.comment && (
+                    <div className="text-danger">{errors.comment.message}</div>
+                  )}
+                </div>
+              </div>
+
+              <div className="col-12 text-center my-2">
+                <button type="submit" className="btn btn-sm btn-primary me-3">
+                  {loading ? "Please wait" : "Submit Report"}
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-sm btn-label-secondary"
+                  onClick={handleClose}
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
           </div>
         </div>
       </div>
-      </div>
+    </div>
   );
 };
diff --git a/src/components/Activities/ReportTaskComments.jsx b/src/components/Activities/ReportTaskComments.jsx
index d946d204..b80495bf 100644
--- a/src/components/Activities/ReportTaskComments.jsx
+++ b/src/components/Activities/ReportTaskComments.jsx
@@ -1,62 +1,54 @@
-import React, {useEffect, useState} from "react";
-import {useProfile} from "../../hooks/useProfile";
+import React, { useEffect, useState } from "react";
+import { useProfile } from "../../hooks/useProfile";
 import moment from "moment";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
-import {TasksRepository} from "../../repositories/TaskRepository";
+import { TasksRepository } from "../../repositories/TaskRepository";
 import showToast from "../../services/toastService";
 
-
 const schema = z.object({
-    comment: z.string().min(1, "Comment cannot be empty"),
+  comment: z.string().min(1, "Comment cannot be empty"),
+});
+
+const ReportTaskComments = ({ commentsData, closeModal }) => {
+  const [loading, setloading] = useState(false);
+  const { profile } = useProfile();
+  const [comments, setComment] = useState([]);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm({
+    resolver: zodResolver(schema),
   });
 
-const ReportTaskComments = ( {commentsData, closeModal} ) =>
-{
-  const [loading,setloading]=useState(false)
-  const {profile} = useProfile()
-  const [comments,setComment] = useState([])
-    const {
-      register,
-      handleSubmit,
-      formState: { errors },reset
-    } = useForm({
-      resolver: zodResolver(schema),
-    });
+  useEffect(() => {
+    setComment(commentsData?.comments);
+  }, [commentsData]);
+  const isLoggedUser = (usrId) => profile?.employeeInfo.id;
 
-  useEffect( () =>
-  {
-    setComment(commentsData?.comments
-    )
-  }, [commentsData] )
-  const isLoggedUser = ( usrId ) => profile?.employeeInfo.id;
-
-  const onSubmit = async(data) =>
-  {
+  const onSubmit = async (data) => {
     let sendComment = {
       ...data,
       taskAllocationId: commentsData?.id,
       commentDate: new Date().toISOString(),
-      
-    }
+    };
 
-    try
-    {
-      setloading(true)
+    try {
+      setloading(true);
       // const resp = await TasksRepository.taskComments( sendComment );
       // console.timeLog( resp )
-      reset()
-      setloading(false)
-      showToast( "Successfully Sent", "success" )
-      closeModal()
-    } catch ( err )
-    {
-      setloading(false)
-      showToast(error.response.data?.message || "Something wrong","error")
-   }
-  
-  }
+      reset();
+      setloading(false);
+      showToast("Successfully Sent", "success");
+      closeModal();
+    } catch (err) {
+      setloading(false);
+      showToast(error.response.data?.message || "Something wrong", "error");
+    }
+  };
   return (
     <div
       className="modal-dialog modal-md modal-simple report-task-comments-modal"
@@ -71,39 +63,49 @@ const ReportTaskComments = ( {commentsData, closeModal} ) =>
             aria-label="Close"
           ></button>
           <div className="container  ">
-
-            {
-             comments && comments.map( ( data ) =>
-             (
-                <div className="text-start" key={data.id}>  
-                <div class={`li-wrapper d-flex justify-content-${isLoggedUser(data?.employee?.id) ? "end":"start"} align-items-start`}>
-                      <div class="avatar avatar-xs me-1">
-                        <span class="avatar-initial rounded-circle bg-label-success">
-                          M
-                        </span>
-                      </div>
-                      <div class="text-start py-0">
-                        <p class="mb-0">
-                       <strong>{ `${data?.employee?.firstName} ${data?.employee?.lastName}`}</strong>
-                        </p>
-                     <small style={{fontSize: "10px"}}>{ moment(data?.commentDate).fromNow()}</small>
-                      </div>
-                  </div> 
-                 <p className={`ms-${ isLoggedUser( data?.employee?.id ) ? "0 text-end me-6" : "6 " } mt-1`}>{ data?.comment
-                 }</p>
+            {comments &&
+              comments.map((data) => (
+                <div className="text-start" key={data.id}>
+                  <div
+                    className={`li-wrapper d-flex justify-content-${
+                      isLoggedUser(data?.employee?.id) ? "end" : "start"
+                    } align-items-start`}
+                  >
+                    <div className="avatar avatar-xs me-1">
+                      <span className="avatar-initial rounded-circle bg-label-success">
+                        M
+                      </span>
+                    </div>
+                    <div className="text-start py-0">
+                      <p className="mb-0">
+                        <strong>{`${data?.employee?.firstName} ${data?.employee?.lastName}`}</strong>
+                      </p>
+                      <small style={{ fontSize: "10px" }}>
+                        {moment(data?.commentDate).fromNow()}
+                      </small>
+                    </div>
+                  </div>
+                  <p
+                    className={`ms-${
+                      isLoggedUser(data?.employee?.id)
+                        ? "0 text-end me-6"
+                        : "6 "
+                    } mt-1`}
+                  >
+                    {data?.comment}
+                  </p>
                 </div>
-             ))
-          }
+              ))}
             {/* by other users */}
             {/* <div className="text-start">  
-            <div class="li-wrapper d-flex justify-content-start align-items-start">
-                  <div class="avatar avatar-xs me-1">
-                    <span class="avatar-initial rounded-circle bg-label-success">
+            <div className="li-wrapper d-flex justify-content-start align-items-start">
+                  <div className="avatar avatar-xs me-1">
+                    <span className="avatar-initial rounded-circle bg-label-success">
                       M
                     </span>
                   </div>
-                  <div class="text-start py-0">
-                    <p class="mb-0">
+                  <div className="text-start py-0">
+                    <p className="mb-0">
                       <strong>Mahajan</strong>
                     </p>
                     <small style={{ fontSize: "10px" }}>2 hour ago</small>
@@ -114,14 +116,14 @@ const ReportTaskComments = ( {commentsData, closeModal} ) =>
 
             {/* by login usrer */}
             {/* <div className="text-start">  
-            <div class="li-wrapper d-flex justify-content-end align-items-start">
-                  <div class="avatar avatar-xs me-1">
-                    <span class="avatar-initial rounded-circle bg-label-success">
+            <div className="li-wrapper d-flex justify-content-end align-items-start">
+                  <div className="avatar avatar-xs me-1">
+                    <span className="avatar-initial rounded-circle bg-label-success">
                       M
                     </span>
                   </div>
-                  <div class="text-start py-0">
-                    <p class="mb-0">
+                  <div className"text-start py-0">
+                    <p className="mb-0">
                       <strong>Pramod Mahajan</strong>
                     </p>
                     <small style={{ fontSize: "10px" }}>2 hour ago</small>
@@ -129,25 +131,31 @@ const ReportTaskComments = ( {commentsData, closeModal} ) =>
               </div> 
               <p className="ms-6 mt-1">Stylized implementation of HTML’s element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hov </p>
             </div> */}
-            <form onSubmit={handleSubmit( onSubmit )}>
-            <textarea
-              {...register("comment")}
-              className="form-control"
-              id="exampleFormControlTextarea1"
-              rows="1"
-              placeholder="Enter comment"
-            />
-            {errors.comment && (
-              <div className="danger-text">{errors.comment.message}</div>
+            <form onSubmit={handleSubmit(onSubmit)}>
+              <textarea
+                {...register("comment")}
+                className="form-control"
+                id="exampleFormControlTextarea1"
+                rows="1"
+                placeholder="Enter comment"
+              />
+              {errors.comment && (
+                <div className="danger-text">{errors.comment.message}</div>
               )}
-              <div class="text-end my-1">
-           
-           <button type="button" class="btn btn-sm btn-secondary" onClick={closeModal} data-bs-dismiss="modal">Close</button>
-                <button type="submit" class="btn btn-sm btn-primary ms-2">{ loading ? "Sending...":"Comment"}</button>
-         </div>
+              <div className="text-end my-1">
+                <button
+                  type="button"
+                  className="btn btn-sm btn-secondary"
+                  onClick={closeModal}
+                  data-bs-dismiss="modal"
+                >
+                  Close
+                </button>
+                <button type="submit" className="btn btn-sm btn-primary ms-2">
+                  {loading ? "Sending..." : "Comment"}
+                </button>
+              </div>
             </form>
-            
-            
           </div>
         </div>
       </div>
diff --git a/src/components/Employee/DemoTable.jsx b/src/components/Employee/DemoTable.jsx
index 9609cd6f..108314cf 100644
--- a/src/components/Employee/DemoTable.jsx
+++ b/src/components/Employee/DemoTable.jsx
@@ -1,135 +1,172 @@
-import React from 'react'
+import React from "react";
 
 const DemoTable = () => {
   return (
-    <div class="content-wrapper">
+    <div className="content-wrapper">
+      <div className="container-xxl flex-grow-1 container-p-y">
+        <div className="card">
+          <div className="card-datatable table-responsive">
+            <table className="datatables-basic table border-top">
+              <thead>
+                <tr>
+                  <th></th>
+                  <th></th>
+                  <th>id</th>
+                  <th>Name</th>
+                  <th>Email</th>
+                  <th>Date</th>
+                  <th>Salary</th>
+                  <th>Status</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+        </div>
+        <div className="offcanvas offcanvas-end" id="add-new-record">
+          <div className="offcanvas-header border-bottom">
+            <h5 className="offcanvas-title" id="exampleModalLabel">
+              New Record
+            </h5>
+            <button
+              type="button"
+              className="btn-close text-reset"
+              data-bs-dismiss="offcanvas"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div className="offcanvas-body flex-grow-1">
+            <form
+              className="add-new-record pt-0 row g-2"
+              id="form-add-new-record"
+              onsubmit="return false"
+            >
+              <div className="col-sm-12">
+                <label className="form-label" for="basicFullname">
+                  Full Name
+                </label>
+                <div className="input-group input-group-merge">
+                  <span id="basicFullname2" className="input-group-text">
+                    <i className="bx bx-user"></i>
+                  </span>
+                  <input
+                    type="text"
+                    id="basicFullname"
+                    className="form-control dt-full-name"
+                    name="basicFullname"
+                    placeholder="John Doe"
+                    aria-label="John Doe"
+                    aria-describedby="basicFullname2"
+                  />
+                </div>
+              </div>
+              <div className="col-sm-12">
+                <label className="form-label" for="basicPost">
+                  Post
+                </label>
+                <div className="input-group input-group-merge">
+                  <span id="basicPost2" className="input-group-text">
+                    <i className="bx bxs-briefcase"></i>
+                  </span>
+                  <input
+                    type="text"
+                    id="basicPost"
+                    name="basicPost"
+                    className="form-control dt-post"
+                    placeholder="Web Developer"
+                    aria-label="Web Developer"
+                    aria-describedby="basicPost2"
+                  />
+                </div>
+              </div>
+              <div className="col-sm-12">
+                <label className="form-label" for="basicEmail">
+                  Email
+                </label>
+                <div className="input-group input-group-merge">
+                  <span className="input-group-text">
+                    <i className="bx bx-envelope"></i>
+                  </span>
+                  <input
+                    type="text"
+                    id="basicEmail"
+                    name="basicEmail"
+                    className="form-control dt-email"
+                    placeholder="john.doe@example.com"
+                    aria-label="john.doe@example.com"
+                  />
+                </div>
+                <div className="form-text">
+                  You can use letters, numbers & periods
+                </div>
+              </div>
+              <div className="col-sm-12">
+                <label className="form-label" for="basicDate">
+                  Joining Date
+                </label>
+                <div className="input-group input-group-merge">
+                  <span id="basicDate2" className="input-group-text">
+                    <i className="bx bx-calendar"></i>
+                  </span>
+                  <input
+                    type="text"
+                    className="form-control dt-date"
+                    id="basicDate"
+                    name="basicDate"
+                    aria-describedby="basicDate2"
+                    placeholder="MM/DD/YYYY"
+                    aria-label="MM/DD/YYYY"
+                  />
+                </div>
+              </div>
+              <div className="col-sm-12">
+                <label className="form-label" for="basicSalary">
+                  Salary
+                </label>
+                <div className="input-group input-group-merge">
+                  <span id="basicSalary2" className="input-group-text">
+                    <i className="bx bx-dollar"></i>
+                  </span>
+                  <input
+                    type="number"
+                    id="basicSalary"
+                    name="basicSalary"
+                    className="form-control dt-salary"
+                    placeholder="12000"
+                    aria-label="12000"
+                    aria-describedby="basicSalary2"
+                  />
+                </div>
+              </div>
+              <div className="col-sm-12">
+                <button
+                  type="submit"
+                  className="btn btn-primary data-submit me-sm-4 me-1"
+                >
+                  Submit
+                </button>
+                <button
+                  type="reset"
+                  className="btn btn-outline-secondary"
+                  data-bs-dismiss="offcanvas"
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
 
-    <div class="container-xxl flex-grow-1 container-p-y">
-      <div class="card">
-        <div class="card-datatable table-responsive">
-          <table class="datatables-basic table border-top">
-            <thead>
-              <tr>
-                <th></th>
-                <th></th>
-                <th>id</th>
-                <th>Name</th>
-                <th>Email</th>
-                <th>Date</th>
-                <th>Salary</th>
-                <th>Status</th>
-                <th>Action</th>
-              </tr>
-            </thead>
-          </table>
-        </div>
-      </div>
-      <div class="offcanvas offcanvas-end" id="add-new-record">
-        <div class="offcanvas-header border-bottom">
-          <h5 class="offcanvas-title" id="exampleModalLabel">New Record</h5>
-          <button
-            type="button"
-            class="btn-close text-reset"
-            data-bs-dismiss="offcanvas"
-            aria-label="Close"></button>
-        </div>
-        <div class="offcanvas-body flex-grow-1">
-          <form class="add-new-record pt-0 row g-2" id="form-add-new-record" onsubmit="return false">
-            <div class="col-sm-12">
-              <label class="form-label" for="basicFullname">Full Name</label>
-              <div class="input-group input-group-merge">
-                <span id="basicFullname2" class="input-group-text"><i class="bx bx-user"></i></span>
-                <input
-                  type="text"
-                  id="basicFullname"
-                  class="form-control dt-full-name"
-                  name="basicFullname"
-                  placeholder="John Doe"
-                  aria-label="John Doe"
-                  aria-describedby="basicFullname2" />
-              </div>
-            </div>
-            <div class="col-sm-12">
-              <label class="form-label" for="basicPost">Post</label>
-              <div class="input-group input-group-merge">
-                <span id="basicPost2" class="input-group-text"><i class="bx bxs-briefcase"></i></span>
-                <input
-                  type="text"
-                  id="basicPost"
-                  name="basicPost"
-                  class="form-control dt-post"
-                  placeholder="Web Developer"
-                  aria-label="Web Developer"
-                  aria-describedby="basicPost2" />
-              </div>
-            </div>
-            <div class="col-sm-12">
-              <label class="form-label" for="basicEmail">Email</label>
-              <div class="input-group input-group-merge">
-                <span class="input-group-text"><i class="bx bx-envelope"></i></span>
-                <input
-                  type="text"
-                  id="basicEmail"
-                  name="basicEmail"
-                  class="form-control dt-email"
-                  placeholder="john.doe@example.com"
-                  aria-label="john.doe@example.com" />
-              </div>
-              <div class="form-text">You can use letters, numbers & periods</div>
-            </div>
-            <div class="col-sm-12">
-              <label class="form-label" for="basicDate">Joining Date</label>
-              <div class="input-group input-group-merge">
-                <span id="basicDate2" class="input-group-text"><i class="bx bx-calendar"></i></span>
-                <input
-                  type="text"
-                  class="form-control dt-date"
-                  id="basicDate"
-                  name="basicDate"
-                  aria-describedby="basicDate2"
-                  placeholder="MM/DD/YYYY"
-                  aria-label="MM/DD/YYYY" />
-              </div>
-            </div>
-            <div class="col-sm-12">
-              <label class="form-label" for="basicSalary">Salary</label>
-              <div class="input-group input-group-merge">
-                <span id="basicSalary2" class="input-group-text"><i class="bx bx-dollar"></i></span>
-                <input
-                  type="number"
-                  id="basicSalary"
-                  name="basicSalary"
-                  class="form-control dt-salary"
-                  placeholder="12000"
-                  aria-label="12000"
-                  aria-describedby="basicSalary2" />
-              </div>
-            </div>
-            <div class="col-sm-12">
-              <button type="submit" class="btn btn-primary data-submit me-sm-4 me-1">Submit</button>
-              <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Cancel</button>
-            </div>
-          </form>
-        </div>
+        <hr className="my-12" />
+
+        <hr className="my-12" />
+
+        <hr className="my-12" />
       </div>
 
-      <hr class="my-12" />
+      <div className="content-backdrop fade"></div>
+    </div>
+  );
+};
 
-     
-
-      <hr class="my-12" />
-
-      
-
-      <hr class="my-12" />
-
-     
-
-  </div>
-
-    <div class="content-backdrop fade"></div>
-  </div>
-  )
-}
-
-export default DemoTable
\ No newline at end of file
+export default DemoTable;
diff --git a/src/components/Employee/ManageEmployee.jsx b/src/components/Employee/ManageEmployee.jsx
index a153e517..349b33cb 100644
--- a/src/components/Employee/ManageEmployee.jsx
+++ b/src/components/Employee/ManageEmployee.jsx
@@ -11,7 +11,7 @@ import { Link, useNavigate, useParams } from "react-router-dom";
 import { formatDate } from "../../utils/dateUtils";
 import { useEmployeeProfile } from "../../hooks/useEmployees";
 import { clearCacheKey, getCachedData } from "../../slices/apiDataManager";
-import {clearApiCacheKey} from "../../slices/apiCacheSlice";
+import { clearApiCacheKey } from "../../slices/apiCacheSlice";
 
 const mobileNumberRegex = /^[7-9]\d{9}$/;
 
@@ -24,66 +24,78 @@ const ManageEmployee = () => {
     error,
     loading: empLoading,
   } = useEmployeeProfile(employeeId);
-  dispatch( changeMaster( "Job Role" ) );
-  const [disabledEmail,setDisabledEmail] = useState(false)
+  dispatch(changeMaster("Job Role"));
+  const [disabledEmail, setDisabledEmail] = useState(false);
   const { data: job_role, loading } = useMaster();
   const [isloading, setLoading] = useState(false);
   const navigation = useNavigate();
   const [currentEmployee, setCurrentEmployee] = useState();
 
-
-  const userSchema = z
-    .object({
-      ...(employeeId ? { Id: z.number().optional() } : {}),
-      FirstName: z.string().min(1, { message: "First Name is required" }),
-      MiddleName: z.string().optional(),
-      LastName: z.string().min(1, { message: "Last Name is required" }),
-      Email: z.string().optional(),
-      CurrentAddress: z
-        .string()
-        .min(1, { message: "Current Address is required" }).max(150, { message: "Address cannot exceed 150 characters" }),
-      BirthDate: z.string().min(1, { message: "Birth Date is required" }).refine((date, ctx) => {
-        return new Date(date) <= new Date();
-      }, {
-        message: "Birth date cannot be in the future",
-      }),
-      JoiningDate: z.string().min(1, { message: "Joining Date is required" }).refine((date, ctx) => {
-        return new Date(date) <= new Date();
-      }, {
-        message: "Joining date cannot be in the future",
-      }),
-      EmergencyPhoneNumber: z
-        .string()
-        .min(1, { message: "Phone Number is required" })
-        .regex(mobileNumberRegex, { message: "Invalid phone number " }),
-      EmergencyContactPerson: z
-        .string()
-        .min(1, { message: "Emergency Contact Person is required" }),
-      AadharNumber: z.string()
-      .regex(/^\d{12}$/, "Aadhar card must be exactly 12 digits long") 
+  const userSchema = z.object({
+    ...(employeeId ? { Id: z.number().optional() } : {}),
+    FirstName: z.string().min(1, { message: "First Name is required" }),
+    MiddleName: z.string().optional(),
+    LastName: z.string().min(1, { message: "Last Name is required" }),
+    Email: z.string().optional(),
+    CurrentAddress: z
+      .string()
+      .min(1, { message: "Current Address is required" })
+      .max(150, { message: "Address cannot exceed 150 characters" }),
+    BirthDate: z
+      .string()
+      .min(1, { message: "Birth Date is required" })
+      .refine(
+        (date, ctx) => {
+          return new Date(date) <= new Date();
+        },
+        {
+          message: "Birth date cannot be in the future",
+        }
+      ),
+    JoiningDate: z
+      .string()
+      .min(1, { message: "Joining Date is required" })
+      .refine(
+        (date, ctx) => {
+          return new Date(date) <= new Date();
+        },
+        {
+          message: "Joining date cannot be in the future",
+        }
+      ),
+    EmergencyPhoneNumber: z
+      .string()
+      .min(1, { message: "Phone Number is required" })
+      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
+    EmergencyContactPerson: z
+      .string()
+      .min(1, { message: "Emergency Contact Person is required" }),
+    AadharNumber: z
+      .string()
+      .regex(/^\d{12}$/, "Aadhar card must be exactly 12 digits long")
       .nonempty("Aadhar card is required"),
-      Gender: z
-        .string()
-        .min(1, { message: "Gender is required" })
-        .refine((val) => val !== "Select Gender", {
-          message: "Please select a gender",
-        }),
-      PanNumber:  z
+    Gender: z
+      .string()
+      .min(1, { message: "Gender is required" })
+      .refine((val) => val !== "Select Gender", {
+        message: "Please select a gender",
+      }),
+    PanNumber: z
       .string()
       .optional()
       .refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
         message: "Invalid PAN number",
       }),
-      PeramnentAddress: z
-        .string()
-        .min(1, { message: "Permanent Address is required" }).max(150, { message: "Address cannot exceed 150 characters" }),
-      PhoneNumber: z
-        .string()
-        .min(1, { message: "Phone Number is required" })
-        .regex(mobileNumberRegex, { message: "Invalid phone number " }),
-      JobRoleId: z.string().min(1, { message: "Role is required" }),
-    })
-  
+    PeramnentAddress: z
+      .string()
+      .min(1, { message: "Permanent Address is required" })
+      .max(150, { message: "Address cannot exceed 150 characters" }),
+    PhoneNumber: z
+      .string()
+      .min(1, { message: "Phone Number is required" })
+      .regex(mobileNumberRegex, { message: "Invalid phone number " }),
+    JobRoleId: z.string().min(1, { message: "Role is required" }),
+  });
 
   const {
     register,
@@ -116,7 +128,7 @@ const ManageEmployee = () => {
 
   const onSubmit = (data) => {
     setLoading(true);
-    
+
     const formData = getValues();
 
     const formDataToSend = new FormData();
@@ -140,11 +152,10 @@ const ManageEmployee = () => {
     }
 
     EmployeeRepository.manageEmployee(formDataToSend)
-      .then( ( response ) =>
-      {
-        showToast("Employee details updated successfully.", "success" );
-        clearCacheKey("employeeListByProject")
-        clearCacheKey( "allEmployeeList" )
+      .then((response) => {
+        showToast("Employee details updated successfully.", "success");
+        clearCacheKey("employeeListByProject");
+        clearCacheKey("allEmployeeList");
         setLoading(false);
         navigation("/employees");
       })
@@ -197,11 +208,19 @@ const ManageEmployee = () => {
               <h6 className="mb-0">
                 {employee ? "Update Employee" : "Create Employee"}
               </h6>
-              
-              <span className="cursor-pointer fs-6" data-htm="true" data-bs-toggle="tooltip"
-                     data-bs-offset="0,6"
-                     data-bs-placement="top"
-                     data-bs-html="true" title="Move Back" onClick={()=>navigation("/employees")}><i class='bx bxs-chevron-left'></i> Back</span>
+
+              <span
+                className="cursor-pointer fs-6"
+                data-htm="true"
+                data-bs-toggle="tooltip"
+                data-bs-offset="0,6"
+                data-bs-placement="top"
+                data-bs-html="true"
+                title="Move Back"
+                onClick={() => navigation("/employees")}
+              >
+                <i className="bx bxs-chevron-left"></i> Back
+              </span>
             </div>
             <div className="card-body">
               {!currentEmployee && empLoading && (
@@ -289,8 +308,6 @@ const ManageEmployee = () => {
                         {errors.Email.message}
                       </div>
                     )}
-
-
                   </div>
                   <div className="col-sm-6">
                     <div className="form-text text-start">Phone Number</div>
@@ -444,7 +461,9 @@ const ManageEmployee = () => {
                           Select Role
                         </option>
                         {job_role?.map((item) => (
-                          <option value={item?.id} key={item.id}>{item?.name} </option>
+                          <option value={item?.id} key={item.id}>
+                            {item?.name}{" "}
+                          </option>
                         ))}
                       </select>
                     </div>
@@ -525,7 +544,14 @@ const ManageEmployee = () => {
                       id="PanNumber"
                       placeholder="PAN Number"
                     />
-                    {errors.PanNumber  && <div className="danger-text text-start" style={{fontSize:"12px"}}>{errors.PanNumber.message}</div>}
+                    {errors.PanNumber && (
+                      <div
+                        className="danger-text text-start"
+                        style={{ fontSize: "12px" }}
+                      >
+                        {errors.PanNumber.message}
+                      </div>
+                    )}
                   </div>
                 </div>
 
diff --git a/src/components/Project/AboutProject.jsx b/src/components/Project/AboutProject.jsx
index 2a7af9ed..66290edf 100644
--- a/src/components/Project/AboutProject.jsx
+++ b/src/components/Project/AboutProject.jsx
@@ -1,10 +1,9 @@
-import React,{useState} from "react";
+import React, { useState } from "react";
 import moment from "moment";
 import { ProjectStatus } from "../../utils/projectStatus";
-const AboutProject = ( {data} ) =>
-{
-  const [CurrentProject,setCurrentProject] = useState(data)
- 
+const AboutProject = ({ data }) => {
+  const [CurrentProject, setCurrentProject] = useState(data);
+
   return (
     <>
       {data && (
@@ -24,7 +23,7 @@ const AboutProject = ( {data} ) =>
                 </span>
               </li>
               <li className="d-flex align-items-center mb-4">
-                <i class="bx bx-stop-circle"></i>{" "}
+                <i className="bx bx-stop-circle"></i>{" "}
                 <span className="fw-medium mx-2">End Date:</span>{" "}
                 <span>
                   {data.endDate
@@ -33,7 +32,7 @@ const AboutProject = ( {data} ) =>
                 </span>
               </li>
               <li className="d-flex align-items-center mb-2">
-                <i class="bx bx-trophy"></i>
+                <i className="bx bx-trophy"></i>
                 <span className="fw-medium mx-2">Status:</span>{" "}
                 <span>{ProjectStatus(data.projectStatusId)}</span>
               </li>
diff --git a/src/components/Project/AssignRole.jsx b/src/components/Project/AssignRole.jsx
index 336677c9..03be5ff6 100644
--- a/src/components/Project/AssignRole.jsx
+++ b/src/components/Project/AssignRole.jsx
@@ -1,4 +1,4 @@
-import React, { useState,useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import useMaster from "../../hooks/masterHook/useMaster";
@@ -6,254 +6,289 @@ import { employee } from "../../data/masters";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
 import { getCachedData } from "../../slices/apiDataManager";
-import {useModal} from "../../ModalContext";
-import {useProjects} from "../../hooks/useProjects";
-import {useEmployeesAllOrByProjectId} from "../../hooks/useEmployees";
-import {TasksRepository} from "../../repositories/ProjectRepository";
+import { useModal } from "../../ModalContext";
+import { useProjects } from "../../hooks/useProjects";
+import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
+import { TasksRepository } from "../../repositories/ProjectRepository";
 import showToast from "../../services/toastService";
 
-
 const schema = z.object({
-  selectedEmployees: z.array( z.number() ).min( 1, {message: "At least one employee must be selected"} ), 
-  description: z.string().min( 1, {message: "description required"} ),
-  
-})
-
-
-const AssignRoleModel = ( {assignData,onClose}) => {
-  const [ plannedTask, setPlannedTask ] = useState()
-  const { openModal, closeModal } = useModal()
-  const selectedProject = useSelector((store)=>store.localVariables.projectId)
-  const {employees} = useEmployeesAllOrByProjectId( selectedProject )
-
-const dispatch = useDispatch()
-const {data,loading} = useMaster()
-const jobRoleData = getCachedData("Job Role")
-
-
-const [selectedRole, setSelectedRole] = useState("all");
-const [selectedEmployees, setSelectedEmployees] = useState([]);
-
-
-const { handleSubmit, control, setValue, watch, formState: { errors } } = useForm({
-  defaultValues: {
-    selectedEmployees: [],
-    description:""
-  },
-  resolver: (data) => {
-    const validation = schema.safeParse(data);
-    if (validation.success) return { values: data, errors: {} };
-    return { values: {}, errors: validation.error.formErrors.fieldErrors };
-  },
+  selectedEmployees: z
+    .array(z.number())
+    .min(1, { message: "At least one employee must be selected" }),
+  description: z.string().min(1, { message: "description required" }),
 });
 
-const handleRoleChange = (event) => {
-  setSelectedRole(event.plannedTask.value);
-};
+const AssignRoleModel = ({ assignData, onClose }) => {
+  const [plannedTask, setPlannedTask] = useState();
+  const { openModal, closeModal } = useModal();
+  const selectedProject = useSelector(
+    (store) => store.localVariables.projectId
+  );
+  const { employees } = useEmployeesAllOrByProjectId(selectedProject);
 
+  const dispatch = useDispatch();
+  const { data, loading } = useMaster();
+  const jobRoleData = getCachedData("Job Role");
 
-const filteredEmployees = selectedRole === "all"
-  ? employees
-  : employees.filter((emp) => emp.JobRoleId.toString() === selectedRole);
+  const [selectedRole, setSelectedRole] = useState("all");
+  const [selectedEmployees, setSelectedEmployees] = useState([]);
 
-
-// not need currently for this fun
-const handleEmployeeSelection = (employeeId,field) => {
- 
-
-  setSelectedEmployees((prevSelected) => {
-    let updatedSelection;
-    if (!prevSelected.includes(employeeId)) {
-      updatedSelection = [...prevSelected, employeeId];
-    } else {
-      updatedSelection = prevSelected.filter((id) => id !== employeeId);
-    }
-    field.onChange(updatedSelection); 
-    return updatedSelection;
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm({
+    defaultValues: {
+      selectedEmployees: [],
+      description: "",
+    },
+    resolver: (data) => {
+      const validation = schema.safeParse(data);
+      if (validation.success) return { values: data, errors: {} };
+      return { values: {}, errors: validation.error.formErrors.fieldErrors };
+    },
   });
-};
 
-
-const removeEmployee = (employeeId) => {
-  setSelectedEmployees((prevSelected) => {
-    const updatedSelection = prevSelected.filter((id) => id !== employeeId);
-    setValue("selectedEmployees", updatedSelection); // Ensure form state is updated
-    return updatedSelection;
-  });
-};
-
-
-const onSubmit = async(data) => {
-  const formattedData = {
-    taskTeam: data.selectedEmployees, 
-    plannedTask: parseInt( plannedTask, 10 ),
-    description: data.description,
-    assignmentDate: new Date().toISOString(),
-    workItemId:assignData?.workItem?.workItem.id
+  const handleRoleChange = (event) => {
+    setSelectedRole(event.plannedTask.value);
   };
-  try
-  {
-    let response = await TasksRepository.assignTask( formattedData );
-    console.log( response )
-    showToast( "Task Successfully Assigend", "success" )
-    closeModal()
-  } catch ( error )
-  {
-    showToast("something wrong","error")
-    
-  }
 
-};
-useEffect(()=>{
-  dispatch(changeMaster("Job Role"))
-  return ()=> setSelectedRole("all")
-},[dispatch])
+  const filteredEmployees =
+    selectedRole === "all"
+      ? employees
+      : employees.filter((emp) => emp.JobRoleId.toString() === selectedRole);
 
+  // not need currently for this fun
+  const handleEmployeeSelection = (employeeId, field) => {
+    setSelectedEmployees((prevSelected) => {
+      let updatedSelection;
+      if (!prevSelected.includes(employeeId)) {
+        updatedSelection = [...prevSelected, employeeId];
+      } else {
+        updatedSelection = prevSelected.filter((id) => id !== employeeId);
+      }
+      field.onChange(updatedSelection);
+      return updatedSelection;
+    });
+  };
 
-  return (<>
- 
-    <div className="container my-1">
-    <div className="mb-2">
-    <div className="bs-stepper wizard-numbered d-flex justify-content-center align-items-center flex-wrap">
-  {[
-    assignData?.building?.name,
-    assignData?.floor?.floorName,
-    assignData?.workArea?.areaName,
-    assignData?.workItem?.workItem?.activityMaster?.activityName
-  ].map((item, index, array) => (
-    <div key={index} className="col d-flex justify-content-center align-items-center">
-      <div className="bs-stepper-header p-1 text-center">
-        <span className="fs-5">{item}</span>
-        
-        {/* Arrow between items */}
-        {index < array.length - 1 && (
-          <div className="line">
-            <i className="icon-base bx bx-chevron-right scaleX-n1-rtl"></i>
-          </div>
-        )}
-      </div>
-    </div>
-  ))}
-   </div>
+  const removeEmployee = (employeeId) => {
+    setSelectedEmployees((prevSelected) => {
+      const updatedSelection = prevSelected.filter((id) => id !== employeeId);
+      setValue("selectedEmployees", updatedSelection); // Ensure form state is updated
+      return updatedSelection;
+    });
+  };
 
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="row mb-1">
-          <div className="col-sm-4">
-            <div className="form-text text-start">Select Role</div>
-            <div className="input-group input-group-merge">
-              <select
-                className="form-select form-select-sm"
-                id="Role"
-                value={selectedRole}
-                onChange={handleRoleChange}
-                aria-label=""
+  const onSubmit = async (data) => {
+    const formattedData = {
+      taskTeam: data.selectedEmployees,
+      plannedTask: parseInt(plannedTask, 10),
+      description: data.description,
+      assignmentDate: new Date().toISOString(),
+      workItemId: assignData?.workItem?.workItem.id,
+    };
+    try {
+      let response = await TasksRepository.assignTask(formattedData);
+      console.log(response);
+      showToast("Task Successfully Assigend", "success");
+      closeModal();
+    } catch (error) {
+      showToast("something wrong", "error");
+    }
+  };
+  useEffect(() => {
+    dispatch(changeMaster("Job Role"));
+    return () => setSelectedRole("all");
+  }, [dispatch]);
+
+  return (
+    <>
+      <div className="container my-1">
+        <div className="mb-2">
+          <div className="bs-stepper wizard-numbered d-flex justify-content-center align-items-center flex-wrap">
+            {[
+              assignData?.building?.name,
+              assignData?.floor?.floorName,
+              assignData?.workArea?.areaName,
+              assignData?.workItem?.workItem?.activityMaster?.activityName,
+            ].map((item, index, array) => (
+              <div
+                key={index}
+                className="col d-flex justify-content-center align-items-center"
               >
-                {loading && data ? "Loading..." : (
-                  <>
-                  <option value="all">All</option>
-                { jobRoleData?.map((item) => (
-                  <option key={item.id} value={item.id}>
-                    {item.name}
-                  </option>
-                ))}
-                  </>
-                )}
-              </select>
-            </div>
-          </div>
-        </div>
-        <div class="divider text-start">
-       <div class="divider-text">Employee</div>
-       </div>
-        {selectedRole !== "" && (
-          <div className="row mb-2">
-            <div className="col-sm-12">
-              <div className="row">
-                {filteredEmployees.map((emp) => {
-                  const jobRole = jobRoleData?.find((role) => role.id === emp.jobRoleId);
+                <div className="bs-stepper-header p-1 text-center">
+                  <span className="fs-5">{item}</span>
 
-                  return (
-                    <div key={emp.id} className="col-6 col-sm-4 col-md-4 col-lg-3 mb-1">
-                      <div className="form-check text-start p-0">
-                        <div className="li-wrapper d-flex justify-content-start align-items-start">
-                          <Controller
-                            name="selectedEmployees"
-                            control={control}
-                            render={({ field }) => (
-                              <input
-                                {...field}
-                                className="form-check-input mx-2"
-                                type="checkbox"
-                                id={`employee-${emp.id}`}
-                                value={emp.id}
-                                checked={field.value.includes(emp.id)}  // Ensure the checkbox reflects the current form state
-                                onChange={() => {
-                                  handleEmployeeSelection( emp.id, field )
-                                }}
-                              />
-                            )}
-                          />
-                          <div className="list-content">
-                            <h6 className="mb-0">{emp.firstName
-                            } {emp.lastName}</h6>
-                            <small className="text-muted">
-                              {loading && (<p className="skeleton para" style={{height:"7px"}}></p>)}
-                              {data && !loading && (jobRole ? jobRole.name : 'Unknown Role')}
-                            </small>
-                          </div>
-                        </div>
-                      </div>
+                  {/* Arrow between items */}
+                  {index < array.length - 1 && (
+                    <div className="line">
+                      <i className="icon-base bx bx-chevron-right scaleX-n1-rtl"></i>
                     </div>
-                  );
-                })}
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <div className="row mb-1">
+              <div className="col-sm-4">
+                <div className="form-text text-start">Select Role</div>
+                <div className="input-group input-group-merge">
+                  <select
+                    className="form-select form-select-sm"
+                    id="Role"
+                    value={selectedRole}
+                    onChange={handleRoleChange}
+                    aria-label=""
+                  >
+                    {loading && data ? (
+                      "Loading..."
+                    ) : (
+                      <>
+                        <option value="all">All</option>
+                        {jobRoleData?.map((item) => (
+                          <option key={item.id} value={item.id}>
+                            {item.name}
+                          </option>
+                        ))}
+                      </>
+                    )}
+                  </select>
+                </div>
               </div>
             </div>
-          </div>
-        )}
-
-
-        {selectedEmployees.length > 0 && (
-          <div className="mt-1">
-            <div className="text-start px-2">
-              {selectedEmployees.map((empId) => {
-                const emp = employees.find((emp) => emp.id === empId);
-                return (
-                  <span key={empId} className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-2 mb-2">
-                    {emp.firstName
-                    } {emp.lastName}
-                    <p
-                      type="button"
-                      className=" btn-close-white p-0 m-0"
-                      aria-label="Close"
-                      onClick={() => {
-                        removeEmployee(empId);
-                        setValue("selectedEmployees", selectedEmployees.filter(id => id !== empId));
-                      }}
-                    ><i className="icon-base bx bx-x icon-md "></i></p>
-                  </span>
-                );
-              })}
+            <div className="divider text-start">
+              <div className="divider-text">Employee</div>
             </div>
-          </div>
-        )}
+            {selectedRole !== "" && (
+              <div className="row mb-2">
+                <div className="col-sm-12">
+                  <div className="row">
+                    {filteredEmployees.map((emp) => {
+                      const jobRole = jobRoleData?.find(
+                        (role) => role.id === emp.jobRoleId
+                      );
 
-      <div class="col-md text-start mx-0 px-0">
-         <div class="form-check form-check-inline mt-4 px-1">
-           <label className="form-text fs-6" for="inlineCheckbox1">Pending Work</label>
-           <label className="form-check-label ms-2" for="inlineCheckbox1">{ assignData?.workItem?.workItem?.plannedWork - assignData?.workItem?.workItem?.completedWork}</label>
-         </div>
-         <div className="form-check form-check-inline col-sm-2 col">
-            <label for="defaultFormControlInput" className="form-label">Target</label>
-           <input type="text" className="form-control form-control-sm " value={plannedTask} onChange={(e)=>setPlannedTask(e.target.value)} id="defaultFormControlInput" aria-describedby="defaultFormControlHelp" />
-         </div>
-      </div>       
-        {errors.selectedEmployees && (
-          <div className="danger-text mt-1">
-            <p>{errors.selectedEmployees[0]}</p>
-          </div>
-        )}
-    
-         <label for="exampleFormControlTextarea1" className="form-label">Description</label>
+                      return (
+                        <div
+                          key={emp.id}
+                          className="col-6 col-sm-4 col-md-4 col-lg-3 mb-1"
+                        >
+                          <div className="form-check text-start p-0">
+                            <div className="li-wrapper d-flex justify-content-start align-items-start">
+                              <Controller
+                                name="selectedEmployees"
+                                control={control}
+                                render={({ field }) => (
+                                  <input
+                                    {...field}
+                                    className="form-check-input mx-2"
+                                    type="checkbox"
+                                    id={`employee-${emp.id}`}
+                                    value={emp.id}
+                                    checked={field.value.includes(emp.id)} // Ensure the checkbox reflects the current form state
+                                    onChange={() => {
+                                      handleEmployeeSelection(emp.id, field);
+                                    }}
+                                  />
+                                )}
+                              />
+                              <div className="list-content">
+                                <h6 className="mb-0">
+                                  {emp.firstName} {emp.lastName}
+                                </h6>
+                                <small className="text-muted">
+                                  {loading && (
+                                    <p
+                                      className="skeleton para"
+                                      style={{ height: "7px" }}
+                                    ></p>
+                                  )}
+                                  {data &&
+                                    !loading &&
+                                    (jobRole ? jobRole.name : "Unknown Role")}
+                                </small>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {selectedEmployees.length > 0 && (
+              <div className="mt-1">
+                <div className="text-start px-2">
+                  {selectedEmployees.map((empId) => {
+                    const emp = employees.find((emp) => emp.id === empId);
+                    return (
+                      <span
+                        key={empId}
+                        className="badge bg-label-primary d-inline-flex align-items-center gap-2 me-1 p-2 mb-2"
+                      >
+                        {emp.firstName} {emp.lastName}
+                        <p
+                          type="button"
+                          className=" btn-close-white p-0 m-0"
+                          aria-label="Close"
+                          onClick={() => {
+                            removeEmployee(empId);
+                            setValue(
+                              "selectedEmployees",
+                              selectedEmployees.filter((id) => id !== empId)
+                            );
+                          }}
+                        >
+                          <i className="icon-base bx bx-x icon-md "></i>
+                        </p>
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            <div className="col-md text-start mx-0 px-0">
+              <div className="form-check form-check-inline mt-4 px-1">
+                <label className="form-text fs-6" for="inlineCheckbox1">
+                  Pending Work
+                </label>
+                <label className="form-check-label ms-2" for="inlineCheckbox1">
+                  {assignData?.workItem?.workItem?.plannedWork -
+                    assignData?.workItem?.workItem?.completedWork}
+                </label>
+              </div>
+              <div className="form-check form-check-inline col-sm-2 col">
+                <label for="defaultFormControlInput" className="form-label">
+                  Target
+                </label>
+                <input
+                  type="text"
+                  className="form-control form-control-sm "
+                  value={plannedTask}
+                  onChange={(e) => setPlannedTask(e.target.value)}
+                  id="defaultFormControlInput"
+                  aria-describedby="defaultFormControlHelp"
+                />
+              </div>
+            </div>
+            {errors.selectedEmployees && (
+              <div className="danger-text mt-1">
+                <p>{errors.selectedEmployees[0]}</p>
+              </div>
+            )}
+
+            <label for="exampleFormControlTextarea1" className="form-label">
+              Description
+            </label>
             <Controller
               name="description"
               control={control}
@@ -265,22 +300,27 @@ useEffect(()=>{
                   rows="3"
                 />
               )}
-          />
-          {errors.description && ( <div>{errors.description.message }</div>)}
-      
-       <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
-        <button type="submit" className="btn btn-sm btn-primary ">Submit</button>
-        <button type="reset" className="btn btn-sm btn-label-secondary" data-bs-dismiss="modal" aria-label="Close" onClick={closeModal}>
-          Cancel
-        </button>
-        </div>
-      </form>
-      </div>
-      </div>
-         
-      
+            />
+            {errors.description && <div>{errors.description.message}</div>}
 
-</>
+            <div className="col-12 d-flex justify-content-center align-items-center gap-sm-6 gap-8 text-center mt-1">
+              <button type="submit" className="btn btn-sm btn-primary ">
+                Submit
+              </button>
+              <button
+                type="reset"
+                className="btn btn-sm btn-label-secondary"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+                onClick={closeModal}
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
   );
 };
-export default AssignRoleModel
\ No newline at end of file
+export default AssignRoleModel;
diff --git a/src/components/Project/Infrastructure/WorkItem.jsx b/src/components/Project/Infrastructure/WorkItem.jsx
index 9b2902a7..b521836b 100644
--- a/src/components/Project/Infrastructure/WorkItem.jsx
+++ b/src/components/Project/Infrastructure/WorkItem.jsx
@@ -1,4 +1,4 @@
-import React, { useState,useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { useModal } from "../../../ModalContext";
 import AssignRoleModel from "../AssignRole";
 import { useParams } from "react-router-dom";
@@ -6,8 +6,8 @@ import GlobalModel from "../../common/GlobalModel";
 
 const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   const { projectId } = useParams();
-  const [ itemName, setItemName ] = useState( "" );
-  const [NewWorkItem,setNewWorkItem] = useState()
+  const [itemName, setItemName] = useState("");
+  const [NewWorkItem, setNewWorkItem] = useState();
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const openModal = () => setIsModalOpen(true);
@@ -17,7 +17,6 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   };
 
   const handleAssignTask = () => {
-
     setItemName("");
   };
 
@@ -29,8 +28,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
   // };
 
   useEffect(() => {
-
-    setNewWorkItem(workItem)
+    setNewWorkItem(workItem);
   }, [workItem]); // This hook will run whenever the workItem prop changes
 
   let assigndata = {
@@ -40,7 +38,7 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
     workItem,
   };
 
-  const hasWorkItem = NewWorkItem && NewWorkItem
+  const hasWorkItem = NewWorkItem && NewWorkItem;
 
   return (
     <>
@@ -57,21 +55,32 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
         <td className="text-start table-cell-small">
           <i className="bx bx-right-arrow-alt"></i>
           <span className="fw-medium">
-            {hasWorkItem ? ( NewWorkItem?.workItem?.activityMaster?.activityName || workItem.activityMaster?.activityName ) :"NA"
-             }
+            {hasWorkItem
+              ? NewWorkItem?.workItem?.activityMaster?.activityName ||
+                workItem.activityMaster?.activityName
+              : "NA"}
           </span>
         </td>
         {/* for mobile view */}
         <td className="text-center d-sm-none d-sm-table-cell">
-          {hasWorkItem ? (NewWorkItem?.workItem?.completedWork || workItem?.completedWork) :"NA" }/{" "}
-          { hasWorkItem ? (NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork) : "NA"}
+          {hasWorkItem
+            ? NewWorkItem?.workItem?.completedWork || workItem?.completedWork
+            : "NA"}
+          /{" "}
+          {hasWorkItem
+            ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
+            : "NA"}
         </td>
-         {/* for greather than mobile view ************* */}
+        {/* for greather than mobile view ************* */}
         <td className="text-center d-none d-md-table-cell">
-          {hasWorkItem ?  (NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork): "NA"}
+          {hasWorkItem
+            ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
+            : "NA"}
         </td>
         <td className="text-center d-none d-md-table-cell">
-          {hasWorkItem ? (NewWorkItem?.workItem?.completedWork || workItem?.completedWork) : "NA"}
+          {hasWorkItem
+            ? NewWorkItem?.workItem?.completedWork || workItem?.completedWork
+            : "NA"}
         </td>
         {/* ************************************************ */}
         <td className="text-center" style={{ width: "15%" }}>
@@ -81,17 +90,23 @@ const WorkItem = ({ workItem, forBuilding, forFloor, forWorkArea }) => {
               role="progressbar"
               style={{
                 width: getProgress(
-                  (NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork),
-                (NewWorkItem?.workItem?.completedWork || workItem?.completedWork)
+                  NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork,
+                  NewWorkItem?.workItem?.completedWork ||
+                    workItem?.completedWork
                 ),
                 height: "10px",
               }}
               aria-valuenow={
-                hasWorkItem ? (NewWorkItem?.workItem?.completedWork || workItem?.completedWork)  : 0
+                hasWorkItem
+                  ? NewWorkItem?.workItem?.completedWork ||
+                    workItem?.completedWork
+                  : 0
               }
               aria-valuemin="0"
               aria-valuemax={
-                hasWorkItem ?  (NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork) : 0
+                hasWorkItem
+                  ? NewWorkItem?.workItem?.plannedWork || workItem?.plannedWork
+                  : 0
               }
             ></div>
           </div>
diff --git a/src/components/common/Loader.jsx b/src/components/common/Loader.jsx
index a63e23e1..58766453 100644
--- a/src/components/common/Loader.jsx
+++ b/src/components/common/Loader.jsx
@@ -2,33 +2,33 @@ import React from "react";
 
 const Loader = () => {
   return (
-    <div class="demo-inline-spacing">
-      <div class="spinner-grow" role="status">
-        <span class="visually-hidden">Loading...</span>
+    <div className="demo-inline-spacing">
+      <div className="spinner-grow" role="status">
+        <span className="visually-hidden">Loading...</span>
       </div>
-      <div class="spinner-grow text-primary" role="status">
-        <span class="visually-hidden">Loading...</span>
+      <div className="spinner-grow text-primary" role="status">
+        <span className="visually-hidden">Loading...</span>
       </div>
-      <div class="spinner-grow text-secondary" role="status">
-        <span class="visually-hidden">Loading...</span>
+      <div className="spinner-grow text-secondary" role="status">
+        <span className="visually-hidden">Loading...</span>
       </div>
-      <div class="spinner-grow text-success" role="status">
-        <span class="visually-hidden">Loading...</span>
+      <div className="spinner-grow text-success" role="status">
+        <span className="visually-hidden">Loading...</span>
       </div>
-      <div class="spinner-grow text-danger" role="status">
-        <span class="visually-hidden">Loading...</span>
+      <div className="spinner-grow text-danger" role="status">
+        <span className="visually-hidden">Loading...</span>
       </div>
-      <div class="spinner-grow text-warning" role="status">
-        <span class="visually-hidden">Loading...</span>
+      <div className="spinner-grow text-warning" role="status">
+        <span className="visually-hidden">Loading...</span>
       </div>
-      <div class="spinner-grow text-info" role="status">
-        <span class="visually-hidden">Loading...</span>
+      <div className="spinner-grow text-info" role="status">
+        <span className="visually-hidden">Loading...</span>
       </div>
-      <div class="spinner-grow text-light" role="status">
-        <span class="visually-hidden">Loading...</span>
+      <div className="spinner-grow text-light" role="status">
+        <span className="visually-hidden">Loading...</span>
       </div>
-      <div class="spinner-grow text-dark" role="status">
-        <span class="visually-hidden">Loading...</span>
+      <div className="spinner-grow text-dark" role="status">
+        <span className="visually-hidden">Loading...</span>
       </div>
     </div>
   );
diff --git a/src/components/master/DeleteMaster.jsx b/src/components/master/DeleteMaster.jsx
index f43e62ba..d66f7dcd 100644
--- a/src/components/master/DeleteMaster.jsx
+++ b/src/components/master/DeleteMaster.jsx
@@ -3,18 +3,18 @@ import axios from "axios";
 
 const API_URL = "http://localhost:5000/mastersdata";
 
-
-const DeleteMaster = ({ master,onClose}) => {
+const DeleteMaster = ({ master, onClose }) => {
   const [loader, setLoader] = useState(false);
 
-
-  const handleDelete =  () => {
-   const index = mastersdata[master?.masterType]?.findIndex(item => String(item?.id) === String(master?.item?.id));
-           console.log(index)
+  const handleDelete = () => {
+    const index = mastersdata[master?.masterType]?.findIndex(
+      (item) => String(item?.id) === String(master?.item?.id)
+    );
+    console.log(index);
     if (index !== -1) {
-        mastersdata[master?.masterType].splice(index, 1);
+      mastersdata[master?.masterType].splice(index, 1);
     }
-    onClose()
+    onClose();
   };
 
   return (
@@ -27,8 +27,8 @@ const DeleteMaster = ({ master,onClose}) => {
           onClick={handleDelete}
         >
           {loader ? (
-            <div class="spinner-border text-primary" role="status">
-              <span class="sr-only">Loading...</span>
+            <div className="spinner-border text-primary" role="status">
+              <span className="sr-only">Loading...</span>
             </div>
           ) : (
             "Delete"
diff --git a/src/pages/Activities/AttendancePage.jsx b/src/pages/Activities/AttendancePage.jsx
index d834f782..c1efe17c 100644
--- a/src/pages/Activities/AttendancePage.jsx
+++ b/src/pages/Activities/AttendancePage.jsx
@@ -1,5 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { cacheData, getCachedData, getCachedProfileData } from "../../slices/apiDataManager";
+import {
+  cacheData,
+  getCachedData,
+  getCachedProfileData,
+} from "../../slices/apiDataManager";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import AttendanceLog from "../../components/Activities/AttendcesLogs";
 import Attendance from "../../components/Activities/Attendance";
@@ -10,31 +14,29 @@ import Regularization from "../../components/Activities/Regularization";
 import { useAttendace } from "../../hooks/useAttendance";
 import { useDispatch, useSelector } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
-import {markCurrentAttendance} from "../../slices/apiSlice/attendanceAllSlice";
+import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
 import { hasUserPermission } from "../../utils/authUtils";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
-import {REGULARIZE_ATTENDANCE} from "../../utils/constants";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
 
-const AttendancePage = () =>
-{
-  const loginUser = getCachedProfileData()
-  var selectedProject = useSelector( ( store ) => store.localVariables.projectId )
-  const {projects,loading:projectLoading} = useProjects()
-  const {attendance,loading:attLoading} = useAttendace(selectedProject)
-   const[attendances,setAttendances] = useState()
+const AttendancePage = () => {
+  const loginUser = getCachedProfileData();
+  var selectedProject = useSelector((store) => store.localVariables.projectId);
+  const { projects, loading: projectLoading } = useProjects();
+  const { attendance, loading: attLoading } = useAttendace(selectedProject);
+  const [attendances, setAttendances] = useState();
   const [empRoles, setEmpRoles] = useState(null);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-  const [ modelConfig, setModelConfig ] = useState();
-  const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE)
-  const dispatch = useDispatch()
-  
-  const [formData, setFormData] = useState({
-       time: "",
-       description: "",
-       date: new Date().toLocaleDateString(),
-     });
+  const [modelConfig, setModelConfig] = useState();
+  const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
+  const dispatch = useDispatch();
+
+  const [formData, setFormData] = useState({
+    time: "",
+    description: "",
+    date: new Date().toLocaleDateString(),
+  });
 
-  
   const getRole = (roleId) => {
     if (!empRoles) return "Unassigned";
     if (!roleId) return "Unassigned";
@@ -46,130 +48,142 @@ const AttendancePage = () =>
     setIsCreateModalOpen(true);
   };
 
-
-  const handleModalData =(employee)=>{
+  const handleModalData = (employee) => {
     setModelConfig(employee);
-  }
+  };
 
   const closeModal = () => {
     setModelConfig(null);
     setIsCreateModalOpen(false);
     const modalElement = document.getElementById("check-Out-modal");
     if (modalElement) {
-      modalElement.classList.remove('show'); 
-      modalElement.style.display = 'none'; 
-      document.body.classList.remove('modal-open'); 
-      document.querySelector('.modal-backdrop').remove(); 
-    }  
-  };
-  
- 
-  const handleSubmit = ( formData ) =>{   
-    dispatch( markCurrentAttendance( formData ) ).then( ( action ) =>
-    {
-      const updatedAttendance = attendances.map(item => 
-        item.employeeId === action.payload.employeeId 
-          ? { ...item, ...action.payload }  
-          : item  
-      );
-      cacheData("Attendance", { data: updatedAttendance, projectId: selectedProject })
-      setAttendances(updatedAttendance)
-      showToast("Attedance Marked Successfully","success")     
-    })
-      .catch( ( error ) =>
-      {
-        showToast(error.message,"error")
-    });
+      modalElement.classList.remove("show");
+      modalElement.style.display = "none";
+      document.body.classList.remove("modal-open");
+      document.querySelector(".modal-backdrop").remove();
+    }
   };
 
+  const handleSubmit = (formData) => {
+    dispatch(markCurrentAttendance(formData))
+      .then((action) => {
+        const updatedAttendance = attendances.map((item) =>
+          item.employeeId === action.payload.employeeId
+            ? { ...item, ...action.payload }
+            : item
+        );
+        cacheData("Attendance", {
+          data: updatedAttendance,
+          projectId: selectedProject,
+        });
+        setAttendances(updatedAttendance);
+        showToast("Attedance Marked Successfully", "success");
+      })
+      .catch((error) => {
+        showToast(error.message, "error");
+      });
+  };
 
   useEffect(() => {
     if (modelConfig !== null) {
       openModel();
     }
-  }, [modelConfig,isCreateModalOpen]);
-  useEffect(()=>{
-    setAttendances(attendance)
-  },[attendance])
-  useEffect( () =>
-  {
-    dispatch(setProjectId(projects[0]?.id))
-  },[projects])
- 
+  }, [modelConfig, isCreateModalOpen]);
+  useEffect(() => {
+    setAttendances(attendance);
+  }, [attendance]);
+  useEffect(() => {
+    dispatch(setProjectId(projects[0]?.id));
+  }, [projects]);
+
   return (
     <>
-    {isCreateModalOpen && modelConfig && (
-       <div
-       className="modal fade show"
-       style={{ display: "block" }}
-       id="check-Out-modal"
-       tabindex="-1"
-       aria-hidden="true"
-      > 
-        <AttendanceModel modelConfig={modelConfig} closeModal={closeModal} handleSubmitForm={handleSubmit}/>
+      {isCreateModalOpen && modelConfig && (
+        <div
+          className="modal fade show"
+          style={{ display: "block" }}
+          id="check-Out-modal"
+          tabindex="-1"
+          aria-hidden="true"
+        >
+          <AttendanceModel
+            modelConfig={modelConfig}
+            closeModal={closeModal}
+            handleSubmitForm={handleSubmit}
+          />
         </div>
-    )}
-    
-    <div className="container-xxl flex-grow-1 container-p-y">
-      <Breadcrumb
+      )}
+
+      <div className="container-xxl flex-grow-1 container-p-y">
+        <Breadcrumb
           data={[
             { label: "Home", link: "/dashboard" },
             { label: "Attendance", link: null },
           ]}
-      ></Breadcrumb> 
-      <div class="nav-align-top nav-tabs-shadow">
-      <ul class="nav nav-tabs" role="tablist">
-      <div
-         className="dataTables_length text-start py-2 px-2"
-         id="DataTables_Table_0_length"
-         >
-        {
-             ((loginUser && loginUser?.projects.length > 1) ) && (<label>
-              <select                
-                name="DataTables_Table_0_length"
-                aria-controls="DataTables_Table_0"
-                className="form-select form-select-sm"
-                value={selectedProject}
-                onChange={(e)=>dispatch(setProjectId(e.target.value))}
-                aria-label=""
+        ></Breadcrumb>
+        <div className="nav-align-top nav-tabs-shadow">
+          <ul className="nav nav-tabs" role="tablist">
+            <div
+              className="dataTables_length text-start py-2 px-2"
+              id="DataTables_Table_0_length"
+            >
+              {loginUser && loginUser?.projects.length > 1 && (
+                <label>
+                  <select
+                    name="DataTables_Table_0_length"
+                    aria-controls="DataTables_Table_0"
+                    className="form-select form-select-sm"
+                    value={selectedProject}
+                    onChange={(e) => dispatch(setProjectId(e.target.value))}
+                    aria-label=""
+                  >
+                    {!projectLoading &&
+                      projects
+                        ?.filter((project) =>
+                          loginUser?.projects?.map(Number).includes(project.id)
+                        )
+                        .map((project) => (
+                          <option value={project.id}>{project.name}</option>
+                        ))}
+                    {projectLoading && (
+                      <option value="Loading..." disabled>
+                        Loading...
+                      </option>
+                    )}
+                  </select>
+                </label>
+              )}
+            </div>
+          </ul>
+          <ul className="nav nav-tabs" role="tablist">
+            <li className="nav-item">
+              <button
+                type="button"
+                className="nav-link active"
+                role="tab"
+                data-bs-toggle="tab"
+                data-bs-target="#navs-top-home"
+                aria-controls="navs-top-home"
+                aria-selected="true"
               >
-                  {!projectLoading && projects?.filter(project =>
-                    loginUser?.projects?.map(Number).includes(project.id)).map((project)=>(
-                     <option value={project.id}>{project.name}</option>
-                  ))} 
-                 {projectLoading && <option value="Loading..." disabled>Loading...</option>  }
-              </select>
-            </label>)   
-        }
-        </div>   
-      </ul>
-         <ul class="nav nav-tabs" role="tablist">
-    <li class="nav-item">
-      <button
-        type="button"
-        class="nav-link active"
-        role="tab"
-        data-bs-toggle="tab"
-        data-bs-target="#navs-top-home"
-        aria-controls="navs-top-home"
-        aria-selected="true">
-        All
-      </button>
-    </li>
-    <li class="nav-item">
-      <button
-        type="button"
-        class="nav-link"
-        role="tab"
-        data-bs-toggle="tab"
-        data-bs-target="#navs-top-profile"
-        aria-controls="navs-top-profile"
-        aria-selected="false">
-        Logs
-      </button>
-    </li>
-  
-            <li className={`nav-item ${!DoRegularized && 'd-none'}`}>
+                All
+              </button>
+            </li>
+            <li className="nav-item">
+              <button
+                type="button"
+                className="nav-link"
+                role="tab"
+                data-bs-toggle="tab"
+                data-bs-target="#navs-top-profile"
+                aria-controls="navs-top-profile"
+                aria-selected="false"
+              >
+                Logs
+              </button>
+            </li>
+
+            <li className={`nav-item ${!DoRegularized && "d-none"}`}>
               <button
                 type="button"
                 className="nav-link "
@@ -177,43 +191,55 @@ const AttendancePage = () =>
                 data-bs-toggle="tab"
                 data-bs-target="#navs-top-messages"
                 aria-controls="navs-top-messages"
-                aria-selected="false">
+                aria-selected="false"
+              >
                 Regularization
               </button>
-             
             </li>
-          
-         </ul>
-          <div class="tab-content attedanceTabs py-2">
-          {projectLoading && (<span>Loading..</span>)}
-          {(!projectLoading && !attendances)  && <span>Not Found</span>}
-          { (projects && projects.length > 0 ) && (
-            <>
-                <div className="tab-pane fade show active py-0" id="navs-top-home" role="tabpanel" key={projects.id}>   
-                  
-              <Attendance attendance={attendances} handleModalData={handleModalData} getRole={getRole} />
-               </div>
-               <div class="tab-pane fade" id="navs-top-profile" role="tabpanel">
-                 
-                 <AttendanceLog 
-                   attendance={attendances}
-                   handleModalData={handleModalData} 
-                   projectId={selectedProject}
-                 />
-               </div>
-               <div className="tab-pane fade" id="navs-top-messages" role="tabpanel">
-                 <Regularization
-                   attendance={attendances}
-                   handleRequest ={handleSubmit}
-                 />
-               </div>
-               </>
-          )}
+          </ul>
+          <div className="tab-content attedanceTabs py-2">
+            {projectLoading && <span>Loading..</span>}
+            {!projectLoading && !attendances && <span>Not Found</span>}
+            {projects && projects.length > 0 && (
+              <>
+                <div
+                  className="tab-pane fade show active py-0"
+                  id="navs-top-home"
+                  role="tabpanel"
+                  key={projects.id}
+                >
+                  <Attendance
+                    attendance={attendances}
+                    handleModalData={handleModalData}
+                    getRole={getRole}
+                  />
+                </div>
+                <div
+                  className="tab-pane fade"
+                  id="navs-top-profile"
+                  role="tabpanel"
+                >
+                  <AttendanceLog
+                    attendance={attendances}
+                    handleModalData={handleModalData}
+                    projectId={selectedProject}
+                  />
+                </div>
+                <div
+                  className="tab-pane fade"
+                  id="navs-top-messages"
+                  role="tabpanel"
+                >
+                  <Regularization
+                    attendance={attendances}
+                    handleRequest={handleSubmit}
+                  />
+                </div>
+              </>
+            )}
+          </div>
         </div>
       </div>
-      
-
-      </div>
     </>
   );
 };
diff --git a/src/pages/Activities/DailyTask.jsx b/src/pages/Activities/DailyTask.jsx
index c2e09f3b..39ceb473 100644
--- a/src/pages/Activities/DailyTask.jsx
+++ b/src/pages/Activities/DailyTask.jsx
@@ -6,10 +6,10 @@ import { useProjects } from "../../hooks/useProjects";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { useProfile } from "../../hooks/useProfile";
 import React, { useEffect, useState } from "react";
-import {formatDate} from "../../utils/dateUtils";
+import { formatDate } from "../../utils/dateUtils";
 import GlobalModel from "../../components/common/GlobalModel";
 import AssignRoleModel from "../../components/Project/AssignRole";
-import {ReportTask} from "../../components/Activities/ReportTask";
+import { ReportTask } from "../../components/Activities/ReportTask";
 import ReportTaskComments from "../../components/Activities/ReportTaskComments";
 
 const DailyTask = () => {
@@ -22,59 +22,63 @@ const DailyTask = () => {
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
-  const dispatch = useDispatch( selectedProject );
+  const dispatch = useDispatch(selectedProject);
   const {
     TaskList,
     loading: task_loading,
     error: task_error,
-    refetch
+    refetch,
   } = useTaskList(selectedProject);
   const [TaskLists, setTaskLists] = useState([]);
 
   useEffect(() => {
     setTaskLists(TaskList);
-  }, [ TaskList, selectedProject ] );
-  
-  const [ selectedTask, selectTask ] = useState( null )
-  const [comments,setComment] = useState(null)
+  }, [TaskList, selectedProject]);
+
+  const [selectedTask, selectTask] = useState(null);
+  const [comments, setComment] = useState(null);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isModalOpenComment, setIsModalOpenComment] = useState(false);
 
-  const [ isModalOpen, setIsModalOpen ] = useState( false );
-  const [ isModalOpenComment, setIsModalOpenComment ] = useState( false )
-  
   const openModal = () => setIsModalOpen(true);
-  const closeModal = () => setIsModalOpen( false );
-  
-  const openComment = () =>setIsModalOpenComment(true)
-  const closeCommentModal =()=>setIsModalOpenComment(false)
-  const handletask = (task) =>
-  {
-    selectTask(task)
-    openModal()
-  }
+  const closeModal = () => setIsModalOpen(false);
+
+  const openComment = () => setIsModalOpenComment(true);
+  const closeCommentModal = () => setIsModalOpenComment(false);
+  const handletask = (task) => {
+    selectTask(task);
+    openModal();
+  };
   return (
     <>
       <div
-        className={`modal fade ${isModalOpen ? 'show' : ''}`}
+        className={`modal fade ${isModalOpen ? "show" : ""}`}
         tabIndex="-1"
         role="dialog"
-        style={{ display: isModalOpen ? 'block' : 'none' }}
+        style={{ display: isModalOpen ? "block" : "none" }}
         aria-hidden={!isModalOpen}
       >
-        <ReportTask report={selectedTask} closeModal={ closeModal} refetch={refetch} />
+        <ReportTask
+          report={selectedTask}
+          closeModal={closeModal}
+          refetch={refetch}
+        />
       </div>
 
       <div
-        className={`modal fade ${isModalOpenComment ? 'show' : ''}`}
+        className={`modal fade ${isModalOpenComment ? "show" : ""}`}
         tabIndex="-1"
         role="dialog"
-        style={{ display: isModalOpenComment ? 'block' : 'none' }}
+        style={{ display: isModalOpenComment ? "block" : "none" }}
         aria-hidden={!isModalOpenComment}
       >
-        <ReportTaskComments commentsData={comments}  closeModal={ closeCommentModal}  />
+        <ReportTaskComments
+          commentsData={comments}
+          closeModal={closeCommentModal}
+        />
       </div>
 
-
-
       <div className="container-xxl flex-grow-1 container-p-y">
         <Breadcrumb
           data={[
@@ -147,67 +151,75 @@ const DailyTask = () => {
                     return (
                       <React.Fragment key={index}>
                         {/* Main Row */}
-                        <tr >
+                        <tr>
                           <td>
-                            <div className="d-flex justify-content-center align-items-center"     data-bs-toggle="collapse"
-                                data-bs-target={`#${accordionId}`}
-                               aria-expanded="false"
+                            <div
+                              className="d-flex justify-content-center align-items-center"
+                              data-bs-toggle="collapse"
+                              data-bs-target={`#${accordionId}`}
+                              aria-expanded="false"
                               aria-controls={accordionId}
                             >
                               <div className="d-flex flex-column">
                                 <a
                                   href="#"
                                   className="text-heading text-truncate"
-                                  
                                 >
-                                  <i class='bx bx-chevron-right'></i>
+                                  <i className="bx bx-chevron-right"></i>
                                 </a>
                               </div>
                             </div>
                           </td>
                           <td className="flex-wrap">
-                            {task.workItem.activityMaster.activityName || "No Activity Name"}
+                            {task.workItem.activityMaster.activityName ||
+                              "No Activity Name"}
                           </td>
                           <td>{task.plannedTask || "NA"}</td>
                           <td>{task.completedTask}</td>
-                          <td>{formatDate( task.assignmentDate )}</td>
+                          <td>{formatDate(task.assignmentDate)}</td>
                           <td className="text-center">
-                           <div class="d-flex align-items-center avatar-group justify-content-center">
-                              {task.teamMembers.map( ( member ) => (
-                              
-                                 <div key={member.id}  data-bs-toggle="tooltip" data-bs-html="true" data-popup="tooltip-custom" data-bs-placement="top" title={`${member.firstName} ${member.lastName}`} className="avatar avatar-xs">
-                                 {/* <img src="..." alt="Avatar" class="rounded-circle pull-up" /> */}
-                                    <span className="avatar-initial rounded-circle bg-label-primary">{member?.firstName.slice(0,1) }</span>
-                                  </div>  
-                             ))}
+                            <div className="d-flex align-items-center avatar-group justify-content-center">
+                              {task.teamMembers.map((member) => (
+                                <div
+                                  key={member.id}
+                                  data-bs-toggle="tooltip"
+                                  data-bs-html="true"
+                                  data-popup="tooltip-custom"
+                                  data-bs-placement="top"
+                                  title={`${member.firstName} ${member.lastName}`}
+                                  className="avatar avatar-xs"
+                                >
+                                  {/* <img src="..." alt="Avatar" className="rounded-circle pull-up" /> */}
+                                  <span className="avatar-initial rounded-circle bg-label-primary">
+                                    {member?.firstName.slice(0, 1)}
+                                  </span>
+                                </div>
+                              ))}
                             </div>
                           </td>
                           <td className="text-center">
                             <div className="d-flex justify-content-center">
-                            <button
-                              type="button"
-                              className="btn btn-xs btn-primary"
-                              onClick={() =>
-                              {
-                                selectTask( task )
-                                openModal()
-                              }}
-                            >
-                              Report
-                            </button>
-                            <button
-                              type="button"
-                              className="btn btn-xs btn-primary ms-2"
-                              onClick={() =>
-                                {
-                                  setComment( task )
-                                  openComment()
+                              <button
+                                type="button"
+                                className="btn btn-xs btn-primary"
+                                onClick={() => {
+                                  selectTask(task);
+                                  openModal();
                                 }}
-                            >
-                             Comment
-                            </button>
+                              >
+                                Report
+                              </button>
+                              <button
+                                type="button"
+                                className="btn btn-xs btn-primary ms-2"
+                                onClick={() => {
+                                  setComment(task);
+                                  openComment();
+                                }}
+                              >
+                                Comment
+                              </button>
                             </div>
-                          
                           </td>
                         </tr>
 
diff --git a/src/pages/authentication/LoginPage.jsx b/src/pages/authentication/LoginPage.jsx
index 68990e97..d9804e75 100644
--- a/src/pages/authentication/LoginPage.jsx
+++ b/src/pages/authentication/LoginPage.jsx
@@ -107,7 +107,7 @@ const LoginPage = () => {
               aria-describedby="password"
             />
             <span
-              class="input-group-text cursor-pointer"
+              className="input-group-text cursor-pointer"
               onClick={() => setHidepass(!hidepass)}
             >
               {hidepass ? (
diff --git a/src/pages/authentication/ResetPasswordPage.jsx b/src/pages/authentication/ResetPasswordPage.jsx
index fbcc0fef..50629bac 100644
--- a/src/pages/authentication/ResetPasswordPage.jsx
+++ b/src/pages/authentication/ResetPasswordPage.jsx
@@ -118,7 +118,7 @@ const ResetPasswordPage = () => {
               aria-describedby="password"
             />
             <span
-              class="input-group-text lcursor-pointer"
+              className="input-group-text lcursor-pointer"
               onClick={() => setHidepass(!hidepass)}
             >
               {hidepass ? (
@@ -129,13 +129,13 @@ const ResetPasswordPage = () => {
             </span>
           </div>
           {errors.password && (
-              <div
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
-                {errors.password.message}
-              </div>
-            )}
+            <div
+              className="danger-text text-start"
+              style={{ fontSize: "12px" }}
+            >
+              {errors.password.message}
+            </div>
+          )}
           <div className="mt-2">
             {" "}
             <label htmlFor="email" className="form-label">
@@ -144,7 +144,7 @@ const ResetPasswordPage = () => {
           </div>
           <div className=" input-group input-group-merge">
             <input
-               type={hidepass ? "password" : "text"}
+              type={hidepass ? "password" : "text"}
               autoComplete="true"
               id="password"
               className="form-control"
@@ -154,7 +154,7 @@ const ResetPasswordPage = () => {
               aria-describedby="password"
             />
             <span
-              class="input-group-text cursor-pointer"
+              className="input-group-text cursor-pointer"
               onClick={() => setHidepass(!hidepass)}
             >
               {hidepass ? (
@@ -165,13 +165,13 @@ const ResetPasswordPage = () => {
             </span>
           </div>
           {errors.confirmPassword && (
-              <div
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
-                {errors.confirmPassword.message}
-              </div>
-            )}
+            <div
+              className="danger-text text-start"
+              style={{ fontSize: "12px" }}
+            >
+              {errors.confirmPassword.message}
+            </div>
+          )}
         </div>
 
         <div className="mb-3 text-start ">
diff --git a/src/utils/axiosClient.jsx b/src/utils/axiosClient.jsx
index e66a682a..dd08fdf3 100644
--- a/src/utils/axiosClient.jsx
+++ b/src/utils/axiosClient.jsx
@@ -44,32 +44,40 @@ axiosClient.interceptors.response.use(
       originalRequest._toastShown = true;
 
       if (error.code === "ERR_CONNECTION_REFUSED") {
-        console.error("Connection refused. Please ensure the server is running.");
-        showToast("Unable to connect to the server. Please try again later.", "error");
+        console.error(
+          "Connection refused. Please ensure the server is running."
+        );
+        showToast(
+          "Unable to connect to the server. Please try again later.",
+          "error"
+        );
       } else if (error.code === "ERR_NETWORK") {
         console.error("Network error: Unable to reach the server.");
         showToast("Server is unreachable. Try again later!", "error");
         redirectToLogin();
       } else if (error.code === "ECONNABORTED") {
         console.error("Request timed out.");
-        showToast("The request took too long. Please try again later.", "error");
+        showToast(
+          "The request took too long. Please try again later.",
+          "error"
+        );
       } else if (error.response) {
-        showToast(error.response.data.message,"error")
-         
+        showToast(error.response.data.message, "error");
+
         if (error.response.status === 401 && !originalRequest._retry) {
           originalRequest._retry = true;
 
           try {
-        // debugger;
-        // Get the refresh token from secure storage
+            // debugger;
+            // Get the refresh token from secure storage
             const refreshToken = localStorage.getItem("refreshToken");
 
             if (!refreshToken) {
-          // Redirect to login if refresh token is not available
+              // Redirect to login if refresh token is not available
               redirectToLogin();
               return Promise.reject(error);
             }
-        // Make a request to refresh the access token
+            // Make a request to refresh the access token
             const response = await axiosClient.post("/api/Auth/refresh-token", {
               token: localStorage.getItem("jwtToken"),
               refreshToken,
@@ -82,17 +90,19 @@ axiosClient.interceptors.response.use(
             // Retry the original request with the new token
             originalRequest.headers["Authorization"] = `Bearer ${token}`;
 
-        // Retry the original request
+            // Retry the original request
             return axiosClient(originalRequest);
           } catch (err) {
-        // Redirect to login if token refresh fails
+            // Redirect to login if token refresh fails
             redirectToLogin();
             return Promise.reject(err);
           }
-        } else
-        {
-         
-          showToast(error.response.data?.message || "An error occurred. Please try again.", "error");
+        } else {
+          showToast(
+            error.response.data?.message ||
+              "An error occurred. Please try again.",
+            "error"
+          );
         }
       } else {
         console.error("An unknown error occurred:", error.message);