Merge pull request 'Excessive space between Organization dropdown and Search bar in Attendance menu.' (#484 ) from Kartik_Bug#1499 into Issues_Oct_main_2W

Reviewed-on: #484 Merged
Changes in Attendance and Expenselist.
2025-10-15 12:37:16 +00:00 · 2025-10-15 12:37:16 +00:00 · 2025-10-15 12:37:16 +00:00 · 2025-10-15 12:37:16 +00:00 · 2025-10-15 12:37:16 +00:00 · 2025-10-15 12:37:16 +00:00
27 changed files with 936 additions and 746 deletions
--- a/public/assets/css/core-extend.css
+++ b/public/assets/css/core-extend.css
@ -280,3 +280,7 @@
  .w-8-xl{ width: 2rem; }
  .w-10-xl{ width: 2.5rem; }
 }
+
+.cursor-not-allowed{
+  cursor: not-allowed;
+}
--- a/src/components/Activities/Attendance.jsx
+++ b/src/components/Activities/Attendance.jsx
@ -126,7 +126,7 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
              checked={ShowPending}
              onChange={(e) => setShowPending(e.target.checked)}
            />
-            <label className="form-check-label ms-0">Show Pending</label>
+            <label className="form-check-label ms-0">Pending Attendance</label>
          </div>
        </div>
        {attLoading ? (
@ -223,8 +223,20 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
                )}
              </tbody>
            </table>
-
-
+          </>
+        ) : (
+          <div
+            className="d-flex justify-content-center align-items-center text-muted"
+            style={{ height: "200px" }}
+          >
+            {searchTerm
+              ? "No results found for your search."
+              : attendanceList.length === 0
+                ? "No employees assigned to the project."
+                : "No pending records available."}
+          </div>
+        )}
+      </div>
      {!loading && finalFilteredData.length > ITEMS_PER_PAGE && (
        <nav aria-label="Page ">
          <ul className="pagination pagination-sm justify-content-end py-1">
@ -268,20 +280,6 @@ const Attendance = ({ getRole, handleModalData, searchTerm, projectId, organizat
        </nav>
      )}
    </>
-        ) : (
-          <div
-            className="d-flex justify-content-center align-items-center text-muted"
-            style={{ height: "200px" }}
-          >
-            {searchTerm
-              ? "No results found for your search."
-              : attendanceList.length === 0
-                ? "No employees assigned to the project."
-                : "No pending records available."}
-          </div>
-        )}
-      </div>
-    </>
  );
 };

--- a/src/components/Activities/AttendcesLogs.jsx
+++ b/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);
@ -38,47 +39,48 @@ const usePagination = (data, itemsPerPage) => {
 };

 const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
-const selectedProject = useSelectedProject();
-const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
-const dispatch = useDispatch();
-const [loading, setLoading] = useState(false);
-const [showPending, setShowPending] = useState(false);
-const [isRefreshing, setIsRefreshing] = useState(false);
+  const selectedProject = useSelectedProject();
+  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
+  const dispatch = useDispatch();
+  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);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);

-const yesterday = new Date();
-yesterday.setDate(yesterday.getDate() - 1);
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);

-const isSameDay = (dateStr) => {
+  const isSameDay = (dateStr) => {
    if (!dateStr) return false;
    const d = new Date(dateStr);
    d.setHours(0, 0, 0, 0);
    return d.getTime() === today.getTime();
-};
+  };

-const isBeforeToday = (dateStr) => {
+  const isBeforeToday = (dateStr) => {
    if (!dateStr) return false;
    const d = new Date(dateStr);
    d.setHours(0, 0, 0, 0);
    return d.getTime() < today.getTime();
-};
+  };

-const sortByName = (a, b) => {
+  const sortByName = (a, b) => {
    const nameA = (a.firstName + a.lastName).toLowerCase();
    const nameB = (b.firstName + b.lastName).toLowerCase();
    return nameA.localeCompare(nameB);
-};
+  };

-const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
+  const { data = [], isLoading, error, refetch, isFetching } = useAttendancesLogs(
    selectedProject,
    dateRange.startDate,
    dateRange.endDate,
    organizationId
-);
+  );

-const processedData = useMemo(() => {
+  const processedData = useMemo(() => {
    const filteredData = showPending
      ? data.filter((item) => item.checkOutTime === null)
      : data;
@ -103,30 +105,30 @@ const processedData = useMemo(() => {

    const sortedDates = Object.keys(groupedByDate).sort((a, b) => new Date(b) - new Date(a));
    return sortedDates.flatMap((date) => groupedByDate[date]);
-}, [data, showPending]);
+  }, [data, showPending]);

-const filteredSearchData = useMemo(() => {
+  const filteredSearchData = useMemo(() => {
    if (!searchTerm) return processedData;

    const lowercased = searchTerm.toLowerCase();
    return processedData.filter((item) =>
      `${item.firstName} ${item.lastName}`.toLowerCase().includes(lowercased)
    );
-}, [processedData, searchTerm]);
+  }, [processedData, searchTerm]);

-const {
+  const {
    currentPage,
    totalPages,
    currentItems: paginatedAttendances,
    paginate,
    resetPage,
-} = usePagination(filteredSearchData, 20);
+  } = usePagination(filteredSearchData, 20);

-useEffect(() => {
+  useEffect(() => {
    resetPage();
-}, [filteredSearchData]);
+  }, [filteredSearchData]);

-const handler = useCallback(
+  const handler = useCallback(
    (msg) => {
      const { startDate, endDate } = dateRange;
      const checkIn = msg.response.checkInTime.substring(0, 10);
@ -145,14 +147,14 @@ const handler = useCallback(
      }
    },
    [selectedProject, dateRange, resetPage]
-);
+  );

-useEffect(() => {
+  useEffect(() => {
    eventBus.on("attendance_log", handler);
    return () => eventBus.off("attendance_log", handler);
-}, [handler]);
+  }, [handler]);

-const employeeHandler = useCallback(
+  const employeeHandler = useCallback(
    (msg) => {
      const { startDate, endDate } = dateRange;
      if (data.some((item) => item.employeeId == msg.employeeId)) {
@ -160,27 +162,27 @@ const employeeHandler = useCallback(
      }
    },
    [data, refetch]
-);
+  );

-useEffect(() => {
+  useEffect(() => {
    eventBus.on("employee", employeeHandler);
    return () => eventBus.off("employee", employeeHandler);
-}, [employeeHandler]);
+  }, [employeeHandler]);



  return (
    <>
      <div
-        className="dataTables_length text-start py-2 d-flex justify-content-between "
+        className="dataTables_length text-start py-2 d-flex flex-wrap justify-content-between"
        id="DataTables_Table_0_length"
      >
-        <div className="d-flex align-items-center my-0 ">
+        <div className="d-flex flex-wrap align-items-center my-0 gap-2">
          <DateRangePicker
            onRangeChange={setDateRange}
            defaultStartDate={yesterday}
          />
-          <div className="form-check form-switch text-start ms-1 ms-md-2 align-items-center mb-0">
+          <div className="form-check form-switch text-start d-flex align-items-center mb-0">
            <input
              type="checkbox"
              className="form-check-input"
@ -190,10 +192,11 @@ useEffect(() => {
              checked={showPending}
              onChange={(e) => setShowPending(e.target.checked)}
            />
-            <label className="form-check-label ms-0">Show Pending</label>
+            <label className="form-check-label ms-2 mb-0">Pending Attendance</label>
          </div>
        </div>
      </div>
+
      <div
        className="table-responsive text-nowrap"
        style={{ minHeight: "200px" }}
@ -260,7 +263,12 @@ useEffect(() => {
                          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>
@ -297,8 +305,7 @@ useEffect(() => {
        ) : (
          <div className="my-12">
            <span className="text-secondary">
-              No data available for the selected date range. Please Select
-              another date.
+              No attendance record found in selected date range.
            </span>
          </div>
        )}
@ -326,8 +333,7 @@ useEffect(() => {
              (pageNumber) => (
                <li
                  key={pageNumber}
-                  className={`page-item ${
-                    currentPage === pageNumber ? "active" : ""
+                  className={`page-item ${currentPage === pageNumber ? "active" : ""
                    }`}
                >
                  <button
@ -340,8 +346,7 @@ useEffect(() => {
              )
            )}
            <li
-              className={`page-item ${
-                currentPage === totalPages ? "disabled" : ""
+              className={`page-item ${currentPage === totalPages ? "disabled" : ""
                }`}
            >
              <button
--- a/src/components/Activities/InfraPlanning.jsx
+++ b/src/components/Activities/InfraPlanning.jsx
@ -33,7 +33,7 @@ const InfraPlanning = () => {
  const selectedService = useCurrentService();

  const { projectInfra, isLoading, isError, error, isFetched } =
-    useProjectInfra(selectedProject, selectedService || "" );
+    useProjectInfra(selectedProject, selectedService || "");

  const canManageInfra = useHasUserPermission(MANAGE_PROJECT_INFRA);
  const canApproveTask = useHasUserPermission(APPROVE_TASK);
@ -62,9 +62,13 @@ const InfraPlanning = () => {

  if (isFetched && (!projectInfra || projectInfra.length === 0)) {
    return (
-      <div className="text-center">
-        <p className="my-3">No Result Found</p>
+      <div
+        className="text-center d-flex justify-content-center align-items-center text-muted"
+        style={{ minHeight: "40vh", fontSize: "0.9rem" }}
+      >
+        <p className="my-3 m-0">No Result Found</p>
      </div>
+
    );
  }

--- a/src/components/Activities/Regularization.jsx
+++ b/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,
@ -33,8 +35,8 @@ const Regularization = ({
  );

  useEffect(() => {
-    if(!regularizes) return
-    if(regularizes?.length) {
+    if (!regularizes) return
+    if (regularizes?.length) {
      setregularizedList(regularizes);

    }
@ -102,8 +104,9 @@ const Regularization = ({
  }, [employeeHandler]);

  return (
+    <div>
      <div
-      className="table-responsive text-nowrap pb-4"
+        className="table-responsive pt-3 text-nowrap pb-4"
        style={{ minHeight: "200px" }}
      >
        {loading ? (
@ -141,8 +144,11 @@ 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">
+                      <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>
@ -160,7 +166,7 @@ const Regularization = ({
                  </td>

                  <td colSpan={2}>
-                     {att.requestedBy ? ( <div className="d-flex justify-content-start align-items-center">
+                    {att.requestedBy ? (<div className="d-flex justify-content-start align-items-center">
                      <Avatar firstName={att?.requestedBy?.firstName} lastName={att?.requestedBy?.lastName} />
                      <div className="d-flex flex-column">
                        <a href="#" className="text-heading text-truncate">
@ -169,10 +175,10 @@ const Regularization = ({
                          </span>
                        </a>
                      </div>
-                  </div>):(<small>--</small>)}
+                    </div>) : (<small>--</small>)}
                  </td>
                  <td>
-                  {att?.requestedAt ? formatUTCToLocalTime(att.requestedAt,true) : "--"}
+                    {att?.requestedAt ? formatUTCToLocalTime(att.requestedAt, true) : "--"}
                  </td>
                  <td className="text-center ">
                    <RegularizationActions
@ -197,46 +203,7 @@ const Regularization = ({
            </span>
          </div>
        )}
-      {/* {!loading && totalPages > 1 && (
-        <nav aria-label="Page ">
-          <ul className="pagination pagination-sm justify-content-end py-1 mt-3">
-            <li className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}>
-              <button
-                className="page-link btn-xs"
-                onClick={() => paginate(currentPage - 1)}
-              >
-                &laquo;
-              </button>
-            </li>
-            {[...Array(totalPages)].map((_, index) => (
-              <li
-                key={index}
-                className={`page-item ${currentPage === index + 1 ? "active" : ""
-                  }`}
-              >
-                <button
-                  className="page-link "
-                  onClick={() => paginate(index + 1)}
-                >
-                  {index + 1}
-                </button>
-              </li>
-            ))}
-            <li
-              className={`page-item ${currentPage === totalPages ? "disabled" : ""
-                }`}
-            >
-              <button
-                className="page-link "
-                onClick={() => paginate(currentPage + 1)}
-              >
-                &raquo;
-              </button>
-            </li>
-          </ul>
-        </nav>
-      )} */}
-
+      </div>
      {totalPages > 0 && (
        <Pagination
          currentPage={currentPage}
@ -244,6 +211,7 @@ const Regularization = ({
          onPageChange={paginate}
        />
      )}
+
    </div>
  );
 };
--- a/src/components/Charts/HorizontalBarChart.jsx
+++ b/src/components/Charts/HorizontalBarChart.jsx
@ -23,7 +23,7 @@ const HorizontalBarChart = ({
  if (loading) {
    return (
      <div className="w-full h-[380px] flex items-center justify-center bg-gray-100 rounded-xl">
-        <span className="text-gray-500 text-sm">Loading chart...</span>
+        <span className="text-gray-500">Loading chart...</span>
        {/* Replace this with a skeleton or spinner if you prefer */}
      </div>
    );
--- a/src/components/DailyProgressRport/TaskReportList.jsx
+++ b/src/components/DailyProgressRport/TaskReportList.jsx
@ -29,7 +29,7 @@ const TaskReportList = () => {
  const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
  const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);

-  const { service, openModal, closeModal,filter } = useDailyProgrssContext();
+  const { service, openModal, closeModal, filter } = useDailyProgrssContext();
  const selectedProject = useSelectedProject();
  const { projectNames } = useProjectName();

@ -37,7 +37,7 @@ const TaskReportList = () => {
    selectedProject,
    ITEMS_PER_PAGE,
    currentPage,
-    service,filter
+    service, filter
  );

  const ProgrssReportColumn = [
@ -192,6 +192,7 @@ const TaskReportList = () => {
  if (isLoading) return <TaskReportListSkeleton />;
  if (isError) return <div>Loading....</div>;
  return (
+    <div>
      <div className="mt-2 table-responsive text-nowrap">
        <table className="table">
          <thead>
@ -287,14 +288,18 @@ const TaskReportList = () => {
            ))}
          </tbody>
        </table>
-      {data?.data?.length > 0 && (
+
+      </div>
+      {
+        data?.data?.length > 0 && (
          <Pagination
            currentPage={currentPage}
            totalPages={data.totalPages}
            onPageChange={paginate}
          />
-      )}
-    </div>
+        )
+      }
+    </div >
  );
 };

--- a/src/components/Dashboard/ProjectCompletionChart.jsx
+++ b/src/components/Dashboard/ProjectCompletionChart.jsx
@ -3,7 +3,8 @@ import HorizontalBarChart from "../Charts/HorizontalBarChart";
 import { useProjects } from "../../hooks/useProjects";

 const ProjectCompletionChart = () => {
-  const { projects, loading } = useProjects();
+  const { data: projects = [], isLoading: loading, isError, error } = useProjects();
+

  // Bar chart logic
  const projectNames = projects?.map((p) => p.name) || [];
@ -11,7 +12,7 @@ const ProjectCompletionChart = () => {
    projects?.map((p) => {
      const completed = p.completedWork || 0;
      const planned = p.plannedWork || 1;
-      const percent = (completed / planned) * 100;
+      const percent = planned ? (completed / planned) * 100 : 0;
      return Math.min(Math.round(percent), 100);
    }) || [];

--- a/src/components/Directory/ListViewContact.jsx
+++ b/src/components/Directory/ListViewContact.jsx
@ -160,8 +160,7 @@ const ListViewContact = ({ data, Pagination }) => {
                          </div>
                        ) : (
                          <i
-                            className={`bx  ${
-                              isPending && activeContact === row.id
+                            className={`bx  ${isPending && activeContact === row.id
                                ? "bx-loader-alt bx-spin"
                                : "bx-recycle"
                              } me-1 text-primary cursor-pointer`}
@ -188,14 +187,14 @@ const ListViewContact = ({ data, Pagination }) => {
                )}
              </tbody>
            </table>
+          </div>
+        </div>
        {Pagination && (
          <div className="d-flex justify-content-start">
            {Pagination}
          </div>
        )}
      </div>
-        </div>
-      </div>
    </>
  );
 };
--- a/src/components/Documents/DocumentFilterPanel.jsx
+++ b/src/components/Documents/DocumentFilterPanel.jsx
@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDocumentFilterEntities } from "../../hooks/useDocument";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@ -9,9 +9,11 @@ import {
 import { DateRangePicker1 } from "../common/DateRangePicker";
 import SelectMultiple from "../common/SelectMultiple";
 import moment from "moment";
+import { useLocation } from "react-router-dom";

 const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
  const [resetKey, setResetKey] = useState(0);
+  const location = useLocation();

  const { data, isError, isLoading, error } =
    useDocumentFilterEntities(entityTypeId);
@ -52,6 +54,13 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
    closePanel();
  };

+  //  Close popup when navigating to another component
+  useEffect(() => {
+    return () => {
+      closePanel();
+    };
+  }, []);
+
  if (isLoading) return <div>Loading...</div>;
  if (isError)
    return <div>Error: {error?.message || "Something went wrong!"}</div>;
@ -63,6 +72,8 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
    documentTag = [],
  } = data?.data || {};

+
+
  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
@ -73,8 +84,7 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
            <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
              <button
                type="button"
-                className={`btn px-2 py-1 rounded-0 text-tiny ${
-                  isUploadedAt ? "active btn-secondary text-white" : ""
+                className={`btn px-2 py-1 rounded-0 text-tiny ${isUploadedAt ? "active btn-secondary text-white" : ""
                  }`}
                onClick={() => setValue("isUploadedAt", true)}
              >
@ -82,8 +92,7 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
              </button>
              <button
                type="button"
-                className={`btn px-2 py-1 rounded-0 text-tiny ${
-                  !isUploadedAt ? "active btn-secondary text-white" : ""
+                className={`btn px-2 py-1 rounded-0 text-tiny ${!isUploadedAt ? "active btn-secondary text-white" : ""
                  }`}
                onClick={() => setValue("isUploadedAt", false)}
              >
--- a/src/components/Documents/Documents.jsx
+++ b/src/components/Documents/Documents.jsx
@ -144,12 +144,12 @@ const Documents = ({ Document_Entity, Entity }) => {
                  <span className="switch-off"></span>
                </span>
                <span className="switch-label">
-                  {isActive ? "Active" : "In-Active"}
+                  {isActive ? "Active Document" : "In-Active Document"}
                </span>
              </label>
            </div>

-            <div className="col-6 col-md-6 col-lg-8 text-end">
+            <div className="col-12 col-md-6 col-lg-8 text-end">
              {(isSelf || canUploadDocument) && (
                <button
                  className="btn btn-sm btn-primary me-3"
--- a/src/components/Employee/EmpAttendance.jsx
+++ b/src/components/Employee/EmpAttendance.jsx
@ -51,7 +51,6 @@ const EmpAttendance = () => {
      new Date(b?.checkInTime).getTime() - new Date(a?.checkInTime).getTime()
  );

-  console.log(sorted);

  const { currentPage, totalPages, currentItems, paginate } = usePagination(
    sorted,
--- a/src/components/Employee/handleEmployeeExport.jsx
+++ b/src/components/Employee/handleEmployeeExport.jsx
@ -0,0 +1,84 @@
+import moment from "moment";
+import { exportToExcel, exportToCSV, exportToPDF, printTable } from "../../utils/tableExportUtils";
+
+/**
+ * Handles export operations for employee data.
+ * @param {string} type - Export type: 'csv', 'excel', 'pdf', or 'print'
+ * @param {Array} employeeList - Full employee data array
+ * @param {Array} filteredData - Filtered employee data (if search applied)
+ * @param {string} searchText - Current search text (used to decide dataset)
+ * @param {RefObject} tableRef - Table reference (used for print)
+ */
+const handleEmployeeExport = (type, employeeList, filteredData, searchText, tableRef) => {
+    // Export full list (filtered if search applied)
+    const dataToExport = searchText ? filteredData : employeeList;
+
+    if (!dataToExport || dataToExport.length === 0) return;
+
+    // Map and format employee data for export
+    const exportData = dataToExport.map((item) => ({
+        "First Name": item.firstName || "",
+        "Middle Name": item.middleName || "",
+        "Last Name": item.lastName || "",
+        "Email": item.email || "",
+        "Gender": item.gender || "",
+        "Birth Date": item.birthdate
+            ? moment(item.birthdate).format("DD-MMM-YYYY")
+            : "",
+        "Joining Date": item.joiningDate
+            ? moment(item.joiningDate).format("DD-MMM-YYYY")
+            : "",
+        "Permanent Address": item.permanentAddress || "",
+        "Current Address": item.currentAddress || "",
+        "Phone Number": item.phoneNumber || "",
+        "Emergency Phone Number": item.emergencyPhoneNumber || "",
+        "Emergency Contact Person": item.emergencyContactPerson || "",
+        "Is Active": item.isActive ? "Active" : "Inactive",
+        "Job Role": item.jobRole || "",
+    }));
+
+    switch (type) {
+        case "csv":
+            exportToCSV(exportData, "employees");
+            break;
+
+        case "excel":
+            exportToExcel(exportData, "employees");
+            break;
+
+        case "pdf":
+            exportToPDF(
+                dataToExport.map((item) => ({
+                    Name: `${item.firstName || ""} ${item.lastName || ""}`.trim(),
+                    Email: item.email || "",
+                    "Phone Number": item.phoneNumber || "",
+                    "Job Role": item.jobRole || "",
+                    "Joining Date": item.joiningDate
+                        ? moment(item.joiningDate).format("DD-MMM-YYYY")
+                        : "",
+                    Gender: item.gender || "",
+                    Status: item.isActive ? "Active" : "Inactive",
+                })),
+                "employees",
+                [
+                    "Name",
+                    "Email",
+                    "Phone Number",
+                    "Job Role",
+                    "Joining Date",
+                    "Gender",
+                    "Status",
+                ]
+            );
+            break;
+
+        case "print":
+            printTable(tableRef.current);
+            break;
+
+        default:
+            break;
+    }
+};
+
+export default handleEmployeeExport;
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/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(
@ -67,8 +69,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
          key = item.status?.displayName || "Unknown";
          break;
        case "submittedBy":
-          key = `${item.createdBy?.firstName ?? ""} ${
-            item.createdBy?.lastName ?? ""
+          key = `${item.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
            }`.trim();
          break;
        case "project":
@ -110,11 +111,11 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
      label: "Submitted By",
      align: "text-start",
      getValue: (e) =>
-        `${e.createdBy?.firstName ?? ""} ${
-          e.createdBy?.lastName ?? ""
+        `${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"
@ -122,8 +123,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
            lastName={e.createdBy?.lastName}
          />
          <span className="text-truncate">
-            {`${e.createdBy?.firstName ?? ""} ${
-              e.createdBy?.lastName ?? ""
+            {`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
              }`.trim() || "N/A"}
          </span>
        </div>
@ -152,8 +152,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
      align: "text-center",
      getValue: (e) => (
        <span
-          className={`badge bg-label-${
-            getColorNameFromHex(e?.status?.color) || "secondary"
+          className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
            }`}
        >
          {e.status?.name || "Unknown"}
@ -299,6 +298,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                )}
              </tbody>
            </table>
+          </div>
+        </div>
        {data?.data?.length > 0 && (
          <Pagination
            currentPage={currentPage}
@ -307,8 +308,6 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
          />
        )}
      </div>
-        </div>
-      </div>
    </>
  );
 };
--- a/src/components/Organization/OrganizationsList.jsx
+++ b/src/components/Organization/OrganizationsList.jsx
@ -131,7 +131,7 @@ const OrganizationsList = ({searchText}) => {
                      <div className="d-flex justify-content-center gap-2">
                        <i className="bx bx-show text-primary cursor-pointer"  onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
                        <i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
-                        <i className="bx bx-trash text-danger cursor-pointer"></i>
+                        <i className="bx bx-trash text-danger cursor-not-allowed"></i>
                      </div>
                    </td>
                  </tr>
--- a/src/components/Organization/ViewOrganization.jsx
+++ b/src/components/Organization/ViewOrganization.jsx
@ -22,8 +22,7 @@ const VieworgDataanization = ({ orgId }) => {
          </div>
          <div className="text-end">
            <span
-              className={`badge bg-label-${
-                data?.isActive ? "primary" : "secondary"
+              className={`badge bg-label-${data?.isActive ? "primary" : "secondary"
                } `}
            >
              {data?.isActive ? "Active" : "In-Active"}{" "}
@ -105,9 +104,101 @@ const VieworgDataanization = ({ orgId }) => {
          <div className="text-muted text-start">{data?.address}</div>
        </div>
      </div>
-      <div className="d-flex text-secondary mb-2">
-        {" "}
-        <i className="bx bx-sm bx-briefcase me-1" /> Projects And Services
+      <div className="col-12 mb-3">
+        <div
+          className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
+          data-bs-toggle="collapse"
+          data-bs-target="#collapse-projects-services"
+          aria-expanded="false"
+        >
+          <div>
+            <i className="bx bx-sm bx-briefcase me-1" /> Projects
+          </div>
+          <i className="bx bx-chevron-down me-2"></i>
+        </div>
+
+        {/* remove "show" from className */}
+        <div id="collapse-projects-services" className="collapse">
+          {data?.projects && data.projects.length > 0 ? (
+            data.projects
+              .reduce((acc, curr) => {
+                const projectId = curr.project.id;
+                if (!acc.find((p) => p.id === projectId)) {
+                  acc.push(curr.project);
+                }
+                return acc;
+              }, [])
+              .map((project) => (
+                <div key={project.id} className="mb-2 rounded p-2">
+                  <div
+                    className="d-flex justify-content-between align-items-center cursor-pointer"
+                    data-bs-toggle="collapse"
+                    data-bs-target={`#collapse-${project.id}`}
+                    aria-expanded="false"
+                  >
+                    <label className="form-label fw-semibold">
+                      <i className="bx bx-buildings me-2"></i>
+                      {project.name}
+                    </label>
+                    <i className="bx bx-chevron-down"></i>
+                  </div>
+
+                  <div id={`collapse-${project.id}`} className="collapse mt-2 ps-5">
+                    {data.projects
+                      .filter((p) => p.project.id === project.id)
+                      .map((p) => (
+                        <div key={p.service.id} className="mb-1 text-muted">
+                          <i className="bx bx-wrench me-2"></i>
+                          {p.service.name}
+                        </div>
+                      ))}
+                  </div>
+                </div>
+              ))
+          ) : (
+            <div className="text-muted fst-italic ps-2">No projects available</div>
+          )}
+        </div>
+      </div>
+
+      {/* Services Section */}
+      <div className="col-12 mb-3">
+        <div
+          className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
+          data-bs-toggle="collapse"
+          data-bs-target="#collapse-services"
+          aria-expanded="false"
+        >
+          <div>
+            <i className="bx bx-sm bx-cog me-1" /> Services
+          </div>
+          <i className="bx bx-chevron-down me-2"></i>
+        </div>
+
+        {/* collapse is closed initially */}
+        <div id="collapse-services" className="collapse">
+          {data?.services && data.services.length > 0 ? (
+            <div className="row">
+              {data.services.map((service) => (
+                <div key={service.id} className="col-md-12 mb-3">
+                  <div className="card h-100 shadow-sm border-0">
+                    <div className="card-body">
+                      <h6 className="fw-semibold mb-1">
+                        <i className="bx bx-wrench me-1"></i>
+                        {service.name}
+                      </h6>
+                      <p className="text-muted small mb-0">
+                        {service.description || "No description available."}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="text-muted fst-italic ps-2">No services available</div>
+          )}
+        </div>
      </div>
    </div>
  );
--- a/src/components/Project/Infrastructure/WorkArea.jsx
+++ b/src/components/Project/Infrastructure/WorkArea.jsx
@ -104,7 +104,7 @@ const WorkArea = ({ workArea, floor, forBuilding }) => {
                      </span>
                    </div>

-                    <div className="col-2">
+                    <div className="col-6 col-md-2">
                      <ProgressBar
                        completedWork={formatNumber(workArea?.completedWork)}
                        plannedWork={formatNumber(workArea?.plannedWork)}
--- a/src/components/Project/Team/Teams.jsx
+++ b/src/components/Project/Team/Teams.jsx
@ -201,7 +201,7 @@ const Teams = () => {
                    className="form-check-label ms-2"
                    htmlFor="activeEmployeeSwitch"
                  >
-                    {activeEmployee ? "Active Employees" : "Include Inactive Employees"}
+                    {activeEmployee ? "Active Employees" : "In-active Employees"}
                  </label>
                </div>
              </div>
--- a/src/components/gallary/ImageGalleryListView.jsx
+++ b/src/components/gallary/ImageGalleryListView.jsx
@ -30,11 +30,19 @@ const ImageGalleryListView = ({filter}) => {

 if (!data?.data?.length && !isLoading) {
  return (
-      <p className="text-center text-muted mt-5">
-       {selectedProject ? " No images match the selected filters.":"Please Select Project!"}
-      </p>
+    <div
+      className="d-flex justify-content-center align-items-center text-muted"
+      style={{ minHeight: "50vh" }}
+    >
+      <span style={{ fontSize: "0.9rem" }}>
+        {selectedProject
+          ? "No images match the selected filters."
+          : "Please Select Project!"}
+      </span>
+    </div>
  );
-  }
+}
+

  if (isLoading) {
    return (
--- a/src/pages/Activities/AttendancePage.jsx
+++ b/src/pages/Activities/AttendancePage.jsx
@ -179,10 +179,9 @@ const AttendancePage = () => {
              </div>

              {/* Search + Organization filter */}
-              <div className="col-12 col-md-auto mt-2 mt-md-0 ms-md-auto d-flex gap-2 align-items-center">
-                {/* Organization Dropdown */}
-                <div className="row">
-                  <div className="col-12 col-sm-6 mb-2 mb-sm-0">
+              <div className="col-12 col-md-auto mt-2 mt-md-0 ms-md-auto">
+                <div className="row g-2">
+                  <div className="col-12 col-sm-6">
                    <select
                      className="form-select form-select-sm"
                      value={appliedFilters.selectedOrganization}
@ -203,7 +202,6 @@ const AttendancePage = () => {
                    </select>
                  </div>
                  <div className="col-12 col-sm-6">
-                    {/* Search Input */}
                    <input
                      type="text"
                      className="form-control form-control-sm"
@ -213,10 +211,8 @@ const AttendancePage = () => {
                    />
                  </div>
                </div>
-               
-
-                
              </div>
+
            </div>
          </div>

@ -224,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}
@ -234,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}
@ -243,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}
--- a/src/pages/Activities/TaskPlannng.jsx
+++ b/src/pages/Activities/TaskPlannng.jsx
@ -38,7 +38,7 @@ const TaskPlanning = () => {
        ]}
      />

-      <div className="card py-2 ">
+      <div className="card py-2 page-min-h">
        <div className="col-sm-4 col-md-3 col-12 px-4 py-2 text-start">
          {data?.length === 0 ? (
            <p className="badge bg-label-secondary m-0">Service not assigned</p>
--- a/src/pages/Directory/ContactFilterPanel.jsx
+++ b/src/pages/Directory/ContactFilterPanel.jsx
@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
+import React, { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
  contactsFilter,
@ -8,11 +8,14 @@ import {
 import { useContactFilter } from "../../hooks/useDirectory";
 import { ExpenseFilterSkeleton } from "../../components/Expenses/ExpenseSkeleton";
 import SelectMultiple from "../../components/common/SelectMultiple";
+import { useLocation } from "react-router-dom";

 const ContactFilterPanel = ({ onApply, clearFilter }) => {
  const { data, isError, isLoading, error, isFetched, isFetching } =
    useContactFilter();

+  const location = useLocation();
+
  const methods = useForm({
    resolver: zodResolver(contactsFilter),
    defaultValues: defaultContactFilter,
@ -35,9 +38,19 @@ const ContactFilterPanel = ({ onApply, clearFilter }) => {
    closePanel();
  };

+
+  useEffect(() => {
+    return () => {
+      closePanel();
+    };
+  }, []);
+
  if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
  if (isError && isFetched)
    return <div>Something went wrong Here- {error.message} </div>;
+
+
+
  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
--- a/src/pages/Directory/DirectoryPage.jsx
+++ b/src/pages/Directory/DirectoryPage.jsx
@ -139,8 +139,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                <ul className="nav nav-tabs">
                  <li className="nav-item cursor-pointer">
                    <a
-                      className={`nav-link ${
-                        activeTab === "notes" ? "active" : ""
+                      className={`nav-link ${activeTab === "notes" ? "active" : ""
                        } fs-6`}
                      onClick={(e) => handleTabClick("notes", e)}
                    >
@ -150,8 +149,7 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                  </li>
                  <li className="nav-item cursor-pointer">
                    <a
-                      className={`nav-link ${
-                        activeTab === "contacts" ? "active" : ""
+                      className={`nav-link ${activeTab === "contacts" ? "active" : ""
                        } fs-6`}
                      onClick={(e) => handleTabClick("contacts", e)}
                    >
@ -190,23 +188,21 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                            />
                          </div>
                           <button
-                            className={`btn btn-sm p-1 ${
-                              !gridView ? "btn-primary" : "btn-outline-primary"
+                            className={`btn btn-sm p-1 ${gridView ? " btn-primary" : " btn-outline-primary"
+                              }`}
+                            onClick={() => setGridView(true)}
+                          >
+                            <i className="bx bx-grid-alt"></i>
+                          </button>
+                          <button
+                            className={`btn btn-sm p-1 ${!gridView ? "btn-primary" : "btn-outline-primary"
                              }`}
                            onClick={() => setGridView(false)}
                          >
                            <i className="bx bx-list-ul"></i>
                          </button>
                         
-                          <button
-                            className={`btn btn-sm p-1 ${
-                              gridView ? " btn-primary" : " btn-outline-primary"
-                            }`}
-                            onClick={() => setGridView(true)}
-                          >
-                            <i className="bx bx-grid-alt"></i>
-                          </button>
-                          <div className="form-check form-switch d-flex align-items-center d-none d-md-flex">
+                          <div className="form-check form-switch d-flex align-items-end d-none d-md-flex">
                            <input
                              type="checkbox"
                              className="form-check-input"
@ -219,32 +215,14 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                              className="form-check-label ms-2"
                              htmlFor="inactiveEmployeesCheckbox"
                            >
-                            {showActive ? "Active" : "Inactive"} Contacts
+                              {showActive ? "Active" : "In-active"} Contacts
                            </label>
                          </div>
                        </div>
-
-                        
                      </div>
                    )}
                  </div>
                  <div className="col-12 col-md-2 d-flex justify-content-end align-items-center gap-2">
-                    <div className={`form-check form-switch d-flex align-items-center  ${activeTab === "contacts" ? " d-flex d-md-none m-0":"d-none" }`}>
-                          <input
-                            type="checkbox"
-                            className="form-check-input"
-                            role="switch"
-                            id="inactiveEmployeesCheckbox"
-                            checked={showActive}
-                            onChange={(e) => setShowActive(e.target.checked)}
-                          />
-                          <label
-                            className="form-check-label ms-2"
-                            htmlFor="inactiveEmployeesCheckbox"
-                          >
-                            {showActive ? "Active" : "Inactive"} Contacts
-                          </label>
-                        </div>
                    <div className="  btn-group">
                      <button
                        className="btn btn-sm btn-label-secondary dropdown-toggle"
@ -266,7 +244,6 @@ export default function DirectoryPage({ IsPage = true, projectId = null }) {
                      </ul>
                    </div>
                  </div>
-                  
                </div>
              </div>
            </div>
--- a/src/pages/Directory/NoteFilterPanel.jsx
+++ b/src/pages/Directory/NoteFilterPanel.jsx
@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React from "react";
+import React, { useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import {
  defaultNotesFilter,
@ -8,11 +8,18 @@ import {
 import { useContactFilter, useNoteFilter } from "../../hooks/useDirectory";
 import { ExpenseFilterSkeleton } from "../../components/Expenses/ExpenseSkeleton";
 import SelectMultiple from "../../components/common/SelectMultiple";
+import { useLocation } from "react-router-dom";

 const NoteFilterPanel = ({ onApply, clearFilter }) => {
  const { data, isError, isLoading, error, isFetched, isFetching } =
    useNoteFilter();

+  useEffect(() => {
+    return () => {
+      closePanel();
+    };
+  }, []);
+
  const methods = useForm({
    resolver: zodResolver(notesFilter),
    defaultValues: defaultNotesFilter,
--- a/src/pages/employee/EmployeeList.jsx
+++ b/src/pages/employee/EmployeeList.jsx
@ -38,6 +38,7 @@ import usePagination from "../../hooks/usePagination";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import Pagination from "../../components/common/Pagination";
+import handleEmployeeExport from "../../components/Employee/handleEmployeeExport";

 const EmployeeList = () => {
  const selectedProjectId = useSelector(
@ -134,26 +135,11 @@ const EmployeeList = () => {

  const tableRef = useRef(null);
  const handleExport = (type) => {
-    if (!currentItems || currentItems.length === 0) return;
-
-    switch (type) {
-      case "csv":
-        exportToCSV(currentItems, "employees");
-        break;
-      case "excel":
-        exportToExcel(currentItems, "employees");
-        break;
-      case "pdf":
-        exportToPDF(currentItems, "employees");
-        break;
-      case "print":
-        printTable(tableRef.current);
-        break;
-      default:
-        break;
-    }
+    handleEmployeeExport(type, employeeList, filteredData, searchText, tableRef);
  };

+
+
  const handleAllEmployeesToggle = (e) => {
    const isChecked = e.target.checked;
    setShowInactive(false);
@ -176,11 +162,9 @@ const EmployeeList = () => {
  useEffect(() => {
    if (!loading && Array.isArray(employees)) {
      const sorted = [...employees].sort((a, b) => {
-        const nameA = `${a.firstName || ""}${a.middleName || ""}${
-          a.lastName || ""
+        const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""
          }`.toLowerCase();
-        const nameB = `${b.firstName || ""}${b.middleName || ""}${
-          b.lastName || ""
+        const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
          }`.toLowerCase();
        return nameA?.localeCompare(nameB);
      });
@ -258,8 +242,7 @@ const EmployeeList = () => {
              ? "Suspend Employee"
              : "Reactivate Employee"
          }
-          message={`Are you sure you want to ${
-            selectedEmpFordelete?.isActive ? "suspend" : "reactivate"
+          message={`Are you sure you want to ${selectedEmpFordelete?.isActive ? "suspend" : "reactivate"
            } this employee?`}
          onSubmit={(id) =>
            suspendEmployee({
@ -309,7 +292,7 @@ const EmployeeList = () => {
                        className="form-check-label ms-0"
                        htmlFor="inactiveEmployeesCheckbox"
                      >
-                        Show Inactive Employees
+                        In-active Employees
                      </label>
                    </div>
                  </div>
@ -471,8 +454,7 @@ const EmployeeList = () => {
                        Status
                      </th>
                      <th
-                        className={`sorting_disabled  ${
-                          !Manage_Employee && "d-none"
+                        className={`sorting_disabled  ${!Manage_Employee && "d-none"
                          }`}
                        rowSpan="1"
                        colSpan="1"
@ -494,7 +476,7 @@ const EmployeeList = () => {

                    {!loading &&
                      displayData?.length === 0 &&
-                    (!searchText ) ? (
+                      (!searchText) ? (
                      <tr>
                        <td colSpan={8} className="border-0 py-3">
                          <div className="py-4">
@ -506,7 +488,7 @@ const EmployeeList = () => {

                    {!loading &&
                      displayData?.length === 0 &&
-                    (searchText ) ? (
+                      (searchText) ? (
                      <tr>
                        <td colSpan={8} className="border-0 py-3">
                          <div className="py-4">
@ -549,11 +531,10 @@ const EmployeeList = () => {
                                {item.email}
                              </span>
                            ) : (
-                              <span className="text-truncate text-italic">
-                                -
-                              </span>
+                              <span className="d-block text-start text-muted fst-italic">NA</span>
                            )}
                          </td>
+
                          <td className="text-start  d-none  d-sm-table-cell">
                            <span className="text-truncate">
                              <i className="bx bxs-phone-call text-primary me-2"></i>
@ -567,9 +548,14 @@ const EmployeeList = () => {
                            </span>
                          </td>

-                          <td className=" d-none  d-md-table-cell">
-                            {moment(item.joiningDate)?.format("DD-MMM-YYYY")}
+                          <td className="d-none d-md-table-cell">
+                            {item.joiningDate ? (
+                              moment(item.joiningDate).format("DD-MMM-YYYY")
+                            ) : (
+                              <span className="d-block text-center text-muted fst-italic">NA</span>
+                            )}
                          </td>
+
                          <td>
                            {showInactive ? (
                              <span
@ -664,7 +650,8 @@ const EmployeeList = () => {
                      ))}
                  </tbody>
                </table>               
-
+              </div>
+            </div>
             {displayData?.length > 0 && (
                  <Pagination
                    currentPage={currentPage}
@ -673,8 +660,6 @@ const EmployeeList = () => {
                  />
                )}
          </div>
-            </div>
-          </div>
        ) : (
          <div className="card">
            <div className="text-center">
--- a/src/pages/project/ProjectDetails.jsx
+++ b/src/pages/project/ProjectDetails.jsx
@ -77,7 +77,7 @@ const ProjectDetails = () => {
              <AboutProject />
              <ProjectOverview project={projectId} />
            </div>
-            <div className="col-lg-8 col-md-7 mt-5">
+            <div className="col-lg-8 col-md-7 mt-2">
              <ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
              <div className="mt-5">
                <AttendanceOverview />
--- a/src/utils/tableExportUtils.jsx
+++ b/src/utils/tableExportUtils.jsx
@ -40,112 +40,57 @@ export const exportToExcel = (data, fileName = "data") => {
 * @param {Array} data - Array of objects to export
 * @param {string} fileName - File name for the PDF (optional)
 */
-export const exportToPDF = async (data, fileName = "data") => {
+const sanitizeText = (text) => {
+  if (!text) return "";
+  // Replace all non-ASCII characters with "?" or remove them
+  return text.replace(/[^\x00-\x7F]/g, "?");
+};
+
+export const exportToPDF = async (data, fileName = "data", columns = null, options = {}) => {
  if (!data || data.length === 0) return;

-  // Create a new PDF document
  const pdfDoc = await PDFDocument.create();
+  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);

-  // Set up the font
-  const font = await pdfDoc.embedFont(StandardFonts.Helvetica); // Use Helvetica font
+  // Default options
+  const {
+    columnWidths = [],  // array of widths per column
+    fontSizeHeader = 12,
+    fontSizeRow = 10,
+    rowHeight = 25,
+  } = options;

-  // Calculate column widths dynamically based on data content
-  const headers = Object.keys(data[0]);
-  const rows = data.map(item => headers.map(header => item[header] || ''));
+  const pageWidth = 1000;
+  const pageHeight = 600;
+  let page = pdfDoc.addPage([pageWidth, pageHeight]);
+  const margin = 30;
+  let y = pageHeight - margin;

-  const getMaxColumnWidth = (columnIndex) => {
-    let maxWidth = font.widthOfTextAtSize(headers[columnIndex], 12);
-    rows.forEach(row => {
-      const cellText = row[columnIndex].toString();
-      maxWidth = Math.max(maxWidth, font.widthOfTextAtSize(cellText, 10));
+  const headers = columns || Object.keys(data[0]);
+
+  // Draw headers
+  headers.forEach((header, i) => {
+    const x = margin + (columnWidths[i] ? columnWidths.slice(0, i).reduce((a, b) => a + b, 0) : i * 150);
+    page.drawText(header, { x, y, font, size: fontSizeHeader });
  });
-    return maxWidth + 10; // Padding for better spacing
-  };
+  y -= rowHeight;

-  const columnWidths = headers.map((_, index) => getMaxColumnWidth(index));
-  const tableX = 30; // X-coordinate for the table start
-  const rowHeight = 20; // Height of each row (can be adjusted)
-  const maxPageHeight = 750; // Max available height for content (before a new page is added)
-  const pageMargin = 30; // Margin from the top of the page
-
-  let tableY = maxPageHeight; // Start Y position for the table
-  const maxPageWidth = 600; // Max available width for content (before a new page is added)
-
-  // Add the headers and rows to the page
-  const addHeadersToPage = (page, scaleFactor) => {
-    let xPosition = tableX;
-    headers.forEach((header, index) => {
-      page.drawText(header, {
-        x: xPosition,
-        y: tableY,
-        font,
-        size: 12 * scaleFactor, // Scale the header font size
-        color: rgb(0, 0, 0),
+  // Draw rows
+  data.forEach(row => {
+    headers.forEach((header, i) => {
+      const x = margin + (columnWidths[i] ? columnWidths.slice(0, i).reduce((a, b) => a + b, 0) : i * 150);
+      const text = row[header] || '';
+      page.drawText(text, { x, y, font, size: fontSizeRow });
    });
-      xPosition += columnWidths[index] * scaleFactor; // Adjust X position based on scaling
-    });
-    tableY -= rowHeight; // Move down after adding headers
-  };
+    y -= rowHeight;

-  // Add a new page and reset the table position
-  const addNewPage = (scaleFactor) => {
-    const page = pdfDoc.addPage([600, 800]);
-    tableY = maxPageHeight; // Reset Y position for the new page
-    addHeadersToPage(page, scaleFactor); // Re-add headers to the new page
-    return page;
-  };
-
-  // Create the first page and add headers
-  let page = pdfDoc.addPage([600, 800]);
-
-  // Check if the content fits within the page width, scale if necessary
-  const checkPageWidth = (row) => {
-    let totalWidth = columnWidths.reduce((acc, width) => acc + width, 0);
-    let scaleFactor = 1;
-    if (totalWidth > maxPageWidth) {
-      scaleFactor = maxPageWidth / totalWidth; // Scale down if necessary
+    if (y < margin) {
+      page = pdfDoc.addPage([pageWidth, pageHeight]);
+      y = pageHeight - margin;
    }
-
-    return scaleFactor;
-  };
-
-  // Function to check for page breaks when adding a new row
-  const checkPageBreak = () => {
-    if (tableY - rowHeight < pageMargin) {
-      page = addNewPage(scaleFactor); // Add a new page if there is no space for the next row
-    }
-  };
-
-  // Add rows to the PDF with pagination and horizontal scaling
-  rows.forEach(row => {
-    checkPageBreak(); // Check for page break before adding each row
-
-    const scaleFactor = checkPageWidth(row); // Get the scaling factor for the row
-
-    // Add headers to the first page and each new page with the same scale factor
-    if (tableY === maxPageHeight) {
-      addHeadersToPage(page, scaleFactor); // Add headers only on the first page
-    }
-
-    let xPosition = tableX;
-    row.forEach((value, index) => {
-      page.drawText(value.toString(), {
-        x: xPosition,
-        y: tableY,
-        font,
-        size: 10 * scaleFactor, // Scale the font size
-        color: rgb(0, 0, 0),
-      });
-      xPosition += columnWidths[index] * scaleFactor; // Adjust X position based on scaling
  });

-    tableY -= rowHeight; // Move down to the next row position
-  });
-
-  // Serialize the document to bytes
  const pdfBytes = await pdfDoc.save();
-
-  // Trigger a download of the PDF
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
@ -153,15 +98,110 @@ export const exportToPDF = async (data, fileName = "data") => {
  link.click();
 };

+
+
+
+
+/**
+ * Export JSON data to PDF in a card-style format
+ * @param {Array} data - Array of objects to export
+ * @param {string} fileName - File name for the PDF (optional)
+ */
+export const exportToPDF1 = async (data, fileName = "data") => {
+  if (!data || data.length === 0) return;
+
+  const pdfDoc = await PDFDocument.create();
+  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
+  const boldFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
+
+  const pageWidth = 600;
+  const pageHeight = 800;
+  const margin = 30;
+  const cardSpacing = 20;
+  const cardPadding = 10;
+  let page = pdfDoc.addPage([pageWidth, pageHeight]);
+  let y = pageHeight - margin;
+
+  for (const item of data) {
+    const title = item.ContactName || "";
+    const subtitle = `by ${item.CreatedBy || ""} on ${item.CreatedAt || ""}`;
+    const body = item.Note || "";
+
+    const cardHeight = 80 + (body.length / 60) * 14; // approximate height for body text
+
+    if (y - cardHeight < margin) {
+      page = pdfDoc.addPage([pageWidth, pageHeight]);
+      y = pageHeight - margin;
+    }
+
+    // Draw card border
+    page.drawRectangle({
+      x: margin,
+      y: y - cardHeight,
+      width: pageWidth - 2 * margin,
+      height: cardHeight,
+      borderColor: rgb(0.7, 0.7, 0.7),
+      borderWidth: 1,
+      color: rgb(1, 1, 1),
+    });
+
+    // Draw title
+    page.drawText(title, {
+      x: margin + cardPadding,
+      y: y - 20,
+      font: boldFont,
+      size: 12,
+      color: rgb(0.1, 0.1, 0.1),
+    });
+
+    // Draw subtitle
+    page.drawText(subtitle, {
+      x: margin + cardPadding,
+      y: y - 35,
+      font,
+      size: 10,
+      color: rgb(0.4, 0.4, 0.4),
+    });
+
+    // Draw body text (wrap manually)
+    const lines = body.match(/(.|[\r\n]){1,80}/g) || [];
+    lines.forEach((line, i) => {
+      page.drawText(line, {
+        x: margin + cardPadding,
+        y: y - 50 - i * 12,
+        font,
+        size: 10,
+        color: rgb(0.2, 0.2, 0.2),
+      });
+    });
+
+    y -= cardHeight + cardSpacing;
+  }
+
+  const pdfBytes = await pdfDoc.save();
+  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
+  const link = document.createElement('a');
+  link.href = URL.createObjectURL(blob);
+  link.download = `${fileName}.pdf`;
+  link.click();
+};
+
+
+
+
 /**
 * Print the HTML table by accepting the table element or a reference.
 * @param {HTMLElement} table - The table element (or ref) to print
 */
 export const printTable = (table) => {
  if (table) {
-    const newWindow = window.open("", "", "width=600,height=600"); // Open a new window
+    const clone = table.cloneNode(true);
+    // Remove last column (Actions) from all rows
+    clone.querySelectorAll("tr").forEach((row) => {
+      row.removeChild(row.lastElementChild);
+    });

-    // Inject styles for the table and body
+    const newWindow = window.open("", "", "width=600,height=600");
    newWindow.document.write("<html><head><title>Print Table</title>");
    const style = document.createElement('style');
    style.innerHTML = `
@ -173,14 +213,12 @@ export const printTable = (table) => {
    newWindow.document.head.appendChild(style);

    newWindow.document.write("</head><body>");
-    newWindow.document.write(table.outerHTML); // Write the table HTML to the new window
+    newWindow.document.write(clone.outerHTML);
    newWindow.document.write("</body></html>");
-    
-    newWindow.document.close(); // Close the document stream
-    
-    // Wait for the document to load before triggering print
+    newWindow.document.close();
    newWindow.onload = () => {
-      newWindow.print(); // Trigger the print dialog after the content is loaded
+      newWindow.print();
    };
  }
 };
+
Author	SHA1	Message	Date
pramod.mahajan	8460460caf	Merge pull request 'Excessive space between Organization dropdown and Search bar in Attendance menu.' (#484 ) from Kartik_Bug#1499 into Issues_Oct_main_2W Reviewed-on: #484 Merged	2025-10-15 12:37:16 +00:00
Kartik Sharma	c8273070ac	Changes in Attendance and Expenselist.	2025-10-15 12:37:16 +00:00
Kartik Sharma	dc4e48ad3b	Changes in Employee list at pagination and at mobile view then scrollbar is shown.	2025-10-15 12:37:16 +00:00
Kartik Sharma	20b508bebc	Changes in Regularization tab.	2025-10-15 12:37:16 +00:00
Kartik Sharma	05c01d1d34	Changes in Attendance page.	2025-10-15 12:37:16 +00:00
Kartik Sharma	073897156e	Excessive space between Organization dropdown and Search bar in Attendance menu.	2025-10-15 12:37:16 +00:00
pramod.mahajan	3a2fcf71ee	Merge pull request 'Export to PDF button not functioning' (#479 ) from Kartik_Bug#1434 into Issues_Oct_main_2W Reviewed-on: #479 Merged	2025-10-15 12:33:55 +00:00
Kartik Sharma	f0c6aea55d	Create a seprate file for export functionality in employee.	2025-10-15 12:33:55 +00:00
Kartik Sharma	278a5651fe	Changes in excel import.	2025-10-15 12:33:55 +00:00
Kartik Sharma	6fc3e674e5	Export to PDF button not functioning	2025-10-15 12:33:55 +00:00
pramod.mahajan	9f4d82eb06	Merge pull request '“No images match the selected filters.” message should be displayed at the center of the page.' (#481 ) from Kartik_Bug#1497 into Issues_Oct_main_2W Reviewed-on: #481 Merged	2025-10-15 12:26:25 +00:00
Kartik Sharma	4ba0c823c0	“No images match the selected filters.” message should be displayed at the center of the page.	2025-10-15 12:26:25 +00:00
pramod.mahajan	acf6a28191	Merge pull request 'Attendance "No record" message improvement' (#480 ) from Kartik_Bug#1437 into Issues_Oct_main_2W Reviewed-on: #480 merged	2025-10-15 12:24:37 +00:00
Kartik Sharma	98c90f2a9b	Attendance "No record" message improvement	2025-10-15 12:24:37 +00:00
Kartik Sharma	b80af5467c	Changes in Infrastructure.	2025-10-14 15:07:07 +05:30
Kartik Sharma	9592108472	Removing extra margin-top on Project-details.	2025-10-13 16:35:28 +05:30
pramod.mahajan	3b032b7b07	Merge pull request 'Incorrect Toggle Switch Text for Active/Inactive Employee in Project Teams' (#475 ) from Kartik_Bug#1455 into Issues_Oct_main_2W Reviewed-on: #475 merged	2025-10-13 09:33:09 +00:00
Kartik Sharma	b8891d403f	Incorrect Toggle Switch Text for Active/Inactive Employee in Project Teams	2025-10-13 09:33:09 +00:00
pramod.mahajan	01568db61c	Merge pull request '“NA” Should Be Displayed When Employee Has No Email Instead of “–”' (#476 ) from Kartik_Bug#1451 into Issues_Oct_main_2W Reviewed-on: #476 Merged	2025-10-13 09:32:51 +00:00
Kartik Sharma	80a974e3be	“NA” Should Be Displayed When Employee Has No Email Instead of “–”	2025-10-13 09:32:51 +00:00
pramod.mahajan	f3e05a11d6	Merge pull request 'Adding Project and Service field in View Organization popup.' (#477 ) from Kartik_Task#1477 into Issues_Oct_main_2W Reviewed-on: #477 Merged	2025-10-13 09:32:32 +00:00
Kartik Sharma	222e6495a8	Adding Project and Service field in View Organization popup.	2025-10-13 09:32:32 +00:00
pramod.mahajan	18a3b8a85b	Merge pull request 'Filter Sidebar Should Auto-Close When Navigating to Another Page' (#478 ) from Kartik_Bug#1450 into Issues_Oct_main_2W Reviewed-on: #478 merged	2025-10-13 09:32:17 +00:00
Kartik Sharma	d75296ffe8	Filter Sidebar Should Auto-Close When Navigating to Another Page	2025-10-13 14:51:47 +05:30
Kartik Sharma	6649cab6a2	Added cursor-not-allowed when user can delete the organization.	2025-10-13 14:16:11 +05:30
Kartik Sharma	eab23389ed	Correction in Projects Completion Status in this weidget data cannot be shown.	2025-10-13 12:51:42 +05:30