Changes in Attendance and Expenselist.

src/components/Activities/AttendcesLogs.jsx

@@ -15,6 +15,7 @@ import AttendanceRepository from "../../repositories/AttendanceRepository";
 import { useAttendancesLogs } from "../../hooks/useAttendance";
 import { queryClient } from "../../layouts/AuthLayout";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
+import { useNavigate } from "react-router-dom";
 
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
@@ -44,6 +45,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
   const [loading, setLoading] = useState(false);
   const [showPending, setShowPending] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const navigate = useNavigate();
 
   const today = new Date();
   today.setHours(0, 0, 0, 0);
@@ -261,7 +263,12 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
                           lastName={attendance.lastName}
                         />
                         <div className="d-flex flex-column">
-                          <a href="#" className="text-heading text-truncate">
+                          <a
+                            onClick={() =>
+                              navigate(`/employee/${attendance.employeeId}?for=attendance`)
+                            }
+                            className="text-heading text-truncate cursor-pointer"
+                          >
                             <span className="fw-normal">
                               {attendance.firstName} {attendance.lastName}
                             </span>

src/components/Activities/Regularization.jsx

@@ -14,6 +14,7 @@ import {
 } from "../../slices/apiDataManager";
 import { useQueryClient } from "@tanstack/react-query";
 import Pagination from "../../components/common/Pagination";
+import { useNavigate } from "react-router-dom";
 
 const Regularization = ({
   handleRequest,
@@ -26,6 +27,7 @@ const Regularization = ({
   // var selectedProject = useSelector((store) => store.localVariables.projectId);
   const selectedProject = useSelectedProject();
   const [regularizesList, setregularizedList] = useState([]);
+  const navigate = useNavigate();
   const { regularizes, loading, error, refetch } = useRegularizationRequests(
     selectedProject,
     organizationId,
@@ -104,7 +106,7 @@ const Regularization = ({
   return (
     <div>
       <div
-        className="table-responsive text-nowrap pb-4"
+        className="table-responsive pt-3 text-nowrap pb-4"
         style={{ minHeight: "200px" }}
       >
         {loading ? (
@@ -142,12 +144,15 @@ const Regularization = ({
                   <td colSpan={2}>
                     <div className="d-flex justify-content-start align-items-center">
                       <Avatar firstName={att.firstName} lastName={att.lastName} />
-                      <div className="d-flex flex-column">
-                        <a href="#" className="text-heading text-truncate">
-                          <span className="fw-normal">
-                            {att.firstName} {att.lastName}
-                          </span>
-                        </a>
+                      <div className="d-flex flex-column"> <a
+                        onClick={() =>
+                          navigate(`/employee/${att.employeeId}?for=attendance`)
+                        }
+                        className="text-heading text-truncate cursor-pointer"                        >
+                        <span className="fw-normal">
+                          {att.firstName} {att.lastName}
+                        </span>
+                      </a>
                       </div>
                     </div>
                   </td>

src/components/Expenses/ExpenseList.jsx

@@ -15,6 +15,7 @@ import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
 import ConfirmModal from "../common/ConfirmModal";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
 
 const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
   const [deletingId, setDeletingId] = useState(null);
@@ -24,6 +25,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
   const IsExpesneApprpve = useHasUserPermission(APPROVE_EXPENSE);
   const [currentPage, setCurrentPage] = useState(1);
   const debouncedSearch = useDebounce(searchText, 500);
+  const navigate = useNavigate();
 
   const { mutate: DeleteExpense, isPending } = useDeleteExpense();
   const { data, isLoading, isError, isInitialLoading, error } = useExpenseList(
@@ -112,7 +114,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
         `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
           }`.trim() || "N/A",
       customRender: (e) => (
-        <div className="d-flex align-items-center">
+        <div className="d-flex align-items-center cursor-pointer" 
+        onClick={() => navigate(`/employee/${e.createdBy?.id}`)}>
           <Avatar
             size="xs"
             classAvatar="m-0"

src/pages/Activities/AttendancePage.jsx

@@ -220,7 +220,7 @@ const AttendancePage = () => {
             {selectedProject ? (
               <>
                 {activeTab === "all" && (
-                  <div className="tab-pane fade show active py-0 mx-5">
+                  <div className="tab-pane fade show active py-0 mx-2">
                     <Attendance
                       handleModalData={handleModalData}
                       getRole={getRole}
@@ -230,7 +230,7 @@ const AttendancePage = () => {
                   </div>
                 )}
                 {activeTab === "logs" && (
-                  <div className="tab-pane fade show active py-0">
+                  <div className="tab-pane fade p-3 show active py-0">
                     <AttendanceLog
                       handleModalData={handleModalData}
                       searchTerm={searchTerm}
@@ -239,7 +239,7 @@ const AttendancePage = () => {
                   </div>
                 )}
                 {activeTab === "regularization" && DoRegularized && (
-                  <div className="tab-pane fade show active py-0">
+                  <div className="tab-pane fade p-3 show active py-0">
                     <Regularization
                       searchTerm={searchTerm}
                       organizationId={appliedFilters.selectedOrganization}