Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Weidget_Dashboard_Services

Merge pull request 'Add Pending Actions toggle near search box in Expense.' (#530 ) from Adding_Toggle_Button into Purchase_Invoice_Management
Reviewed-on: #530 merged
2025-12-06 16:51:05 +05:30 · 2025-12-06 11:18:15 +00:00 · 2025-12-06 11:18:15 +00:00 · 2025-12-06 11:14:50 +00:00 · 2025-12-06 11:14:50 +00:00 · 2025-12-06 11:14:50 +00:00
129 changed files with 6728 additions and 1902 deletions
--- a/index.html
+++ b/index.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
+<html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact layout-menu-collapsed " dir="ltr"
  data-theme="theme-default" data-assets-path="/assets/" data-template="vertical-menu-template" data-style="light">
-
+<!-- layout-menu-collapsed layout-menu-hover -->
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
--- a/public/assets/css/core-extend.css
+++ b/public/assets/css/core-extend.css
@ -11,6 +11,18 @@
  top: var(--sticky-top, 0px) !important;
  z-index: 1025;
 }
+.form-control-md {
+  min-height: calc(1.6em + 0.65rem + calc(var(--bs-border-width) * 2));
+  padding: 0.18rem 0.60rem;
+  font-size: 0.875rem;  /* ~14px */
+  border-radius: var(--bs-border-radius);
+}
+
+.form-control-md::file-selector-button {
+  padding: 0.32rem 0.75rem;
+  margin: -0.32rem -0.75rem;
+  margin-inline-end: 0.75rem;
+}


 /* ===========================% Background_Colors %========================================================== */
@ -222,7 +234,9 @@ font-weight: normal;
 .h-min   { height: min-content; }
 .h-max   { height: max-content; }

-
+.vh-50 {
+  height: 50vh !important;
+}



@ -456,3 +470,34 @@ font-weight: normal;
  .fs-md-xlarge { font-size: 170% !important; }
  .fs-md-xxlarge { font-size: calc(1.725rem + 5.7vw) !important; }
 }
+/* ====================== Thin Scrollbar (Global) ====================== */
+
+.job-scroll-wrapper {
+  max-height: 350px;
+  overflow-y: auto;
+  padding-right: 8px;
+
+  /* Firefox thin scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: #c8c8c8 transparent;
+}
+
+/* Chrome, Edge, Safari */
+.job-scroll-wrapper::-webkit-scrollbar {
+  width: 4px;
+}
+
+.job-scroll-wrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.job-scroll-wrapper::-webkit-scrollbar-thumb {
+  background-color: #c8c8c8;
+  border-radius: 20px;
+}
+
+.job-scroll-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: #a0a0a0;
+}
+
+
--- a/public/assets/css/default.css
+++ b/public/assets/css/default.css
@ -31,7 +31,7 @@
 }

 .app-brand-text {
-  font-size: 1.75rem;
+  font-size: 1rem;
  letter-spacing: -0.5px;
  /* text-transform: lowercase; */
 }
--- a/public/assets/js/main.js
+++ b/public/assets/js/main.js
@ -149,4 +149,40 @@ function Main () {
      });
    }
    
+
 };
+document.addEventListener("DOMContentLoaded", function () {
+  const html = document.documentElement;
+
+  /******************************
+   * SIDEBAR HOVER BEHAVIOR
+   ******************************/
+  document.addEventListener("mouseover", function (e) {
+    const isInsideSidebar = e.target.closest("#layout-menu");
+
+    if (isInsideSidebar && html.classList.contains("layout-menu-collapsed")) {
+      html.classList.add("layout-menu-hover");
+    }
+  });
+
+  document.addEventListener("mouseout", function (e) {
+    const leftSidebar = !e.relatedTarget || !e.relatedTarget.closest("#layout-menu");
+
+    if (leftSidebar) {
+      html.classList.remove("layout-menu-hover");
+    }
+  });
+
+  /******************************
+   * TOGGLE MENU BUTTON OVERRIDE
+   ******************************/
+  document.body.addEventListener("click", function (e) {
+    const btn = e.target.closest(".layout-menu-toggle");
+    if (!btn) return;
+
+    e.preventDefault();
+
+    html.classList.toggle("layout-menu-collapsed");
+    html.classList.remove("layout-menu-hover");
+  });
+});
--- a/src/components/Activities/AttendcesLogs.jsx
+++ b/src/components/Activities/AttendcesLogs.jsx
@ -20,14 +20,21 @@ import { SpinnerLoader } from "../common/Loader";

 const usePagination = (data, itemsPerPage) => {
  const [currentPage, setCurrentPage] = useState(1);
-  const maxPage = Math.ceil(data.length / itemsPerPage);
+  // const maxPage = Math.ceil(data.length / itemsPerPage);
+  const maxPage = Math.max(1, Math.ceil(data.length / itemsPerPage));
  const currentItems = useMemo(() => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    return data.slice(startIndex, endIndex);
  }, [data, currentPage, itemsPerPage]);

-  const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
+  // const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
+
+  const paginate = useCallback((pageNumber) => {
+    // keep page within 1..maxPage
+    const p = Math.max(1, Math.min(pageNumber, maxPage));
+    setCurrentPage(p);
+  }, [maxPage]);
  const resetPage = useCallback(() => setCurrentPage(1), []);

  return {
@ -36,6 +43,7 @@ const usePagination = (data, itemsPerPage) => {
    currentItems,
    paginate,
    resetPage,
+    setCurrentPage,
  };
 };

@ -125,9 +133,16 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
    resetPage,
  } = usePagination(filteredSearchData, 20);

+  // useEffect(() => {
+  //   resetPage();
+  // }, [filteredSearchData]);
+
  useEffect(() => {
-    resetPage();
-  }, [filteredSearchData]);
+    if (currentPage > totalPages) {
+      paginate(totalPages || 1);
+    }
+    // NOTE: do NOT force reset to page 1 here — keep the same page if still valid
+  }, [filteredSearchData, totalPages, currentPage, paginate]);

  const handler = useCallback(
    (msg) => {
@ -144,10 +159,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
            record.id === msg.response.id ? { ...record, ...msg.response } : record
          );
        });
-        resetPage();
      }
    },
-    [selectedProject, dateRange, resetPage]
+    [selectedProject, dateRange]
  );

  useEffect(() => {
@ -214,7 +228,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
        {isLoading ? (
          <div
            className="d-flex justify-content-center align-items-center"
-           style={{ minHeight: "50vh" }}
+            style={{ minHeight: "50vh" }}
          >
            <SpinnerLoader />
          </div>
--- a/src/components/AdvancePayment/AdvancePaymentList.jsx
+++ b/src/components/AdvancePayment/AdvancePaymentList.jsx
@ -1,233 +1,108 @@
+import React from 'react'
+import Avatar from "../common/Avatar"; // <-- ADD THIS
+import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
+import { useNavigate } from 'react-router-dom';
+import { formatFigure } from '../../utils/appUtils';
+import { SpinnerLoader } from '../common/Loader';

-import React, { useEffect, useMemo } from "react";
-import { useExpenseAllTransactionsList, useExpenseTransactions } from "../../hooks/useExpense";
-import Error from "../common/Error";
-import { formatUTCToLocalTime } from "../../utils/dateUtils";
-import Loader, { SpinnerLoader } from "../common/Loader";
-import { useForm, useFormContext } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { employee } from "../../data/masters";
-import { useAdvancePaymentContext } from "../../pages/AdvancePayment/AdvancePaymentPage";
-import { formatFigure } from "../../utils/appUtils";
+const AdvancePaymentList = ({ searchString }) => {

-const AdvancePaymentList = ({ employeeId, searchString }) => {
-  const { setBalance } = useAdvancePaymentContext();
-  const { data, isError, isLoading, error, isFetching } =
-    useExpenseTransactions(employeeId, { enabled: !!employeeId });
-  const records = Array.isArray(data) ? data : [];
+    const { data, isError, isLoading, error } =
+        useExpenseAllTransactionsList(searchString);

-  let currentBalance = 0;
-  const rowsWithBalance = records.map((r) => {
-    const isCredit = r.amount > 0;
-    const credit = isCredit ? r.amount : 0;
-    const debit = !isCredit ? Math.abs(r.amount) : 0;
-    currentBalance += credit - debit;
-    return {
-      id: r.id,
-      description: r.title || "-",
-      projectName: r.project?.name || "-",
-      createdAt: r.createdAt,
-      credit,
-      debit,
-      financeUId: r.financeUId,
-      balance: currentBalance,
-    };
-  });
+    const rows = data || [];
+    const navigate = useNavigate();

-  useEffect(() => {
-    if (!employeeId) {
-      setBalance(null);
-      return;
+    const columns = [
+        {
+            key: "employee",
+            label: "Employee Name",
+            align: "text-start",
+            customRender: (r) => (
+                <div className="d-flex align-items-center gap-2" onClick={() => navigate(`/advance-payment/${r.id}`)}
+                    style={{ cursor: "pointer" }}>
+                    <Avatar firstName={r.firstName} lastName={r.lastName} />
+
+                    <span className="fw-medium">
+                        {r.firstName} {r.lastName}
+                    </span>
+                </div>
+            ),
+        },
+        {
+            key: "jobRoleName",
+            label: "Job Role",
+            align: "text-start",
+            customRender: (r) => (
+                <span className="fw-semibold">
+                    {r.jobRoleName}
+                </span>
+            ),
+        },
+        {
+            key: "balanceAmount",
+            label: "Balance (₹)",
+            align: "text-end",
+            customRender: (r) => (
+                <span className="fw-semibold fs-6">
+                    {formatFigure(r.balanceAmount, {
+                        // type: "currency",
+                        currency: "INR",
+                    })}
+                </span>
+            ),
+        },
+    ];
+
+    if (isLoading) {
+        return (
+            <div className="d-flex justify-content-center align-items-center py-4" style={{ height: "300px" }}>
+                <SpinnerLoader />
+            </div>
+        );
    }

-    if (rowsWithBalance.length > 0) {
-      setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance);
-    } else {
-      setBalance(0);
-    }
-  }, [employeeId, data, setBalance]);
+    if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;

-  if (!employeeId) {
    return (
-      <div
-        className="d-flex justify-content-center align-items-center"
-        style={{ height: "200px" }}
-      >
-        <p className="text-muted m-0">Please select an employee</p>
-      </div>
-    );
-  }
+        <div className="card-datatable" id="payment-request-table">
+            <div className="mx-2">
+                <table className="table border-top dataTable text-nowrap align-middle">
+                    <thead>
+                        <tr>
+                            {columns.map((col) => (
+                                <th key={col.key} className={`sorting ${col.align}`}>
+                                    {col.label}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>

-  if (isLoading || isFetching) {
-    return (
-      <div
-        className="d-flex justify-content-center align-items-center"
-        style={{ height: "200px" }}
-      >
-        <SpinnerLoader />
-      </div>
-    );
-  }
-
-  if (isError) {
-    return (
-      <div className="text-center py-3">
-        {error?.status === 404
-          ? "No advance payment transactions found."
-          : <Error error={error} />}
-      </div>
-    );
-  }
-  const columns = [
-    {
-      key: "date",
-      label: (
-        <>
-          Date
-        </>
-      ),
-      align: "text-start",
-    },
-    { key: "description", label: "Description", align: "text-start" },
-
-    {
-      key: "credit",
-      label: (
-        <>
-          Credit <i className="bx bx-rupee text-success"></i>
-        </>
-      ),
-      align: "text-end",
-    },
-    {
-      key: "debit",
-      label: (
-        <>
-          Debit <i className="bx bx-rupee text-danger"></i>
-        </>
-      ),
-      align: "text-end",
-    },
-
-    {
-      key: "balance",
-      label: (
-        <>
-          Balance <i className="bi bi-currency-rupee text-primary"></i>
-        </>
-      ),
-      align: "text-end fw-bold",
-    },
-  ];
-
-  // Handle empty records
-  if (rowsWithBalance.length === 0) {
-    return (
-      <div className="text-center text-muted py-3">
-        No advance payment records found.
-      </div>
-    );
-  }
-  const DecideCreditOrDebit = ({ financeUId }) => {
-    if (!financeUId) return null;
-
-    const prefix = financeUId?.substring(0, 2).toUpperCase();
-
-    if (prefix === "PR") return <span className="text-success">+</span>;
-    if (prefix === "EX") return <span className="text-danger">-</span>;
-
-    return null;
-  };
-
-  return (
-    <div className="table-responsive">
-      <table className="table align-middle">
-        <thead className="table_header_border">
-          <tr>
-            {columns.map((col) => (
-              <th key={col.key} className={col.align}>
-                {col.label}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {Array.isArray(data) && data.length > 0 ? (
-            data.map((row) => (
-              <tr key={row.id}>
-                {columns.map((col) => (
-                  <td key={col.key} className={`${col.align} p-2`}>
-                    {col.key === "credit" ? (
-                      row.amount > 0 ? (
-                        <span>{row.amount.toLocaleString("en-IN")}</span>
-                      ) : (
-                        "-"
-                      )
-                    ) : col.key === "debit" ? (
-                      row.amount < 0 ? (
-                        <span>
-                          {Math.abs(row.amount).toLocaleString("en-IN")}
-                        </span>
-                      ) : (
-                        "-"
-                      )
-                    ) : col.key === "balance" ? (
-                      <div className="d-flex align-items-center justify-content-end">
-                        {/* <DecideCreditOrDebit financeUId={row?.financeUId} /> */}
-                        <span className="mx-2">
-                          {formatFigure(row.currentBalance)}
-                        </span>
-                      </div>
-                    ) : col.key === "date" ? (
-                      <small className="text-muted px-1">
-                        {formatUTCToLocalTime(row.paidAt)}
-                      </small>
-                    ) : (
-                      <div className="d-flex flex-column text-start gap-1 py-1">
-                        <small className="fw-semibold text-dark">
-                          {row.project?.name || "-"}
-                        </small>
-                        <small>{row.title || "-"}</small>
-                      </div>
-                    )}
-                  </td>
-                ))}
-              </tr>
-            ))
-          ) : (
-            <tr>
-              <td
-                colSpan={columns.length}
-                className="text-center text-muted py-3"
-              >
-                No advance payment records found.
-              </td>
-            </tr>
-          )}
-        </tbody>
-
-        <tfoot className=" fw-bold">
-          <tr className="tr-group text-dark py-2">
-            <td className="text-start">
-              {" "}
-              <div className="d-flex align-items-center px-1 py-2">
-                Final Balance
-              </div>
-            </td>
-            <td className="text-end" colSpan="4">
-              <div className="d-flex align-items-center justify-content-end px-1  py-2">
-                {currentBalance.toLocaleString("en-IN", {
-                  style: "currency",
-                  currency: "INR",
-                })}
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-      </table>
-    </div>
-  );
-};
+                    <tbody>
+                        {rows.length > 0 ? (
+                            rows.map((row) => (
+                                <tr key={row.id} className="align-middle" style={{ height: "50px" }}>
+                                    {columns.map((col) => (
+                                        <td key={col.key} className={`d-table-cell ${col.align} py-3`}>
+                                            {col.customRender
+                                                ? col.customRender(row)
+                                                : col.getValue(row)}
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))
+                        ) : (
+                            <tr>
+                                <td colSpan={columns.length} className="text-center border-0 py-3">
+                                    No Employees Found
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}

 export default AdvancePaymentList;
--- a/src/components/AdvancePayment/AdvancePaymentList1.jsx
+++ b/src/components/AdvancePayment/AdvancePaymentList1.jsx
@ -1,100 +0,0 @@
-import React from 'react'
-import Avatar from "../../components/common/Avatar"; // <-- ADD THIS
-import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
-import { useNavigate } from 'react-router-dom';
-import { formatFigure } from '../../utils/appUtils';
-
-const AdvancePaymentList1 = ({ searchString }) => {
-
-    const { data, isError, isLoading, error } =
-        useExpenseAllTransactionsList(searchString);
-
-    const rows = data || [];
-    const navigate = useNavigate();
-
-    const columns = [
-        {
-            key: "employee",
-            label: "Employee Name",
-            align: "text-start",
-            customRender: (r) => (
-                <div className="d-flex align-items-center gap-2" onClick={() => navigate(`/advance-payment/${r.id}`)}
-                    style={{ cursor: "pointer" }}>
-                    <Avatar firstName={r.firstName} lastName={r.lastName} />
-
-                    <span className="fw-medium">
-                        {r.firstName} {r.lastName}
-                    </span>
-                </div>
-            ),
-        },
-        {
-            key: "jobRoleName",
-            label: "Job Role",
-            align: "text-start",
-            customRender: (r) => (
-                <span className="fw-semibold">
-                    {r.jobRoleName}
-                </span>
-            ),
-        },
-        {
-            key: "balanceAmount",
-            label: "Balance (₹)",
-            align: "text-end",
-            customRender: (r) => (
-                <span className="fw-semibold fs-6">
-                    {formatFigure(r.balanceAmount, {
-                        // type: "currency",
-                        currency: "INR",
-                    })}
-                </span>
-            ),
-        },
-    ];
-
-    if (isLoading) return <p className="text-center py-4">Loading...</p>;
-    if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;
-
-    return (
-        <div className="card-datatable" id="payment-request-table">
-            <div className="mx-2">
-                <table className="table border-top dataTable text-nowrap align-middle">
-                    <thead>
-                        <tr>
-                            {columns.map((col) => (
-                                <th key={col.key} className={`sorting ${col.align}`}>
-                                    {col.label}
-                                </th>
-                            ))}
-                        </tr>
-                    </thead>
-
-                    <tbody>
-                        {rows.length > 0 ? (
-                            rows.map((row) => (
-                                <tr key={row.id} className="align-middle" style={{ height: "40px" }}>
-                                    {columns.map((col) => (
-                                        <td key={col.key} className={`d-table-cell ${col.align} py-3`}>
-                                            {col.customRender
-                                                ? col.customRender(row)
-                                                : col.getValue(row)}
-                                        </td>
-                                    ))}
-                                </tr>
-                            ))
-                        ) : (
-                            <tr>
-                                <td colSpan={columns.length} className="text-center border-0 py-3">
-                                    No Employees Found
-                                </td>
-                            </tr>
-                        )}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    )
-}
-
-export default AdvancePaymentList1;
--- a/src/components/AdvancePayment/AdvancePaymentListDetails.jsx
+++ b/src/components/AdvancePayment/AdvancePaymentListDetails.jsx
@ -0,0 +1,233 @@
+
+import React, { useEffect, useMemo } from "react";
+import { useExpenseAllTransactionsList, useExpenseTransactions } from "../../hooks/useExpense";
+import Error from "../common/Error";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Loader, { SpinnerLoader } from "../common/Loader";
+import { useForm, useFormContext } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { employee } from "../../data/masters";
+import { useAdvancePaymentContext } from "../../pages/AdvancePayment/AdvancePaymentPageDetails"; 
+import { formatFigure } from "../../utils/appUtils";
+
+const AdvancePaymentListDetails = ({ employeeId, searchString,tableRef  }) => {
+  const { setBalance } = useAdvancePaymentContext();
+  const { data, isError, isLoading, error, isFetching } =
+    useExpenseTransactions(employeeId, { enabled: !!employeeId });
+  const records = Array.isArray(data) ? data : [];
+
+  let currentBalance = 0;
+  const rowsWithBalance = records.map((r) => {
+    const isCredit = r.amount > 0;
+    const credit = isCredit ? r.amount : 0;
+    const debit = !isCredit ? Math.abs(r.amount) : 0;
+    currentBalance += credit - debit;
+    return {
+      id: r.id,
+      description: r.title || "-",
+      projectName: r.project?.name || "-",
+      createdAt: r.createdAt,
+      credit,
+      debit,
+      financeUId: r.financeUId,
+      balance: currentBalance,
+    };
+  });
+
+  useEffect(() => {
+    if (!employeeId) {
+      setBalance(null);
+      return;
+    }
+
+    if (rowsWithBalance.length > 0) {
+      setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance);
+    } else {
+      setBalance(0);
+    }
+  }, [employeeId, data, setBalance]);
+
+  if (!employeeId) {
+    return (
+      <div
+        className="d-flex justify-content-center align-items-center"
+        style={{ height: "200px" }}
+      >
+        <p className="text-muted m-0">Please select an employee</p>
+      </div>
+    );
+  }
+
+  if (isLoading || isFetching) {
+    return (
+      <div
+        className="d-flex justify-content-center align-items-center"
+        style={{ height: "200px" }}
+      >
+        <SpinnerLoader />
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="text-center py-3">
+        {error?.status === 404
+          ? "No advance payment transactions found."
+          : <Error error={error} />}
+      </div>
+    );
+  }
+  const columns = [
+    {
+      key: "date",
+      label: (
+        <>
+          Date
+        </>
+      ),
+      align: "text-start",
+    },
+    { key: "description", label: "Description", align: "text-start" },
+
+    {
+      key: "credit",
+      label: (
+        <>
+          Credit <i className="bx bx-rupee text-success"></i>
+        </>
+      ),
+      align: "text-end",
+    },
+    {
+      key: "debit",
+      label: (
+        <>
+          Debit <i className="bx bx-rupee text-danger"></i>
+        </>
+      ),
+      align: "text-end",
+    },
+
+    {
+      key: "balance",
+      label: (
+        <>
+          Balance <i className="bi bi-currency-rupee text-primary"></i>
+        </>
+      ),
+      align: "text-end fw-bold",
+    },
+  ];
+
+  // Handle empty records
+  if (rowsWithBalance.length === 0) {
+    return (
+      <div className="text-center text-muted py-3">
+        No advance payment records found.
+      </div>
+    );
+  }
+  const DecideCreditOrDebit = ({ financeUId }) => {
+    if (!financeUId) return null;
+
+    const prefix = financeUId?.substring(0, 2).toUpperCase();
+
+    if (prefix === "PR") return <span className="text-success">+</span>;
+    if (prefix === "EX") return <span className="text-danger">-</span>;
+
+    return null;
+  };
+
+  return (
+    <div className="table-responsive">
+      <table className="table align-middle" ref={tableRef}>
+        <thead className="table_header_border">
+          <tr>
+            {columns.map((col) => (
+              <th key={col.key} className={col.align}>
+                {col.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {Array.isArray(data) && data.length > 0 ? (
+            data.map((row) => (
+              <tr key={row.id}>
+                {columns.map((col) => (
+                  <td key={col.key} className={`${col.align} p-2`}>
+                    {col.key === "credit" ? (
+                      row.amount > 0 ? (
+                        <span>{row.amount.toLocaleString("en-IN")}</span>
+                      ) : (
+                        "-"
+                      )
+                    ) : col.key === "debit" ? (
+                      row.amount < 0 ? (
+                        <span>
+                          {Math.abs(row.amount).toLocaleString("en-IN")}
+                        </span>
+                      ) : (
+                        "-"
+                      )
+                    ) : col.key === "balance" ? (
+                      <div className="d-flex align-items-center justify-content-end">
+                        {/* <DecideCreditOrDebit financeUId={row?.financeUId} /> */}
+                        <span className="mx-2">
+                          {formatFigure(row.currentBalance)}
+                        </span>
+                      </div>
+                    ) : col.key === "date" ? (
+                      <small className="text-muted px-1">
+                        {formatUTCToLocalTime(row.paidAt)}
+                      </small>
+                    ) : (
+                      <div className="d-flex flex-column text-start gap-1 py-1">
+                        <small className="fw-semibold text-dark">
+                          {row.project?.name || "-"}
+                        </small>
+                        <small>{row.title || "-"}</small>
+                      </div>
+                    )}
+                  </td>
+                ))}
+              </tr>
+            ))
+          ) : (
+            <tr>
+              <td
+                colSpan={columns.length}
+                className="text-center text-muted py-3"
+              >
+                No advance payment records found.
+              </td>
+            </tr>
+          )}
+        </tbody>
+
+        <tfoot className=" fw-bold">
+          <tr className="tr-group text-dark py-2">
+            <td className="text-start">
+              {" "}
+              <div className="d-flex align-items-center px-1 py-2">
+                Final Balance
+              </div>
+            </td>
+            <td className="text-end" colSpan="4">
+              <div className="d-flex align-items-center justify-content-end px-1  py-2">
+                {currentBalance.toLocaleString("en-IN", {
+                  style: "currency",
+                  currency: "INR",
+                })}
+              </div>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
+};
+
+export default AdvancePaymentListDetails;
--- a/src/components/AdvancePayment/handleAdvancePaymentExport.jsx
+++ b/src/components/AdvancePayment/handleAdvancePaymentExport.jsx
@ -0,0 +1,76 @@
+import moment from "moment";
+import { exportToCSV, exportToExcel, exportToPDF, printTable } from "../../utils/tableExportUtils";
+
+const handleAdvancePaymentExport = (type, data, tableRef) => {
+  if (!data || data.length === 0) return;
+
+  let currentBalance = 0;
+  const exportData = data.map((item) => {
+    const credit = item.amount > 0 ? item.amount : 0;
+    const debit = item.amount < 0 ? Math.abs(item.amount) : 0;
+    currentBalance += credit - debit;
+
+    return {
+      Date: item.createdAt ? moment(item.createdAt).format("DD-MMM-YYYY") : "",
+      Description: item.title || "-",     // used only for CSV/Excel
+      Project: item.project?.name || "-",
+      Credit: credit || "",
+      Debit: debit || "",
+      "Finance ID": item.financeUId || "-",
+      Balance: currentBalance,
+    };
+  });
+
+  // Final row
+  exportData.push({
+    Date: "",
+    Description: "Final Balance",
+    Project: "",
+    Credit: "",
+    Debit: "",
+    "Finance ID": "",
+    Balance: currentBalance,
+  });
+
+  switch (type) {
+    case "csv":
+      exportToCSV(exportData, "advance-payments");
+      break;
+
+    case "excel":
+      exportToExcel(exportData, "advance-payments");
+      break;
+
+    case "pdf":
+      // Create a copy of data ONLY for PDF (without Description)
+      const pdfData = exportData.map((row, index) => {
+        // Detect final row
+        const isFinal = index === exportData.length - 1;
+
+        return {
+          Date: isFinal ? "" : row.Date,
+          Project: isFinal ? "Final Balance" : row.Project, 
+          Credit: row.Credit,
+          Debit: row.Debit,
+          "Finance ID": row["Finance ID"],
+          Balance: row.Balance,
+        };
+      });
+
+      exportToPDF(
+        pdfData,
+        "advance-payments",
+        ["Date", "Project", "Credit", "Debit", "Finance ID", "Balance"]
+      );
+      break;
+
+    case "print":
+      if (tableRef?.current) printTable(tableRef.current);
+      break;
+
+    default:
+      break;
+  }
+};
+
+export default handleAdvancePaymentExport;
--- a/src/components/DailyProgressRport/TaskReportFilterPanel.jsx
+++ b/src/components/DailyProgressRport/TaskReportFilterPanel.jsx
@ -39,14 +39,12 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
      dateTo: localToUtc(formData.dateTo),
    };
    handleFilter(filterPayload);
-    closePanel();
  };

  const onClear = () => {
    setResetKey((prev) => prev + 1);
    handleFilter(TaskReportDefaultValue);
    reset(TaskReportDefaultValue);
-    closePanel();
  };
  return (
    <FormProvider {...methods}>
--- a/src/components/DailyProgressRport/TaskReportList.jsx
+++ b/src/components/DailyProgressRport/TaskReportList.jsx
@ -147,13 +147,13 @@ const TaskReportList = () => {
      data-bs-placement="left"
      data-bs-html="true"
      data-bs-content={`
-        <div class="border border-secondary rounded custom-popover p-2 px-3">
+        <div className="border border-secondary rounded custom-popover p-2 px-3">
          ${task.teamMembers
          .map(
            (m) => `
-            <div class="d-flex align-items-center gap-2 mb-2">
-              <div class="avatar avatar-xs">
-                <span class="avatar-initial rounded-circle bg-label-primary">
+            <div className="d-flex align-items-center gap-2 mb-2">
+              <div className="avatar avatar-xs">
+                <span className="avatar-initial rounded-circle bg-label-primary">
                  ${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
              }
                </span>
@ -204,24 +204,34 @@ const TaskReportList = () => {
                  <HoverPopup
                    id="total_pending_task"
                    title="Total Pending Task"
-                    content={<p>This shows the total pending tasks for each activity on that date.</p>}
+                    content={
+                      <div className="text-wrap" style={{ minWidth: "200px" }}>
+                        This shows the total pending tasks for each activity on that date.
+                      </div>
+                    }
                  >
                    <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
                  </HoverPopup>
                </span>
              </th>
+
              <th>
                <span>
                  Reported/Planned{" "}
                  <HoverPopup
                    id="reportes_and_planned_task"
                    title="Reported and Planned Task"
-                    content={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
+                    content={
+                      <div className="text-wrap" style={{ maxWidth: "200px" }}>
+                        This shows the reported versus planned tasks for each activity on that date.
+                      </div>
+                    }
                  >
                    <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
                  </HoverPopup>
                </span>
              </th>
+
              <th>Assign Date</th>
              <th>Team</th>
              <th className="text-center">Actions</th>
--- a/src/components/Dashboard/AttendanceOverview.jsx
+++ b/src/components/Dashboard/AttendanceOverview.jsx
@ -100,7 +100,7 @@ const AttendanceOverview = () => {
  };

  return (
-    <div className="bg-white px-4 rounded shadow d-flex flex-column h-100">
+    <div className="bg-white px-4 rounded shadow d-flex flex-column h-100" style={{ minHeight: "450px" }}>
      {/* Header */}
      <div className="d-flex mt-2 justify-content-between align-items-center mb-3">
        <div className="card-title mb-0 text-start">
--- a/src/components/Dashboard/CollectionOverview.jsx
+++ b/src/components/Dashboard/CollectionOverview.jsx
@ -0,0 +1,345 @@
+import React from "react";
+import Chart from "react-apexcharts";
+import { useGetCollectionOverview } from "../../hooks/useDashboard_Data";
+import { formatFigure } from "../../utils/appUtils";
+
+const CollectionOverview = ({ data, isLoading }) => {
+  const borderColor = "#ddd";
+  const labelColor = "#6c757d";
+
+  // Extract bucket values
+  const labels = ["0–30 Days", "30–60 Days", "60–90 Days", "90+ Days"];
+
+  const amounts = [
+    data.bucket0To30Amount,
+    data.bucket30To60Amount,
+    data.bucket60To90Amount,
+    data.bucket90PlusAmount,
+  ];
+
+  // Colors (Zoho-style distributed)
+  const colors = ["#7367F0", "#00cfe8", "#28c76f", "#ea5455"];
+
+  const options = {
+    chart: {
+      type: "bar",
+      height: 260,
+      toolbar: { show: false },
+    },
+
+    plotOptions: {
+      bar: {
+        horizontal: true,
+        barHeight: "65%",
+        distributed: true,
+        borderRadius: 8,
+        startingShape: "rounded",
+      },
+    },
+
+    colors: colors,
+
+    grid: {
+      borderColor: borderColor,
+      strokeDashArray: 6,
+      padding: { top: -10, bottom: -10 },
+      xaxis: { lines: { show: true } },
+    },
+
+    dataLabels: {
+      enabled: true,
+      formatter: (_, opts) => labels[opts.dataPointIndex],
+      style: {
+        colors: ["#fff"],
+        fontSize: "13px",
+        fontWeight: 500,
+      },
+      offsetX: 0,
+    },
+
+    xaxis: {
+      categories: amounts.map((a) => a),
+      labels: {
+        style: { colors: labelColor, fontSize: "12px" },
+        formatter: (val) => `₹${val.toLocaleString()}`,
+      },
+    },
+
+    yaxis: {
+      labels: {
+        style: {
+          colors: labelColor,
+          fontSize: "13px",
+        },
+        formatter: () => "", // hide duplicate labels
+      },
+    },
+
+    tooltip: {
+      custom: ({ series, seriesIndex, dataPointIndex }) => {
+        return `
+          <div class="px-2 py-1">
+            <strong>${labels[dataPointIndex]}</strong><br>
+            ₹${series[seriesIndex][dataPointIndex].toLocaleString()}
+          </div>
+        `;
+      },
+    },
+
+    legend: { show: false },
+  };
+
+  const series = [
+    {
+      name: "Amount",
+      data: amounts,
+    },
+  ];
+
+  return (
+    <div>
+      <Chart options={options} series={series} type="bar" height={260} />
+    </div>
+  );
+};
+
+export default CollectionOverview;
+export const TopicBarChart = ({ data,isLoading }) => {
+  const data1 = {
+    totalDueAmount: 213590,
+    totalCollectedAmount: 5000,
+    totalValue: 218590,
+    pendingPercentage: 97.71,
+    collectedPercentage: 2.29,
+
+    bucket0To30Invoices: 10,
+    bucket30To60Invoices: 4,
+    bucket60To90Invoices: 2,
+    bucket90PlusInvoices: 1,
+
+    bucket0To30Amount: 2130,
+    bucket30To60Amount: 2003,
+    bucket60To90Amount: 4500,
+    bucket90PlusAmount: 8800,
+
+    topClientBalance: 55300,
+    topClient: {
+      id: "4e3a6d31-c640-40f7-8d67-6c109fcdb9ea",
+      name: "Marco Secure Solutions Ltd.",
+      email: "admin@marcoaiot.com",
+      contactPerson: "Admin",
+      address:
+        "2nd Floor, Fullora Building, Tejas CHS, behind Kothrud Stand, Tejas Society, Dahanukar Colony, Kothrud, Pune, Maharashtra 411038",
+      gstNumber: null,
+      contactNumber: "123456789",
+      sprid: 5400,
+    },
+  };
+
+  const borderColor = "#ddd";
+  const labelColor = "#6c757d";
+
+  // COLORS
+  const config = {
+    colors: {
+      b0: "#7367F0",
+      b30: "#00cfe8",
+      b60: "#28c76f",
+      b90: "#ea5455",
+    },
+  };
+
+  // NEW LABELS (BUCKETS)
+  const chartLabels = ["0–30 Days", "30–60 Days", "60–90 Days", "90+ Days"];
+
+  // NEW VALUES (BUCKET AMOUNT)
+  const chartValues = [
+    data.bucket0To30Amount,
+    data.bucket30To60Amount,
+    data.bucket60To90Amount,
+    data.bucket90PlusAmount,
+  ];
+
+  const options = {
+    chart: {
+      height: 300,
+      type: "bar",
+      toolbar: { show: false },
+    },
+
+    plotOptions: {
+      bar: {
+        horizontal: true,
+        barHeight: "40%",
+        distributed: true,
+        startingShape: "rounded",
+        borderRadius: 7,
+      },
+    },
+
+    grid: {
+      strokeDashArray: 10,
+      borderColor,
+      xaxis: { lines: { show: true } },
+      yaxis: { lines: { show: false } },
+      padding: { top: -35, bottom: -12 },
+    },
+
+    colors: [
+      config.colors.b0,
+      config.colors.b30,
+      config.colors.b60,
+      config.colors.b90,
+    ],
+
+    labels: chartLabels,
+
+    fill: { opacity: 1 },
+
+    dataLabels: {
+      enabled: true,
+      style: {
+        colors: ["#fff"],
+        fontWeight: 400,
+        fontSize: "13px",
+        fontFamily: "Public Sans",
+      },
+      formatter: (_, opts) => chartLabels[opts.dataPointIndex],
+    },
+
+    xaxis: {
+      categories: chartValues.map((x) => formatFigure(x, { type: "currency" })),
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+      labels: {
+        style: {
+          colors: labelColor,
+          fontFamily: "Public Sans",
+          fontSize: "13px",
+        },
+        formatter: (val) => `₹${Number(val).toLocaleString()}`,
+      },
+    },
+
+    yaxis: {
+      labels: {
+        style: {
+          colors: labelColor,
+          fontFamily: "Public Sans",
+          fontSize: "13px",
+        },
+      },
+    },
+
+    tooltip: {
+      enabled: true,
+      custom: ({ series, seriesIndex, dataPointIndex }) => {
+        return `
+          <div class="px-3 py-2">
+            <span>₹${series[seriesIndex][
+              dataPointIndex
+            ].toLocaleString()}</span>
+          </div>
+        `;
+      },
+    },
+
+    legend: { show: false },
+  };
+
+  const series = [
+    {
+      data: chartValues,
+    },
+  ];
+
+  return (
+    <div className="row p-2">
+      <div className="col-md-8">
+        <div class="card-header d-flex align-items-center justify-content-between">
+          <h5 class="card-title m-0 me-2">Collection Overview</h5>
+        </div>
+        <div className="w-100 d-flex align-items-center text-start px-6">
+          <p className="text-secondary fs-6 m-0">Due Amount</p>
+          <span className="ms-2 fs-5">
+            {formatFigure(data.totalDueAmount, { type: "currency" })}
+          </span>
+          <p className="text-secondary fs-6 m-0 ms-1">Collected Amount</p>
+          <span className="ms-2 fs-5">
+            {formatFigure(data.totalCollectedAmount, { type: "currency" })}
+          </span>
+        </div>
+
+        <Chart options={options} series={series} type="bar" height={300} />
+      </div>
+
+      <div className="col-md-4 d-flex flex-column gap-2">
+        <div class="card-header d-flex align-items-end justify-content-between"></div>
+        <div className="p-1  m-1 text-start">
+          {/* <p className="fs-5 fs-5">Top Client</p>
+          <small> {data.topClient.name}</small> */}
+        </div>
+
+        {/* 0–30 Days */}
+        <div
+          className="p-1 rounded-3 text-start mx-1"
+          style={{
+            background: "var(--bs-primary-bg-subtle)",
+            borderLeft: "4px solid var(--bs-primary)",
+            minWidth: "170px",
+          }}
+        >
+          <h5 className="fw-bold mb-0">
+            {formatFigure(data.bucket0To30Amount, { type: "currency" })}
+          </h5>
+          <p className="text-secondary mb-0 small">0–30 Days</p>
+        </div>
+
+        {/* 30–60 Days */}
+        <div
+          className="p-1 rounded-3 text-start mx-1"
+          style={{
+            background: "var(--bs-info-bg-subtle)",
+            borderLeft: "4px solid var(--bs-info)",
+            minWidth: "170px",
+          }}
+        >
+          <h5 className="fw-bold mb-0">
+            {formatFigure(data.bucket30To60Amount, { type: "currency" })}
+          </h5>
+          <p className="text-secondary mb-0 small">30–60 Days</p>
+        </div>
+
+        {/* 60–90 Days */}
+        <div
+          className="p-1 rounded-3 text-start mx-1"
+          style={{
+            background: "var(--bs-warning-bg-subtle)",
+            borderLeft: "4px solid var(--bs-warning)",
+            minWidth: "170px",
+          }}
+        >
+          <h5 className="fw-bold mb-0">
+            {formatFigure(data.bucket60To90Amount, { type: "currency" })}
+          </h5>
+          <p className="text-secondary mb-0 small">60–90 Days</p>
+        </div>
+
+        {/* 90+ Days */}
+        <div
+          className="p-1 rounded-3 text-start mx-1"
+          style={{
+            background: "var(--bs-danger-bg-subtle)",
+            borderLeft: "4px solid var(--bs-danger)",
+            minWidth: "170px",
+          }}
+        >
+          <h5 className="fw-bold mb-0">
+            {formatFigure(data.bucket90PlusAmount, { type: "currency" })}
+          </h5>
+          <p className="text-secondary mb-0 small">90+ Days</p>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/src/components/Dashboard/CollectionOverviewSkeleton.jsx
+++ b/src/components/Dashboard/CollectionOverviewSkeleton.jsx
@ -0,0 +1,40 @@
+
+const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
+  <div
+    className={`skeleton mb-2 ${className}`}
+    style={{ height, width }}
+  ></div>
+);
+export const CollectionOverviewSkeleton = () => {
+  return (
+   <div className="card row p-1">
+
+      {/* LEFT SIDE */} 
+      <div className="col-8">
+        <div className="">
+
+          {/* Header */}
+          <div className="d-flex align-items-center justify-content-between mb-3">
+            <SkeletonLine height={24} width="180px" />
+          </div>
+
+          {/* Due & Collected summary */}
+          <div className="d-flex align-items-center text-start px-6 mb-3">
+            <SkeletonLine height={16} width="100px" className="me-2" />
+            <SkeletonLine height={20} width="120px" className="me-2" />
+            <SkeletonLine height={16} width="120px" className="ms-2 me-2" />
+            <SkeletonLine height={20} width="120px" />
+          </div>
+
+          {/* Chart Skeleton */}
+          <SkeletonLine height={250} width="100%" className="mt-2" />
+
+        </div>
+
+   
+     
+      </div>
+    </div>
+
+  );
+};
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@ -1,10 +1,11 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import {
-    useDashboardProjectsCardData,
-    useDashboardTeamsCardData,
-    useDashboardTasksCardData,
-    useAttendanceOverviewData
+  useDashboardProjectsCardData,
+  useDashboardTeamsCardData,
+  useDashboardTasksCardData,
+  useAttendanceOverviewData,
+  useGetCollectionOverview,
 } from "../../hooks/useDashboard_Data";

 import Projects from "./Projects";
@ -17,66 +18,181 @@ import ExpenseAnalysis from "./ExpenseAnalysis";
 import ExpenseStatus from "./ExpenseStatus";
 import ExpenseByProject from "./ExpenseByProject";
 import ProjectStatistics from "../Project/ProjectStatistics";
+import ServiceJobs from "./ServiceJobs";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import {
+  REGULARIZE_ATTENDANCE,
+  SELF_ATTENDANCE,
+  TEAM_ATTENDANCE,
+} from "../../utils/constants";
+import CollectionOverview, { TopicBarChart } from "./CollectionOverview";
+import { CollectionOverviewSkeleton } from "./CollectionOverviewSkeleton";

 const Dashboard = () => {
+  // Get the selected project ID from Redux store
+  const projectId = useSelector((store) => store.localVariables.projectId);
+  const isAllProjectsSelected = projectId === null;
+  const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
+  const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
+  const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);

-    // Get the selected project ID from Redux store
-    const projectId = useSelector((store) => store.localVariables.projectId);
-    const isAllProjectsSelected = projectId === null;
+  const { data, isLoading, isError } = useGetCollectionOverview();
+  console.log("data-->", data);
+  return (
+    <div className="container-fluid mt-5">
+      <div className="row gy-4">
+        {isAllProjectsSelected && (
+          <div className="col-sm-6 col-lg-4">
+            <Projects />
+          </div>
+        )}

-    return (
-        <div className="container-fluid mt-5">
-            <div className="row gy-4">
-                {isAllProjectsSelected && (
-                    <div className="col-sm-6 col-lg-4">
-                        <Projects />
-                    </div>
-                )}
-
-                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
-                    <Teams />
-                </div>
-
-                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
-                    <TasksCard />
-                </div>
-
-                {isAllProjectsSelected && (
-                    <div className="col-xxl-6 col-lg-6">
-                        <ProjectCompletionChart />
-                    </div>
-                )}
-                <div className="col-xxl-6 col-lg-6">
-                    <ProjectProgressChart />
-                </div>
-                {!isAllProjectsSelected && (
-                    <div className="col-12 col-md-6 mb-sm-0 mb-4">
-                        <AttendanceOverview />
-                    </div>
-                )}
-
-                {!isAllProjectsSelected && (
-                    <div className="col-xxl-4 col-lg-4">
-                        <ProjectStatistics />
-                    </div>
-                )}
-                <div className="col-12 col-xl-4 col-md-6">
-                    <div className="card ">
-                        <ExpenseStatus />
-                    </div>
-                </div>
-
-                <div className="col-12 col-xl-8">
-                    <div className="card h-100">
-                        <ExpenseAnalysis />
-                    </div>
-                </div>
-                <div className="col-12 col-md-6">
-                    <ExpenseByProject />
-                </div>
-            </div>
+        <div
+          className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
+            }`}
+        >
+          <Teams />
        </div>
-    );
+
+        <div
+          className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
+            }`}
+        >
+          <TasksCard />
+        </div>
+        <div className="col-12 col-xl-4 col-md-6">
+          <div className="card ">
+            <ExpenseStatus />
+          </div>
+        </div>
+
+        <div className="col-12 col-xl-8">
+          <div className="card h-100">
+            <ExpenseAnalysis />
+          </div>
+        </div>
+        <div className="col-12 col-md-6">
+          <ExpenseByProject />
+        </div>
+
+        {isAllProjectsSelected && (
+          <div className="col-xxl-6 col-lg-6">
+            <ProjectCompletionChart />
+          </div>
+        )}
+        <div className="col-xxl-6 col-lg-6">
+          <ProjectProgressChart />
+        </div>
+        {!isAllProjectsSelected &&
+          (canRegularize || canTeamAttendance || canSelfAttendance) && (
+            <div className="col-12 col-md-6 mb-sm-0 mb-4">
+              <AttendanceOverview />
+            </div>
+          )}
+
+        {!isAllProjectsSelected && (
+          <div className="col-xxl-4 col-lg-4">
+            <div className="card h-100">
+              <ProjectStatistics />
+            </div>
+          </div>
+        )}
+        {isAllProjectsSelected && (
+          <div className="col-xxl-6 col-lg-6">
+            <ServiceJobs />
+          </div>
+        )}
+        <div className="col-md-8">
+          {isLoading ? (
+            <CollectionOverviewSkeleton />
+          ) : (
+            data && (
+              <div className="card">
+                <TopicBarChart data={data} />
+              </div>
+            )
+          )}
+        </div>
+      </div>
+    </div>
+  );
 };

 export default Dashboard;
+
+//  <div class="col-12 col-xl-8">
+//           <div class="card h-100">
+// <div class="card-header d-flex align-items-center justify-content-between">
+//   <h5 class="card-title m-0 me-2">Topic you are interested in</h5>
+//   <div class="dropdown">
+//     <button
+//       class="btn p-0"
+//       type="button"
+//       id="topic"
+//       data-bs-toggle="dropdown"
+//       aria-haspopup="true"
+//       aria-expanded="false">
+//       <i class="bx bx-dots-vertical-rounded bx-lg text-muted"></i>
+//     </button>
+//     <div class="dropdown-menu dropdown-menu-end" aria-labelledby="topic">
+//       <a class="dropdown-item" href="javascript:void(0);">Highest Views</a>
+//       <a class="dropdown-item" href="javascript:void(0);">See All</a>
+//     </div>
+//   </div>
+// </div>
+//             <div class="card-body row g-3">
+//               <div class="col-md-8">
+//                 <div id="horizontalBarChart"></div>
+//               </div>
+//               <div class="col-md-4 d-flex justify-content-around align-items-center">
+//                 <div>
+//                   <div class="d-flex align-items-baseline">
+//                     <span class="text-primary me-2"><i class="bx bxs-circle bx-12px"></i></span>
+//                     <div>
+//                       <p class="mb-0">UI Design</p>
+//                       <h5>35%</h5>
+//                     </div>
+//                   </div>
+//                   <div class="d-flex align-items-baseline my-12">
+//                     <span class="text-success me-2"><i class="bx bxs-circle bx-12px"></i></span>
+//                     <div>
+//                       <p class="mb-0">Music</p>
+//                       <h5>14%</h5>
+//                     </div>
+//                   </div>
+//                   <div class="d-flex align-items-baseline">
+//                     <span class="text-danger me-2"><i class="bx bxs-circle bx-12px"></i></span>
+//                     <div>
+//                       <p class="mb-0">React</p>
+//                       <h5>10%</h5>
+//                     </div>
+//                   </div>
+//                 </div>
+
+//                 <div>
+//                   <div class="d-flex align-items-baseline">
+//                     <span class="text-info me-2"><i class="bx bxs-circle bx-12px"></i></span>
+//                     <div>
+//                       <p class="mb-0">UX Design</p>
+//                       <h5>20%</h5>
+//                     </div>
+//                   </div>
+//                   <div class="d-flex align-items-baseline my-12">
+//                     <span class="text-secondary me-2"><i class="bx bxs-circle bx-12px"></i></span>
+//                     <div>
+//                       <p class="mb-0">Animation</p>
+//                       <h5>12%</h5>
+//                     </div>
+//                   </div>
+//                   <div class="d-flex align-items-baseline">
+//                     <span class="text-warning me-2"><i class="bx bxs-circle bx-12px"></i></span>
+//                     <div>
+//                       <p class="mb-0">SEO</p>
+//                       <h5>9%</h5>
+//                     </div>
+//                   </div>
+//                 </div>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
--- a/src/components/Dashboard/ExpenseAnalysis.jsx
+++ b/src/components/Dashboard/ExpenseAnalysis.jsx
@ -50,6 +50,11 @@ const ExpenseAnalysis = () => {
    chart: { type: "donut" },
    labels,
    legend: { show: false },
+    tooltip: {
+      y: {
+        formatter: (value) => formatCurrency(value),
+      },
+    },
    dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` },
    colors: flatColors,
    plotOptions: {
@ -127,7 +132,7 @@ const ExpenseAnalysis = () => {
                  options={donutOptions}
                  series={series}
                  type="donut"
-                  width="70%"
+                  width="75%"
                  height={320}
                />
              </div>
--- a/src/components/Dashboard/ServiceJobs.jsx
+++ b/src/components/Dashboard/ServiceJobs.jsx
@ -0,0 +1,159 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useJobsProgression } from "../../hooks/useDashboard_Data";
+import { SpinnerLoader } from "../common/Loader";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { useServiceProject } from "../../hooks/useServiceProject";
+
+const ServiceJobs = () => {
+  const { projectId } = useParams();
+  const { data, isLoading, isError } = useJobsProgression(projectId);
+
+  const jobs = data || {};
+  const { data: projectData, isLoading: projectLoading } = useServiceProject(projectId);
+  const tabMapping = [
+    { id: "tab-new", label: "My Jobs", key: "allJobs" },
+    { id: "tab-preparing", label: "Assigned", key: "assignedJobs" },
+    { id: "tab-shipping", label: "In Progress", key: "inProgressJobs" },
+  ];
+
+  return (
+    <div className="">
+      <div className="card page-min-h">
+        <div className="card-header d-flex justify-content-between">
+          <div className="card-title mb-0 text-start">
+            <h5 className="mb-1 fw-bold">Service Jobs</h5>
+            <p className="card-subtitle">
+              {projectLoading ? "Loading..." : projectData?.name || "All Projects"}
+            </p>
+          </div>
+        </div>
+
+        <div className="card-body p-0">
+          <div className="nav-align-top">
+
+            {/* ---------------- Tabs ---------------- */}
+            <ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
+              {tabMapping.map((t, index) => (
+                <li className="nav-item" key={t.id}>
+                  <button
+                    className={`nav-link ${index === 0 ? "active" : ""}`}
+                    data-bs-toggle="tab"
+                    data-bs-target={`#${t.id}`}
+                  >
+                    {t.label}
+                  </button>
+                </li>
+              ))}
+            </ul>
+
+            {/* ---------------- Tab Content ---------------- */}
+            <div className="tab-content border-0 mx-1 text-start">
+
+              {isLoading && (
+                <div className="text-center" style={{ height: "250px", display: "flex", justifyContent: "center", alignItems: "center" }}>
+                  <SpinnerLoader />
+                </div>
+              )}
+
+
+              {isError && (
+                <p
+                  className="text-center"
+                  style={{
+                    height: "250px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    margin: 0,
+                  }}
+                >
+                  No data found
+                </p>
+
+              )}
+
+              {!isLoading &&
+                !isError &&
+                tabMapping.map((t, index) => {
+                  const list = jobs[t.key] || [];
+
+                  return (
+                    <div
+                      key={t.id}
+                      className={`tab-pane fade ${index === 0 ? "show active" : ""}`}
+                      id={t.id}
+                    >
+                      {list.length === 0 ? (
+                        <p
+                          className="text-center"
+                          style={{
+                            height: "250px",
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            margin: 0,
+                          }}
+                        >
+                          No jobs found
+                        </p>
+
+                      ) : (
+                        <div className="job-scroll-wrapper">
+                          {list.map((job, i) => (
+                            <React.Fragment key={i}>
+                              <ul className="timeline mb-0">
+
+                                {/* Assigned By */}
+                                <li className="timeline-item ps-6 border-left-dashed">
+                                  <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                                    <i className="bx bx-check-circle"></i>
+                                  </span>
+                                  <div className="timeline-event ps-1">
+                                    <div className="timeline-header">
+                                      <small className="text-success text-uppercase">
+                                        Assigned By
+                                      </small>
+                                    </div>
+                                    <h6 className="my-50">{job.assignedBy}</h6>
+                                    <p className="text-body mb-0">
+                                      {formatUTCToLocalTime(job.assignedAt)}
+                                    </p>
+                                  </div>
+                                </li>
+
+                                {/* Project */}
+                                <li className="timeline-item ps-6 border-transparent">
+                                  <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                                    <i className="bx bx-map"></i>
+                                  </span>
+                                  <div className="timeline-event ps-1">
+                                    <div className="timeline-header">
+                                      <small className="text-primary text-uppercase">Project</small>
+                                    </div>
+                                    <h6 className="my-50">{job.project}</h6>
+                                    <p className="text-body mb-0">{job.title}</p>
+                                  </div>
+                                </li>
+                              </ul>
+
+                              {/* Divider */}
+                              {i < list.length - 1 && (
+                                <div className="border-1 border-light border-top border-dashed my-4"></div>
+                              )}
+                            </React.Fragment>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ServiceJobs;
--- a/src/components/Directory/ListViewContact.jsx
+++ b/src/components/Directory/ListViewContact.jsx
@ -99,7 +99,7 @@ const ListViewContact = ({ data, Pagination }) => {
      />
      <div className="card ">
        <div
-          className="card-datatable table-responsive"
+          className="card-datatable table-responsive page-min-h"
          id="horizontal-example"
        >
          <div className="dataTables_wrapper no-footer mx-5 pb-2">
@ -121,7 +121,7 @@ const ListViewContact = ({ data, Pagination }) => {
                  data.map((row, i) => (
                    <tr
                      key={i} 
-                      style={{ background: `${!showActive ? "#f8f6f6" : ""}` }}
+                      style={{height: "50px", background: `${!showActive ? "#f8f6f6" : ""}` }}
                    >
                      {contactList.map((col) => (
                        <td key={col.key} className={col.align}>
--- a/src/components/Directory/NoteCardDirectoryEditable.jsx
+++ b/src/components/Directory/NoteCardDirectoryEditable.jsx
@ -9,6 +9,7 @@ import ConfirmModal from "../common/ConfirmModal"; // Make sure path is correct
 import "../common/TextEditor/Editor.css";
 import GlobalModel from "../common/GlobalModel";
 import { useActiveInActiveNote, useUpdateNote } from "../../hooks/useDirectory";
+import { useDirectoryContext } from "../../pages/Directory/DirectoryPage";

 const NoteCardDirectoryEditable = ({
  noteItem,
@ -22,14 +23,14 @@ const NoteCardDirectoryEditable = ({
  const [isDeleting, setIsDeleting] = useState(false);
  const [isRestoring, setIsRestoring] = useState(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [open_contact, setOpen_contact] = useState(null);
-  const [isOpenModalNote, setIsOpenModalNote] = useState(false);

  const { mutate: UpdateNote, isPending: isUpatingNote } = useUpdateNote(() =>
    setEditing(false)
  );
  const { mutate: ActiveInactive, isPending: isUpdatingStatus } =
    useActiveInActiveNote(() => setIsDeleteModalOpen(false));
+  const { setContactOpen } = useDirectoryContext();
+

  const handleUpdateNote = async () => {
    const payload = {
@ -45,12 +46,6 @@ const NoteCardDirectoryEditable = ({
    ActiveInactive({ noteId: noteItem.id, noteStatus: !noteItem.isActive });
  };

-  const contactProfile = (contactId) => {
-    DirectoryRepository.GetContactProfile(contactId).then((res) => {
-      setOpen_contact(res?.data);
-      setIsOpenModalNote(true);
-    });
-  };

  const handleRestore = async () => {
    try {
@ -88,7 +83,9 @@ const NoteCardDirectoryEditable = ({
            <div>
              <div
                className="d-flex ms-3 align-middle cursor-pointer"
-                onClick={() => contactProfile(noteItem.contactId)}
+                onClick={() =>
+                  setContactOpen({ contact: { id: noteItem.contactId }, Open: true })
+                }
              >
                <span>
                  <span className="fw-bold "> {noteItem?.contactName} </span>{" "}
@ -97,6 +94,7 @@ const NoteCardDirectoryEditable = ({
                  </span>
                </span>
              </div>
+
              <div className="d-flex ms-0 align-middle"></div>
              <div className="d-flex ms-3 mt-2">
                <span className="text-muted">
--- a/src/components/Documents/DocumentsList.jsx
+++ b/src/components/Documents/DocumentsList.jsx
@ -197,7 +197,7 @@ const DocumentsList = ({
              const isRestoring = restoringIds.includes(doc.id);

              return (
-                <tr key={doc.id}>
+                <tr key={doc.id} style={{ height: "50px" }}>
                  {DocumentColumns.map((col) => (
                    <td key={col.key} className={`sorting ${col.align}`}>
                      {col.customRender
--- a/src/components/Employee/EmpAttendance.jsx
+++ b/src/components/Employee/EmpAttendance.jsx
@ -103,6 +103,9 @@ const EmpAttendance = () => {
                  <th className="border-top-1" colSpan={2}>
                    Name
                  </th>
+                  <th className="border-top-1" colSpan={2}>
+                    ProjectName
+                  </th>
                  <th className="border-top-1">Date</th>
                  <th>
                    <i className="bx bxs-down-arrow-alt text-success"></i>{" "}
@ -118,7 +121,7 @@ const EmpAttendance = () => {
              <tbody>
                {currentItems?.map((attendance, index) => (
                  <tr key={index}>
-                    <td colSpan={2}>
+                    <td colSpan={3}>
                      <div className="d-flex justify-content-start align-items-center">
                        <Avatar
                          firstName={attendance.firstName}
@ -133,6 +136,7 @@ const EmpAttendance = () => {
                        </div>
                      </div>
                    </td>
+                    <td>{attendance.projectName}</td>
                    <td>
                      {" "}
                      {moment(attendance.checkInTime).format("DD-MMM-YYYY")}
--- a/src/components/Expenses/ExpenseList.jsx
+++ b/src/components/Expenses/ExpenseList.jsx
@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useDeleteExpense, useExpenseList } from "../../hooks/useExpense";
 import Avatar from "../common/Avatar";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
@ -24,7 +24,7 @@ import ExpenseFilterChips from "./ExpenseFilterChips";
 import { defaultFilter } from "./ExpenseSchema";
 import { useNavigate } from "react-router-dom";

-const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
+const ExpenseList = ({ filters, groupBy = "transactionDate", searchText, tableRef, onDataFiltered }) => {
  const [deletingId, setDeletingId] = useState(null);
  const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const {
@ -47,6 +47,12 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
    debouncedSearch
  );
  
+  useEffect(() => {
+    if (onDataFiltered) {
+      onDataFiltered(data?.data ?? []);
+    }
+  }, [data, onDataFiltered]);
+
  const SelfId = useSelector(
    (store) => store?.globalVariables?.loginUser?.employeeInfo?.id
  );
@ -258,7 +264,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
          groupBy={groupBy}
        />
        <div
-          className="card-datatable table-responsive "
+          className="card-datatable table-responsive" ref={tableRef}
          id="horizontal-example"
        >
          <div className="dataTables_wrapper no-footer px-2 ">
@ -313,8 +319,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                                >
                                  <div
                                    className={`d-flex px-2 ${col.key === "status"
-                                        ? "justify-content-center"
-                                        : ""
+                                      ? "justify-content-center"
+                                      : ""
                                      }
                                 ${col.key === "amount"
                                        ? "justify-content-end"
--- a/src/components/Expenses/Filelist.jsx
+++ b/src/components/Expenses/Filelist.jsx
@ -2,54 +2,53 @@ import React from "react";
 import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
 import Tooltip from "../common/Tooltip";

-const Filelist = ({ files, removeFile, expenseToEdit,sm=6,md=4 }) => {
+const Filelist = ({ files, removeFile, expenseToEdit, sm = 6, md = 4 }) => {
  return (
    <div className="d-flex flex-wrap gap-2 my-1">
-  {files
-    .filter((file) => {
-      if (expenseToEdit) {
-        return file.isActive;
-      }
-      return true;
-    })
-    .map((file, idx) => (
-      <div className={`col-12 col-sm-${sm} col-md-${md} mb-2`} key={idx}>
-        <div className="d-flex align-items-center justify-content-between bg-white border rounded p-1">
-          {/* File icon and info */}
-          <div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
-            <i
-              className={`bx ${getIconByFileType(
-                file?.contentType
-              )} fs-3 `}
-              style={{ minWidth: "30px" }}
-            ></i>
+      {files
+        .filter((file) => {
+          if (expenseToEdit) {
+            return file.isActive;
+          }
+          return true;
+        })
+        .map((file, idx) => (
+          <div className={`col-12 col-sm-${sm} col-md-${md} mb-2`} key={idx}>
+            <div className="d-flex align-items-center justify-content-between bg-white border rounded p-1">
+              {/* File icon and info */}
+              <div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
+                <i
+                  className={`bx ${getIconByFileType(file?.contentType)} fs-3 `}
+                  style={{ minWidth: "30px" }}
+                ></i>

-            <div className="d-flex flex-column text-truncate">
-              <span className="fw-semibold small text-truncate">
-                {file.fileName}
-              </span>
-              <span className="text-body-secondary small">
-                {file.fileSize ? formatFileSize(file.fileSize) : ""}
-              </span>
+                <Tooltip text={file.fileName}>
+                  <div className="d-flex flex-column text-truncate">
+                    <span className="fw-semibold small text-truncate">
+                      {file.fileName}
+                    </span>
+                    <span className="text-body-secondary small">
+                      {file.fileSize ? formatFileSize(file.fileSize) : ""}
+                    </span>
+                  </div>
+                </Tooltip>
+              </div>
+
+              {/* Delete icon */}
+              <Tooltip text="Remove file">
+                <i
+                  className="bx bx-sm bx-trash text-danger fs-4 cursor-pointer ms-2"
+                  role="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    removeFile(expenseToEdit ? file.documentId ?? file.tempId ?? idx : file.tempId ?? idx);
+                  }}
+                ></i>
+              </Tooltip>
            </div>
          </div>
-
-          {/* Delete icon */}
-          <Tooltip text="Remove file">
-            <i
-              className="bx bx-sm bx-trash text-danger fs-4 cursor-pointer ms-2"
-              role="button"
-              onClick={(e) => {
-                e.preventDefault();
-                removeFile(expenseToEdit ? file.documentId : idx);
-              }}
-            ></i>
-          </Tooltip>
-        </div>
-      </div>
-    ))}
-</div>
-
+        ))}
+    </div>
  );
 };

@ -58,13 +57,11 @@ export const FilelistView = ({ files, viewFile }) => {
  return (
    <div className="d-flex flex-wrap gap-2 mt-2">
      {files?.map((file, idx) => (
-        <div className=" bg-white  " key={idx}>
+        <div className=" bg-white " key={idx}>
          <div className="row align-items-center">
            {/* File icon and info */}
            <div className="col-12 d-flex align-items-center gap-2">
-              <i
-                className={`bx ${getIconByFileType(file?.fileName)} fs-3`}
-              ></i>
+              <i className={`bx ${getIconByFileType(file?.fileName)} fs-3`}></i>

              <div
                className="d-flex flex-column text-truncate"
@ -72,7 +69,7 @@ export const FilelistView = ({ files, viewFile }) => {
                  e.preventDefault();
                  viewFile({
                    IsOpen: true,
-                    Image: file.preSignedUrl,
+                    Image: files,
                  });
                }}
              >
@ -93,3 +90,44 @@ export const FilelistView = ({ files, viewFile }) => {
    </div>
  );
 };
+export const FileView = ({ file, viewFile }) => {
+  if (!file) {
+    return (
+      <div className="d-flex justify-content-center align-items-center py-4">
+        <p className="mb-0 text-muted small">No file uploaded</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className=" bg-white ">
+      <div className="row align-items-center">
+        {/* File icon and info */}
+        <div className="col-12 d-flex align-items-center gap-2 ms-n1">
+          <i className={`bx ${getIconByFileType(file?.contentType)} fs-4`}></i>
+
+          <div
+            className="d-flex flex-column text-truncate"
+            onClick={(e) => {
+              e.preventDefault();
+              viewFile({
+                IsOpen: true,
+                Image: file.preSignedUrl,
+              });
+            }}
+          >
+            <span className="text-muted small text-truncate mb-n4">
+              {file.fileName}
+            </span>
+            <span className="text-body-secondary small mt-2">
+              <Tooltip text={"Click on file"}>
+                {" "}
+                {file.fileSize ? formatFileSize(file.fileSize) : ""}
+              </Tooltip>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/src/components/Expenses/ManageExpense.jsx
+++ b/src/components/Expenses/ManageExpense.jsx
@ -237,30 +237,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
      </h5>
      <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
        <div className="row my-2 text-start">         
-          {/* <div className="col-md-6">
-            <Label className="form-label" required>
-              Select Project
-            </Label>
-            <select
-              className="form-select form-select-sm"
-              {...register("projectId")}
-            >
-              <option value="">Select Project</option>
-              {projectLoading ? (
-                <option>Loading...</option>
-              ) : (
-                projectNames?.map((project) => (
-                  <option key={project.id} value={project.id}>
-                    {project.name}
-                  </option>
-                ))
-              )}
-            </select>
-            {errors.projectId && (
-              <small className="danger-text">{errors.projectId.message}</small>
-            )}
-          </div> */}
-          <div className="col-12 col-md-6 mb-2">
+          <div className="col-12 col-md-6">
            <SelectProjectField
              label="Project"
              required
@ -283,7 +260,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
              Expense Category
            </Label>
            <select
-              className="form-select form-select-sm"
+              className="form-select "
              id="expenseCategoryId"
              {...register("expenseCategoryId")}
            >
@ -314,7 +291,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
              Payment Mode
            </Label>
            <select
-              className="form-select form-select-sm"
+              className="form-select "
              id="paymentModeId"
              {...register("paymentModeId")}
            >
@ -338,33 +315,22 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            )}
          </div>
          <div className="col-12 col-md-6 text-start">           
-            {/* <Label className="form-label" required>
-              Paid By{" "}
-            </Label> */}
-            {/* <EmployeeSearchInput
-              control={control}
-              name="paidById"
-              projectId={null}
-              forAll={true}
-            /> */}
-
            <AppFormController
              name="paidById"              
-              
              control={control}
              render={({ field }) => (
                <SelectEmployeeServerSide
                label="Paid By" required
                  value={field.value}
                  onChange={field.onChange}
-                  isFullObject={false} // because using ID
+                  isFullObject={false} 
                />
              )}
            />
          </div>
        </div>

-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mb-4">
          <div className="col-md-6">
            <Label htmlFor="transactionDate" className="form-label" required>
              Transaction Date
@ -374,6 +340,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
              className="w-100"
              control={control}
              maxDate={new Date()}
+              size="md"
            />

            {errors.transactionDate && (
@ -390,7 +357,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            <input
              type="number"
              id="amount"
-              className="form-control form-control-sm"
+              className="form-control "
              min="1"
              step="0.01"
              inputMode="decimal"
@ -402,7 +369,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
          </div>
        </div>

-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mb-4">
          <div className="col-md-6">
            <Label htmlFor="supplerName" className="form-label" required>
              Supplier Name/Transporter Name/Other
@ -410,7 +377,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            <input
              type="text"
              id="supplerName"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("supplerName")}
            />
            {errors.supplerName && (
@ -427,7 +394,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            <input
              type="text"
              id="location"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("location")}
            />
            {errors.location && (
@ -435,7 +402,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            )}
          </div>
        </div>
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mb-4">
          <div className="col-md-6">
            <label htmlFor="statusId" className="form-label ">
              Transaction ID
@ -443,7 +410,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            <input
              type="text"
              id="transactionId"
-              className="form-control form-control-sm"
+              className="form-control "
              min="1"
              {...register("transactionId")}
            />
@ -460,7 +427,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            <input
              type="text"
              id="gstNumber"
-              className="form-control form-control-sm"
+              className="form-control "
              min="1"
              {...register("gstNumber")}
            />
@ -469,13 +436,13 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            )}
          </div>
        </div>
-        <div className="row">
+        <div className="row mb-4">
          <div className="col-md-6 text-start ">
            <Label htmlFor="currencyId" className="form-label" required>
              Select Currency
            </Label>
            <select
-              className="form-select form-select-sm"
+              className="form-select "
              id="currencyId"
              {...register("currencyId")}
            >
@ -497,14 +464,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            )}
          </div>
          {expenseCategory?.noOfPersonsRequired && (
-            <div className="col-md-6  text-start">
+            <div className="col-md-6 text-start">
              <Label className="form-label" required>
                No. of Persons
              </Label>
              <input
                type="number"
                id="noOfPersons"
-                className="form-control form-control-sm"
+                className="form-control "
                {...register("noOfPersons")}
                inputMode="numeric"
              />
@ -517,14 +484,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
          )}
        </div>

-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mb-4">
          <div className="col-md-12">
            <Label htmlFor="description" className="form-label" required>
              Description
            </Label>
            <textarea
              id="description"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("description")}
              rows="2"
            ></textarea>
@ -536,7 +503,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
          </div>
        </div>

-        <div className="row my-2 text-start">
+        <div className="row my-4 text-start">
          <div className="col-md-12">
            <Label className="form-label" required>
              Upload Bill{" "}
--- a/src/components/Expenses/PreviewDocument.jsx
+++ b/src/components/Expenses/PreviewDocument.jsx
@ -1,80 +1,179 @@
-import { useState } from "react";
+import { error } from "pdf-lib";
+import { useState, useRef, useEffect } from "react";

+const PreviewDocument = ({ files = [] }) => {
+  const images = Array.isArray(files) ? files : [files];

-const PreviewDocument = ({ imageUrl }) => {
+  const [index, setIndex] = useState(0);
  const [loading, setLoading] = useState(true);
  const [rotation, setRotation] = useState(0);
  const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+
+  const startPos = useRef({ x: 0, y: 0 });
+
+  const MIN_ZOOM = 0.4;
+  const MAX_ZOOM = 3;
+
+  const currentFile = images[index];
+  const fileUrl = currentFile?.preSignedUrl;
+
+  const isPDF = fileUrl?.toLowerCase().endsWith(".pdf");
+
+  useEffect(() => {
+    setRotation(0);
+    setScale(1);
+    setPosition({ x: 0, y: 0 });
+    setLoading(true);
+  }, [index]);
+
+  const zoomIn = () => !isPDF && setScale((prev) => Math.min(prev + 0.2, MAX_ZOOM));
+  const zoomOut = () => !isPDF && setScale((prev) => Math.max(prev - 0.2, MIN_ZOOM));

-  const zoomIn = () => setScale((prev) => Math.min(prev + 0.2, 3));
-  const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, 0.4));
  const resetAll = () => {
    setRotation(0);
    setScale(1);
+    setPosition({ x: 0, y: 0 });
  };

+  const nextImage = () => {
+    if (index < images.length - 1) setIndex((i) => i + 1);
+  };
+
+  const prevImage = () => {
+    if (index > 0) setIndex((i) => i - 1);
+  };
+
+  const handleMouseDown = (e) => {
+    if (isPDF) return;
+    setDragging(true);
+    startPos.current = {
+      x: e.clientX - position.x,
+      y: e.clientY - position.y,
+    };
+  };
+
+  const handleMouseMove = (e) => {
+    if (!dragging || isPDF) return;
+
+    setPosition({
+      x: e.clientX - startPos.current.x,
+      y: e.clientY - startPos.current.y,
+    });
+  };
+
+  const handleMouseUp = () => setDragging(false);
+
+  const handleDoubleClick = () => !isPDF && resetAll();
+
  return (
    <>
-      <div className="d-flex justify-content-start gap-3 mb-2">
-        <i
-          className="bx bx-rotate-right cursor-pointer fs-4"
-          title="Rotate"
-          onClick={() => setRotation((prev) => prev + 90)}
-        ></i>
-
-        <i
-          className="bx bx-zoom-in cursor-pointer fs-4"
-          title="Zoom In"
-          onClick={zoomIn}
-        ></i>
-
-        <i
-          className="bx bx-zoom-out cursor-pointer fs-4"
-          title="Zoom Out"
-          onClick={zoomOut}
-        ></i>
+      {/* Controls */}
+      <div className="d-flex justify-content-start align-items-center mb-2">
+        <div className="d-flex gap-3">
+          {!isPDF && (
+            <>
+              <i
+                className="bx bx-rotate-right cursor-pointer fs-4"
+                onClick={() => setRotation((prev) => prev + 90)}
+                title="Rotate"
+              />
+              <i
+                className="bx bx-zoom-in cursor-pointer fs-4"
+                onClick={zoomIn}
+                title="Zoom In"
+              />
+              <i
+                className="bx bx-zoom-out cursor-pointer fs-4"
+                onClick={zoomOut}
+                title="Zoom Out"
+              />
+              <i
+                className="bx bx-reset cursor-pointer fs-4"
+                onClick={resetAll}
+                title="Reset"
+              />
+            </>
+          )}
+        </div>
      </div>

      <div
-        className="position-relative d-flex flex-column justify-content-center align-items-center overflow-hidden"
-        style={{ minHeight: "80vh" }}
-      >
-        {loading && (
-          <div className="text-secondary text-center mb-2">
-            Loading...
-          </div>
-        )}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        onDoubleClick={handleDoubleClick}
+        className="position-relative d-flex justify-content-center align-items-center bg-light-secondary overflow-hidden"
+        style={{
+          minHeight: "70vh",
          
-        <div className="mb-3 d-flex justify-content-center align-items-center">
-          <img
-            src={imageUrl}
-            alt="Full View"
-            className="img-fluid"
+          userSelect: "none",
+          borderRadius: "10px",
+        }}
+      >
+        {loading && <div className="text-secondary">Loading...</div>}
+
+        {/* PDF VIEW */}
+        {isPDF ? (
+          <iframe
+            src={"./Expenses.pdf"}
+            title="PDF Preview"
            style={{
-              maxHeight: "80vh",
-              objectFit: "contain",
+              width: "100%",
+              height: "70vh",
+              border: "none",
+            }}
+            onLoad={() => setLoading(false)}
+            onError={(error)=>{
+              console.log(error)
+            }}
+          />
+        ) : (
+          /* IMAGE VIEW */
+          <img
+            src={fileUrl}
+            alt="Preview"
+            draggable="false"
+            style={{
+              maxHeight: "60vh",
              display: loading ? "none" : "block",
-              transform: `rotate(${rotation}deg) scale(${scale})`,
-              transition: "transform 0.3s ease",
-              cursor: "grab",
+              transform: `
+                translate(${position.x}px, ${position.y}px)
+                scale(${scale})
+                rotate(${rotation}deg)
+              `,
+              transition: dragging ? "none" : "transform 0.2s ease",
+              cursor: dragging ? "grabbing" : "grab",
            }}
            onLoad={() => setLoading(false)}
          />
-        </div>
+        )}
+      </div>

-        <div className="position-absolute bottom-0 start-0 m-2">
-          <button
-            className="btn btn-outline-secondary"
-            onClick={resetAll}
-          >
-            <i className="bx bx-reset"></i> Reset
-          </button>
+
+
+      <div className="d-flex justify-content-between">
+        <div className="text-center text-muted mt-2 small">
+          Scroll = change file | Double click = reset (images only)
+        </div>
+        <div className="d-flex align-items-center gap-2">
+          <i
+            className="bx bx-chevron-left cursor-pointer fs-4"
+            onClick={prevImage}
+          />
+          <span>
+            {index + 1} / {images.length}
+          </span>
+          <i
+            className="bx bx-chevron-right cursor-pointer fs-4"
+            onClick={nextImage}
+          />
        </div>
      </div>
    </>
  );
 };

-
-
 export default PreviewDocument;
--- a/src/components/Expenses/ViewExpense.jsx
+++ b/src/components/Expenses/ViewExpense.jsx
@ -390,12 +390,10 @@ const tdsPercentage = Number(watch("tdsPercentage")) || 0;
                      key={doc.documentId}
                      className="d-flex align-items-center cusor-pointer"
                      onClick={() => {
-                        if (isImage) {
                          setDocumentView({
                            IsOpen: true,
-                            Image: doc.preSignedUrl,
+                            Images: data?.documents,
                          });
-                        }
                      }}
                    >
                      <i
--- a/src/components/InfoBlock/WarningBlock.jsx
+++ b/src/components/InfoBlock/WarningBlock.jsx
@ -0,0 +1,16 @@
+import React from 'react'
+
+const WarningBlock = ({content}) => {
+  return (
+        <div className="col-12 my-1">
+            <div className="d-flex align-items-center gap-2 p-3 rounded bg-warning bg-opacity-10 border border-warning-subtle text-start align-item-start">
+              <i className="bx bx-info-circle text-warning fs-5"></i>
+              <p className="mb-0  small">
+              {content}
+              </p>
+            </div>
+          </div>
+  )
+}
+
+export default WarningBlock
--- a/src/components/Layout/Sidebar.jsx
+++ b/src/components/Layout/Sidebar.jsx
@ -25,20 +25,28 @@ const Sidebar = () => {
            />
          </span> */}

-          <small
-            className="app-brand-link fw-bold navbar-brand text-green fs-6"
+          <a
+            href="/"
+            className="app-brand-link d-flex align-items-center gap-1 fw-bold navbar-brand "
          >
-            <span className="app-brand-logo demo">
-              <img src="/img/brand/marco.png" width="50" />
+            <span className="app-brand-logo demo d-flex align-items-center">
+              <img
+                src="/img/brand/marco.png"
+                width="40"
+                height="40"
+                alt="OnFieldWork logo"
+              />
            </span>
-            <span className="text-blue">OnField</span>
-            <span>Work</span>
-            <span className="text-dark">.com</span>
-          </small>
+
+            <span className="app-brand-text">
+              <span className="text-primary ">OnField</span>
+              <span className="mx-1">Work</span>
+              <span className="text-dark">.com</span>
+            </span>
+          </a>
        </Link>

-       <small className="layout-menu-toggle menu-link text-large ms-auto">
-
+        <small className="layout-menu-toggle menu-link text-large ms-auto cursor-pointer">
          <i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
        </small>
      </div>
@ -61,7 +69,7 @@ const Sidebar = () => {
          </>
        )}
        {data &&
-          data?.data.map((section) => (
+          data?.data?.map((section) => (
            <React.Fragment
              key={section.id || section.header || section.items[0]?.id}
            >
--- a/src/components/Organization/AssignOrg.jsx
+++ b/src/components/Organization/AssignOrg.jsx
@ -96,11 +96,11 @@ const AssignOrg = ({ setStep }) => {
        <div className="d-flex justify-content-between align-items-center text-start mb-1">
          <div className="d-flex flex-row gap-2 align-items-center text-wrap">
            <img
-                    src="/public/assets/img/orgLogo.png"
-                    alt="logo"
-                    width={40}
-                    height={40}
-                  />  <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
+              src="/public/assets/img/orgLogo.png"
+              alt="logo"
+              width={40}
+              height={40}
+            />  <p className="fw-semibold fs-5 mt-2 m-0">{orgData.name}</p>
          </div>
          <div className="text-end">
            <button
@ -113,60 +113,60 @@ const AssignOrg = ({ setStep }) => {
          </div>
        </div>
      </div>
-      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
+      <div className="d-flex text-secondary mb-3"> <i className="bx bx-sm bx-info-circle me-2" /> Organization Info</div>
      {/* Contact Info */}
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-4">
        <div className="d-flex">
          <label
            className="form-label me-2 mb-0 fw-semibold"
            style={{ minWidth: "130px" }}
          >
-           <i className="bx bx-sm bx-user me-1" /> Contact Person :
+            <i className="bx bx-sm bx-user me-1" /> Contact Person :
          </label>
          <div className="text-muted">{orgData.contactPerson}</div>
        </div>
      </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-4">
        <div className="d-flex">
          <label
            className="form-label me-2 mb-0 fw-semibold"
            style={{ minWidth: "130px" }}
          >
-           <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
+            <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
          </label>
          <div className="text-muted">{orgData.contactNumber}</div>
        </div>
      </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-4">
        <div className="d-flex">
          <label
            className="form-label me-2 mb-0 fw-semibold"
            style={{ minWidth: "130px" }}
          >
-          <i className='bx bx-sm me-1 bx-envelope'></i>  Email Address :
+            <i className='bx bx-sm me-1 bx-envelope'></i>  Email Address :
          </label>
-          <div className="text-muted">{orgData.email}</div>
+          <div className="text-muted text-wrap">{orgData.email}</div>
        </div>
      </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-4">
        <div className="d-flex">
          <label
            className="form-label me-2 mb-0 fw-semibold"
            style={{ maxWidth: "130px" }}
          >
-          <i className="bx bx-sm me-1 bx-barcode"></i>
-  Service Provider Id (SPRID) :
+            <i className="bx bx-sm me-2 bx-barcode"></i>
+            Service Provider Id (SPRID) :
          </label>
          <div className="text-muted">{orgData.sprid}</div>
        </div>
      </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-4">
        <div className="d-flex">
          <label
            className="form-label me-1 mb-0 fw-semibold"
            style={{ minWidth: "130px" }}
          >
-           <i className='bx bx-sm me-1 bx-map'></i> Address :
+            <i className='bx bx-sm me-1 bx-map'></i> Address :
          </label>
          <div className="text-muted text-start">{orgData.address}</div>
        </div>
--- a/src/components/Organization/ManagOrg.jsx
+++ b/src/components/Organization/ManagOrg.jsx
@ -189,7 +189,7 @@ const ManagOrg = () => {
          )}
        </div>

-        <div className="d-flex justify-content-between gap-2 my-2">
+        <div className="d-flex justify-content-between gap-2 my-5">
          <button
            type="button"
            className="btn btn-sm btn-outline-secondary"
--- a/src/components/Organization/OrgPickerFromSPId.jsx
+++ b/src/components/Organization/OrgPickerFromSPId.jsx
@ -45,7 +45,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
  return (
    <div className="d-block mt-4">
      <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="row align-items-center g-2">
+        <div className="row align-items-center g-2 mb-3">
          {/* Input Section */}
          <div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start">
            <Label className="text-nowrap mb-1 mb-md-0" required>
@ -88,7 +88,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
        <div className="py-2 text-tiny text-center">
          <div className="d-flex flex-column gap-2 border-0 bg-none">
            {data.data.map((org) => (
-              <div className="d-flex flex-row gap-2 text-start text-black ">
+              <div className="d-flex flex-row gap-2 text-start text-black mt-3">
                <div className="mt-1">
                  <img
                    src="/public/assets/img/orgLogo.png"
@ -97,19 +97,19 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
                    height={50}
                  />
                </div>
-                <div className="d-flex flex-column p-0 m-0 cursor-pointer">
-                  <span className="fs-6 fw-semibold">{org.name}</span>
+                <div className="d-flex flex-column p-0 m-0 cursor-pointer mb-3">
+                  <span className="fs-6 fw-semibold mb-2">{org.name}</span>
                  <div className="d-flex gap-2">
                    <small
-                      className=" fw-semibold text-uppercase"
+                      className=" fw-semibold text-uppercase mb-2"
                      style={{ letterSpacing: "1px" }}
                    >
                      SPRID :{" "}
                    </small>
                    <small className="fs-6">{org.sprid}</small>
                  </div>
-                  <div className="d-flex flex-row gap-2">
-                    <small className="text-small fw-semibold">Address:</small>
+                  <div className="d-flex flex-row gap-2 mb-4">
+                    <small className="text-small fw-semibold ">Address:</small>
                    <div className="d-flex text-wrap">{org.address}</div>
                  </div>
                  <div className="m-0 p-0">
--- a/src/components/Organization/OrgPickerfromTenant.jsx
+++ b/src/components/Organization/OrgPickerfromTenant.jsx
@ -43,7 +43,7 @@ const OrgPickerfromTenant = ({ title }) => {
      label: "Name",
      getValue: (org) => (
        <div className="d-flex gap-2 py-1 ">
-          <i class="bx bx-buildings"></i>
+          <i className="bx bx-buildings"></i>
          <span
            className="text-truncate d-inline-block "
            style={{ maxWidth: "150px" }}
@ -126,7 +126,7 @@ const OrgPickerfromTenant = ({ title }) => {
                              onOpen({ startStep: 3, orgData: row })
                            }
                          >
-                            <i class='bx bx-right-arrow-circle text-primary'></i>
+                            <i className='bx bx-right-arrow-circle text-primary'></i>
                          </span>
                        </div>
                      </td>
--- a/src/components/Organization/OrganizationsList.jsx
+++ b/src/components/Organization/OrganizationsList.jsx
@ -122,6 +122,7 @@ const OrganizationsList = ({searchText}) => {
                    {organizationsColumns.map((col) => (
                      <td
                        key={col.key}
+                        style={{ height: "50px" }}
                        className={`d-table-cell ${col.align ?? ""}`}
                      >
                        {col.customRender
--- a/src/components/Organization/ViewOrganization.jsx
+++ b/src/components/Organization/ViewOrganization.jsx
@ -9,7 +9,7 @@ const VieworgDataanization = ({ orgId }) => {
  return (
    <div className="row text-black  text-black text-start ">
      {/* Header */}
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-5">
        <div className="d-flex justify-content-between align-items-center text-start mb-1">
          <div className="d-flex flex-row gap-2 align-items-center text-wrap">
            <img
@ -18,7 +18,7 @@ const VieworgDataanization = ({ orgId }) => {
              width={40}
              height={40}
            />{" "}
-            <p className="fw-semibold fs-6 m-0">{data?.name}</p>
+            <p className="fw-semibold fs-5 mt-2 m-0">{data?.name}</p>
          </div>
          <div className="text-end">
            <span
@ -30,12 +30,12 @@ const VieworgDataanization = ({ orgId }) => {
          </div>
        </div>
      </div>
-      <div className="d-flex text-secondary mb-2">
+      <div className="d-flex text-secondary mb-5">
        {" "}
        <i className="bx bx-sm bx-info-circle me-1" /> Organization Info
      </div>
      {/* Contact Info */}
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-5">
        <div className="d-flex">
          <label
            className="form-label me-2 mb-0 fw-semibold"
@ -46,7 +46,7 @@ const VieworgDataanization = ({ orgId }) => {
          <div className="text-muted">{data?.contactPerson}</div>
        </div>
      </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-5">
        <div className="d-flex">
          <label
            className="form-label me-2 mb-0 fw-semibold"
@ -57,7 +57,7 @@ const VieworgDataanization = ({ orgId }) => {
          <div className="text-muted">{data?.contactNumber}</div>
        </div>
      </div>
-      <div className="col-md-12 mb-3">
+      <div className="col-md-12 mb-5">
        <div className="d-flex">
          <label
            className="form-label me-2 mb-0 fw-semibold"
@ -68,32 +68,32 @@ const VieworgDataanization = ({ orgId }) => {
          <div className="text-muted">{data?.email}</div>
        </div>
      </div>
-      <div className="col-6 mb-3">
+      <div className="col-12 mb-5">
        <div className="d-flex">
          <label
            className="form-label me-2 mb-0 fw-semibold"
            style={{ maxWidth: "130px" }}
          >
-            <i className="bx bx-sm me-1 bx-barcode"></i>
+            <i className="bx bx-sm me-2 bx-barcode"></i>
            Service Provider Id (SPRID) :
          </label>
          <div className="text-muted">{data?.sprid}</div>
        </div>
      </div>

-      <div className="col-6 mb-3">
+      <div className="col-12 mb-5">
        <div className="d-flex">
          <label
            className="form-label me-2 mb-0 fw-semibold"
            style={{ maxWidth: "130px" }}
          >
-            <i className="bx bx-sm me-1 bx-group"></i>
+            <i className="bx bx-sm me-2 bx-group"></i>
            Employees :
          </label>
          <div className="text-muted">{data?.activeEmployeeCount}</div>
        </div>
      </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-5">
        <div className="d-flex">
          <label
            className="form-label me-1 mb-0 fw-semibold"
@ -104,7 +104,7 @@ const VieworgDataanization = ({ orgId }) => {
          <div className="text-muted text-start">{data?.address}</div>
        </div>
      </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-5">
        <div
          className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
          data-bs-toggle="collapse"
@ -162,7 +162,7 @@ const VieworgDataanization = ({ orgId }) => {
      </div>

      {/* Services Section */}
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-5">
        <div
          className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
          data-bs-toggle="collapse"
@ -180,7 +180,7 @@ const VieworgDataanization = ({ orgId }) => {
          {data?.services && data.services.length > 0 ? (
            <div className="row">
              {data.services.map((service) => (
-                <div key={service.id} className="col-md-12 mb-3">
+                <div key={service.id} className="col-md-12 mb-5">
                  <div className="card h-100 shadow-sm border-0">
                    <div className="card-body">
                      <h6 className="fw-semibold mb-1">
--- a/src/components/PaymentRequest/ActionPaymentRequest.jsx
+++ b/src/components/PaymentRequest/ActionPaymentRequest.jsx
@ -191,16 +191,16 @@ const ActionPaymentRequest = ({ requestId }) => {
      {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
        <>
          {isProccesed ? (
-            <div class="accordion-item active shadow-none">
-              <h2 class="accordion-header d-flex align-items-center">
+            <div className="accordion-item active shadow-none">
+              <h2 className="accordion-header d-flex align-items-center">
                <button
                  type="button"
-                  class="accordion-button"
+                  className="accordion-button"
                  data-bs-toggle="collapse"
                  data-bs-target="#accordionWithIcon-1"
                  aria-expanded="true"
                >
-                  <i class="icon-base bx bx-receipt me-2"></i>
+                  <i className="icon-base bx bx-receipt me-2"></i>
                  Make Expense
                </button>
              </h2>
--- a/src/components/PaymentRequest/ManagePaymentRequest.jsx
+++ b/src/components/PaymentRequest/ManagePaymentRequest.jsx
@ -239,7 +239,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
              Select Project
            </Label> */}
            {/* <select
-              className="form-select form-select-sm"
+              className="form-select "
              {...register("projectId")}
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@ -282,7 +282,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
              Expense Category
            </Label>
            <select
-              className="form-select form-select-sm"
+              className="form-select "
              id="expenseCategoryId"
              {...register("expenseCategoryId")}
              disabled={
@ -311,7 +311,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
        </div>

        {/* Title and Advance Payment  */}
-        <div className="row my-2 text-start">
+        <div className="row mt-n2 text-start">
          <div className="col-md-6">
            <Label htmlFor="title" className="form-label" required>
              Title
@ -319,7 +319,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            <input
              type="text"
              id="title"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("title")}
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@ -330,7 +330,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            )}
          </div>

-          <div className="col-md-6 ">
+          <div className="col-md-6">
            <Label htmlFor="isAdvance" className="form-label">
              Is Advance Payment
            </Label>
@ -343,7 +343,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
              }
              render={({ field }) => (
-                <div className="d-flex align-items-center gap-3">
+                <div className="d-flex align-items-center gap-3 mt-3">
                  <div className="form-check d-flex flex-row m-0 gap-2">
                    <input
                      type="radio"
@ -387,6 +387,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
              control={control}
              minDate={new Date()}
              className="w-100"
+              size="md"
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
              }
@ -404,7 +405,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            <input
              type="number"
              id="amount"
-              className="form-control form-control-sm"
+              className="form-control "
              min="1"
              step="0.01"
              inputMode="decimal"
@ -429,6 +430,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                setValue("payee", val, { shouldValidate: true })
              }
              error={errors.payee?.message}
+              size="md"
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
              }
@ -458,7 +460,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            </Label>
            <select
              id="currencyId"
-              className="form-select form-select-sm"
+              className="form-select "
              {...register("currencyId")}
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@ -490,7 +492,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            </Label>
            <textarea
              id="description"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("description")}
              rows="2"
              disabled={
--- a/src/components/PaymentRequest/PaymentRequestList.jsx
+++ b/src/components/PaymentRequest/PaymentRequestList.jsx
@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
  EXPENSE_DRAFT,
  EXPENSE_REJECTEDBY,
@ -22,7 +22,7 @@ import Error from "../common/Error";
 import Pagination from "../common/Pagination";
 import PaymentRequestFilterChips from "./PaymentRequestFilterChips";

-const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter, search, groupBy = "submittedBy" }) => {
+const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter, search, groupBy = "submittedBy", tableRef, onDataFiltered }) => {
  const { setManageRequest, setVieRequest } = usePaymentRequestContext();
  const navigate = useNavigate();
  const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@ -30,6 +30,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
  const SelfId = useSelector(
    (store) => store?.globalVariables?.loginUser?.employeeInfo?.id
  );
+
  const groupByField = (items, field) => {
    return items.reduce((acc, item) => {
      let key;
@ -149,6 +150,12 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
      debouncedSearch
    );

+  useEffect(() => {
+    if (onDataFiltered) {
+      onDataFiltered(data?.data ?? []);
+    }
+  }, [data, onDataFiltered]);
+
  if (isError) {
    return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
  }
@ -222,7 +229,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
          paramData={deletingId}
        />
      )}
-      <div className="card page-min-h table-responsive px-sm-4">
+      <div className="card page-min-h table-responsive px-sm-4" ref={tableRef}>
        <div className="card-datatable mx-2" id="payment-request-table ">
          <div className="col-12 mb-2 mt-2">
            <PaymentRequestFilterChips
@ -240,7 +247,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
                    {col.label}
                  </th>
                ))}
-                <th className="text-center">Action</th>
+                <th className="text-start">Action</th>
              </tr>
            </thead>

@ -262,7 +269,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
                      </td>
                    </tr>
                    {items?.map((paymentRequest) => (
-                      <tr key={paymentRequest.id}  style={{ height: "40px" }}>
+                      <tr key={paymentRequest.id} style={{ height: "40px" }}>
                        {paymentRequestColumns.map(
                          (col) =>
                            (col.isAlwaysVisible || groupBy !== col.key) && (
@ -300,7 +307,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
                                    data-bs-toggle="tooltip"
                                    data-bs-offset="0,8"
                                    data-bs-placement="top"
-                                    data-bs-custom-class="tooltip-dark"
+                                    data-bs-custom-className="tooltip-dark"
                                    title="More Action"
                                  ></i>
                                </button>
--- a/src/components/PaymentRequest/handleExpenseExport.jsx
+++ b/src/components/PaymentRequest/handleExpenseExport.jsx
@ -0,0 +1,85 @@
+import ExpenseRepository from "../../repositories/ExpsenseRepository";
+import moment from "moment";
+import { exportToCSV, exportToExcel, exportToPDF, printTable } from "../../utils/tableExportUtils";
+import showToast from "../../services/toastService";
+
+const HandleExpenseExport = async (
+  type,
+  filters = {},
+  searchString = "",
+  tableRef = null,
+  setLoading = null
+) => {
+  try {
+    if (setLoading) setLoading(true);
+
+    const safeSearchString = typeof searchString === "string" ? searchString : "";
+    let allExpenses = [];
+    let pageNumber = 1;
+    const pageSize = 1000; // fetch 1000 per API call
+    let hasMore = true;
+
+    while (hasMore) {
+      const response = await ExpenseRepository.GetExpenseList(
+        pageSize,
+        pageNumber,
+        filters,
+        safeSearchString
+      );
+
+      const currentPageData = response?.data?.data || [];
+      allExpenses = allExpenses.concat(currentPageData);
+
+      // If returned data length is less than pageSize, we reached the last page
+      if (currentPageData.length < pageSize) {
+        hasMore = false;
+      } else {
+        pageNumber += 1; // fetch next page
+      }
+    }
+
+    if (!allExpenses.length) {
+      showToast("No expenses found!", "warning");
+      return;
+    }
+
+    // Map export data
+    const exportData = allExpenses.map((item) => ({
+      "Expense ID": item?.expenseUId ?? "-",
+      "Expense Category": item?.expenseCategory?.name ?? "-",
+      "Payment Mode": item?.paymentMode?.name ?? "-",
+      "Submitted By": `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim() || "-",
+      "Submitted": item?.createdAt ? moment(item.createdAt).format("DD-MMM-YYYY") : "-",
+      "Amount": item?.amount != null
+        ? `${item.amount.toLocaleString()} ${item.currency?.currencyCode ?? ""}`
+        : "-",
+      "Status": item?.status?.name ?? "-",
+    }));
+
+
+    switch (type) {
+      case "csv":
+        exportToCSV(exportData, "Expenses");
+        break;
+      case "excel":
+        exportToExcel(exportData, "Expenses");
+        break;
+      case "pdf":
+        exportToPDF(exportData, "Expenses");
+        break;
+      case "print":
+        if (tableRef?.current) printTable(tableRef.current);
+        break;
+      default:
+        console.warn("Unknown export type:", type);
+    }
+
+  } catch (err) {
+    console.error(err);
+    showToast("Failed to export expenses", "error");
+  } finally {
+    if (setLoading) setLoading(false);
+  }
+};
+
+export default HandleExpenseExport;
--- a/src/components/PaymentRequest/handlePaymentRequestExport.jsx
+++ b/src/components/PaymentRequest/handlePaymentRequestExport.jsx
@ -0,0 +1,84 @@
+import moment from "moment";
+import { exportToCSV, exportToExcel, exportToPDF, printTable } from "../../utils/tableExportUtils";
+import ExpenseRepository from "../../repositories/ExpsenseRepository";
+
+const HandlePaymentRequestExport = async (
+  type,
+  filters = {},
+  searchString = "",
+  tableRef = null,
+  setLoading = null
+) => {
+  try {
+    if (setLoading) setLoading(true);
+
+    const safeSearchString = typeof searchString === "string" ? searchString : "";
+    let allPaymentRequest = [];
+    let pageNumber = 1;
+    const pageSize = 1000;
+    let hasMore = true;
+
+    while (hasMore) {
+      const response = await ExpenseRepository.GetPaymentRequestList(
+        pageSize,
+        pageNumber,
+        filters,
+        true, // isActive
+        safeSearchString
+      );
+
+      const currentPageData = response?.data?.data || [];
+      allPaymentRequest = allPaymentRequest.concat(currentPageData);
+
+      if (currentPageData.length < pageSize) {
+        hasMore = false;
+      } else {
+        pageNumber += 1;
+      }
+    }
+
+    if (!allPaymentRequest.length) {
+      console.warn("No payment requests found!");
+      return;
+    }
+
+    const exportData = allPaymentRequest.map((item) => ({
+      "Request ID": item?.paymentRequestUID ?? "-",
+      "Title": item?.title ?? "-",
+      "Payee": item?.payee ?? "-",
+      "Amount": item?.amount != null ? Number(item.amount).toLocaleString() : "-",
+      "Currency": item?.currency?.currencyCode ?? "-",
+      "Created At": item?.createdAt ? moment(item.createdAt).format("DD-MMM-YYYY") : "-",
+      "Due Date": item?.dueDate ? moment(item.dueDate).format("DD-MMM-YYYY") : "-",
+      "Status": item?.expenseStatus?.name ?? "-",
+      "Submitted By": `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim() || "-",
+      "Project": item?.project?.name ?? "-",
+    }));
+
+    switch (type) {
+      case "csv":
+        exportToCSV(exportData, "PaymentRequests");
+        break;
+      case "excel":
+        exportToExcel(exportData, "PaymentRequests");
+        break;
+      case "pdf":
+        exportToPDF(exportData, "PaymentRequests");
+        break;
+      case "print":
+        if (tableRef?.current) printTable(tableRef.current);
+        break;
+      default:
+        console.warn("Unknown export type:", type);
+    }
+
+  } catch (err) {
+    console.error("Export failed:", err);
+  } finally {
+    if (setLoading) setLoading(false);
+  }
+};
+
+
+
+export default HandlePaymentRequestExport;
--- a/src/components/Project/Infrastructure/BuildingModel.jsx
+++ b/src/components/Project/Infrastructure/BuildingModel.jsx
@ -100,7 +100,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {

  return (
    <form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
-      <h5 className="text-center mb-2">Manage Buildings </h5>
+      <h5 className="text-center mb-2">Manage Buildings</h5>
      <div className="col-12 text-start">
        <label className="form-label">Select Building</label>
        <select
@ -150,7 +150,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
        )}
      </div>

-      <div className="col-12 text-end mt-5">
+      <div className="col-12 text-end mt-6 my-2">
        <button
          type="reset"
          className="btn btn-sm btn-label-secondary me-3"
--- a/src/components/Project/Infrastructure/EditActivityModal.jsx
+++ b/src/components/Project/Infrastructure/EditActivityModal.jsx
@ -17,7 +17,7 @@ const taskSchema = z
  .object({
    activityID: z.string().min(1, "Activity is required"),
    workCategoryId: z.string().min(1, "Work Category is required"),
-    plannedWork: z.number().min(1, "Planned Work must be greater than 0"),
+    plannedWork: z.number().min(0.01, "Planned Work must be greater than 0"),
    completedWork: z.number().min(0, "Completed Work must be ≥ 0"),
    comment: z.string(),
  })
@ -107,6 +107,7 @@ const EditActivityModal = ({
  const onSubmitForm = (data) => {
    const payload = {
      ...data,
+       plannedWork: Number(data.plannedWork.toFixed(2)),
      id: workItem?.workItem?.id ?? workItem?.id,
      buildingID: building?.id,
      floorId: floor?.id,
@ -220,8 +221,10 @@ const EditActivityModal = ({
        <input
          {...register("plannedWork", { valueAsNumber: true })}
          type="number"
+          step="0.01"   // <-- allows 2 decimal places
          className="form-control form-control-sm"
        />
+
        {errors.plannedWork && (
          <p className="danger-text">{errors.plannedWork.message}</p>
        )}
--- a/src/components/Project/Infrastructure/FloorModel.jsx
+++ b/src/components/Project/Infrastructure/FloorModel.jsx
@ -163,7 +163,7 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
        </>
      )}

-      <div className="col-12 text-end mt-5">
+      <div className="col-12 text-end mt-6 my-2">
         <button
          type="button"
          className="btn btn-sm btn-label-secondary me-3"
--- a/src/components/Project/Infrastructure/TaskModel.jsx
+++ b/src/components/Project/Infrastructure/TaskModel.jsx
@ -348,7 +348,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
        </div>
      )}

-      <div className="col-12 text-end mt-5">
+      <div className="col-12 text-end mt-6 my-2">
        <button
          type="button"
          className="btn btn-sm btn-label-secondary me-3"
--- a/src/components/Project/Infrastructure/WorkAreaModel.jsx
+++ b/src/components/Project/Infrastructure/WorkAreaModel.jsx
@ -187,7 +187,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
          </div>
        </>
      )}
-      <div className="col-12 text-end mt-5">
+      <div className="col-12 text-end mt-6 my-2">
        <button type="button" className="btn btn-sm btn-label-secondary me-3" disabled={isPending} onClick={onClose}>
          Cancel
        </button>
--- a/src/components/Project/ProjectInfra.jsx
+++ b/src/components/Project/ProjectInfra.jsx
@ -199,7 +199,7 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
                    serviceId={selectedService}
                  />
                ) : (
-                  <div className="text-center py-5">
+                  <div className="text-center py-12">
                    <p className="text-muted fs-6">No infrastructure data available.</p>
                  </div>
                )}
--- a/src/components/Project/ProjectNav.jsx
+++ b/src/components/Project/ProjectNav.jsx
@ -27,6 +27,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {

  const ProjectTab = [
    { key: "profile", icon: "bx bx-user", label: "Profile" },
+    { key: "organization", icon: "bx bx-buildings", label: "Organization" },
    { key: "teams", icon: "bx bx-group", label: "Teams" },
    {
      key: "infra",
@ -41,7 +42,7 @@ const ProjectNav = ({ onPillClick, activePill }) => {
      hidden: !(DirAdmin || DireManager || DirUser),
    },
    { key: "documents", icon: "bx bx-folder-open", label: "Documents", hidden: !(isViewDocuments || isModifyDocument || isUploadDocument) },
-    { key: "organization", icon: "bx bx-buildings", label: "Organization" },
+    
    { key: "setting", icon: "bx bxs-cog", label: "Setting", hidden: !isManageTeam },
  ];
  return (
--- a/src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx
+++ b/src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx
@ -15,7 +15,7 @@ const ProjectAssignedOrgs = () => {
      label: "Organization Name",
      getValue: (org) => (
        <div className="d-flex gap-2 py-1 ">
-          <i class="bx bx-buildings"></i>
+          <i className="bx bx-buildings"></i>
          <span
            className="text-truncate d-inline-block "
            style={{ maxWidth: "150px" }}
@ -103,7 +103,7 @@ const ProjectAssignedOrgs = () => {
          <tbody>
            {Array.isArray(data) && data.length > 0 ? (
              data.map((row, i) => (
-                <tr key={i}>
+                <tr key={i} style={{ height: "50px" }}>
                  {orgList.map((col) => (
                    <td key={col.key} className={col.align}>
                      {col.getValue(row)}
--- a/src/components/Project/ProjectStatistics.jsx
+++ b/src/components/Project/ProjectStatistics.jsx
@ -165,7 +165,7 @@ const ProjectStatistics = ({ project }) => {
  }, [selectedProject]);

  return (
-    <div className="card h-100">
+    <>
      <div className="card-header text-start">
        <h5 className="card-action-title mb-0">
          {" "}
@ -242,8 +242,8 @@ const ProjectStatistics = ({ project }) => {
          </li>
        </ul>
      </div>
+    </>

-    </div>
  );
 };

--- a/src/components/Project/Team/TeamAssignToProject.jsx
+++ b/src/components/Project/Team/TeamAssignToProject.jsx
@ -13,7 +13,8 @@ const TeamAssignToProject = ({ closeModal }) => {
    useProjectAssignedOrganizationsName(project);
  return (
    <div className="container">
-      <p className="fs-5 fs-seminbod ">Assign Employee To Project </p>
+      {/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */}
+      <h5 className="mb-4">Assign Employee To Project</h5>

      <div className="row align-items-center gx-5">
        <div className="col">
--- a/src/components/Project/Team/TeamEmployeeList.jsx
+++ b/src/components/Project/Team/TeamEmployeeList.jsx
@ -158,7 +158,7 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {


  return (
-    <div className=" position-relative">
+    <div className="position-relative mt-5">
      <table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}>
        <thead className=" position-sticky top-0">
          <tr>
@ -233,15 +233,15 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
          ))}
        </tbody>
      </table>
-      <div className="position-sticky bottom-0 bg-white  d-flex justify-content-end gap-3 z-25 ">
+      <div className="position-sticky bottom-0 bg-white d-flex justify-content-end gap-3 z-25 my-3">
        <button
          type="button"
-          className="btn btn-sm btn-label-secondary"
+          className="btn btn-sm btn-label-secondary mt-2"
          onClick={() => closeModal()}
        >
          Cancel
        </button>
-        <button onClick={onSubmit} className="btn btn-primary">
+        <button onClick={onSubmit} className="btn btn-primary btn-sm mt-2">
          {isPending ? "Please Wait..." : "Assign to Project"}
        </button>
      </div>
--- a/src/components/RecurringExpense/ManageRecurringExpense.jsx
+++ b/src/components/RecurringExpense/ManageRecurringExpense.jsx
@ -165,7 +165,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
        <div className="row my-2 text-start">
          <div className="col-md-6">
            {/* <select
-              className="form-select form-select-sm"
+              className="form-select"
              {...register("projectId")}
            >
              <option value="">Select Project</option>
@ -201,7 +201,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
              Expense Category
            </Label>
            <select
-              className="form-select form-select-sm"
+              className="form-select"
              id="expenseCategoryId"
              {...register("expenseCategoryId")}
            >
@ -227,7 +227,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
        </div>

        {/* Title and Is Variable  */}
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mt-n2">
          <div className="col-md-6">
            <Label htmlFor="title" className="form-label" required>
              Title
@ -235,7 +235,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
            <input
              type="text"
              id="title"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("title")}
              placeholder="Enter title"
            />
@ -244,7 +244,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
            )}
          </div>

-          <div className="col-md-6 mt-2">
+          <div className="col-md-6">
            <div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
              <Label htmlFor="isVariable" className="form-label mb-0" required>
                Payment Type
@ -252,16 +252,15 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
              <HoverPopup
                title="Payment Type"
                id="payment_type"
+
                content={
-                  <div className=" w-50">
-                    <p>
-                      Choose whether the payment amount varies or remains fixed
-                      each cycle.
-                      <br />
-                      <strong>Is Variable:</strong> Amount changes per cycle.
-                      <br />
-                      <strong>Fixed:</strong> Amount stays constant.
-                    </p>
+                  <div className="text-wrap" style={{ maxWidth: "200px" }}>
+                    Choose whether the payment amount varies or remains fixed
+                    each cycle.
+                    <br />
+                    <strong>Is Variable:</strong> Amount changes per cycle.
+                    <br />
+                    <strong>Fixed:</strong> Amount stays constant.
                  </div>
                }
              >
@ -274,7 +273,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
              control={control}
              defaultValue={defaultRecurringExpense.isVariable ?? false}
              render={({ field }) => (
-                <div className="d-flex align-items-center gap-3 mt-1">
+                <div className="d-flex align-items-center gap-3 mt-2">
                  <div className="form-check">
                    <input
                      type="radio"
@ -327,6 +326,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
              control={control}
              minDate={new Date()}
              className="w-100"
+              size="md"
            />
            {errors.strikeDate && (
              <small className="danger-text">{errors.strikeDate.message}</small>
@ -340,7 +340,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
            <input
              type="number"
              id="amount"
-              className="form-control form-control-sm"
+              className="form-control "
              min="1"
              step="0.01"
              inputMode="decimal"
@ -354,7 +354,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
        </div>

        {/* Payee and Currency  */}
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mt-3">
          <div className="col-md-6">
            <Label htmlFor="payee" className="form-label" required>
              Payee (Supplier Name/Transporter Name/Other)
@ -367,6 +367,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
              }
              error={errors.payee?.message}
              placeholder="Select or enter payee"
+              size="md"
            />
          </div>

@ -376,7 +377,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
            </Label>
            <select
              id="currencyId"
-              className="form-select form-select-sm"
+              className="form-select"
              {...register("currencyId")}
            >
              <option value="">Select Currency</option>
@ -398,7 +399,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
        </div>

        {/* Frequency To and Status Id  */}
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mt-n2">
          <div className="col-md-6">
            <div className="d-flex justify-content-start align-items-center gap-2">
              <Label htmlFor="frequency" className="form-label mb-0" required>
@ -420,7 +421,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {

            <select
              id="frequency"
-              className="form-select form-select-sm mt-1"
+              className="form-select mt-1"
              {...register("frequency", { valueAsNumber: true })}
            >
              <option value="">Select Frequency</option>
@ -442,7 +443,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
            </Label>
            <select
              id="statusId"
-              className="form-select form-select-sm"
+              className="form-select"
              {...register("statusId")}
            >
              <option value="">Select Status</option>
@ -476,10 +477,10 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                title="Payment Buffer Days"
                id="payment_buffer_days"
                content={
-                  <p>
+                  <div className="text-wrap" style={{ maxWidth: "200px" }}>
                    Number of extra days allowed after the due date before
                    payment is considered late.
-                  </p>
+                  </div>
                }
              >
                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
@ -489,7 +490,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
            <input
              type="number"
              id="paymentBufferDays"
-              className="form-control form-control-sm mt-1"
+              className="form-control mt-1"
              min="0"
              step="1"
              {...register("paymentBufferDays", { valueAsNumber: true })}
@ -511,10 +512,11 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
              <HoverPopup
                title="End Date"
                id="end_date"
+
                content={
-                  <p>
+                  <div className="text-wrap" style={{ maxWidth: "200px" }}>
                    The date when the last payment in the recurrence occurs.
-                  </p>
+                  </div>
                }
              >
                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
@ -526,6 +528,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
              control={control}
              minDate={StrikeDate}
              className="w-100 mt-1"
+              size="md"
            />

            {errors.endDate && (
@ -568,7 +571,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
            </Label>
            <textarea
              id="description"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("description")}
              rows="2"
            ></textarea>
@ -592,8 +595,8 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
            {createPending || isPending
              ? "Please wait...."
              : requestToEdit
-              ? "Update"
-              : "Save as Draft"}
+                ? "Update"
+                : "Save as Draft"}
          </button>
        </div>
      </form>
--- a/src/components/RecurringExpense/RecurringExpenseList.jsx
+++ b/src/components/RecurringExpense/RecurringExpenseList.jsx
@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
  EXPENSE_DRAFT,
  EXPENSE_REJECTEDBY,
@ -18,7 +18,7 @@ import { useRecurringExpenseList } from "../../hooks/useExpense";
 import Pagination from "../common/Pagination";
 import { SpinnerLoader } from "../common/Loader";

-const RecurringExpenseList = ({ search, filterStatuses }) => {
+const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered }) => {
  const { setManageRequest, setVieRequest, setViewRecurring } =
    useRecurringExpenseContext();
  const navigate = useNavigate();
@ -70,9 +70,8 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
      align: "text-end",
      getValue: (e) =>
        e?.amount
-          ? `${
-              e?.currency?.symbol ? e.currency.symbol + " " : ""
-            }${e.amount.toLocaleString()}`
+          ? `${e?.currency?.symbol ? e.currency.symbol + " " : ""
+          }${e.amount.toLocaleString()}`
          : "N/A",
    },
    {
@ -112,6 +111,17 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
      debouncedSearch
    );

+  const filteredData = useMemo(
+    () =>
+      data?.data?.filter((item) => filterStatuses.includes(item?.status?.id)) ||
+      [],
+    [data?.data, filterStatuses]
+  );
+
+  useEffect(() => {
+    onDataFiltered(filteredData);
+  }, [filteredData, onDataFiltered]);
+
  const paginate = (page) => {
    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
      setCurrentPage(page);
@ -150,10 +160,6 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
    );
  };

-  const filteredData = data?.data?.filter((item) =>
-    filterStatuses.includes(item?.status?.id)
-  );
-
  const handleDelete = (id) => {
    setDeletingId(id);
    DeleteExpense(
@ -166,7 +172,6 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
      }
    );
  };
-console.log("Tanish",filteredData)
  return (
    <>
      {IsDeleteModalOpen && (
@ -181,111 +186,111 @@ console.log("Tanish",filteredData)
        />
      )}

-      <div className="card page-min-h table-responsive px-sm-4">
+      <div className="card page-min-h table-responsive px-sm-4" ref={tableRef}>
        <div className="card-datatable" id="payment-request-table">
-         <div className="mx-2">
-           {Array.isArray(filteredData) && filteredData.length > 0 && (
-            <table className="table border-top dataTable text-nowrap  align-middle">
-              <thead>
-                <tr>
-                  {recurringExpenseColumns.map((col) => (
-                    <th key={col.key} className={`sorting ${col.align}`}>
-                      {col.label}
-                    </th>
-                  ))}
-                  <th className="text-center">Action</th>
-                </tr>
-              </thead>
-
-              <tbody>
-                {filteredData?.length > 0 ? (
-                  filteredData?.map((recurringExpense) => (
-                    <tr
-                      key={recurringExpense.id}
-                      className="align-middle"
-                      style={{ height: "40px" }}
-                    >
-                      {recurringExpenseColumns.map((col) => (
-                        <td
-                          key={col.key}
-                          className={`d-table-cell ${col.align ?? ""} py-3`}
-                        >
-                          {col?.customRender
-                            ? col?.customRender(recurringExpense)
-                            : col?.getValue(recurringExpense)}
-                        </td>
-                      ))}
-                      <td className="sticky-action-column bg-white">
-                        <div className="d-flex flex-row gap-2 gap-0">
-                          <i
-                            className="bx bx-show text-primary cursor-pointer"
-                            onClick={() =>
-                              setViewRecurring({
-                                recurringId: recurringExpense?.id,
-                                view: true,
-                              })
-                            }
-                          ></i>
-
-                          <div className="dropdown z-2">
-                            <button
-                              type="button"
-                              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
-                              data-bs-toggle="dropdown"
-                            >
-                              <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
-                            </button>
-                            <ul className="dropdown-menu dropdown-menu-end w-auto">
-                              <li
-                                onClick={() =>
-                                  setManageRequest({
-                                    IsOpen: true,
-                                    RecurringId: recurringExpense?.id,
-                                  })
-                                }
-                              >
-                                <a className="dropdown-item px-2 cursor-pointer py-1">
-                                  <i className="bx bx-edit text-primary bx-xs me-2"></i>
-                                  Modify
-                                </a>
-                              </li>
-
-                              <li
-                                onClick={() => {
-                                  setIsDeleteModalOpen(true);
-                                  setDeletingId(recurringExpense.id);
-                                }}
-                              >
-                                <a className="dropdown-item px-2 cursor-pointer py-1">
-                                  <i className="bx bx-trash text-danger bx-xs me-2"></i>
-                                  Delete
-                                </a>
-                              </li>
-                            </ul>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  ))
-                ) : (
+          <div className="mx-2">
+            {Array.isArray(filteredData) && filteredData.length > 0 && (
+              <table className="table border-top dataTable text-nowrap align-middle">
+                <thead>
                  <tr>
-                    <td
-                      colSpan={recurringExpenseColumns?.length + 1}
-                      className="text-center border-0 py-8"
-                    ></td>
+                    {recurringExpenseColumns.map((col) => (
+                      <th key={col.key} className={`sorting ${col.align}`}>
+                        {col.label}
+                      </th>
+                    ))}
+                    <th className="text-end">Action</th>
                  </tr>
-                )}
-              </tbody>
-            </table>
-          )}
-          {!filteredData ||
-            filteredData.length === 0
-           && (
-              <div className="d-flex justify-content-center align-items-center h-64">
-                {isError ? (<p>{error.message}</p>):(<p>No Recurring Expense Found</p>)}
-              </div>
+                </thead>
+
+                <tbody>
+                  {filteredData?.length > 0 ? (
+                    filteredData?.map((recurringExpense) => (
+                      <tr
+                        key={recurringExpense.id}
+                        className="align-middle"
+                        style={{ height: "40px" }}
+                      >
+                        {recurringExpenseColumns.map((col) => (
+                          <td
+                            key={col.key}
+                            className={`d-table-cell ${col.align ?? ""} py-3`}
+                          >
+                            {col?.customRender
+                              ? col?.customRender(recurringExpense)
+                              : col?.getValue(recurringExpense)}
+                          </td>
+                        ))}
+                        <td className="sticky-action-column bg-white text-end">
+                          <div className="d-flex justify-content-end flex-row gap-2 gap-0">
+                            <i
+                              className="bx bx-show text-primary cursor-pointer"
+                              onClick={() =>
+                                setViewRecurring({
+                                  recurringId: recurringExpense?.id,
+                                  view: true,
+                                })
+                              }
+                            ></i>
+
+                            <div className="dropdown z-2">
+                              <button
+                                type="button"
+                                className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
+                                data-bs-toggle="dropdown"
+                              >
+                                <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
+                              </button>
+                              <ul className="dropdown-menu dropdown-menu-end w-auto">
+                                <li
+                                  onClick={() =>
+                                    setManageRequest({
+                                      IsOpen: true,
+                                      RecurringId: recurringExpense?.id,
+                                    })
+                                  }
+                                >
+                                  <a className="dropdown-item px-2 cursor-pointer py-1">
+                                    <i className="bx bx-edit text-primary bx-xs me-2"></i>
+                                    Modify
+                                  </a>
+                                </li>
+
+                                <li
+                                  onClick={() => {
+                                    setIsDeleteModalOpen(true);
+                                    setDeletingId(recurringExpense.id);
+                                  }}
+                                >
+                                  <a className="dropdown-item px-2 cursor-pointer py-1">
+                                    <i className="bx bx-trash text-danger bx-xs me-2"></i>
+                                    Delete
+                                  </a>
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td
+                        colSpan={recurringExpenseColumns?.length + 1}
+                        className="text-center border-0 py-8"
+                      ></td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
            )}
-         </div>
+            {!filteredData ||
+              filteredData.length === 0
+              && (
+                <div className="d-flex justify-content-center align-items-center h-64">
+                  {isError ? (<p>{error.message}</p>) : (<p>No Recurring Expense Found</p>)}
+                </div>
+              )}
+          </div>
        </div>

        {/* Pagination */}
--- a/src/components/RecurringExpense/handleRecurringExpenseExport.jsx
+++ b/src/components/RecurringExpense/handleRecurringExpenseExport.jsx
@ -0,0 +1,107 @@
+import moment from "moment";
+import {
+  exportToCSV,
+  exportToExcel,
+  exportToPDF,
+  printTable,
+} from "../../utils/tableExportUtils";
+import { FREQUENCY_FOR_RECURRING } from "../../utils/constants";
+import ExpenseRepository from "../../repositories/ExpsenseRepository";
+
+const HandleRecurringExpenseExport = async (
+  type,
+  filters = {},
+  searchString = "",
+  tableRef = null,
+  setLoading = null
+) => {
+  try {
+    if (setLoading) setLoading(true);
+
+    const safeSearchString =
+      typeof searchString === "string" ? searchString : "";
+    let allRecurringExpense = [];
+    let pageNumber = 1;
+    const pageSize = 1000;
+    let hasMore = true;
+
+    while (hasMore) {
+      const response = await ExpenseRepository.GetRecurringExpenseList(
+        pageSize,
+        pageNumber,
+        filters,
+        true, // isActive
+        safeSearchString
+      );
+
+      const currentPageData = response?.data?.data || [];
+      allRecurringExpense = allRecurringExpense.concat(currentPageData);
+
+      if (currentPageData.length < pageSize) {
+        hasMore = false;
+      } else {
+        pageNumber += 1;
+      }
+    }
+
+    if (!allRecurringExpense.length) {
+      console.warn("No payment requests found!");
+      return;
+    }
+
+    const exportData = allRecurringExpense.map((item) => ({
+      Category: item?.expenseCategory?.name ?? "-",
+      Title: item?.title ?? "-",
+      Payee: item?.payee ?? "-",
+      Frequency:
+        item?.frequency !== undefined && item?.frequency !== null
+          ? FREQUENCY_FOR_RECURRING[item?.frequency] ?? "-"
+          : "-",
+      Amount: item?.amount ? item.amount.toLocaleString() : "-",
+      Currency: item?.currency?.symbol ?? "-",
+      "Next Generation Date": item?.nextGenerationDate
+        ? moment(item.nextGenerationDate).format("DD-MMM-YYYY")
+        : "-",
+      Status: item?.status?.name ?? "-",
+      "Created At": item?.createdAt
+        ? moment(item.createdAt).format("DD-MMM-YYYY")
+        : "-",
+    }));
+
+    // COLUMN ORDER
+    const columns = [
+      "Category",
+      "Title",
+      "Payee",
+      "Frequency",
+      "Amount",
+      "Currency",
+      "Next Generation Date",
+      "Status",
+      "Created At",
+    ];
+
+    switch (type) {
+      case "csv":
+        exportToCSV(exportData, "recurring-expense", columns);
+        break;
+      case "excel":
+        exportToExcel(exportData, "recurring-expense", columns);
+        break;
+      case "pdf":
+        exportToPDF(exportData, "recurring-expense", columns);
+        break;
+      case "print":
+        if (tableRef?.current) printTable(tableRef.current);
+        break;
+      default:
+        console.warn("Unknown export type:", type);
+    }
+  } catch (err) {
+    console.error("Export failed:", err);
+  } finally {
+    if (setLoading) setLoading(false);
+  }
+};
+
+export default HandleRecurringExpenseExport;
--- a/src/components/ServiceProject/JobList.jsx
+++ b/src/components/ServiceProject/JobList.jsx
@ -175,12 +175,9 @@ const JobList = ({ isArchive }) => {
                    <td
                      key={col.key}
                      className={col.className}
-                      // onClick={() =>
-                      //   setSelectedJob({ showCanvas: true, job: row?.id })
-                      // }
                      onClick={() => {
                        if (!isArchive) {
-                          setSelectedJob({ showCanvas: true, job: e?.id });
+                          setSelectedJob({ showCanvas: true, job: row?.id });
                        }
                      }}

--- a/src/components/ServiceProject/Jobs.jsx
+++ b/src/components/ServiceProject/Jobs.jsx
@ -62,15 +62,27 @@ const Jobs = () => {
        <div className="card page-min-h my-2 px-7 pb-4">
          <div className="row align-items-center py-4">

-            {/* LEFT — Tabs */}
+            {/* LEFT — Archive / Unarchive Toggle */}
            <div className="col-12 col-md-6 text-start">
-              <button
-                type="button"
-                className={`btn btn-sm ${showArchive ? "btn-secondary" : "btn-outline-secondary"}`}
-                onClick={() => setShowArchive(!showArchive)}
-              >
-               <i className="bx bx-archive bx-sm me-1 mt-1"></i>  Archived
-              </button>
+              <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
+                <button
+                  type="button"
+                  className={`btn px-3 py-1 rounded-0 text-tiny ${!showArchive ? "btn-primary text-white" : ""
+                    }`}
+                  onClick={() => setShowArchive(false)}
+                >
+                  <i className="bx bx-archive-out me-1"></i> Active Jobs
+                </button>
+
+                <button
+                  type="button"
+                  className={`btn px-3 py-1 rounded-0 text-tiny ${showArchive ? "btn-primary text-white" : ""
+                    }`}
+                  onClick={() => setShowArchive(true)}
+                >
+                  <i className="bx bx-archive me-1"></i> Archived
+                </button>
+              </div>
            </div>

            {/* RIGHT — New Job button */}
@ -79,9 +91,10 @@ const Jobs = () => {
                className="btn btn-sm btn-primary"
                onClick={() => setManageJob({ isOpen: true, jobId: null })}
              >
-                <i className="bx bx-plus-circle bx-md me-2"></i>New Job
+                <i className="bx bx-plus-circle bx-md me-2"></i> New Job
              </button>
            </div>
+
          </div>

          {/* Job List */}
--- a/src/components/ServiceProject/ManageServiceProject.jsx
+++ b/src/components/ServiceProject/ManageServiceProject.jsx
@ -183,7 +183,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
              <span className="danger-text">{errors.shortName.message}</span>
            )}
          </div>
-          <div className="col-12 col-md-6 mb-2">
+          <div className="col-12 col-md-6">
            <Label htmlFor="name" required>
              Select Status
            </Label>
@ -200,7 +200,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
              <span className="danger-text">{errors.statusId.message}</span>
            )}
          </div>
-          <div className="col-12  mb-2">
+          <div className="col-12 mb-2">
            <SelectMultiple
              options={data?.data}
              isLoading={isLoading}
@ -223,9 +223,6 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
              className="form-control form-control-sm"
              {...register("contactName")}
              placeholder="Enter Employee name.."              
-              onInput={(e) => {
-                e.target.value = e.target.value.replace(/[^A-Za-z ]/g, "");
-              }}
            />
            {errors?.contactName && (
              <span className="danger-text">{errors.contactName.message}</span>
@ -300,7 +297,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
            )}
          </div>
        </div>
-        <div className="d-flex justify-content-end gap-4">
+        <div className="d-flex justify-content-end gap-4 mt-4">
          <button
            className="btn btn-sm  btn-outline-secondary"
            disabled={isPending || isUpdating}
--- a/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
+++ b/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
@ -8,6 +8,7 @@ import { useParams } from "react-router-dom";
 import Pagination from "../../common/Pagination";
 import ConfirmModal from "../../common/ConfirmModal";
 import { SpinnerLoader } from "../../common/Loader";
+import ViewBranchDetails from "./ViewBranchDetails";

 const ServiceBranch = () => {
  const { projectId } = useParams();
@ -19,6 +20,7 @@ const ServiceBranch = () => {
  });
  const { mutate: DeleteBranch, isPending } = useDeleteBranch();
  const [deletingId, setDeletingId] = useState(null);
+  const [ViewRequest, setViewRequest] = useState({ requestId: null, view: false });

  const [search, setSearch] = useState("");
  const [currentPage, setCurrentPage] = useState(1);
@ -84,7 +86,7 @@ const ServiceBranch = () => {
            <div className="col-md-4 col-sm-12 ms-n3 text-start ">
              <h5 className="mb-0">
                <i className="bx bx-buildings text-primary"></i>
-                <span className="ms-2 fw-bold">Branchs</span>
+                <span className="ms-2 fw-bold">Branches</span>
              </h5>
            </div>

@ -171,37 +173,78 @@ const ServiceBranch = () => {
                  !isError &&
                  data?.data?.length > 0 &&
                  data.data.map((branch) => (
-                    <tr key={branch.id} style={{ height: "35px" }}>
+                    <tr
+                      key={branch.id}
+                      style={{ height: "35px", cursor: showInactive ? "default" : "pointer" }}
+                      onClick={(e) => {
+                        if (!showInactive && !e.target.closest(".dropdown") && !e.target.closest(".bx-show")) {
+                          setViewRequest({ branchId: branch.id, view: true });
+                        }
+                      }}
+                    >
+
                      {columns.map((col) => (
                        <td key={col.key} className={`${col.align} py-3`}>
                          {col.getValue(branch)}
                        </td>
                      ))}
                      <td className="text-center">
-                        <div className="dropdown z-2">
-                          <button
-                            type="button"
-                            className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
-                            data-bs-toggle="dropdown"
-                          >
-                            <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
-                          </button>
-                          <ul className="dropdown-menu dropdown-menu-end w-auto">
-                            {!showInactive ? (
-                              <>
-                                <li
-                                  onClick={() =>
-                                    setManageState({
-                                      IsOpen: true,
-                                      branchId: branch.id,
-                                    })
-                                  }
-                                >
-                                  <a className="dropdown-item px-2 cursor-pointer py-1">
-                                    <i className="bx bx-edit text-primary bx-xs me-2"></i>
-                                    Modify
-                                  </a>
-                                </li>
+                        <div className="d-flex justify-content-center align-items-center gap-2">
+                          {/* View Icon */}
+                          {/* <i
+                            className="bx bx-show text-primary cursor-pointer"
+                            onClick={() =>
+                              setViewRequest({ branchId: branch.id, view: true })
+                            }
+                          ></i> */}
+
+                          <div className="dropdown z-2">
+                            <button
+                              type="button"
+                              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
+                              data-bs-toggle="dropdown"
+                            >
+                              <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
+                            </button>
+                            <ul className="dropdown-menu dropdown-menu-end w-auto">
+                              {!showInactive ? (
+                                <>
+                                  <li
+                                    onClick={() =>
+                                      setManageState({
+                                        IsOpen: true,
+                                        branchId: branch.id,
+                                      })
+                                    }
+                                  >
+                                    <a className="dropdown-item px-2 cursor-pointer py-1">
+                                      <i className="bx bx-edit text-primary bx-xs me-2"></i>
+                                      Modify
+                                    </a>
+                                  </li>
+                                  <li
+                                    onClick={() => {
+                                      setIsDeleteModalOpen(true);
+                                      setDeletingId(branch.id);
+                                    }}
+                                  >
+                                    <a className="dropdown-item px-2 cursor-pointer py-1">
+                                      <i className="bx bx-trash text-danger bx-xs me-2"></i>
+                                      Delete
+                                    </a>
+                                  </li>
+                                  <li
+                                    onClick={() =>
+                                      setViewRequest({ branchId: branch.id, view: true })
+                                    }
+                                  >
+                                    <a className="dropdown-item px-2 cursor-pointer py-1">
+                                      <i className="bx bx-show text-primary cursor-pointer me-2"></i>
+                                      View
+                                    </a>
+                                  </li>
+                                </>
+                              ) : (
                                <li
                                  onClick={() => {
                                    setIsDeleteModalOpen(true);
@ -209,25 +252,13 @@ const ServiceBranch = () => {
                                  }}
                                >
                                  <a className="dropdown-item px-2 cursor-pointer py-1">
-                                    <i className="bx bx-trash text-danger bx-xs me-2"></i>
-                                    Delete
+                                    <i className="bx bx-undo text-danger me-2"></i>
+                                    Restore
                                  </a>
                                </li>
-                              </>
-                            ) : (
-                              <li
-                                onClick={() => {
-                                  setIsDeleteModalOpen(true);
-                                  setDeletingId(branch.id);
-                                }}
-                              >
-                                <a className="dropdown-item px-2 cursor-pointer py-1">
-                                  <i className="bx bx-undo text-danger  me-2"></i>
-                                  Restore
-                                </a>
-                              </li>
-                            )}
-                          </ul>
+                              )}
+                            </ul>
+                          </div>
                        </div>
                      </td>
                    </tr>
@ -237,14 +268,17 @@ const ServiceBranch = () => {
                  !isError &&
                  (!data?.data || data.data.length === 0) && (
                    <tr>
-                      <td
-                        colSpan={columns.length + 1}
-                        className="text-center py-12"
-                      >
-                        No Branch Found
+                      <td colSpan={columns.length + 1}>
+                        <div
+                          className="d-flex justify-content-center align-items-center"
+                          style={{ height: "150px" }}
+                        >
+                          No Branch Found
+                        </div>
                      </td>
                    </tr>
                  )}
+
              </tbody>
            </table>

@ -274,6 +308,17 @@ const ServiceBranch = () => {
              />
            </GlobalModel>
          )}
+          {ViewRequest.view && (
+            <GlobalModel
+              isOpen
+              size="md"
+              modalType="top"
+              closeModal={() => setViewRequest({ branchId: null, view: false })}
+            >
+              <ViewBranchDetails BranchToEdit={ViewRequest.branchId} />
+            </GlobalModel>
+
+          )}
        </div>
      </div>
    </>
--- a/src/components/ServiceProject/ServiceProjectBranch/ViewBranchDetails.jsx
+++ b/src/components/ServiceProject/ServiceProjectBranch/ViewBranchDetails.jsx
@ -0,0 +1,142 @@
+import React from "react";
+import { useBranchDetails } from "../../../hooks/useServiceProject";
+import Avatar from "../../common/Avatar";
+import { formatUTCToLocalTime } from "../../../utils/dateUtils";
+
+const ViewBranchDetails = ({ BranchToEdit }) => {
+    const { data, isLoading, isError, error: requestError } = useBranchDetails(BranchToEdit);
+
+    console.log("branch details:", data);
+
+    if (isLoading) return <p>Loading...</p>;
+    if (isError) return <p>Error: {requestError?.message}</p>;
+
+    return (
+        <form className="container px-3">
+            <div className="col-12 mb-1">
+                <h5 className="fw-semibold m-0">Branch Details</h5>
+            </div>
+            <div className="row mb-1 mt-5">
+                <div className="col-md-12 mb-4">
+                    <div className="d-flex">
+                        <label
+                            className="form-label me-2 mb-0 fw-semibold text-start"
+                            style={{ minWidth: "130px" }}
+                        >
+                            Branch Name:
+                        </label>
+                        <div className="text-muted">{data?.branchName || "N/A"}</div>
+                    </div>
+                </div>
+                <div className="col-md-12 mb-4">
+                    <div className="d-flex">
+                        <label
+                            className="form-label me-2 mb-0 fw-semibold text-start"
+                            style={{ minWidth: "130px" }}
+                        >
+                            Branch Type:
+                        </label>
+                        <div className="text-muted">{data?.branchName || "N/A"}</div>
+                    </div>
+                </div>
+                <div className="col-md-12 mb-4">
+                    <div className="d-flex">
+                        <label
+                            className="form-label me-2 mb-0 fw-semibold text-start"
+                            style={{ minWidth: "130px" }}
+                        >
+                            Project:
+                        </label>
+                        <div className="text-muted text-start">{data?.project?.name || "N/A"}</div>
+                    </div>
+                </div>
+
+                <div className="col-md-12 text-start mb-2">
+                    <div className="d-flex align-items-center">
+                        <label
+                            className="form-label me-2 mb-0 fw-semibold"
+                            style={{ minWidth: "125px" }}
+                        >
+                            Updated By :
+                        </label>
+                        <>
+                            <Avatar
+                                size="xs"
+                                classAvatar="m-0 me-1"
+                                firstName={data.updatedBy.firstName}
+                                lastName={data.updatedBy.lastName}
+                            />
+                            <span className="text-muted">
+                                {`${data.updatedBy.firstName ?? ""} ${data.updatedBy.lastName ?? ""
+                                    }`.trim() || "N/A"}
+                            </span>
+                        </>
+                    </div>
+                </div>
+                <div className="col-md-12 text-start mb-3">
+                    <div className="d-flex align-items-center">
+                        <label
+                            className="form-label me-2 mb-0 fw-semibold"
+                            style={{ minWidth: "125px" }}
+                        >
+                            Created By :
+                        </label>
+                        <Avatar
+                            size="xs"
+                            classAvatar="m-0 me-1"
+                            firstName={data?.createdBy?.firstName}
+                            lastName={data?.createdBy?.lastName}
+                        />
+                        <span className="text-muted">
+                            {`${data?.createdBy?.firstName ?? ""} ${data?.createdBy?.lastName ?? ""
+                                }`.trim() || "N/A"}
+                        </span>
+                    </div>
+                </div>
+                <div className="col-md-12 mb-3">
+                    <div className="d-flex">
+                        <label
+                            className="form-label me-2 mb-0 fw-semibold text-start"
+                            style={{ minWidth: "130px" }}
+                        >
+                            Created At :
+                        </label>
+                        <div className="text-muted">
+                            {data?.createdAt
+                                ? formatUTCToLocalTime(data.createdAt, true)
+                                : "N/A"}
+                        </div>
+                    </div>
+                </div>
+                <div className="col-12 mb-3 text-start">
+                    <label className="form-label mb-2 fw-semibold">Contact Information:</label>
+                    <div className="text-muted">
+                        {data?.contactInformation ? (
+                            JSON.parse(data.contactInformation).map((contact, index) => (
+                                <div key={index} className="mb-3">
+                                    <div className="fw-semibold mb-1">Person {index + 1}:-</div>
+                                    <div>
+                                        <label className="fw-semibold mb-1">Person Name:</label> {contact.contactPerson || "N/A"}
+                                    </div>
+                                    <div>
+                                        <label className="fw-semibold mb-1">Designation:</label> {contact.designation || "N/A"}
+                                    </div>
+                                    <div>
+                                        <label className="fw-semibold mb-1">Emails:</label> {contact.contactEmails?.join(", ") || "N/A"}
+                                    </div>
+                                    <div>
+                                        <label className="fw-semibold mb-1">Numbers:</label> {contact.contactNumbers?.join(", ") || "N/A"}
+                                    </div>
+                                </div>
+                            ))
+                        ) : (
+                            "N/A"
+                        )}
+                    </div>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+export default ViewBranchDetails;
--- a/src/components/ServiceProject/ServiceProjectJob/JobComments.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/JobComments.jsx
@ -150,7 +150,7 @@ const JobComments = ({ data }) => {
              type="submit"
              disabled={!watch("comment")?.trim() || isPending}
            >
-              Send
+              Submit
            </button>
          </div>
        </form>
--- a/src/components/ServiceProject/ServiceProjectJob/JobStatusLog.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/JobStatusLog.jsx
@ -1,56 +1,38 @@
-import React from "react";
-import Avatar from "../../common/Avatar";
-import { formatUTCToLocalTime } from "../../../utils/dateUtils";
+import React, { useMemo } from "react";

+import { getColorNameFromHex } from "../../../utils/appUtils";
+import Timeline from "../../common/TimeLine";

 const JobStatusLog = ({ data }) => {
+  // Prepare timeline items
+  const timelineData = useMemo(() => {
+    if (!data) return [];
+    return data
+      .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
+      .map((log) => ({
+        id: log.id,
+        title: log.nextStatus?.displayName || log.status?.displayName || "Status Updated",
+        description: log.nextStatus?.description || "",
+        timeAgo: log.updatedAt,
+        color: getColorNameFromHex(log.nextStatus?.color) || "primary",
+        userComment: log.comment,
+        users: log.updatedBy
+          ? [
+            {
+              firstName: log.updatedBy.firstName || "",
+              lastName: log.updatedBy.lastName || "",
+              role: log.updatedBy.jobRoleName || "",
+              avatar: log.updatedBy.photo || null,
+            },
+          ]
+          : [],
+      }));
+  }, [data]);
+
  return (
    <div className="card shadow-none p-0">
-      <div className="card-body p-0">
-        <div className="list-group">
-          {data?.map((item) => (
-            <div
-              key={item.id}
-              className="list-group-item border-0 border-bottom p-1"
-            >
-              <div className="d-flex justify-content-between">
-                <div>
-                  <span className="fw-semibold">
-                    {item.nextStatus?.displayName ??
-                      item.status?.displayName ??
-                      "Status"}
-                  </span>
-                </div>
-
-                <span className="text-secondary">
-                  {formatUTCToLocalTime(item?.updatedAt,true)}
-                </span>
-              </div>
-              <div className="d-flex align-items-start mt-2 mx-0 px-0">
-                <Avatar
-                  firstName={item.updatedBy?.firstName}
-                  lastName={item.updatedBy?.lastName}
-                />
-                <div className="">
-                  <div className="d-flex flex-row gap-3">
-                    <span className="fw-semibold">
-                      {item.updatedBy?.firstName} {item.updatedBy?.lastName}
-                    </span>
-                    <span className="text-secondary">
-                      {/* <em>{formatUTCToLocalTime(item?.createdAt, true)}</em> */}
-                    </span>
-                  </div>
-                  <div className="text-muted text-secondary">
-                    {item?.updatedBy?.jobRoleName}
-                  </div>
-                  <div className="text-wrap">
-                    <p className="mb-1 mt-2 text-muted">{item.comment}</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
+      <div className="card-body p-3">
+        <Timeline items={timelineData} transparent={true} />
      </div>
    </div>
  );
--- a/src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
@ -140,6 +140,7 @@ const ManageJob = ({ Job }) => {
      formData.projectId = projectId;

      CreateJob(formData);
+      setManageJob({ isOpen: false, jobId: null });
    }
  };

@ -172,6 +173,20 @@ const ManageJob = ({ Job }) => {
    <div className="container">
      <AppFormProvider {...methods}>
        <form className="row text-start" onSubmit={handleSubmit(onSubmit)}>
+           <div className="col-12 col-md-12">
+            <SelectFieldSearch
+              label="Select Branch"
+              placeholder="Select Branch"
+              value={watch("projectBranchId")}
+              onChange={(val) => setValue("projectBranchId", val)}
+              valueKey="id"
+              labelKey="branchName"
+              hookParams={[projectId, true, 10, 1]}
+              useFetchHook={useBranches}
+              isMultiple={false}
+              disabled={Job}
+            />
+          </div>
          <div className="col-12 col-md-12 mb-2 ">
            <Label required>Title</Label>
            <input
@ -244,20 +259,7 @@ const ManageJob = ({ Job }) => {
              placeholder="Enter Tag"
            />
          </div>
-          <div className="col-12 col-md-6 mb-2 mb-md-4">
-            <SelectFieldSearch
-              label="Select Branch"
-              placeholder="Select Branch"
-              value={watch("projectBranchId")}
-              onChange={(val) => setValue("projectBranchId", val)}
-              valueKey="id"
-              labelKey="branchName"
-              hookParams={[projectId, true, 10, 1]}
-              useFetchHook={useBranches}
-              isMultiple={false}
-              disabled={Job}
-            />
-          </div>
+         
          <div className="col-12">
            <Label required>Description</Label>
            <textarea
@ -276,7 +278,7 @@ const ManageJob = ({ Job }) => {
                ? "Please wait..."
                : Job
                ? "Update"
-                : "Submit"}
+                : "Assign"}
            </button>
          </div>
        </form>
--- a/src/components/ServiceProject/ServiceProjectJob/ManageJobTicket.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/ManageJobTicket.jsx
@ -23,20 +23,21 @@ const ManageJobTicket = ({ Job }) => {
  );
  const drawerRef = useRef();
  const tabsData = [
+     {
+      id: "history", 
+      title: "History",
+      icon: "bx bx-time me-2",
+      active: true,
+      content: <JobStatusLog data={data?.updateLogs} />,
+    },
    {
      id: "comment",
      title: "Comments",
      icon: "bx bx-comment me-2",
-      active: true,
+      active: false,
      content: <JobComments data={data} />,
    },
-    {
-      id: "history",
-      title: "History",
-      icon: "bx bx-time me-2",
-      active: false,
-      content: <JobStatusLog data={data?.updateLogs} />,
-    },
+   
  ];

  if (isLoading) return <JobDetailsSkeleton />;
@ -69,7 +70,7 @@ const ManageJobTicket = ({ Job }) => {
                  id="STATUS_CHANEG"
                  Mode="click"
                  className=""
-                  align="right"
+                  align="left"
                  content={
                    <ChangeStatus
                      statusId={data?.status?.id}
@ -141,7 +142,7 @@ const ManageJobTicket = ({ Job }) => {
            })()}
        </div>
        {data?.projectBranch && (
-          <div className="d-flex gap-3 my-2 position-relative"  ref={drawerRef} >
+          <div className="d-flex gap-3 my-2 position-relative" ref={drawerRef} >
            <span className="text-secondary">
              <i className="bx bx-buildings"></i> Branch Name:
            </span>
@ -149,7 +150,8 @@ const ManageJobTicket = ({ Job }) => {
            <HoverPopup
              id="BRANCH_DETAILS"
              Mode="click"
-              align="auto"
+              align="right"
+              minWidth="340px"
              boundaryRef={drawerRef}
              content={<BranchDetails branch={data?.projectBranch?.id} />}
            >
--- a/src/components/ServiceProject/ServiceProjectProfile.jsx
+++ b/src/components/ServiceProject/ServiceProjectProfile.jsx
@ -7,6 +7,7 @@ import GlobalModel from "../common/GlobalModel";
 import { SpinnerLoader } from "../common/Loader";
 import ServiceBranch from "./ServiceProjectBranch/ServiceBranch";
 import ServiceProfile from "./ServiceProfile";
+import ServiceJobs from "../Dashboard/ServiceJobs";

 const ServiceProjectProfile = () => {
  const { projectId } = useParams();
@ -34,12 +35,15 @@ const ServiceProjectProfile = () => {

      <div className="row py-2">
        <div className="col-md-6 col-lg-5 order-2 mb-6">
-          <ServiceProfile data={data} setIsOpenModal={setIsOpenModal}/>
+          <ServiceProfile data={data} setIsOpenModal={setIsOpenModal} />
        </div>

        <div className="col-md-6 col-lg-7 order-2 mb-6">
          <ServiceBranch />
        </div>
+        <div className="col-md-6 col-lg-5 order-2 mb-6">
+          <ServiceJobs/>
+        </div>
      </div>
    </>
  );
--- a/src/components/ServiceProject/ServiceProjectSchema.jsx
+++ b/src/components/ServiceProject/ServiceProjectSchema.jsx
@ -22,8 +22,7 @@ export const projectSchema = z.object({
  contactName: z
    .string()
    .trim()
-    .min(1, "Contact name is required")
-    .regex(/^[A-Za-z\s]+$/, "Contact name can contain only letters"),
+    .min(1, "Contact name is required"),

  contactPhone: z
    .string()
--- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamList.jsx
+++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamList.jsx
@ -66,7 +66,7 @@ const ServiceProjectTeamList = () => {
        <tbody>
          {data?.length > 0 ? (
            data.map((row) => (
-              <tr key={row.id}>
+              <tr key={row.id} style={{ height: "50px" }}>
                {servceProjectColmen.map((col) => (
                  <td key={col.key} className={col.align}>{col.getValue(row)}</td>
                ))}
@ -77,6 +77,7 @@ const ServiceProjectTeamList = () => {
              <td
                colSpan={servceProjectColmen.length}
                className="text-center py-4 border-0"
+                style={{ height: "200px" }}
              >
                {isLoading ? (
                  <SpinnerLoader />
@ -85,6 +86,7 @@ const ServiceProjectTeamList = () => {
                )}
              </td>
            </tr>
+
          )}
        </tbody>
      </table>
--- a/src/components/Tenant/OrganizationInfo.jsx
+++ b/src/components/Tenant/OrganizationInfo.jsx
@ -58,12 +58,12 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
  };

  useEffect(() => {
-  const logoImage = getValues("logoImage"); 
-  if (logoImage) {
-    setLogoPreview(logoImage); 
-    setLogoName("Uploaded Logo"); 
-  }
-}, [getValues]);
+    const logoImage = getValues("logoImage");
+    if (logoImage) {
+      setLogoPreview(logoImage);
+      setLogoName("Uploaded Logo");
+    }
+  }, [getValues]);


  return (
@ -134,7 +134,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
          control={control}
          placeholder="DD-MM-YYYY"
          maxDate={new Date()}
-          className={errors.onBoardingDate ? "is-invalid" : ""}
+          className={`w-100 ${errors.onBoardingDate ? "is-invalid" : ""}`}
        />
        {errors.onBoardingDate && (
          <div className="invalid-feedback">
--- a/src/components/common/Forms/SelectFieldServerSide.jsx
+++ b/src/components/common/Forms/SelectFieldServerSide.jsx
@ -200,7 +200,9 @@ export const SelectProjectField = ({
  isFullObject = false,
  isMultiple = false,
  isAllProject = false,
-  disabled
+  disabled,
+  className,
+  errors,
 }) => {
  const [searchText, setSearchText] = useState("");
  const debounce = useDebounce(searchText, 300);
@ -303,7 +305,10 @@ export const SelectProjectField = ({
        </span>
      </button>

-      {/* DROPDOWN */}
+      {errors?.projectId && (
+        <div className="danger-text">{errors.projectId.message}</div>
+      )}
+      
      {open && (
        <ul
          className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded"
@ -326,6 +331,7 @@ export const SelectProjectField = ({
              placeholder="Search..."
            />
          </div>
+            <div className="overflow-auto px-1" style={{ maxHeight: "200px" }}>

          {isLoading && (
            <li className="dropdown-item text-muted text-center">Loading...</li>
@ -358,6 +364,7 @@ export const SelectProjectField = ({
                </li>
              );
            })}
+            </div>
        </ul>
      )}
    </div>
@ -366,7 +373,7 @@ export const SelectProjectField = ({

 export const SelectFieldSearch = ({
  label = "Select",
-  placeholder = "Select ",
+  placeholder = "Select",
  required = false,
  value = null,
  onChange,
@ -377,6 +384,7 @@ export const SelectFieldSearch = ({
  isMultiple = false,
  hookParams,
  useFetchHook,
+  errors = null,
 }) => {
  const [searchText, setSearchText] = useState("");
  const debounce = useDebounce(searchText, 300);
@ -386,108 +394,76 @@ export const SelectFieldSearch = ({
  const [open, setOpen] = useState(false);
  const dropdownRef = useRef(null);

-  const getDisplayName = (entity) => {
-    if (!entity) return "";
-    return `${entity[labelKey] || ""}`.trim();
-  };
+  const getDisplayName = (entity) =>
+    entity ? `${entity[labelKey] || ""}`.trim() : "";

-  /** -----------------------------
-   * SELECTED OPTION (SINGLE)
-   * ----------------------------- */
+  /** ----------------------------- SELECTED OPTION ----------------------------- */
  let selectedSingle = null;
-
  if (!isMultiple) {
    if (isFullObject && value) selectedSingle = value;
    else if (!isFullObject && value)
      selectedSingle = options.find((o) => o[valueKey] === value);
  }

-  /** -----------------------------
-   * SELECTED OPTION (MULTIPLE)
-   * ----------------------------- */
  let selectedList = [];
  if (isMultiple && Array.isArray(value)) {
-    if (isFullObject) selectedList = value;
-    else {
-      selectedList = options.filter((opt) => value.includes(opt[valueKey]));
-    }
+    selectedList = isFullObject
+      ? value
+      : options.filter((opt) => value.includes(opt[valueKey]));
  }

-  /** Main button label */
  const displayText = !isMultiple
    ? getDisplayName(selectedSingle) || placeholder
-    : selectedList.length > 0
+    : selectedList.length
    ? selectedList.map((e) => getDisplayName(e)).join(", ")
    : placeholder;

-  /** -----------------------------
-   * HANDLE OUTSIDE CLICK
-   * ----------------------------- */
+  /** ----------------------------- OUTSIDE CLICK ----------------------------- */
  useEffect(() => {
    const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target))
        setOpen(false);
-      }
    };
-
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

-  // MERGED OPTIONS TO ENSURE SELECTED VALUE APPEARS EVEN IF NOT IN SEARCH RESULT
-  const [mergedOptions, setMergedOptions] = useState([]);
+  /** ----------------------------- MERGED OPTIONS ----------------------------- */
+  const [mergedOptions, setMergedOptions] = useState(options);

  useEffect(() => {
    let finalList = [...options];

-    if (!isMultiple && value && !isFullObject) {
-      // already selected option inside options?
-      const exists = options.some((o) => o[valueKey] === value);
-
-      // if selected item not found, try to get from props (value) as fallback
-      if (!exists && typeof value === "object") {
-        finalList.unshift(value);
-      }
+    if (!isMultiple && value && !isFullObject && typeof value === "object") {
+      const exists = options.some((o) => o[valueKey] === value[valueKey]);
+      if (!exists) finalList.unshift(value);
    }

    if (isMultiple && Array.isArray(value)) {
      value.forEach((val) => {
        const id = isFullObject ? val[valueKey] : val;
        const exists = options.some((o) => o[valueKey] === id);
-
-        if (!exists && typeof val === "object") {
-          finalList.unshift(val);
-        }
+        if (!exists && typeof val === "object") finalList.unshift(val);
      });
    }

-    setMergedOptions(finalList);
-  }, [options, value]);
+    // Only update if different to avoid infinite loop
+    const oldKeys = mergedOptions.map((o) => o[valueKey]).join(",");
+    const newKeys = finalList.map((o) => o[valueKey]).join(",");
+    if (oldKeys !== newKeys) setMergedOptions(finalList);
+  }, [options, value, isMultiple, isFullObject, valueKey, mergedOptions]);

-  /** -----------------------------
-   * HANDLE SELECT
-   * ----------------------------- */
+  /** ----------------------------- HANDLE SELECT ----------------------------- */
  const handleSelect = (option) => {
    if (!isMultiple) {
-      // SINGLE SELECT
-      if (isFullObject) onChange(option);
-      else onChange(option[valueKey]);
+      onChange(isFullObject ? option : option[valueKey]);
+      setOpen(false)
    } else {
-      // MULTIPLE SELECT
-      let updated = [];
-
      const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
-
-      if (exists) {
-        // remove
-        updated = selectedList.filter((e) => e[valueKey] !== option[valueKey]);
-      } else {
-        // add
-        updated = [...selectedList, option];
-      }
-
-      if (isFullObject) onChange(updated);
-      else onChange(updated.map((x) => x[valueKey]));
+      const updated = exists
+        ? selectedList.filter((e) => e[valueKey] !== option[valueKey])
+        : [...selectedList, option];
+      onChange(isFullObject ? updated : updated.map((x) => x[valueKey]));
    }
  };

@ -499,10 +475,9 @@ export const SelectFieldSearch = ({
        </Label>
      )}

-      {/* MAIN BUTTON */}
      <button
        type="button"
-        className={`select2-icons form-select d-flex align-items-center justify-content-between  ${
+        className={`select2-icons form-select d-flex align-items-center justify-content-between ${
          open ? "show" : ""
        }`}
        disabled={disabled}
@ -513,17 +488,17 @@ export const SelectFieldSearch = ({
        </span>
      </button>

-      {/* DROPDOWN */}
+      {errors && <div className="danger-text">{errors.message}</div>}
+
      {open && (
        <ul
-          className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded overflow-x-hidden"
+          className="dropdown-menu w-100 shadow-sm show animate__fadeIn h-64 overflow-auto rounded rounded-top-0 overflow-x-hidden"
          style={{
            position: "absolute",
            top: "100%",
            left: 0,
            zIndex: 1050,
-            marginTop: "2px",
-            borderRadius: "0.375rem",
+            marginTop: "1px",
            overflow: "hidden",
          }}
        >
@ -537,36 +512,40 @@ export const SelectFieldSearch = ({
              disabled={disabled}
            />
          </div>
+          <div className="overflow-auto px-1" style={{ maxHeight: "200px" }}>
+            {isLoading && (
+              <li className="dropdown-item text-muted text-center">
+                Loading...
+              </li>
+            )}
+            {!isLoading && mergedOptions.length === 0 && (
+              <li className="dropdown-item text-muted text-center">
+                No results found
+              </li>
+            )}

-          {isLoading && (
-            <li className="dropdown-item text-muted text-center">Loading...</li>
-          )}
+            {!isLoading &&
+              mergedOptions.map((option) => {
+                const isActive = isMultiple
+                  ? selectedList.some((x) => x[valueKey] === option[valueKey])
+                  : selectedSingle &&
+                    selectedSingle[valueKey] === option[valueKey];

-          {!isLoading && options.length === 0 && (
-            <li className="dropdown-item text-muted text-center">
-              No results found
-            </li>
-          )}
-
-          {!isLoading &&
-            options.map((option) => {
-              const isActive = isMultiple
-                ? selectedList.some((x) => x[valueKey] === option[valueKey])
-                : selectedSingle &&
-                  selectedSingle[valueKey] === option[valueKey];
-
-              return (
-                <li key={option[valueKey]}>
-                  <button
-                    type="button"
-                    className={`dropdown-item ${isActive ? "active" : ""}`}
-                    onClick={() => handleSelect(option)}
-                  >
-                    {getDisplayName(option)}
-                  </button>
-                </li>
-              );
-            })}
+                return (
+                  <li key={option[valueKey]}>
+                    <button
+                      type="button"
+                      className={`dropdown-item rounded ${
+                        isActive ? "active" : ""
+                      }`}
+                      onClick={() => handleSelect(option)}
+                    >
+                      {getDisplayName(option)}
+                    </button>
+                  </li>
+                );
+              })}
+          </div>
        </ul>
      )}
    </div>
--- a/src/components/common/HoverPopup.jsx
+++ b/src/components/common/HoverPopup.jsx
@ -6,10 +6,6 @@ import {
  togglePopup,
 } from "../../slices/localVariablesSlice";

-/**
- * align: "auto" | "left" | "right"
- * boundaryRef: optional ref to the drawer/container element to use as boundary
- */
 const HoverPopup = ({
  id,
  title,
@ -17,7 +13,9 @@ const HoverPopup = ({
  children,
  className = "",
  Mode = "hover",
-  align = "auto",
+  align = "auto", // <-- dynamic placement
+  minWidth = "250px",
+  maxWidth = "350px",
  boundaryRef = null,
 }) => {
  const dispatch = useDispatch();
@ -26,20 +24,15 @@ const HoverPopup = ({
  const triggerRef = useRef(null);
  const popupRef = useRef(null);

-  const handleMouseEnter = () => {
-    if (Mode === "hover") dispatch(openPopup(id));
-  };
-  const handleMouseLeave = () => {
-    if (Mode === "hover") dispatch(closePopup(id));
-  };
+  const handleMouseEnter = () => Mode === "hover" && dispatch(openPopup(id));
+  const handleMouseLeave = () => Mode === "hover" && dispatch(closePopup(id));
  const handleClick = (e) => {
-    if (Mode === "click") {
-      e.stopPropagation();
-      dispatch(togglePopup(id));
-    }
+    if (Mode !== "click") return;
+    e.stopPropagation();
+    dispatch(togglePopup(id));
  };

-  // Close on outside click when using click mode
+  // Close popup when clicking outside (click mode)
  useEffect(() => {
    if (Mode !== "click" || !visible) return;

@ -56,142 +49,95 @@ const HoverPopup = ({

    document.addEventListener("click", handler);
    return () => document.removeEventListener("click", handler);
-  }, [Mode, visible, dispatch, id]);
+  }, [visible, Mode, id, dispatch]);

-  // Positioning effect: respects align prop and stays inside boundary (drawer)
+  // ---------- DYNAMIC POSITIONING LOGIC ----------
  useEffect(() => {
    if (!visible || !popupRef.current || !triggerRef.current) return;

-    // run in next frame so DOM/layout settles
    requestAnimationFrame(() => {
      const popup = popupRef.current;
+      const trigger = triggerRef.current;

-      // choose boundary: provided boundaryRef or nearest positioned parent (popup.parentElement)
      const boundaryEl =
        (boundaryRef && boundaryRef.current) || popup.parentElement;
-      if (!boundaryEl) return;

      const boundaryRect = boundaryEl.getBoundingClientRect();
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-
-      // reset styles first
-      popup.style.left = "";
-      popup.style.right = "";
-      popup.style.transform = "";
-      popup.style.top = "";
-
+      const triggerRect = trigger.getBoundingClientRect();
      const popupRect = popup.getBoundingClientRect();
-      const parentRect = boundaryRect; // alias

-      // Convert trigger center to parent coordinates
-      const triggerCenterX =
-        triggerRect.left + triggerRect.width / 2 - parentRect.left;
+      let left;

-      // preferred left so popup center aligns to trigger center:
-      const preferredLeft = triggerCenterX - popupRect.width / 2;
+      // AUTO ALIGN (smart)
+      if (align === "auto") {
+        const center =
+          triggerRect.left +
+          triggerRect.width / 2 -
+          boundaryRect.left -
+          popupRect.width / 2;

-      // Helpers to set styles in parent's coordinate system:
-      const setLeft = (leftPx) => {
-        popup.style.left = `${leftPx}px`;
-        popup.style.right = "auto";
-        popup.style.transform = "none";
-      };
-      const setRight = (rightPx) => {
-        popup.style.left = "auto";
-        popup.style.right = `${rightPx}px`;
-        popup.style.transform = "none";
-      };
-
-      // If user forced align:
-      if (align === "left") {
-        // align popup's left to parent's left (0)
-        setLeft(0);
-        return;
-      }
-      if (align === "right") {
-        // align popup's right to parent's right (0)
-        setRight(0);
-        return;
-      }
-      if (align === "center") {
-        popup.style.left = "50%";
-        popup.style.right = "auto";
-        popup.style.transform = "translateX(-50%)";
-        return;
+        left = Math.max(
+          0,
+          Math.min(center, boundaryRect.width - popupRect.width)
+        );
      }

-      // align === "auto": try preferred centered position, but flip fully if overflow
-      // clamp preferredLeft to boundaries so it doesn't render partially outside
-      const leftIfCentered = Math.max(
-        0,
-        Math.min(preferredLeft, parentRect.width - popupRect.width)
-      );
-
-      // if centered fits, use it
-      if (leftIfCentered === preferredLeft) {
-        setLeft(leftIfCentered);
-        return;
+      // LEFT ALIGN
+      else if (align === "left") {
+        left = triggerRect.left - boundaryRect.left;
+        if (left + popupRect.width > boundaryRect.width) {
+          left = boundaryRect.width - popupRect.width; // clamp right
+        }
      }

-      // if centering would overflow right -> stick popup fully to left (left=0)
-      if (preferredLeft > parentRect.width - popupRect.width) {
-        // place popup so its right aligns to parent's right
-        // i.e., left = parent width - popup width
-        setLeft(parentRect.width - popupRect.width);
-        return;
+      // RIGHT ALIGN
+      else if (align === "right") {
+        left =
+          triggerRect.left +
+          triggerRect.width -
+          boundaryRect.left -
+          popupRect.width;
+
+        if (left < 0) left = 0; // clamp left
      }

-      // if centering would overflow left -> stick popup fully to left=0
-      if (preferredLeft < 0) {
-        setLeft(0);
-        return;
-      }
-
-      // fallback center
-      setLeft(leftIfCentered);
+      popup.style.left = `${left}px`;
+      popup.style.top = `100%`;
    });
  }, [visible, align, boundaryRef]);

- return (
-  <div
-    className="d-inline-block position-relative"   // <-- ADD THIS !!
-    style={{
-      maxWidth: "calc(700px - 100px)",
-      width: "100%",
-      wordWrap: "break-word",
-      overflow: "visible",   // also make sure popup isn't clipped
-    }}
-  >
-    <div
-      className="d-inline-block"
-      ref={triggerRef}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onClick={handleClick}
-      style={{ cursor: "pointer" }}
-    >
-      {children}
-    </div>
+  // ------------------------------------------------

-    {visible && (
+  return (
+    <div className="d-inline-block position-relative" style={{ overflow: "visible" }}>
      <div
-        ref={popupRef}
-        className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
-        style={{
-          zIndex: 2000,
-          top: "100%",
-          width: "max-content",
-          minWidth: "120px",
-        }}
-        onClick={(e) => e.stopPropagation()}
+        ref={triggerRef}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleClick}
+        style={{ cursor: "pointer", display: "inline-block" }}
      >
-        {title && <h6 className="fw-semibold mb-2">{title}</h6>}
-        <div>{content}</div>
+        {children}
      </div>
-    )}
-  </div>
-);

+      {visible && (
+        <div
+          ref={popupRef}
+          className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
+          style={{
+            zIndex: 2000,
+            minWidth,
+            maxWidth,
+            wordWrap: "break-word",
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {title && <h6 className="fw-semibold mb-2">{title}</h6>}
+          {content}
+        </div>
+      )}
+    </div>
+  );
 };

 export default HoverPopup;
--- a/src/components/common/InputSuggestion.jsx
+++ b/src/components/common/InputSuggestion.jsx
@ -4,6 +4,7 @@ const InputSuggestions = ({
  organizationList = [],
  value,
  onChange,
+  size = "sm",
  error,
  disabled = false,
 }) => {
@ -27,7 +28,7 @@ const InputSuggestions = ({
  return (
    <div className="mb-3 position-relative">
      <input
-        className="form-control form-control-sm"
+        className={`form-control form-control-${size}`}
        value={value}
        onChange={handleInputChange}
        onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
@ -50,7 +51,6 @@ const InputSuggestions = ({
          {filteredList.map((org) => (
            <li
              key={org}
-              className="ropdown-item"
              style={{
                cursor: "pointer",
                padding: "5px 12px",
@ -58,8 +58,7 @@ const InputSuggestions = ({
                transition: "background-color 0.2s",
              }}
              onMouseDown={() => handleSelectSuggestion(org)}
-                className={`dropdown-item ${
-                  org === value ? "active" : ""
+              className={`dropdown-item ${org === value ? "active" : ""
                }`}
            >
              {org}
--- a/src/components/common/SelectMultiple.jsx
+++ b/src/components/common/SelectMultiple.jsx
@ -154,7 +154,7 @@ const SelectMultiple = ({
        className="multi-select-dropdown-container"
        style={{ position: "relative" }}
      >
-        <label className="form-label mb-1">{label}</label>
+        <label className="form-label mb-0">{label}</label>
        <Label className={name} required={required}></Label>

        <div
--- a/src/components/common/SigleFileUploader.jsx
+++ b/src/components/common/SigleFileUploader.jsx
@ -0,0 +1,111 @@
+import { useRef } from "react";
+import Label from "./Label";
+import Tooltip from "./Tooltip";
+import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
+
+const SingleFileUploader = ({
+  label = "Upload Document",
+  required = false,
+  value,
+  onChange,
+  onRemove,
+  disabled,
+  error,
+  accept = ".pdf,.jpg,.jpeg,.png",
+  maxSizeMB = 25,
+  hint = "(PDF, JPG, PNG, max 5MB)",
+}) => {
+  const inputRef = useRef(null);
+
+  const handleFileSelect = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Validate size
+    if (file.size > maxSizeMB * 1024 * 1024) {
+      alert(`File size cannot exceed ${maxSizeMB}MB`);
+      e.target.value = "";
+      return;
+    }
+
+    // Convert to base64
+    const base64Data = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result.split(",")[1]);
+      reader.onerror = (err) => reject(err);
+    });
+
+    const attachmentObj = {
+      fileName: file.name,
+      base64Data,
+      invoiceAttachmentTypeId: "", // set dynamically if needed
+      contentType: file.type,
+      fileSize: file.size,
+      description: "",
+      isActive: true,
+    };
+
+    onChange(attachmentObj);
+    e.target.value = "";
+  };
+
+  return (
+    <div className="col-md-12">
+      <Label className="form-label" required={required}>
+        {label}
+      </Label>
+
+      <div
+        className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
+        style={{ cursor: "pointer" }}
+        onClick={() => inputRef.current.click()}
+      >
+        <i className="bx bx-cloud-upload d-block bx-lg"></i>
+        <span className="text-muted d-block">
+          Click to select or click here to browse
+        </span>
+        <small className="text-muted">{hint}</small>
+
+        <input
+          type="file"
+          ref={inputRef}
+          accept={accept}
+          style={{ display: "none" }}
+          onChange={handleFileSelect}
+          disabled={disabled}
+        />
+      </div>
+
+      {error && <small className="danger-text">{error}</small>}
+
+      {value && (
+        <div className="mt-3">
+          <div className="d-flex align-items-center justify-content-between bg-white border rounded p-2">
+            <div className="d-flex align-items-center gap-2">
+              <i
+                className={`bx ${getIconByFileType(value.contentType)} fs-3`}
+              ></i>
+
+              <div className="d-flex flex-column text-truncate">
+                <span className="fw-semibold small text-truncate">
+                  {value.fileName}
+                </span>
+                <small className="text-muted">
+                  {value.fileSize ? formatFileSize(value.fileSize) : ""}
+                </small>
+              </div>
+            </div>
+
+            <i
+              className="bx bx-trash text-danger fs-5 cursor-pointer"
+              onClick={onRemove}
+            ></i>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SingleFileUploader;
--- a/src/components/gallary/GalleryFilterChips.jsx
+++ b/src/components/gallary/GalleryFilterChips.jsx
@ -0,0 +1,59 @@
+import React, { useMemo } from "react";
+
+const GalleryFilterChips = ({ filter, filterData, removeFilterChip, clearFilter }) => {
+  const data = filterData?.data || filterData || {};
+
+  const filterChips = useMemo(() => {
+    const chips = [];
+
+    const addGroup = (ids, list, label, key) => {
+      if (!ids?.length) return;
+      const items = ids.map((id) => ({
+        id,
+        name: list?.find((i) => i.id === id)?.name || id,
+      }));
+      chips.push({ key, label, items });
+    };
+
+    addGroup(filter.buildingIds, data.buildings, "Building", "buildingIds");
+    addGroup(filter.floorIds, data.floors, "Floor", "floorIds");
+    addGroup(filter.workAreaIds, data.workAreas, "Work Area", "workAreaIds");
+    addGroup(filter.activityIds, data.activities, "Activity", "activityIds");
+    addGroup(filter.workCategoryIds, data.workCategories, "Work Category", "workCategoryIds");
+    addGroup(filter.uploadedByIds, data.uploadedBy, "Uploaded By", "uploadedByIds");
+    addGroup(filter.serviceIds, data.services, "Service", "serviceIds");
+
+    return chips;
+  }, [filter, filterData]);
+
+  if (!filterChips.length) return null;
+  return (
+    <div className="d-flex flex-wrap align-items-center gap-2">
+      {filterChips.map((chipGroup) => (
+        <div key={chipGroup.key} className="d-flex align-items-center flex-wrap">
+          <span className="fw-semibold me-2">{chipGroup.label}:</span>
+          {chipGroup.items.map((item) => (
+            <span
+              key={item.id}
+              className="d-flex align-items-center bg-light rounded px-2 py-1 me-1"
+            >
+              <span>{item.name}</span>
+              <button
+                type="button"
+                className="btn-close btn-close-white btn-sm ms-2"
+                style={{
+                  filter: "invert(1) grayscale(1)",
+                  opacity: 0.7,
+                  fontSize: "0.6rem",
+                }}
+                onClick={() => removeFilterChip(chipGroup.key, item.id)}
+              />
+            </span>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default GalleryFilterChips;
--- a/src/components/gallary/GalleryFilterPanel.jsx
+++ b/src/components/gallary/GalleryFilterPanel.jsx
@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useImageGalleryFilter } from "../../hooks/useImageGallery";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { FormProvider, useForm } from "react-hook-form";
@ -10,19 +10,52 @@ import SelectMultiple from "../common/SelectMultiple";
 import { localToUtc } from "../../utils/appUtils";
 import { useLocation } from "react-router-dom";

-const GalleryFilterPanel = ({ onApply }) => {
+const GalleryFilterPanel = forwardRef(({ onApply, setFilterdata, clearFilter }, ref) => {
  const selectedProject = useSelectedProject();
  const [resetKey, setResetKey] = useState(0);

  const { data, isLoading, isError, error } =
    useImageGalleryFilter(selectedProject);

+
+  const dynamicDefaultFilter = useMemo(() => {
+    return {
+      ...defaultGalleryFilterValue,
+      buildingIds: defaultGalleryFilterValue.buildingIds || [],
+      floorIds: defaultGalleryFilterValue.floorIds || [],
+      workAreaIds: defaultGalleryFilterValue.workAreaIds || [],
+      activityIds: defaultGalleryFilterValue.activityIds || [],
+      workCategoryIds: defaultGalleryFilterValue.workCategoryIds || [],
+      startDate: defaultGalleryFilterValue.startDate,
+      endDate: defaultGalleryFilterValue.endDate,
+      uploadedByIds: defaultGalleryFilterValue.uploadedByIds || [],
+      serviceIds: defaultGalleryFilterValue.serviceIds || [],
+    };
+  }, [selectedProject]);
+
+  useImperativeHandle(ref, () => ({
+    resetFieldValue: (name, value) => {
+      // Reset specific field
+      if (value !== undefined) {
+        setValue(name, value);
+      } else {
+        reset({ ...methods.getValues(), [name]: defaultFilter[name] });
+      }
+    },
+    getValues: methods.getValues, // optional, to read current filter state
+  }));
+
+  useEffect(() => {
+    if (data && setFilterdata) {
+      setFilterdata(data);
+    }
+  }, [data, setFilterdata]);
  const closePanel = () => {
    document.querySelector(".offcanvas.show .btn-close")?.click();
  };
  const methods = useForm({
    resolver: zodResolver(gallerySchema),
-    defaultValues: defaultGalleryFilterValue,
+    defaultValues: dynamicDefaultFilter,
  });

  const {
@ -144,6 +177,6 @@ const GalleryFilterPanel = ({ onApply }) => {
      </FormProvider>
    </div>
  );
-};
+});

 export default GalleryFilterPanel;
--- a/src/components/gallary/ImageGalleryListView.jsx
+++ b/src/components/gallary/ImageGalleryListView.jsx
@ -8,7 +8,8 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
 import Pagination from "../common/Pagination";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { SpinnerLoader } from "../common/Loader";
-const ImageGalleryListView = ({filter}) => {
+import GalleryFilterChips from "./GalleryFilterChips";
+const ImageGalleryListView = ({ filter, filterData, removeFilterChip, clearFilter }) => {
  const [hoveredImage, setHoveredImage] = useState(null);
  const selectedProject = useSelectedProject();
  const [currentPage, setCurrentPage] = useState(1);
@ -27,23 +28,23 @@ const ImageGalleryListView = ({filter}) => {
    }
  };

- if (!data?.data?.length && !isLoading) {
-  return (
-    <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 (!data?.data?.length && !isLoading) {
+    return (
+      <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) {
+  if (isLoading) {
    return (
      <div className="page-min-h d-flex justify-content-center align-items-center">
        <SpinnerLoader />
@ -51,16 +52,26 @@ const ImageGalleryListView = ({filter}) => {
    );
  } 

+ 
+
+
  return (
    <div className="main-content">
+      <div className="col-12 mb-2 mt-2 px-4">
+      <GalleryFilterChips
+        filter={filter}
+        filterData={filterData}
+        removeFilterChip={removeFilterChip}
+        clearFilter={clearFilter}
+      />
+    </div>
      <div className="activity-section">
        {data?.data?.map((batch) => {
          if (!batch.documents?.length) return null;

          const doc = batch.documents[0];
-          const userName = `${doc.uploadedBy?.firstName || ""} ${
-            doc.uploadedBy?.lastName || ""
-          }`.trim();
+          const userName = `${doc.uploadedBy?.firstName || ""} ${doc.uploadedBy?.lastName || ""
+            }`.trim();
          const date = formatUTCToLocalTime(doc.uploadedAt);
          //   const hasArrows = batch.documents.length > scrollThreshold;

@ -112,7 +123,7 @@ const ImageGalleryListView = ({filter}) => {
                )} */}
                <div
                  className="image-group-horizontal"
-                  //   ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
+                //   ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
                >
                  {batch.documents.map((d, i) => {
                    const hoverDate = moment().format("DD MMMM, YYYY");
--- a/src/components/master/EditRole.jsx
+++ b/src/components/master/EditRole.jsx
@ -241,7 +241,7 @@ const EditMaster = ({ master, onClose }) => {
                          data-bs-trigger="focus"
                          data-bs-placement="right"
                          data-bs-html="true"
-                          data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
+                          data-bs-content={`<div className="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
                        >
                          &nbsp;
                          <svg
--- a/src/components/master/Services/ServicesGroups.jsx
+++ b/src/components/master/Services/ServicesGroups.jsx
@ -109,7 +109,7 @@ const ServiceGroups = ({ service }) => {
                              />
                            </span>
                          )}
-                          <p className="m-0 fw-bold ">{group.name}</p>
+                          <p className="m-0 ">{group.name}</p>
                        </div>
                        <div className="d-flex flex-row gap-3">
                          <div className="d-flex flex-row gap-2">
--- a/src/components/purchase/DeliverChallanList.jsx
+++ b/src/components/purchase/DeliverChallanList.jsx
@ -0,0 +1,68 @@
+import React from "react";
+import { useDeliverChallane } from "../../hooks/usePurchase";
+import { SpinnerLoader } from "../common/Loader";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { FileView } from "../Expenses/Filelist";
+
+const DeliverChallanList = ({ purchaseId, viewDocuments }) => {
+  const { data, isLoading, isError, error } = useDeliverChallane(purchaseId);
+  if (isLoading) {
+    return (
+      <div className="d-flex justify-content-center align-items-center text-center vh-50">
+        <SpinnerLoader />
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="py-3">
+        <Error error={error} />
+      </div>
+    );
+  }
+  if (!isLoading && data.length === 0)
+    return (
+      <div className="d-flex justify-content-center align-items-center text-center vh-50">
+        <p className="mb-0">Not Yet</p>
+      </div>
+    );
+
+  return (
+    <div className="list-group list-group-flush text-start">
+      {data.map((item) => (
+        <div
+          key={item.id}
+          className="list-group-item d-flex justify-content-between align-items-start flex-wrap px-3 w-full"
+        >
+          {/* LEFT SIDE */}
+          <div className=" pe-3 text-break w-full">
+            <div className="d-flex justify-content-between">
+              <p className="mb-1 fw-semibold">{item.deliveryChallanNumber}</p>
+              <small className="text-muted text-end">
+                {formatUTCToLocalTime(item.deliveryChallanDate)}
+              </small>
+            </div>
+
+            <div className="mb-1 small text-muted text-break">
+              <span className="fw-semibold me-1">Invoice:</span>
+              {item.purchaseInvoice?.title} (
+              {item.purchaseInvoice?.purchaseInvoiceUId})
+            </div>
+
+            <p className="mb-1 text-break">
+              <span className="fw-semibold">Description:</span>{" "}
+              {item.description || "-"}
+            </p>
+
+            {item.attachment?.preSignedUrl && (
+              <FileView file={item.attachment} viewFile={viewDocuments} />
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DeliverChallanList;
--- a/src/components/purchase/DeliveryChallane.jsx
+++ b/src/components/purchase/DeliveryChallane.jsx
@ -0,0 +1,204 @@
+import React, { useState } from "react";
+import {
+  useAddDeliverChallan,
+  useDeliverChallane,
+} from "../../hooks/usePurchase";
+import { SpinnerLoader } from "../common/Loader";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import DeliverChallanList from "./DeliverChallanList";
+import { AppFormController, useAppForm } from "../../hooks/appHooks/useAppForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  DeliveryChallanDefaultValue,
+  DeliveryChallanSchema,
+} from "./PurchaseSchema";
+import Label from "../common/Label";
+import DatePicker from "../common/DatePicker";
+import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
+import SelectField from "../common/Forms/SelectField";
+import Filelist from "../Expenses/Filelist";
+import SingleFileUploader from "../common/SigleFileUploader";
+import { localToUtc } from "../../utils/appUtils";
+import WarningBlock from "../InfoBlock/WarningBlock";
+import { FILE_UPLOAD_INFO } from "../../utils/staticContent";
+import { usePurchaseContext } from "../../pages/purchase/PurchasePage";
+
+const DeliveryChallane = ({ purchaseId }) => {
+  const [file, setFile] = useState(null);
+  const {setDocumentView} = usePurchaseContext()
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    setValue,
+    trigger,
+    watch,
+    reset,
+    formState: { errors },
+  } = useAppForm({
+    resolver: zodResolver(DeliveryChallanSchema),
+    defaultValues: DeliveryChallanDefaultValue,
+  });
+
+  const { data, isLoading } = useInvoiceAttachmentTypes();
+  const { mutate: AddChallan, isPending } = useAddDeliverChallan(() => {
+    setFile(null);
+    setValue("attachment", null, { shouldValidate: false });
+    reset({
+      ...DeliveryChallanDefaultValue,
+      attachment: null,
+    });
+  });
+  const onSubmit = async (formData) => {
+    const valid = await trigger();
+    if (!valid) return;
+    const { invoiceAttachmentTypeId, ...rest } = formData;
+
+    const payload = {
+      ...rest,
+      attachment: formData.attachment
+        ? {
+            ...formData.attachment,
+            invoiceAttachmentTypeId,
+          }
+        : null,
+      purchaseInvoiceId: purchaseId,
+      deliveryChallanDate: formData.deliveryChallanDate
+        ? localToUtc(formData.deliveryChallanDate)
+        : null,
+    };
+
+    AddChallan(payload);
+  };
+  const isUploaded = watch("attachment");
+  const isDocumentType = watch("invoiceAttachmentTypeId");
+  return (
+    <div className="row px-3 px-sm-1">
+      <div className="fw-semibold mb-3 fs-5">Delivery Challans</div>
+
+      <div className="col-md-6">
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="row g-3 text-start"
+          noValidate
+        >
+          {/* Challan Number */}
+          <div className="col-md-6">
+            <Label required>Delivery Challan No</Label>
+
+            <input
+              type="text"
+              className="form-control"
+              {...register("deliveryChallanNumber")}
+            />
+
+            {errors?.deliveryChallanNumber && (
+              <small className="danger-text">
+                {errors.deliveryChallanNumber.message}
+              </small>
+            )}
+          </div>
+
+          <div className="col-md-6">
+            <Label required>Delivery Date</Label>
+
+            <DatePicker
+              name="deliveryChallanDate"
+              control={control}
+              className="w-100"
+              size="xs"
+            />
+
+            {errors?.deliveryChallanDate && (
+              <small className="danger-text">
+                {errors.deliveryChallanDate.message}
+              </small>
+            )}
+          </div>
+
+          <div className="col-12">
+            <Label required>Description</Label>
+
+            <textarea
+              className="form-control form-control-sm"
+              rows="3"
+              {...register("description")}
+            />
+
+            {errors?.description && (
+              <small className="danger-text">
+                {errors.description.message}
+              </small>
+            )}
+          </div>
+
+          <div className="col-12">
+            <AppFormController
+              name="invoiceAttachmentTypeId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Document Type"
+                  options={data ?? []}
+                  placeholder="Choose  Type"
+                  labelKeyKey="name"
+                  valueKeyKey="id"
+                  value={field.value}
+                  onChange={field.onChange}
+                  isLoading={isLoading}
+                  className="m-0"
+                />
+              )}
+            />
+
+            {errors?.invoiceAttachmentTypeId && (
+              <small className="danger-text">
+                {errors.invoiceAttachmentTypeId.message}
+              </small>
+            )}
+          </div>
+
+          <SingleFileUploader
+            label="Upload Bill"
+            required
+            value={file}
+            onChange={(selectedFile) => {
+              setFile(selectedFile);
+              setValue("attachment", selectedFile, { shouldValidate: true });
+            }}
+            disabled={!isDocumentType}
+            onRemove={() => {
+              setFile(null);
+              setValue("attachment", null, { shouldValidate: true });
+            }}
+            error={errors?.attachment?.message}
+          />
+
+          <div className="col-12 text-end my-3">
+            <button
+              type="submit"
+              className="btn btn-sm btn-primary px-4"
+              disabled={isPending}
+            >
+              {isPending ? "Please Wait..." : "Submit"}
+            </button>
+          </div>
+        </form>
+        {!isUploaded && <WarningBlock content={FILE_UPLOAD_INFO} />}
+      </div>
+
+      <div className="col-md-6 text-start">
+        <div className="d-flex justiffy-content-start align-items-center gap-1 ms-2">
+          <i className="bx bx-history bx-xs"></i>{" "}
+          <p className="fw-medium mb-0">History</p>
+        </div>
+        <div className="overflow-auto " style={{ maxHeight: "420px" }}>
+          <DeliverChallanList purchaseId={purchaseId} viewDocuments={setDocumentView} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeliveryChallane;
--- a/src/components/purchase/ManagePurchase.jsx
+++ b/src/components/purchase/ManagePurchase.jsx
@ -0,0 +1,239 @@
+import React, { useEffect, useMemo, useCallback, useState } from "react";
+import { AppFormProvider, useAppForm } from "../../hooks/appHooks/useAppForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import {
+  defaultPurchaseValue,
+  PurchaseSchema,
+  getStepFields,
+} from "./PurchaseSchema";
+
+import PurchasePartyDetails from "./PurchasePartyDetails";
+import PurchaseTransportDetails from "./PurchaseTransportDetails";
+import PurchasePaymentDetails from "./PurchasePaymentDetails";
+
+import {
+  useCreatePurchaseInvoice,
+  usePurchase,
+  useUpdatePurchaseInvoice,
+} from "../../hooks/usePurchase";
+import { error } from "pdf-lib";
+
+const ManagePurchase = ({ onClose, purchaseId }) => {
+  const { data } = usePurchase(purchaseId);
+
+  const [activeTab, setActiveTab] = useState(0);
+  const [completedTabs, setCompletedTabs] = useState([]);
+
+  const stepsConfig = useMemo(
+    () => [
+      {
+        name: "Vendor & Project Details",
+        icon: "bx bx-user bx-md",
+        subtitle: "Vendor information and project association",
+        component: <PurchasePartyDetails purchase={data} />,
+      },
+      {
+        name: "Invoice & Logistics",
+        icon: "bx bx-receipt bx-md",
+        subtitle: "Invoice, e-Way bill, and logistics information",
+        component: <PurchaseTransportDetails />,
+      },
+      {
+        name: "Invoice & Tax Amount",
+        icon: "bx bx-credit-card bx-md",
+        subtitle: "Payment terms, tax breakdown, and due dates",
+        component: <PurchasePaymentDetails purchaseId={purchaseId} />,
+      },
+    ],
+    [data, purchaseId]
+  );
+
+  const purchaseOrder = useAppForm({
+    resolver: zodResolver(PurchaseSchema),
+    defaultValues: defaultPurchaseValue,
+    mode: "onChange",
+    shouldUnregister: false,
+  });
+
+  const { reset, formState } = purchaseOrder;
+
+  useEffect(() => {
+    if (!purchaseId || !data) return;
+
+    reset({
+      ...data,
+      projectId: data?.project?.id,
+      organizationId: data?.organization?.id,
+      supplierId: data?.supplier?.id,
+      invoiceAttachmentTypeId: null,
+      attachments:
+        data?.attachments?.map((doc) => ({
+          fileName: doc.fileName,
+          base64Data: null,
+          contentType: doc.contentType,
+          documentId: doc.documentId ?? null,
+          invoiceAttachmentTypeId: doc.invoiceAttachmentType?.id ?? null,
+          fileSize: 0,
+          description: "",
+          preSignedUrl: doc.preSignedUrl,
+          isActive: doc.isActive ?? true,
+        })) || [],
+    });
+
+    setCompletedTabs([0, 1, 2]);
+  }, [purchaseId, data, reset]);
+
+  const handleNext = useCallback(async () => {
+    const fields = getStepFields(activeTab);
+    const valid = await purchaseOrder.trigger(fields);
+
+    if (!valid) return;
+
+    setCompletedTabs((prev) => [...new Set([...prev, activeTab])]);
+    setActiveTab((prev) => Math.min(prev + 1, stepsConfig.length - 1));
+  }, [activeTab, purchaseOrder, stepsConfig.length]);
+
+  const handlePrev = useCallback(() => {
+    setActiveTab((prev) => Math.max(prev - 1, 0));
+  }, []);
+
+  const generatePatchOps = useCallback(
+    (formData) => {
+      const { dirtyFields } = formState;
+
+      return Object.keys(dirtyFields)
+        .filter((key) => key !== "invoiceAttachmentTypeId")
+        .map((key) => ({
+          operationType: 0,
+          path: `/${key}`,
+          op: "replace",
+          value: formData[key],
+        }));
+    },
+    [formState]
+  );
+
+  const { mutate: CreateInvoice, isPending } = useCreatePurchaseInvoice(() => {
+    reset();
+    onClose();
+  });
+
+  const { mutate: updatePurchase, isPending: isUpdating } =
+    useUpdatePurchaseInvoice(() => {
+      reset();
+      onClose();
+    });
+
+  const onSubmit = useCallback(
+    (formData) => {
+      if (purchaseId) {
+        const payload = generatePatchOps(formData);
+        updatePurchase({ purchaseId, payload });
+      } else {
+        CreateInvoice(formData);
+      }
+    },
+    [purchaseId, generatePatchOps, updatePurchase, CreateInvoice]
+  );
+ 
+  return (
+    <div className="bs-stepper horizontically mt-2 b-secondry shadow-none border-0">
+      {/* --- Steps Header --- */}
+      <div className="bs-stepper-header text-start px-0 py-1">
+        {stepsConfig.map((step, index) => {
+          const isActive = activeTab === index;
+          const isCompleted = completedTabs.includes(index);
+
+          return (
+            <React.Fragment key={step.name}>
+              <div
+                className={`step text-truncate ${isActive ? "active" : ""} ${
+                  isCompleted ? "crossed" : ""
+                }`}
+              >
+                <button
+                  type="button"
+                  className={`step-trigger`}
+                  onClick={() => purchaseId && setActiveTab(index)}
+                >
+                  <span className="bs-stepper-circle">
+                    {isCompleted ? (
+                      <i className="bx bx-check"></i>
+                    ) : (
+                      <i className={step.icon}></i>
+                    )}
+                  </span>
+
+                  <span className="bs-stepper-label">
+                    <span className="bs-stepper-title">{step.name}</span>
+                    <span className="bs-stepper-subtitle">{step.subtitle}</span>
+                  </span>
+                </button>
+              </div>
+
+              {index < stepsConfig.length - 1 && (
+                <div className="line text-primary"></div>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+
+      {/* --- Form Content --- */}
+      <div className="bs-stepper-content py-2 px-3">
+        <AppFormProvider {...purchaseOrder}>
+          {activeTab !== 2 && (
+            <div>
+              {stepsConfig[activeTab].component}
+
+              <div className="d-flex justify-content-between mt-4">
+                <button
+                  type="button"
+                  className="btn btn-sm btn-outline-secondary"
+                  onClick={handlePrev}
+                  disabled={activeTab === 0}
+                >
+                  Previous
+                </button>
+
+                <button
+                  type="button"
+                  className="btn btn-sm btn-primary"
+                  onClick={handleNext}
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          )}
+          {activeTab === 2 && (
+            <form onSubmit={purchaseOrder.handleSubmit(onSubmit)}>
+              {stepsConfig[2].component}
+
+              <div className="d-flex justify-content-between mt-4">
+                <button
+                  type="button"
+                  className="btn btn-sm btn-outline-secondary"
+                  onClick={handlePrev}
+                >
+                  Previous
+                </button>
+
+                <button
+                  type="submit"
+                  className="btn btn-sm btn-primary"
+                  disabled={isPending || isUpdating}
+                >
+                  {isPending || isUpdating ? "Please Wait" : "Submit"}
+                </button>
+              </div>
+            </form>
+          )}
+        </AppFormProvider>
+      </div>
+    </div>
+  );
+};
+
+export default ManagePurchase;
--- a/src/components/purchase/PurchaseActions.jsx
+++ b/src/components/purchase/PurchaseActions.jsx
@ -0,0 +1,102 @@
+export  const getPurchaseActions = ({
+  item,
+  isActive,
+  canDelete,
+  canAddChallan,
+  setViewPurchase,
+  setManagePurchase,
+  setDeletingId,
+  setIsDeleteModalOpen,
+  setChallan,
+  setAddPayment,
+}) => {
+  const actions = [];
+
+  // VIEW
+  actions.push({
+    key: "view",
+    label: "View",
+    icon: "bx bx-show",
+    show: true,
+    onClick: () =>
+      setViewPurchase({
+        isOpen: true,
+        purchaseId: item.id,
+      }),
+  });
+
+  if (!isActive) {
+    // EDIT
+    actions.push({
+      key: "edit",
+      label: "Edit",
+      icon: "bx bx-edit",
+      show: true,
+      onClick: () =>
+        setManagePurchase({
+          isOpen: true,
+          purchaseId: item.id,
+        }),
+    });
+
+    // DELETE
+    actions.push({
+      key: "delete",
+      label: "Delete",
+      icon: "bx bx-trash",
+      show: canDelete,
+      onClick: () => {
+        setDeletingId(item.id);
+        setIsDeleteModalOpen(true);
+      },
+    });
+
+    // ADD CHALLAN
+    actions.push({
+      key: "challan",
+      label: "Add Delivery Challan",
+      icon: "bx bx-file bx-plus",
+      show: canAddChallan,
+      onClick: () =>
+        setChallan({
+          isOpen: true,
+          purchaseId: item.id,
+        }),
+    });
+
+    // ADD PAYMENT
+    actions.push({
+      key: "payment",
+      label: "Add Payment",
+      icon: "bx bx-wallet",
+      show: true,
+      onClick: () =>
+        setAddPayment({
+          isOpen: true,
+          purchaseId: item.id,
+        }),
+    });
+  } else {
+    // RESTORE
+    actions.push({
+      key: "restore",
+      label: "Restore",
+      icon: "bx bx-undo",
+      show: true,
+      onClick: () => {
+        setDeletingId(item.id);
+        setIsDeleteModalOpen(true);
+      },
+    });
+  }
+
+  return actions.filter((a) => a.show);
+};
+
+export const DropdownItem = ({ icon, label, onClick }) => (
+  <li>
+    <a className="dropdown-item cursor-pointer" onClick={onClick}>
+      <i className={`${icon} me-2`}></i> {label}
+    </a>
+  </li>
+);
--- a/src/components/purchase/PurchaseList.jsx
+++ b/src/components/purchase/PurchaseList.jsx
@ -0,0 +1,197 @@
+import React, { useState } from "react";
+import {
+  useDeletePurchaseInvoice,
+  usePurchasesList,
+} from "../../hooks/usePurchase";
+import {
+  ADD_DELIVERY_CHALLAN,
+  DELETEPURCHASE_INVOICE,
+  ITEMS_PER_PAGE,
+} from "../../utils/constants";
+import Pagination from "../common/Pagination";
+import { PurchaseColumn } from "./Purchasetable";
+import { SpinnerLoader } from "../common/Loader";
+import { useDebounce } from "../../utils/appUtils";
+import { usePurchaseContext } from "../../pages/purchase/PurchasePage";
+import ConfirmModal from "../common/ConfirmModal";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { DropdownItem, getPurchaseActions } from "./PurchaseActions";
+
+const PurchaseList = ({ searchString, isActive }) => {
+  const { setViewPurchase, setManagePurchase, setChallan, setAddPayment } =
+    usePurchaseContext();
+  const [currentPage, setCurrentPage] = useState(1);
+  const { mutate: DeletePurchaseInvoice, isPending } =
+    useDeletePurchaseInvoice();
+  const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [deletingId, setDeletingId] = useState(null);
+
+  const canAddChallan = useHasUserPermission(ADD_DELIVERY_CHALLAN);
+  const canDelete = useHasUserPermission(DELETEPURCHASE_INVOICE);
+
+  const debounceSearch = useDebounce(searchString, 300);
+  const { data, isLoading } = usePurchasesList(
+    ITEMS_PER_PAGE,
+    currentPage,
+    // true,
+    !isActive,
+    {},
+    debounceSearch
+  );
+
+  const paginate = (page) => {
+    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
+      setCurrentPage(page);
+    }
+  };
+
+  const visibleColumns = PurchaseColumn.filter((col) => !col.hidden);
+
+  const handleDeleteRestore = (id) => {
+    DeletePurchaseInvoice(
+      { id, isActive: isActive }, // delete if active, restore if deleted
+      {
+        onSettled: () => {
+          setDeletingId(null);
+          setIsDeleteModalOpen(false);
+        },
+      }
+    );
+  };
+
+  return (
+    <>
+      {IsDeleteModalOpen && (
+        <ConfirmModal
+          isOpen={IsDeleteModalOpen}
+          type={!isActive ? "delete" : "undo"}
+          header={!isActive ? "Delete Invoice" : "Restore Invoice"}
+          message={
+            !isActive
+              ? "Are you sure you want to delete?"
+              : "Are you sure you want to restore?"
+          }
+          onSubmit={handleDeleteRestore}
+          onClose={() => setIsDeleteModalOpen(false)}
+          loading={isPending}
+          paramData={deletingId}
+        />
+      )}
+      <div className="card mt-2 page-min-h table-responsive  px-sm-4">
+        <div className="px-2">
+          <table className="datatables-users table border-top text-nowrap">
+            <thead>
+              <tr>
+                {visibleColumns.map((col) => (
+                  <th key={col.key} colSpan={col.colSpan || 1}>
+                    <div className={col.className || ""}>{col.label}</div>
+                  </th>
+                ))}
+                <th>Action</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              {/* LOADING */}
+              {isLoading && (
+                <tr>
+                  <td
+                    colSpan={visibleColumns.length + 1}
+                    className="border-0"
+                    style={{ height: "300px", verticalAlign: "middle" }}
+                  >
+                    <div className="d-flex justify-content-center align-items-center w-100 h-100">
+                      <SpinnerLoader />
+                    </div>
+                  </td>
+                </tr>
+              )}
+
+              {!isLoading && data?.data?.length === 0 && (
+                <tr>
+                  <td
+                    colSpan={visibleColumns.length + 1}
+                    className="text-center border-0"
+                    style={{ height: "400px", verticalAlign: "middle" }}
+                  >
+                    No Data Found
+                  </td>
+                </tr>
+              )}
+
+              {!isLoading &&
+                data?.data?.map((item, index) => (
+                  <tr key={item?.id || index}>
+                    {visibleColumns.map((col) => (
+                      <td
+                        key={col.key}
+                        className={`${col.className} cursor-pointer` || ""}
+                        onClick={() =>
+                          setViewPurchase({
+                            isOpen: true,
+                            purchaseId: item.id,
+                          })
+                        }
+                      >
+                        {col.render ? col.render(item) : item[col.key] || "NA"}
+                      </td>
+                    ))}
+                    <td>
+                      <div className="dropdown z-2">
+                        <button
+                          type="button"
+                          className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                          data-bs-toggle="dropdown"
+                          aria-expanded="false"
+                        >
+                          <i
+                            className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                            data-bs-toggle="tooltip"
+                            data-bs-offset="0,8"
+                            data-bs-placement="top"
+                            data-bs-custom-class="tooltip-dark"
+                            title="More Action"
+                          ></i>
+                        </button>
+                        <ul className="dropdown-menu dropdown-menu-end">
+                          {getPurchaseActions({
+                            item,
+                            isActive,
+                            canDelete,
+                            canAddChallan,
+                            setViewPurchase,
+                            setManagePurchase,
+                            setDeletingId,
+                            setIsDeleteModalOpen,
+                            setChallan,
+                            setAddPayment,
+                          }).map((action) => (
+                            <DropdownItem
+                              key={action.key}
+                              icon={action.icon}
+                              label={action.label}
+                              onClick={action.onClick}
+                            />
+                          ))}
+                        </ul>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+            </tbody>
+          </table>
+        </div>
+
+        {data?.data?.length > 0 && (
+          <Pagination
+            currentPage={currentPage}
+            totalPages={data.totalPages}
+            onPageChange={paginate}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default PurchaseList;
--- a/src/components/purchase/PurchasePartyDetails.jsx
+++ b/src/components/purchase/PurchasePartyDetails.jsx
@ -0,0 +1,239 @@
+import React from "react";
+import {
+  AppFormController,
+  useAppFormContext,
+} from "../../hooks/appHooks/useAppForm";
+import Label from "../common/Label";
+import DatePicker from "../common/DatePicker";
+import {
+  SelectFieldSearch,
+  SelectProjectField,
+} from "../common/Forms/SelectFieldServerSide";
+import {
+  useGlobaleOrganizations,
+  useOrganization,
+  useOrganizationsList,
+} from "../../hooks/useOrganization";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+
+const PurchasePartyDetails = () => {
+  const {
+    register,
+    control,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useAppFormContext();
+
+   const hasNumber = !! watch('proformaInvoiceNumber');
+    const hasAmount =
+      watch("proformaInvoiceAmount") !== null && watch("proformaInvoiceAmount") > 0;
+    const hasDate = !!watch("proformaInvoiceDate");
+
+    // If any one field is filled → all must be valid
+    const anyField = hasNumber || hasAmount || hasDate;
+
+  return (
+    <div className="row g-3 text-start">
+      {/* Title */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="title" required>
+          Title
+        </Label>
+
+        <input
+          id="title"
+          type="text"
+          className={`form-control form-control-xs `}
+          {...register("title")}
+        />
+
+        {errors?.title && (
+          <div className="danger-text">{errors.title.message}</div>
+        )}
+      </div>
+
+      {/* Project ID */}
+      <div className="col-12 col-md-6">
+        <SelectProjectField
+          className={`form-control form-control-xs ${
+            errors?.projectId ? "is-invalid" : ""
+          }`}
+          label="Project"
+          required
+          placeholder="Select Project"
+          value={watch("projectId")}
+          onChange={(val) =>
+            setValue("projectId", val, {
+              shouldDirty: true,
+              shouldValidate: true,
+            })
+          }
+          errors={errors}
+        />
+      </div>
+
+      <div className="col-12 col-md-6 my-0">
+        <AppFormController
+          name="organizationId"
+          control={control}
+          render={({ field }) => (
+            <SelectFieldSearch
+              label="Organization"
+              placeholder="Select Organization"
+                 required
+              value={field.value}
+              onChange={field.onChange}
+              valueKey="id"
+              labelKey="name"
+              useFetchHook={useGlobaleOrganizations}
+              hookParams={[ITEMS_PER_PAGE, 1]}
+              errors={errors?.organizationId}
+            />
+          )}
+        />
+      </div>
+
+      <div className="col-12 col-md-6 my-0">
+        <AppFormController
+          name="supplierId"
+          control={control}
+          render={({ field }) => (
+            <SelectFieldSearch
+              label="Supplier"
+              placeholder="Select Organization"
+              required
+              value={field.value}
+              onChange={field.onChange}
+              valueKey="id"
+              labelKey="name"
+              useFetchHook={useGlobaleOrganizations}
+              hookParams={[ITEMS_PER_PAGE, 1]}
+              errors={errors.supplierId}
+            />
+          )}
+        />
+      </div>
+
+      <div className="col-12 col-md-6 my-0">
+        <Label required htmlFor="billingAddress">Billing Address</Label>
+
+        <textarea
+          id="billingAddress"
+          rows="2"
+          className={`form-control form-control-xs `}
+          {...register("billingAddress")}
+        />
+
+        {errors?.billingAddress && (
+          <div className="danger-text">{errors.billingAddress.message}</div>
+        )}
+      </div>
+
+      <div className="col-12 col-md-6 my-0 mb-1">
+        <Label required htmlFor="shippingAddress">Shipping Address</Label>
+
+        <textarea
+          id="shippingAddress"
+          rows="2"
+          className={`form-control form-control-xs `}
+          {...register("shippingAddress")}
+        />
+
+        {errors?.shippingAddress && (
+          <div className="danger-text">{errors.shippingAddress.message}</div>
+        )}
+      </div>
+
+      {/* Purchase Order Number */}
+      <div className="col-12 col-md-6 ">
+        <Label htmlFor="purchaseOrderNumber" >
+          Purchase Order Number
+        </Label>
+
+        <input
+          id="purchaseOrderNumber"
+          type="text"
+          className={`form-control form-control-xs `}
+          {...register("purchaseOrderNumber")}
+        />
+
+        {errors?.purchaseOrderNumber && (
+          <div className="danger-text">
+            {errors.purchaseOrderNumber.message}
+          </div>
+        )}
+      </div>
+
+      {/* Purchase Order Date */}
+      <div className="col-12 col-md-6 mb-1">
+        <Label htmlFor="purchaseOrderDate" >
+          Purchase Order Date
+        </Label>
+
+        <DatePicker
+          control={control}
+          name="purchaseOrderDate"
+          size="xs"
+          className={` w-full  ${
+            errors?.purchaseOrderDate ? "is-invalid" : ""
+          }`}
+        />
+
+        {errors?.purchaseOrderDate && (
+          <div className="danger-text">{errors.purchaseOrderDate.message}</div>
+        )}
+      </div>
+
+      {/* Proforma Invoice */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="proformaInvoiceNumber" required={anyField ? true : hasNumber}>Proforma Invoice Number</Label>
+        <input
+          id="proformaInvoiceNumber"
+          type="text"
+          className={`form-control `}
+          {...register("proformaInvoiceNumber")}
+        />
+
+        {errors?.proformaInvoiceNumber && (
+          <div className="danger-text">
+            {errors.proformaInvoiceNumber.message}
+          </div>
+        )}
+      </div>
+      <div className="col-12 col-md-6 mb-1">
+        <Label htmlFor="proformaInvoiceAmountt" required={anyField ? true : hasAmount}>Proforma Amount</Label>
+        <input
+          id="proformaInvoiceAmount"
+          type="text"
+          className={`form-control `}
+          {...register("proformaInvoiceAmount")}
+        />
+
+        {errors?.proformaInvoiceAmount && (
+          <div className="danger-text">
+            {errors.proformaInvoiceAmount.message}
+          </div>
+        )}
+      </div>
+      <div className="col-12 col-md-6 mb-2">
+        <Label htmlFor="proformaInvoiceDate" required={anyField ? true : hasDate}>Proforma Date</Label>
+
+        <DatePicker
+          control={control}
+          name="proformaInvoiceDate"
+          className="w-full"
+          size="xs"
+        />
+
+        {errors?.proformaInvoiceDate && (
+          <div className="danger-text">
+            {errors.proformaInvoiceDate.message}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PurchasePartyDetails;
--- a/src/components/purchase/PurchasePayment.jsx
+++ b/src/components/purchase/PurchasePayment.jsx
@ -0,0 +1,289 @@
+import React from "react";
+import {
+  AppFormController,
+  AppFormProvider,
+  useAppForm,
+} from "../../hooks/appHooks/useAppForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AddPurchasePayment, defaultPurchasePayment } from "./PurchaseSchema";
+import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
+import { formatFigure, localToUtc } from "../../utils/appUtils";
+import Label from "../common/Label";
+import DatePicker from "../common/DatePicker";
+import {
+  useAddPurchasePayment,
+  usePurchase,
+  usePurchasePaymentHistory,
+} from "../../hooks/usePurchase";
+import SelectField from "../common/Forms/SelectField";
+import { SpinnerLoader } from "../common/Loader";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import Avatar from "../common/Avatar";
+
+const PurchasePayment = ({ onClose, purchaseId }) => {
+  const {
+    data: Purchase,
+    isLoading: isPurchaseLoading,
+    error: purchaseError,
+  } = usePurchase(purchaseId);
+  const methods = useAppForm({
+    resolver: zodResolver(AddPurchasePayment),
+    defaultValues: defaultPurchasePayment,
+  });
+  const {
+    control,
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = methods;
+
+  const {
+    data: paymentTypes,
+    isLoading: isPaymentTypeLoading,
+    isError: isPaymentTypeError,
+    error: paymentError,
+  } = usePaymentAjustmentHead(true);
+
+  const { mutate: AddPayment, isPending } = useAddPurchasePayment(() => {
+    handleClose();
+  });
+  const { data, isLoading, isError, error } =
+    usePurchasePaymentHistory(purchaseId);
+  const onSubmit = (formData) => {
+    const payload = {
+      ...formData,
+      paymentReceivedDate: localToUtc(formData.paymentReceivedDate),
+      invoiceId: purchaseId,
+    };
+    AddPayment(payload);
+  };
+
+  const handleClose = (formData) => {
+    reset(defaultPurchasePayment);
+  };
+  return (
+    <div className="contianer p-1">
+      <div className="text-center">
+        <p className="fs-5 text-semibod">Supplier / Vendor Transaction </p>
+      </div>
+      <div className="row g-3">
+        <div className="col-12 col-sm-6 px-2 p-sm-0">
+          <AppFormProvider {...methods}>
+            <form onSubmit={handleSubmit(onSubmit)} className="p-0 text-start">
+              <div className="row px-md-1 px-0">
+                <div className="col-12 col-md-6  mb-2">
+                  <Label required>TransanctionId</Label>
+                  <input
+                    type="text"
+                    className="form-control form-control-md"
+                    {...register("transactionId")}
+                  />
+                  {errors.transactionId && (
+                    <small className="danger-text">
+                      {errors.transactionId.message}
+                    </small>
+                  )}
+                </div>
+
+                <div className="col-12 col-md-6  mb-2">
+                  <Label required>Transaction Date </Label>
+                  <DatePicker
+                    className="w-100"
+                    size="md"
+                    name="paymentReceivedDate"
+                    control={control}
+                  />
+                  {errors.paymentReceivedDate && (
+                    <small className="danger-text">
+                      {errors.paymentReceivedDate.message}
+                    </small>
+                  )}
+                </div>
+
+                <div className="col-12 col-md-6  mb-2">
+                  <AppFormController
+                    name="paymentAdjustmentHeadId"
+                    control={control}
+                    render={({ field }) => (
+                      <SelectField
+                        label="Payment Adjustment Head"
+                        options={paymentTypes?.data ?? []}
+                        placeholder="Choose a Status"
+                        required
+                        labelKeyKey="name"
+                        valueKeyKey="id"
+                        value={field.value}
+                        onChange={field.onChange}
+                        isLoading={isPaymentTypeLoading}
+                        className="m-0"
+                      />
+                    )}
+                  />
+                  {errors.paymentAdjustmentHeadId && (
+                    <small className="danger-text">
+                      {errors.paymentAdjustmentHeadId.message}
+                    </small>
+                  )}
+                </div>
+
+                <div className="col-12 col-md-6  mb-2">
+                  <Label htmlFor="amount" className="form-label" required>
+                    Amount
+                  </Label>
+                  <input
+                    type="number"
+                    id="amount"
+                    className="form-control form-control-md"
+                    min="1"
+                    step="0.01"
+                    inputMode="decimal"
+                    {...register("amount", { valueAsNumber: true })}
+                  />
+                  {errors.amount && (
+                    <small className="danger-text">
+                      {errors.amount.message}
+                    </small>
+                  )}
+                </div>
+                <div className="col-12   mb-2">
+                  <Label htmlFor="comment" className="form-label" required>
+                    Comment
+                  </Label>
+                  <textarea
+                    id="comment"
+                    className="form-control form-control-sm"
+                    {...register("comment")}
+                  />
+                  {errors.comment && (
+                    <small className="danger-text">
+                      {errors.comment.message}
+                    </small>
+                  )}
+                </div>
+
+                <div className="d-flex justify-content-end gap-3">
+                  {" "}
+                  <button
+                    type="reset"
+                    className="btn btn-label-secondary btn-sm mt-3"
+                    onClick={() => {
+                      handleClose();
+                      onClose();
+                    }}
+                    disabled={isPending}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn btn-primary btn-sm mt-3"
+                    disabled={isPending}
+                  >
+                    {isPending ? "Please Wait..." : "Submit"}
+                  </button>
+                </div>
+              </div>
+            </form>
+          </AppFormProvider>
+        </div>
+
+        <div className="col-12 col-sm-6 px-2 p-sm-0">
+          <div className="d-flex flex-row gap-2 text-start">
+            <i className="bx bx-history"></i> <p>Purchase Payment Log</p>
+          </div>
+
+          {isLoading ? (
+            <SpinnerLoader />
+          ) : (
+            data?.length > 0 && (
+              <div
+                className="row text-start mx-2"
+                style={{ maxHeight: "70vh", overflowY: "auto" }}
+              >
+                {data
+                  .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
+                  .map((payment, index) => (
+                    <div className="col-12 mb-2" key={payment.id}>
+                      <div className=" p-2 border-start border-warning">
+                        <div className="row">
+                          <div className="col-12 col-md-6 d-flex justify-content-between align-items-center ">
+                            <div>
+                              <small className="fw-semibold me-1">
+                                Transaction Date:
+                              </small>{" "}
+                              {formatUTCToLocalTime(
+                                payment.paymentReceivedDate
+                              )}
+                            </div>
+                            <span className="fs-semibold d-block d-md-none">
+                              {formatFigure(payment.amount, {
+                                type: "currency",
+                                currency: "INR",
+                              })}
+                            </span>
+                          </div>
+
+                          <div className="col-12 col-md-6 mb-0 d-flex align-items-center m-0">
+                            <small className="fw-semibold me-2">
+                              Updated By:
+                            </small>{" "}
+                            <Avatar
+                              size="xs"
+                              firstName={payment?.createdBy?.firstName}
+                              lastName={payment?.createdBy?.lastName}
+                            />{" "}
+                            {payment?.createdBy?.firstName}{" "}
+                            {payment.createdBy?.lastName}
+                          </div>
+                        </div>
+
+                        <div className="row">
+                          <div className="col-12 col-md-6">
+                            <p className="mb-1">
+                              <small className="fw-semibold">
+                                Transaction ID:
+                              </small>{" "}
+                              {payment.transactionId}
+                            </p>
+                          </div>
+                          <div className="col-12 ">
+                            <div className="d-flex justify-content-between">
+                              <span>
+                                {payment?.paymentAdjustmentHead?.name}
+                              </span>
+                              <span className="fs-semibold d-none d-md-block">
+                                {formatFigure(payment.amount, {
+                                  type: "currency",
+                                  currency: "INR",
+                                })}
+                              </span>
+                            </div>
+                            <p className="text-tiny m-0 mt-1">
+                              {payment?.comment}
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            )
+          )}
+          {data?.length === 0 && (
+            <div className="d-flex justify-content-center algin-items-center text-center">
+              <div>
+                <i className="bx bx-box"></i>
+                <p className="text-secondary">
+                  You don't have any payment yet.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PurchasePayment;
--- a/src/components/purchase/PurchasePaymentDetails.jsx
+++ b/src/components/purchase/PurchasePaymentDetails.jsx
@ -0,0 +1,305 @@
+import React, { useEffect } from "react";
+import Label from "../common/Label";
+import {
+  AppFormController,
+  useAppFormContext,
+} from "../../hooks/appHooks/useAppForm";
+import DatePicker from "../common/DatePicker";
+import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
+import Filelist from "../Expenses/Filelist";
+import SelectField from "../common/Forms/SelectField";
+import { useWatch } from "react-hook-form";
+import WarningBlock from "../InfoBlock/WarningBlock";
+import { FILE_UPLOAD_INFO } from "../../utils/staticContent";
+
+const PurchasePaymentDetails = ({ purchaseId = null }) => {
+  const { data, isLoading, error, isError } = useInvoiceAttachmentTypes();
+  const { data: InvoiceDocTypes, isLoading: invoiceDocLoading } =
+    useInvoiceAttachmentTypes();
+  const {
+    register,
+    watch,
+    setValue,
+    control,
+    formState: { errors },
+  } = useAppFormContext();
+
+  const baseAmount = watch("baseAmount");
+  const taxAmount = watch("taxAmount");
+  const trCharge = watch("transportCharges");
+  useEffect(() => {
+    const base = parseFloat(baseAmount) || 0;
+    const tax = parseFloat(taxAmount) || 0;
+    const transportCharges = parseFloat(trCharge) || 0;
+
+    if (base || tax || transportCharges) {
+      setValue("totalAmount", (base + tax + transportCharges).toFixed(2));
+    }
+  }, [baseAmount, taxAmount, trCharge, setValue]);
+  const invoiceAttachmentType = watch("invoiceAttachmentTypeId");
+  const files = watch("attachments");
+  const toBase64 = (file) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result.split(",")[1]);
+      reader.onerror = (error) => reject(error);
+    });
+  const onFileChange = async (e) => {
+    const newFiles = Array.from(e.target.files);
+    if (newFiles.length === 0) return;
+
+    const existingFiles = watch("attachments") || [];
+
+    const parsedFiles = await Promise.all(
+      newFiles.map(async (file) => {
+        const base64Data = await toBase64(file);
+        return {
+          fileName: file.name,
+          base64Data,
+          contentType: file.type,
+          fileSize: file.size,
+          description: "",
+          isActive: true,
+          invoiceAttachmentTypeId: invoiceAttachmentType,
+          isNew: true, // <-- temp
+          tempId: crypto.randomUUID(), // temp - id
+        };
+      })
+    );
+
+    const combinedFiles = [
+      ...existingFiles,
+      ...parsedFiles.filter(
+        (newFile) =>
+          !existingFiles.some(
+            (f) =>
+              f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
+          )
+      ),
+    ];
+
+    setValue("attachments", combinedFiles, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  };
+
+  const removeFile = (index) => {
+    const updated = files.flatMap((file, i) => {
+      // NEW FILE → remove completely
+      if (file.isNew && file.tempId === index) {
+        return []; // remove from array
+      }
+
+      // EXISTING FILE → mark inactive
+      if (!file.isNew && file.documentId === index) {
+        return [{ ...file, isActive: false }];
+      }
+
+      return [file];
+    });
+
+    setValue("attachments", updated, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  };
+  const hasNumber = !!watch("proformaInvoiceNumber");
+  return (
+    <div className="row g-1 text-start">
+      <div className="col-12 col-md-4">
+        <Label htmlFor="baseAmount" required={!hasNumber}>
+          Base Amount
+        </Label>
+
+        <input
+          id="baseAmount"
+          type="number"
+          className="form-control form-control-xs"
+          {...register("baseAmount", { valueAsNumber: true })}
+        />
+
+        {errors?.baseAmount && (
+          <div className="small danger-text mt-1">
+            {errors.baseAmount.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-12 col-md-4">
+        <Label htmlFor="taxAmount" required={!hasNumber}>
+          Tax Amount
+        </Label>
+
+        <input
+          id="taxAmount"
+          type="number"
+          className="form-control form-control-xs"
+          {...register("taxAmount", { valueAsNumber: true })}
+        />
+
+        {errors?.taxAmount && (
+          <div className="small danger-text mt-1">
+            {errors.taxAmount.message}
+          </div>
+        )}
+      </div>
+      <div className="col-12 col-md-4">
+        <Label htmlFor="transportCharges">Transport Charges</Label>
+
+        <input
+          id="transportCharges"
+          type="number"
+          className="form-control form-control-xs"
+          {...register("transportCharges", { valueAsNumber: true })}
+        />
+
+        {errors?.transportCharges && (
+          <div className="small danger-text mt-1">
+            {errors.transportCharges.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-12 col-md-6">
+        <Label htmlFor="totalAmount" required={!hasNumber}>
+          Total Amount
+        </Label>
+
+        <input
+          id="totalAmount"
+          type="number"
+          className="form-control form-control-xs"
+          {...register("totalAmount", { valueAsNumber: true })}
+        />
+
+        {errors?.totalAmount && (
+          <div className="small danger-text mt-1">
+            {errors.totalAmount.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-12 col-md-6">
+        <Label htmlFor="paymentDueDate">Payment Due Date</Label>
+
+        <DatePicker
+          name={"paymentDueDate"}
+          control={control}
+          className="w-full"
+          size="xs"
+        />
+
+        {errors?.paymentDueDate && (
+          <div className="small danger-text mt-1">
+            {errors.paymentDueDate.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-12 mb-2">
+        <Label htmlFor="description">Description</Label>
+
+        <textarea
+          id="description"
+          rows="3"
+          className="form-control form-control-xs"
+          {...register("description")}
+        />
+
+        {errors?.description && (
+          <div className="small danger-text mt-1">
+            {errors.description.message}
+          </div>
+        )}
+      </div>
+      <div className="col-12">
+        <AppFormController
+          name="invoiceAttachmentTypeId"
+          control={control}
+          render={({ field }) => (
+            <SelectField
+              label="Select Document Type"
+              options={InvoiceDocTypes ?? []}
+              placeholder="Choose  Type"
+              labelKeyKey="name"
+              valueKeyKey="id"
+              value={field.value}
+              onChange={field.onChange}
+              isLoading={invoiceDocLoading}
+              className="m-0"
+            />
+          )}
+        />
+
+        {errors?.invoiceAttachmentTypeId && (
+          <small className="danger-text">
+            {errors.invoiceAttachmentTypeId.message}
+          </small>
+        )}
+      </div>
+
+      <div className="text-start">
+        <div className="col-md-12">
+          <Label className="form-label" required>
+            Upload Bill{" "}
+          </Label>
+
+          <div
+            className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
+            style={{ cursor: "pointer" }}
+            onClick={() => document.getElementById("attachments").click()}
+          >
+            <i className="bx bx-cloud-upload d-block bx-lg"> </i>
+            <span className="text-muted d-block">
+              Click to select or click here to browse
+            </span>
+            <small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
+
+            <input
+              type="file"
+              id="attachments"
+              accept=".pdf,.jpg,.jpeg,.png"
+              multiple
+              disabled={!invoiceAttachmentType}
+              style={{ display: "none" }}
+              {...register("attachments")}
+              onChange={(e) => {
+                onFileChange(e);
+                e.target.value = "";
+              }}
+            />
+          </div>
+          {errors.attachments && (
+            <small className="danger-text">{errors.attachments.message}</small>
+          )}
+          {files.length > 0 && (
+            <Filelist
+              files={files}
+              removeFile={removeFile}
+              expenseToEdit={purchaseId}
+            />
+          )}
+
+          {Array.isArray(errors.attachments) &&
+            errors.attachments.map((fileError, index) => (
+              <div key={index} className="danger-text small mt-1">
+                {
+                  (fileError?.fileSize?.message ||
+                    fileError?.contentType?.message ||
+                    fileError?.base64Data?.message,
+                  fileError?.documentId?.message)
+                }
+              </div>
+            ))}
+          {!invoiceAttachmentType && (
+            <WarningBlock content={FILE_UPLOAD_INFO} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PurchasePaymentDetails;
--- a/src/components/purchase/PurchaseSchema.jsx
+++ b/src/components/purchase/PurchaseSchema.jsx
@ -0,0 +1,288 @@
+import { z } from "zod";
+import { normalizeAllowedContentTypes } from "../../utils/appUtils";
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ALLOWED_TYPES = [
+  "application/pdf",
+  "image/png",
+  "image/jpg",
+  "image/jpeg",
+];
+
+export const AttachmentSchema = z.object({
+  invoiceAttachmentTypeId: z.string().nullable(),
+  fileName: z.string().min(1, { message: "Filename is required" }),
+  base64Data: z.string().nullable(),
+  contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
+    message: "Only PDF, PNG, JPG, or JPEG files are allowed",
+  }),
+  fileSize: z.number().max(MAX_FILE_SIZE, {
+    message: "File size must be less than or equal to 5MB",
+  }),
+  description: z.string().optional().default(""),
+  isActive: z.boolean().default(true),
+  documentId: z.string().nullable().default(null),
+});
+
+export const PurchaseSchema = z
+  .object({
+    title: z.string().min(1, { message: "Title is required" }),
+    projectId: z.string().min(1, { message: "Project is required" }),
+    organizationId: z.string().min(1, { message: "Organization is required" }),
+    billingAddress: z.string().min(1, { message: "Address is required" }),
+    shippingAddress: z.string().min(1, { message: "Address is required" }),
+
+    purchaseOrderNumber: z.string().nullable(),
+    purchaseOrderDate: z.coerce.date().nullable(),
+
+    supplierId: z.string().min(1, { message: "Supplier is required" }),
+
+    proformaInvoiceNumber: z.string().nullable(),
+    proformaInvoiceDate: z.coerce.date().nullable(),
+    proformaInvoiceAmount: z.coerce.number().optional(),
+
+    invoiceNumber: z.string().nullable(),
+    invoiceDate: z.coerce.date().nullable(),
+    eWayBillNumber: z.string().nullable(),
+    eWayBillDate: z.coerce.date().nullable(),
+    invoiceReferenceNumber: z.string().nullable(),
+    acknowledgmentDate: z.coerce.date().nullable(),
+    acknowledgmentNumber: z.string().nullable(),
+    baseAmount: z
+      .number()
+      .or(z.nan()) // allow NaN
+      .transform((val) => (Number.isNaN(val) ? null : val)),
+
+    taxAmount: z
+      .number()
+      .or(z.nan()) // allow NaN
+      .transform((val) => (Number.isNaN(val) ? null : val)),
+    totalAmount: z
+      .number()
+      .or(z.nan()) // allow NaN
+      .transform((val) => (Number.isNaN(val) ? null : val))
+      .refine((val) => val === null || val >= 0, {
+        message: "Total amount must be 0 or greater",
+      }),
+
+    paymentDueDate: z.coerce.date().nullable(),
+    transportCharges: z
+      .number()
+      .or(z.nan()) // allow NaN
+      .transform((val) => (Number.isNaN(val) ? null : val)),
+    description: z.string(),
+    invoiceAttachmentTypeId: z.string().nullable(),
+    attachments: z.array(AttachmentSchema),
+  })
+  .superRefine((data, ctx) => {
+    const hasNumber = !!data.proformaInvoiceNumber;
+    const hasAmount =
+      data.proformaInvoiceAmount !== null && data.proformaInvoiceAmount > 0;
+    const hasDate = !!data.proformaInvoiceDate;
+
+    // If any one field is filled → all must be valid
+    const anyField = hasNumber || hasAmount || hasDate;
+
+    if (anyField) {
+      // Number required
+      if (!hasNumber) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Proforma Invoice Number is required.",
+          path: ["proformaInvoiceNumber"],
+        });
+      }
+
+      // Amount required
+      if (!hasAmount) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Proforma Amount must be greater than 0.",
+          path: ["proformaInvoiceAmount"],
+        });
+      }
+
+      // Date required
+      if (!hasDate) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Proforma Invoice Date is required.",
+          path: ["proformaInvoiceDate"],
+        });
+      }
+      return;
+    }
+
+    if (!anyField) {
+      if (data.baseAmount === null || data.baseAmount === 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Base amount is required.",
+          path: ["baseAmount"],
+        });
+      }
+      if (data.taxAmount === null) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Tax amount is required.",
+          path: ["taxAmount"],
+        });
+      }
+
+      if (data.totalAmount === null || data.totalAmount === 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Total amount is required.",
+          path: ["totalAmount"],
+        });
+      }
+
+      if (data.transportCharges === null) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: "Transport charges are required.",
+          path: ["transportCharges"],
+        });
+      }
+      return;
+    }
+  });
+
+export const defaultPurchaseValue = {
+  title: "",
+  projectId: "",
+  organizationId: "",
+  billingAddress: "",
+  shippingAddress: "",
+  purchaseOrderNumber: null,
+  purchaseOrderDate: null,
+
+  supplierId: "",
+
+  proformaInvoiceNumber: null,
+  proformaInvoiceDate: null,
+  proformaInvoiceAmount: 0,
+
+  invoiceNumber: null,
+  invoiceDate: null,
+  eWayBillNumber: null,
+  eWayBillDate: null,
+  invoiceReferenceNumber: null,
+  acknowledgmentNumber: null,
+  acknowledgmentDate: null,
+
+  baseAmount: 0,
+  taxAmount: 0,
+  totalAmount: 0,
+  paymentDueDate: null,
+  transportCharges: 0,
+  description: "",
+  invoiceAttachmentTypeId: null,
+  attachments: [],
+};
+
+export const getStepFields = (stepIndex) => {
+  const stepFieldMap = {
+    0: [
+      "title",
+      "projectId",
+      "organizationId",
+      "supplierId",
+      "billingAddress",
+      "shippingAddress",
+      "purchaseOrderNumber",
+      "purchaseOrderDate",
+      "proformaInvoiceNumber",
+      "proformaInvoiceDate",
+      "proformaInvoiceAmount",
+    ],
+    1: [
+      "invoiceNumber",
+      "invoiceDate",
+      "eWayBillNumber",
+      "eWayBillDate",
+      "invoiceReferenceNumber",
+      "acknowledgmentNumber",
+      "acknowledgmentDate",
+    ],
+    2: [
+      "baseAmount",
+      "taxAmount",
+      "totalAmount",
+      "transportCharges",
+      "paymentDueDate",
+      "invoiceAttachmentTypeId",
+      "description",
+      "attachments",
+    ],
+  };
+
+  return stepFieldMap[stepIndex] || [];
+};
+
+export const SingleAttachmentSchema = z.object({
+  fileName: z.string().min(1, { message: "File name is required" }),
+  base64Data: z.string().min(1, { message: "File data is required" }),
+  invoiceAttachmentTypeId: z.string().nullable(),
+
+  contentType: z
+    .string()
+    .min(1, { message: "MIME type is required" })
+    .refine(
+      (val) =>
+        ["application/pdf", "image/jpeg", "image/jpg", "image/png"].includes(
+          val
+        ),
+      {
+        message: "File type must be PDF, JPG, JPEG or PNG",
+      }
+    ),
+
+  fileSize: z
+    .number()
+    .int()
+    .nonnegative("fileSize must be ≥ 0")
+    .max(5 * 1024 * 1024, "File size must be ≤ 5MB"),
+
+  description: z.string().optional().default(""),
+  isActive: z.boolean(),
+});
+
+export const DeliveryChallanSchema = z.object({
+  deliveryChallanNumber: z
+    .string()
+    .min(1, { message: "Challan Number required" }),
+  invoiceAttachmentTypeId: z.string().nullable(),
+  deliveryChallanDate: z.string().min(1, { message: "Deliver date required" }),
+  description: z.string().min(1, { message: "Description required" }),
+  attachment: z
+    .any()
+    .refine((val) => val && typeof val === "object" && !!val.base64Data, {
+      message: "Please upload document",
+    }),
+});
+
+export const DeliveryChallanDefaultValue = {
+  deliveryChallanNumber: "",
+  deliveryChallanDate: "",
+  description: "",
+  attachment: null,
+  invoiceAttachmentTypeId: null,
+};
+
+export const AddPurchasePayment = z.object({
+  paymentReceivedDate: z.string().min(1, { message: "Date is required" }),
+  transactionId: z.string().min(1, "Transaction ID is required"),
+  amount: z.number().min(1, "Amount must be greater than zero"),
+  comment: z.string().min(1, { message: "Comment required" }),
+  paymentAdjustmentHeadId: z
+    .string()
+    .min(1, { message: "Payment Type required" }),
+});
+export const defaultPurchasePayment = {
+  paymentReceivedDate: null,
+  transactionId: "",
+  amount: 0,
+  comment: "",
+  paymentAdjustmentHeadId: "",
+};
--- a/src/components/purchase/PurchaseTransportDetails.jsx
+++ b/src/components/purchase/PurchaseTransportDetails.jsx
@ -0,0 +1,131 @@
+import React from "react";
+import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
+import DatePicker from "../common/DatePicker";
+import Label from "../common/Label";
+
+const PurchaseTransportDetails = () => {
+  const {
+    register,control,
+    formState: { errors },
+  } = useAppFormContext();
+
+  return (
+    <div className="row g-3 text-start">
+      {/* Invoice Number */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="invoiceNumber" >
+          Invoice Number
+        </Label>
+
+        <input
+          id="invoiceNumber"
+          type="text"
+          className="form-control form-control-xs"
+          {...register("invoiceNumber")}
+        />
+
+        {errors?.invoiceNumber && (
+          <div className="small text-danger mt-1">
+            {errors.invoiceNumber.message}
+          </div>
+        )}
+      </div>
+
+      {/* Invoice Date */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="invoiceDate">Invoice Date</Label>
+
+     
+          <DatePicker control={control} name="invoiceDate" className="w-full" size="xs"/>
+
+        {errors?.invoiceDate && (
+          <div className="small text-danger mt-1">
+            {errors.invoiceDate.message}
+          </div>
+        )}
+      </div>
+
+      {/* E-Way Bill Number */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="eWayBillNumber">E-Way Bill Number</Label>
+
+        <input
+          id="eWayBillNumber"
+          type="text"
+          className="form-control form-control-xs"
+          {...register("eWayBillNumber")}
+        />
+
+        {errors?.eWayBillNumber && (
+          <div className="small text-danger mt-1">
+            {errors.eWayBillNumber.message}
+          </div>
+        )}
+      </div>
+
+      {/* E-Way Bill Date */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="eWayBillDate">E-Way Bill Date</Label>
+
+    
+             <DatePicker control={control} name="eWayBillDate" className="w-full"/>
+
+        {errors?.eWayBillDate && (
+          <div className="small text-danger mt-1">
+            {errors.eWayBillDate.message}
+          </div>
+        )}
+      </div>
+
+      {/* Invoice Reference Number */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="invoiceReferenceNumber">Invoice Reference Number</Label>
+
+        <input
+          id="invoiceReferenceNumber"
+          type="text"
+          className="form-control form-control-xs"
+          {...register("invoiceReferenceNumber")}
+        />
+
+        {errors?.invoiceReferenceNumber && (
+          <div className="small text-danger mt-1">
+            {errors.invoiceReferenceNumber.message}
+          </div>
+        )}
+      </div>
+
+      {/* Acknowledgment Number */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="acknowledgmentNumber">Acknowledgment Number</Label>
+
+        <input
+          id="acknowledgmentNumber"
+          type="text"
+          className="form-control form-control-xs"
+          {...register("acknowledgmentNumber")}
+        />
+
+        {errors?.acknowledgmentNumber && (
+          <div className="small text-danger mt-1">
+            {errors.acknowledgmentNumber.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-12 col-md-6 mb-2">
+        <Label htmlFor="acknowledgmentDate">Acknowledgment Date</Label>
+
+        <DatePicker control={control} name="acknowledgmentDate" className="w-full" size="xs"/>
+
+        {errors?.acknowledgmentDate && (
+          <div className="small text-danger mt-1">
+            {errors.acknowledgmentDate.message}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PurchaseTransportDetails;
--- a/src/components/purchase/Purchasetable.jsx
+++ b/src/components/purchase/Purchasetable.jsx
@ -0,0 +1,71 @@
+import { formatFigure, getColorNameFromHex } from "../../utils/appUtils";
+
+export const PurchaseColumn = [
+  {
+    key: "purchaseInvoiceUId",
+    label: "Invoice Id",
+
+    className: "text-start",
+    render: (item) => (
+      <div className="d-flex justify-content-start align-items-center p-1">
+        <span className="fw-normal">{item?.purchaseInvoiceUId || "NA"}</span>
+      </div>
+    ),
+  },
+  {
+    key: "title",
+    label: "Title",
+
+    className: "text-start",
+    render: (item) => (
+      <div className="d-flex justify-content-start align-items-center">
+        <span className="fw-normal">{item?.title || "NA"}</span>
+      </div>
+    ),
+  },
+  {
+    key: "project",
+    label: "Project",
+    className: "text-start ",
+    render: (item) => <span>{item?.project?.name || "NA"}</span>,
+  },
+  {
+    key: "supplier",
+    label: "Supplier",
+    className: "text-start ",
+    render: (item) => <span>{item?.supplier?.name || "NA"}</span>,
+  },
+  {
+    key: "status",
+    label: "Status",
+    className: "text-start",
+    render: (item) => {
+      let color = getColorNameFromHex(item.status?.color);
+      return (
+        <span className={`badge rounded-pill bg-label-${color}`}>
+          <span className={`badge badge-dot bg-${color} me-1`}></span>
+          {item?.status.displayName || "NA"}
+        </span>
+      );
+    },
+  },
+  {
+    key: "proformaInvoiceAmount",
+    label: "Proforma Amount",
+    className: "text-end",
+    render: (item) => (
+      <span>
+        {formatFigure(item?.proformaInvoiceAmount, { type: "currency" })}
+      </span>
+    ),
+  },
+
+  {
+    key: "totalAmount",
+    label: "Total Amount",
+    className: "text-end",
+    render: (item) => (
+      <span>{formatFigure(item?.totalAmount, { type: "currency" })}</span>
+    ),
+  },
+];
--- a/src/components/purchase/ViewPurchase.jsx
+++ b/src/components/purchase/ViewPurchase.jsx
@ -0,0 +1,336 @@
+import React from "react";
+import { usePurchase } from "../../hooks/usePurchase";
+import { SpinnerLoader } from "../common/Loader";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { formatFigure, getColorNameFromHex } from "../../utils/appUtils";
+
+const ViewPurchase = ({ purchaseId }) => {
+  const { data, isLoading, isError, error } = usePurchase(purchaseId);
+
+  if (isLoading) return <SpinnerLoader />;
+  if (isError) return <Error error={error} />;
+
+  return (
+    <div className="row g-3 px-3">
+      <div className="col-12 mb-1">
+        <h5 className="fw-semibold m-0">Purchase Invoice Details</h5>
+      </div>
+
+      <div className="col-12 text-start">
+        <div className="row">
+          <div className="fs-6 col-md-10 d-flex align-items-center fw-semibold">
+            <p className="mb-0 me-1">Purchase No:</p>
+            <p className="mb-0">{data?.purchaseInvoiceUId}</p>
+          </div>
+
+          <div className="col-md-2 d-flex align-items-center">
+            <p className="fw-light me-2 mb-0"></p>
+            <span
+              className={`badge rounded-pill bg-label-${getColorNameFromHex(
+                data?.status?.color
+              )}`}
+            >
+              {data?.status?.displayName || "NA"}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div className="col-12 text-start border-bottom">
+        <div className=" ">
+          <p className="fw-semibold mb-3">Purchase Details</p>
+          <div className="row mb-3">
+            <div className="col-md-6">
+              <p className="text-secondary mb-0">
+                <i className="bx bx-captions bx-sm me-1"></i>Title:
+              </p>
+              <p className="fw-light mb-1">{data?.title}</p>
+            </div>
+            <div className="col-md-6">
+              <p className="text-secondary mb-0">
+                <i className="bx bx-comment-detail bx-sm me-1"></i>Description:
+              </p>
+              <p className="fw-light mb-1 ">{data?.description || "--"}</p>
+            </div>
+          </div>
+        </div>
+
+
+      </div>
+
+      <div className="col-12 border-bottom">
+        <div className="text-start h-auto fw-semibold">
+          <p className="text-muted mb-2">Project</p>
+        </div>
+        <div className="row text-start h-auto">
+          {/* Project Name */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0">
+              <i className="bx bx-captions bx-sm me-1"></i>Project Name:
+            </p>
+            <p className="fw-light mb-0">{data?.project?.name}</p>
+          </div>
+
+          {/* Organization Name */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0">
+              <i className="bx bxs-component bx-sm me-1"></i>Organization:
+            </p>
+            <p className="fw-light mb-0">{data?.organization?.name}</p>
+          </div>
+
+          {/* Email */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0">
+              <i className="bx bx-envelope me-1 bx-sm"></i>Email:
+            </p>
+            <p className="fw-light mb-0">{data?.organization?.email}</p>
+          </div>
+
+          {/* Contact Number */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0">
+              <i className="bx bxs-contact bx-sm me-1"></i>Contact:
+            </p>
+            <p className="fw-light mb-0">{data?.organization?.contactNumber}</p>
+          </div>
+
+          {/* Address */}
+          <div className="col-12 mb-3">
+            <p className="text-secondary mb-0">
+              <i className="bx bx-message-square-detail bx-sm me-1"></i>Address:
+            </p>
+            <p className="fw-light mb-0">{data?.organization?.address}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="col-12 border-bottom">
+        <div className="row text-start h-auto">
+          <p className="text-muted mb-2 fw-semibold">Supplier</p>
+
+          {/* Supplier Name */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0">
+              <i className="bx bx-captions bx-sm me-1"></i>Name:
+            </p>
+            <p className="fw-light mb-0">{data?.supplier?.name}</p>
+          </div>
+
+          {/* Contact Person */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0">
+              <i className="bx bx-support bx-sm me-1"></i>Contact Person:
+            </p>
+            <p className="fw-light mb-0">{data?.supplier?.contactPerson}</p>
+          </div>
+
+          {/* Email */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0">
+              <i className="bx bx-envelope me-1 bx-sm"></i>Email:
+            </p>
+            <p className="fw-light mb-0">{data?.supplier?.email}</p>
+          </div>
+
+          {/* Contact Number */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0">
+              <i className="bx bxs-contact bx-sm me-1"></i>Contact:
+            </p>
+            <p className="fw-light mb-0">{data?.supplier?.contactNumber}</p>
+          </div>
+
+          {/* Address */}
+          <div className="col-12 mb-3">
+            <p className="text-secondary mb-0">
+              <i className="bx bx-message-square-detail bx-sm me-1"></i>Address:
+            </p>
+            <p className="fw-light mb-0">{data?.supplier?.address}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="col-md-6">
+        <div className="text-start h-auto">
+          <p className="text-muted mb-2 fw-semibold">Invoice Details</p>
+
+          <div className="row g-3">
+            {/* Left column */}
+            <div className="col-12 col-sm-6">
+              <div>
+                <p className="text-secondary mb-0">Invoice No:</p>
+                <p className="fw-light mb-1">{data?.invoiceNumber ?? "NA"}</p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">Proforma No:</p>
+                <p className="fw-light mb-1">
+                  {data?.proformaInvoiceNumber ?? "NA"}
+                </p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">E-Way Bill:</p>
+                <p className="fw-light mb-1">{data?.eWayBillNumber ?? "NA"}</p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">PO No:</p>
+                <p className="fw-light mb-1">
+                  {data?.purchaseOrderNumber ?? "NA"}
+                </p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">Acknowledge Date:</p>
+                <p className="fw-light mb-1">
+                  {data?.acknowledgmentDate
+                    ? formatUTCToLocalTime(data?.acknowledgmentDate)
+                    : "--"}
+                </p>
+              </div>
+              <div>
+                <p className="text-secondary mb-0">Acknowledge
+                  Number:</p>
+                <p className="fw-light mb-1 ">
+                  {data?.acknowledgmentNumber || "--"}
+                </p>
+              </div>
+            </div>
+
+            {/* Right column */}
+            <div className="col-12 col-sm-6">
+              <div>
+                <p className="text-secondary mb-0 ">Invoice Date:</p>
+                <p className="fw-light mb-1">
+                  {data?.invoiceDate
+                    ? formatUTCToLocalTime(data?.invoiceDate)
+                    : "NA"}
+                </p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">Proforma Date:</p>
+                <p className="fw-light mb-1">
+                  {data?.proformaInvoiceDate
+                    ? formatUTCToLocalTime(data?.proformaInvoiceDate)
+                    : "NA"}
+                </p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">E-Way Date:</p>
+                <p className="fw-light mb-1">
+                  {data?.eWayBillDate
+                    ? formatUTCToLocalTime(data?.eWayBillDate)
+                    : "NA"}
+                </p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">PO Date:</p>
+                <p className="fw-light mb-1">
+                  {data?.purchaseOrderDate
+                    ? formatUTCToLocalTime(data?.purchaseOrderDate)
+                    : "NA"}
+                </p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">Invoice
+                  Reference Number:</p>
+                <p className="fw-light mb-1">
+                  {data?.invoiceReferenceNumber ?? "NA"}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="col-md-6">
+        <div className="text-start h-auto">
+          <p className="text-muted mb-2 fw-semibold">Amount Summary</p>
+
+          <div className="d-flex justify-content-between">
+            <p className="text-secondary mb-0">Proforma Amount</p>
+            <p className="fw-light mb-1">
+              {formatFigure(data?.proformaInvoiceAmount, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </p>
+          </div>
+          <div className="d-flex justify-content-between">
+            <p className="text-secondary mb-0">Base Amount</p>
+            <p className="fw-light mb-1">
+              {formatFigure(data?.baseAmount, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </p>
+          </div>
+
+          <div className="d-flex justify-content-between">
+            <p className="text-secondary mb-0">Tax</p>
+            <p className="fw-light mb-1">
+              {formatFigure(data?.taxAmount, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </p>
+          </div>
+
+          <div className="d-flex justify-content-between">
+            <p className="text-secondary mb-0">Transport</p>
+            <p className="fw-light mb-1">
+              {formatFigure(data?.transportCharges, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </p>
+          </div>
+
+          <hr className="my-2" />
+
+          <div className="d-flex justify-content-between fs-6 fs-medium">
+            <span>Total</span>
+            <span>
+              {formatFigure(data?.totalAmount, {
+                type: "currency",
+                currency: "INR",
+              })}
+            </span>
+          </div>
+
+          <div className="mt-2">
+            <p className="text-secondary mb-0">Due Date:</p>
+            <p className="fw-light mb-0">
+              {formatUTCToLocalTime(data?.paymentDueDate)}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="row mt-3 text-start">
+        <div className="col-md-6 mb-3 ms-n2">
+          <div className="h-100">
+            <p className="text-secondary mb-0">Billing Address</p>
+
+            <p className="mb-0 fw-light">{data?.billingAddress || "-"}</p>
+          </div>
+        </div>
+
+        <div className="col-md-6 mb-3 text-start">
+          <div className="h-100">
+            <p className="text-secondary mb-0">Shipping Address</p>
+            <p className="mb-0 fw-light">{data?.shippingAddress || "-"}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ViewPurchase;
--- a/src/hooks/appHooks/useAppForm.js
+++ b/src/hooks/appHooks/useAppForm.js
@ -1,6 +1,6 @@
-import { useForm, Controller,FormProvider } from "react-hook-form";
+import { useForm, Controller, FormProvider, useFormContext } from "react-hook-form";

 export const useAppForm = (config) => useForm(config);
 export const AppFormProvider = FormProvider;
 export const AppFormController = Controller;
-
+export const useAppFormContext = useFormContext;
--- a/src/hooks/masterHook/useMaster.js
+++ b/src/hooks/masterHook/useMaster.js
@ -10,16 +10,25 @@ import {
 } from "@tanstack/react-query";
 import showToast from "../../services/toastService";

-
-export const useRecurringStatus = ()=>{
+export const useInvoiceAttachmentTypes = () => {
  return useQuery({
-    queryKey:["RecurringStatus"],
-    queryFn:async()=>{
+    queryKey: ["invoiceAttachmentType"],
+    queryFn: async () => {
+      const resp = await MasterRespository.getInvoiceAttachmentTypes();
+      return resp.data;
+    },
+  });
+};
+
+export const useRecurringStatus = () => {
+  return useQuery({
+    queryKey: ["RecurringStatus"],
+    queryFn: async () => {
      const resp = await MasterRespository.getRecurringStatus();
-      return resp.data
-    }
-  })
-}
+      return resp.data;
+    },
+  });
+};
 export const useCurrencies = () => {
  return useQuery({
    queryKey: ["currencies"],
@ -31,10 +40,10 @@ export const useCurrencies = () => {
 };

 export const usePaymentAjustmentHead = (isActive) => {
- return useQuery({
-    queryKey: ["paymentType",isActive],
-    queryFn: async () =>  await MasterRespository.getPaymentAdjustmentHead(isActive),
-   
+  return useQuery({
+    queryKey: ["paymentType", isActive],
+    queryFn: async () =>
+      await MasterRespository.getPaymentAdjustmentHead(isActive),
  });
 };

@ -296,26 +305,26 @@ export const useOrganizationType = () => {
  });
 };

-export const useJobStatus=(statusId,projectId)=>{
+export const useJobStatus = (statusId, projectId) => {
  return useQuery({
-    queryKey:["Job_Staus",statusId,projectId],
-    queryFn:async()=>{
-      const resp = await MasterRespository.getJobStatus(statusId,projectId);
+    queryKey: ["Job_Staus", statusId, projectId],
+    queryFn: async () => {
+      const resp = await MasterRespository.getJobStatus(statusId, projectId);
      return resp.data;
    },
-    enabled:!!statusId && !!projectId
-  })
-}
+    enabled: !!statusId && !!projectId,
+  });
+};

-export const useTeamRole=()=>{
+export const useTeamRole = () => {
  return useQuery({
-    queryKey:["Team_Role"],
-    queryFn:async()=>{
+    queryKey: ["Team_Role"],
+    queryFn: async () => {
      const resp = await MasterRespository.getTeamRole();
      return resp.data;
-    }
-  })
-}
+    },
+  });
+};
 //#region ==Get Masters==
 const fetchMasterData = async (masterType) => {
  switch (masterType) {
@ -405,8 +414,6 @@ const useMaster = () => {
 export default useMaster;
 //#endregion

-
-
 // ================================Mutation====================================

 //#region  Job Role
@ -456,10 +463,6 @@ export const useCreateJobRole = (onSuccessCallback) => {
 };
 //#endregion Job Role

-
-
-
-
 //#region  Application Role
 export const useCreateApplicationRole = (onSuccessCallback) => {
  const queryClient = useQueryClient();
@ -505,10 +508,6 @@ export const useUpdateApplicationRole = (onSuccessCallback) => {
 };
 //#endregion

-
-
-
-
 //#region  Create work Category
 export const useCreateWorkCategory = (onSuccessCallback) => {
  const queryClient = useQueryClient();
@ -554,11 +553,6 @@ export const useUpdateWorkCategory = (onSuccessCallback) => {
 };
 //#endregion

-
-
-
-
-
 //#region Contact Category

 export const useCreateContactCategory = (onSuccessCallback) => {
@ -609,10 +603,6 @@ export const useUpdateContactCategory = (onSuccessCallback) => {

 //#endregion

-
-
-
-
 //#region Contact Tag

 export const useCreateContactTag = (onSuccessCallback) => {
@ -659,10 +649,6 @@ export const useUpdateContactTag = (onSuccessCallback) => {
 };
 //#endregion

-
-
-
-
 //#region Expense Category
 export const useCreateExpenseCategory = (onSuccessCallback) => {
  const queryClient = useQueryClient();
@ -689,7 +675,10 @@ export const useUpdateExpenseCategory = (onSuccessCallback) => {

  return useMutation({
    mutationFn: async ({ id, payload }) => {
-      const response = await MasterRespository.updateExpenseCategory(id, payload);
+      const response = await MasterRespository.updateExpenseCategory(
+        id,
+        payload
+      );
      return response.data;
    },
    onSuccess: (data, variables) => {
@ -708,11 +697,6 @@ export const useUpdateExpenseCategory = (onSuccessCallback) => {

 //#endregion

-
-
-
-
-
 //#region  Payment Mode

 export const useCreatePaymentMode = (onSuccessCallback) => {
@ -759,10 +743,6 @@ export const useUpdatePaymentMode = (onSuccessCallback) => {

 //#endregion

-
-
-
-
 // Services-------------------------------

 // export const useCreateService = (onSuccessCallback) => {
@ -844,10 +824,6 @@ export const useUpdateService = (onSuccessCallback) => {

 //#endregion

-
-
-
-
 //#region  Activity Grouph

 export const useCreateActivityGroup = (onSuccessCallback) => {
@ -912,10 +888,6 @@ export const useUpdateActivityGroup = (onSuccessCallback) => {

 //#endregion

-
-
-
-
 //#region Activities
 export const useCreateActivity = (onSuccessCallback) => {
  const queryClient = useQueryClient();
@ -970,11 +942,6 @@ export const useUpdateActivity = (onSuccessCallback) => {

 //#endregion

-
-
-
-
-
 //#region Expense Status
 export const useCreateExpenseStatus = (onSuccessCallback) => {
  const queryClient = useQueryClient();
@ -1018,10 +985,6 @@ export const useUpdateExpenseStatus = (onSuccessCallback) => {
 };
 //#endregion

-
-
-
-
 //#region Document-Category
 export const useCreateDocumentCatgory = (onSuccessCallback) => {
  const queryClient = useQueryClient();
@ -1068,11 +1031,6 @@ export const useUpdateDocumentCategory = (onSuccessCallback) => {
 };
 //#endregion

-
-
-
-
-
 //#region Document-Type
 export const useCreateDocumentType = (onSuccessCallback) => {
  const queryClient = useQueryClient();
@ -1117,10 +1075,6 @@ export const useUpdateDocumentType = (onSuccessCallback) => {
 };
 //#endregion

-
-
-
-
 //#region Payment Adjustment Head
 export const useCreatePaymentAjustmentHead = (onSuccessCallback) => {
  const queryClient = useQueryClient();
@ -1147,7 +1101,10 @@ export const useUpdatePaymentAjustmentHead = (onSuccessCallback) => {

  return useMutation({
    mutationFn: async ({ id, payload }) => {
-      const resp = await MasterRespository.updatePaymentAjustmentHead(id, payload);
+      const resp = await MasterRespository.updatePaymentAjustmentHead(
+        id,
+        payload
+      );
      return resp.data;
    },
    onSuccess: (data) => {
@ -1164,10 +1121,6 @@ export const useUpdatePaymentAjustmentHead = (onSuccessCallback) => {
 };
 //#endregion

-
-
-
-
 //#region  ==Delete Master==
 export const useDeleteMasterItem = () => {
  const queryClient = useQueryClient();
@ -1203,8 +1156,6 @@ export const useDeleteMasterItem = () => {

 //#endregion

-
-
 export const useDeleteServiceGroup = () => {
  const queryClient = useQueryClient();

--- a/src/hooks/useDashboard_Data.jsx
+++ b/src/hooks/useDashboard_Data.jsx
@ -178,6 +178,15 @@ export const useExpenseStatus = (projectId) => {
    },
  });
 };
+export const useJobsProgression = (projectId) => {
+  return useQuery({
+    queryKey: ["serviceProjectJobs", projectId],
+    queryFn: async () => {
+      const resp = await GlobalRepository.getJobsProgression(projectId);
+      return resp.data;
+    },
+  });
+};

 export const useExpenseDataByProject = (projectId, categoryId, months) => {
  return useQuery({
@ -192,3 +201,13 @@ export const useExpenseDataByProject = (projectId, categoryId, months) => {
    },
  });
 };
+
+export const useGetCollectionOverview = (projectId) => {
+  return useQuery({
+    queryKey: ["collection_overview", projectId],
+    queryFn: async () => {
+      const resp = await GlobalRepository.getCollectionOverview(projectId);
+      return resp.data;
+    },
+  });
+};
--- a/src/hooks/useImageGallery.js
+++ b/src/hooks/useImageGallery.js
@ -47,6 +47,7 @@ export const useImageGalleryFilter  = (project)=>{
      const response = await ImageGalleryRepository.getImageGalleryFilter(project);
      return response.data;
    },
+    enabled:!!project
  })
 }

--- a/src/hooks/useOrganization.js
+++ b/src/hooks/useOrganization.js
@ -24,7 +24,9 @@ export const useOrganizationModal = () => {
      dispatch(
        openOrgModal({
          isOpen: true,
-          orgData: options.hasOwnProperty("orgData") ? options.orgData : orgData,
+          orgData: options.hasOwnProperty("orgData")
+            ? options.orgData
+            : orgData,
          startStep: options.startStep ?? startStep ?? 1,
          prevStep: options.prevStep ?? prevStep ?? 1,
          flowType: options.flowType ?? flowType ?? "default",
@ -37,16 +39,30 @@ export const useOrganizationModal = () => {

 // ================================Query=============================================================

-export const useOrganization=(id)=>{
-return useQuery({
-  queryKey:["organization",id],
-  queryFn:async()=> {
-    const resp = await await OrganizationRepository.getOrganizaion(id);
-    return resp.data
-  },
-  enabled:!!id
-})
-}
+export const useGlobaleOrganizations = (pageSize, pageNumber,id, searchString) => {
+  return useQuery({
+    queryKey: ["global_organization",pageSize, pageNumber,id, searchString],
+    queryFn: async () => {
+      const resp = await OrganizationRepository.getGlobalOrganization(
+        pageSize,
+        pageNumber,id,
+        searchString
+      );
+      return resp.data;
+    },
+  });
+};
+
+export const useOrganization = (id) => {
+  return useQuery({
+    queryKey: ["organization", id],
+    queryFn: async () => {
+      const resp = await await OrganizationRepository.getOrganizaion(id);
+      return resp.data;
+    },
+    enabled: !!id,
+  });
+};
 export const useOrganizationBySPRID = (sprid) => {
  return useQuery({
    queryKey: ["organization by", sprid],
@ -101,7 +117,7 @@ export const useOrganizationEmployees = (
        organizationId,
        searchString
      ),
-    enabled: !!projectId ,
+    enabled: !!projectId,
  });
 };

@ -138,7 +154,7 @@ export const useAssignOrgToProject = (onSuccessCallback) => {
      useClient.invalidateQueries({
        queryKey: ["projectAssignedOrganiztions"],
      });
-         useClient.invalidateQueries({
+      useClient.invalidateQueries({
        queryKey: ["projectAssignedOrganiztionsName"],
      });

@ -181,11 +197,13 @@ export const useAssignOrgToTenant = (onSuccessCallback) => {
 export const useUpdateOrganization = (onSuccessCallback) => {
  const useClient = useQueryClient();
  return useMutation({
-    mutationFn: async ({orgId,payload}) =>
-      await OrganizationRepository.updateOrganizaion(orgId,payload),
+    mutationFn: async ({ orgId, payload }) =>
+      await OrganizationRepository.updateOrganizaion(orgId, payload),
    onSuccess: (_, variables) => {
      useClient.invalidateQueries({ queryKey: ["organizationList"] });
-      useClient.invalidateQueries({ queryKey: ["projectAssignedOrganiztionsName"] });
+      useClient.invalidateQueries({
+        queryKey: ["projectAssignedOrganiztionsName"],
+      });

      showToast("Organization Updated successfully", "success");
      if (onSuccessCallback) onSuccessCallback();
--- a/src/hooks/usePurchase.jsx
+++ b/src/hooks/usePurchase.jsx
@ -0,0 +1,181 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { PurchaseRepository } from "../repositories/PurchaseRepository";
+import showToast from "../services/toastService";
+
+export const usePurchasesList = (
+  pageSize,
+  pageNumber,
+  isActive,
+  filter,
+  searchString
+) => {
+  return useQuery({
+    queryKey: [
+      "purchase_list",
+      pageSize,
+      pageNumber,
+      isActive,
+      filter,
+      searchString,
+    ],
+    queryFn: async () => {
+      const resp = await PurchaseRepository.GetPurchaseList(
+        pageSize,
+        pageNumber,
+        isActive,
+        filter,
+        searchString
+      );
+      return resp.data;
+    },
+  });
+};
+
+export const useDeliverChallane = (purchaseInvoiceId) => {
+  return useQuery({
+    queryKey: ["deliverliy_challane", purchaseInvoiceId],
+    queryFn: async () => {
+      const resp = await PurchaseRepository.GetDeliveryChallan(
+        purchaseInvoiceId
+      );
+      return resp.data;
+    },
+    enabled: !!purchaseInvoiceId,
+  });
+};
+
+export const usePurchase = (id) => {
+  return useQuery({
+    queryKey: ["purchase", id],
+    queryFn: async () => {
+      const resp = await PurchaseRepository.GetPurchase(id);
+      return resp.data;
+    },
+    enabled: !!id,
+  });
+};
+
+export const usePurchasePaymentHistory = (id) => {
+  return useQuery({
+    queryKey: ["purchase_payment_history", id],
+    queryFn: async () => {
+      const resp = await PurchaseRepository.GetPaymentHistory(id);
+      return resp.data;
+    },
+    enabled: !!id,
+  });
+};
+
+export const useCreatePurchaseInvoice = (onSuccessCallback) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (payload) =>
+      await PurchaseRepository.CreatePurchase(payload),
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
+      showToast("Purchase Invoice Created successfully", "success");
+      if (onSuccessCallback) onSuccessCallback();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to create invoice",
+        "error"
+      );
+    },
+  });
+};
+
+export const useUpdatePurchaseInvoice = (onSuccessCallback) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ purchaseId, payload }) =>
+      PurchaseRepository.UpdatePurchase(purchaseId, payload),
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
+      queryClient.invalidateQueries({ queryKey: ["purchase"] });
+      showToast("Purchase Invoice Updated successfully", "success");
+      if (onSuccessCallback) onSuccessCallback();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to create invoice",
+        "error"
+      );
+    },
+  });
+};
+export const useAddDeliverChallan = (onSuccessCallback) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (payload) =>
+      PurchaseRepository.addDelievryChallan(payload),
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["deliverliy_challane"] });
+      showToast("Challan added successfully", "success");
+      if (onSuccessCallback) onSuccessCallback();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to create invoice",
+        "error"
+      );
+    },
+  });
+};
+export const useAddPurchasePayment =(onSuccessCallback)=>{
+const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (payload) =>
+      PurchaseRepository.AddPayment(payload),
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["purchase_payment_history"] });
+      showToast("Payment added successfully", "success");
+      if (onSuccessCallback) onSuccessCallback();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to Add payment",
+        "error"
+      );
+    },
+  });
+}
+
+
+export const useDeletePurchaseInvoice = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ id, isActive }) =>
+      await PurchaseRepository.deletePurchase(id, isActive),
+
+    onSuccess: (_, variable) => {
+      queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
+      showToast(
+        `Purchase Invoice ${variable.isActive ? "restored" : "deleted"} successfully`,
+        "success"
+      );
+    },
+
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to delete branch",
+        "error"
+      );
+    },
+  });
+};
--- a/src/hooks/useTenant.js
+++ b/src/hooks/useTenant.js
@ -132,7 +132,7 @@ export const useAddSubscription = (onSuccessCallback) => {
    onSuccess: (data, variables) => {
      const { tenantId } = variables;
      showToast("Tenant Plan Added SuccessFully", "success");
-      queryClient.invalidateQueries({ queryKey: ["Tenant", tenantId] });
+      queryClient.invalidateQueries({ queryKey: ["Tenants", tenantId] });
      if (onSuccessCallback) onSuccessCallback();
    },
    onError: (error) => {
--- a/src/layouts/AuthLayout.jsx
+++ b/src/layouts/AuthLayout.jsx
@ -24,25 +24,25 @@ const AuthLayout = () => {
      >
        {" "}
        <nav
-          class="navbar navbar-light ms-10 w-auto justify-content-start"
+          className="navbar navbar-light ms-10 w-auto justify-content-start"
          style={{ opacity: "100%" }}
        >
-          <a class="navbar-brand" href="/">
+          <a className="navbar-brand" href="/">
            Home
          </a>
-          <a class="navbar-brand" href="/#landingFeatures">
+          <a className="navbar-brand" href="/#landingFeatures">
            Features
          </a>
-          <a class="navbar-brand" href="/#landingPricing">
+          <a className="navbar-brand" href="/#landingPricing">
            Pricing
          </a>
-          <a class="navbar-brand" href="/#landingFAQ">
+          <a className="navbar-brand" href="/#landingFAQ">
            FAQ
          </a>
-          <a class="navbar-brand" href="/#sectionBlog">
+          <a className="navbar-brand" href="/#sectionBlog">
            Blogs
          </a>
-          <a class="navbar-brand" href="/#landingCTA">
+          <a className="navbar-brand" href="/#landingCTA">
            Contact Us
          </a>
        </nav>{" "}
--- a/src/pages/Activities/AttendancePage.jsx
+++ b/src/pages/Activities/AttendancePage.jsx
@ -59,7 +59,7 @@ const AttendancePage = () => {
    if (selectedProject == null) {
      dispatch(setProjectId(projectNames[0]?.id));
    }
-    dispatch(setOrganization(appliedFilters?.selectedOrganization))
+    dispatch(setOrganization(appliedFilters?.selectedOrganization));
  }, [appliedFilters?.selectedOrganization]);

  const getRole = (roleId) => {
@ -94,6 +94,49 @@ const AttendancePage = () => {
    setSearchTerm(""); // Reset search term when tab changes
  };

+  // --- START: Tab Configuration Array
+  const tabsData = [
+    {
+      id: "all",
+      title: "Today's",
+      content: (
+        <Attendance
+          handleModalData={handleModalData}
+          getRole={getRole}
+          searchTerm={searchTerm}
+          organizationId={appliedFilters.selectedOrganization}
+        />
+      ),
+    },
+    {
+      id: "logs",
+      title: "Logs",
+      content: (
+        <AttendanceLog
+          handleModalData={handleModalData}
+          searchTerm={searchTerm}
+          organizationId={appliedFilters.selectedOrganization}
+        />
+      ),
+    },
+    // Conditionally include Regularization tab based on permission
+    ...(DoRegularized
+      ? [
+          {
+            id: "regularization",
+            title: "Regularization",
+            content: (
+              <Regularization
+                searchTerm={searchTerm}
+                organizationId={appliedFilters.selectedOrganization}
+              />
+            ),
+          },
+        ]
+      : []),
+  ];
+  // --- END: Tab Configuration Array
+
  return (
    <>
      {isCreateModalOpen && modelConfig && (
@ -114,9 +157,7 @@ const AttendancePage = () => {
          {modelConfig?.action === 6 && (
            <AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
          )}
-          {modelConfig?.action === 7 && (
-            <Confirmation closeModal={closeModal} />
-          )}
+          {modelConfig?.action === 7 && <Confirmation closeModal={closeModal} />}
        </GlobalModel>
      )}

@ -129,57 +170,39 @@ const AttendancePage = () => {
        ></Breadcrumb>

        <div className="nav-align-top nav-tabs-shadow ">
-          {/* Tabs */}
-          <div className="nav-align-top nav-tabs-shadow bg-white border-bottom  pt-5">
+          {/* Tabs header with search and filter */}
+          <div className="nav-align-top nav-tabs-shadow bg-white border-bottom pt-5">
            <div className="row align-items-center g-0 mb-3 mb-md-0 mx-1 mx-sm-5">
-              {/* Tabs */}
-              <div className="col-12 col-md">
+              {/* Tabs Buttons */}
+              <div className="col-12 col-md mt-1">
                <ul className="nav nav-tabs" role="tablist">
-                  <li className="nav-item">
-                    <button
-                      type="button"
-                      className={`nav-link ${
-                        activeTab === "all" ? "active" : ""
-                      } fs-6`}
-                      onClick={() => handleTabChange("all")}
-                      data-bs-toggle="tab"
-                      data-bs-target="#navs-top-home"
+                  {tabsData.map((tab) => (
+                    <li
+                      className={`nav-item ${
+                        tab.id === "regularization" && !DoRegularized
+                          ? "d-none"
+                          : ""
+                      }`} // Keep the d-none logic for regularization, although it's filtered above
+                      key={tab.id}
                    >
-                      Today's
-                    </button>
-                  </li>
-                  <li className="nav-item">
-                    <button
-                      type="button"
-                      className={`nav-link ${
-                        activeTab === "logs" ? "active" : ""
-                      } fs-6`}
-                      onClick={() => handleTabChange("logs")}
-                      data-bs-toggle="tab"
-                      data-bs-target="#navs-top-profile"
-                    >
-                      Logs
-                    </button>
-                  </li>
-
-                  <li className={`nav-item ${!DoRegularized ? "d-none" : ""}`}>
-                    <button
-                      type="button"
-                      className={`nav-link ${
-                        activeTab === "regularization" ? "active" : ""
-                      } fs-6`}
-                      onClick={() => handleTabChange("regularization")}
-                      data-bs-toggle="tab"
-                      data-bs-target="#navs-top-messages"
-                    >
-                      Regularization
-                    </button>
-                  </li>
+                      <button
+                        type="button"
+                        className={`nav-link ${
+                          activeTab === tab.id ? "active" : ""
+                        } fs-6`}
+                        onClick={() => handleTabChange(tab.id)}
+                        data-bs-toggle="tab"
+                        data-bs-target={`#navs-top-${tab.id}`}
+                      >
+                        {tab.title}
+                      </button>
+                    </li>
+                  ))}
                </ul>
              </div>

              {/* Search + Organization filter */}
-              <div className="col-12 col-md-auto pb-2 m-0 mt-md-0 ms-md-auto nav-tabs">
+              <div className="col-12 col-md-auto mb-2 mt-md-0 ms-md-auto nav">
                <div className="row g-2">
                  <div className="col-12 col-sm-6">
                    <select
@ -212,40 +235,25 @@ const AttendancePage = () => {
                  </div>
                </div>
              </div>
-
            </div>
          </div>

+          {/* Tab Content */}
          <div className="tab-content attedanceTabs py-0 px-1 px-sm-3 pb-10">
            {selectedProject ? (
              <>
-                {activeTab === "all" && (
-                  <div className="tab-pane fade show active py-0 mx-2">
-                    <Attendance
-                      handleModalData={handleModalData}
-                      getRole={getRole}
-                      searchTerm={searchTerm}
-                      organizationId={appliedFilters.selectedOrganization}
-                    />
+                {tabsData.map((tab) => (
+                  <div
+                    key={tab.id}
+                    className={`tab-pane fade ${
+                      activeTab === tab.id ? "show active" : ""
+                    } py-0 ${tab.id === "all" ? "mx-2" : "p-3"}`}
+                    id={`navs-top-${tab.id}`}
+                    role="tabpanel"
+                  >
+                    {activeTab === tab.id && tab.content}
                  </div>
-                )}
-                {activeTab === "logs" && (
-                  <div className="tab-pane fade p-3 show active py-0">
-                    <AttendanceLog
-                      handleModalData={handleModalData}
-                      searchTerm={searchTerm}
-                      organizationId={appliedFilters.selectedOrganization}
-                    />
-                  </div>
-                )}
-                {activeTab === "regularization" && DoRegularized && (
-                  <div className="tab-pane fade p-3 show active py-0">
-                    <Regularization
-                      searchTerm={searchTerm}
-                      organizationId={appliedFilters.selectedOrganization}
-                    />
-                  </div>
-                )}
+                ))}
              </>
            ) : (
              <div className="py-2">
--- a/src/pages/AdvancePayment/AdvancePaymentPage.jsx
+++ b/src/pages/AdvancePayment/AdvancePaymentPage.jsx
@ -1,108 +1,34 @@
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import Breadcrumb from "../../components/common/Breadcrumb";
-import { useEmployee } from "../../hooks/useEmployees";
-import EmployeeSearchInput from "../../components/common/EmployeeSearchInput";
-import { useForm } from "react-hook-form";
-import Label from "../../components/common/Label";
-import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentList";
-import { employee } from "../../data/masters";
-import { formatFigure } from "../../utils/appUtils";
-import { useParams } from "react-router-dom";
-import { useExpenseTransactions } from "../../hooks/useExpense";
+import React from 'react'
+import Breadcrumb from '../../components/common/Breadcrumb' 
+import AdvancePaymentList1 from '../../components/AdvancePayment/AdvancePaymentList'
+import { useForm } from 'react-hook-form';
+import EmployeeSearchInput from '../../components/common/EmployeeSearchInput';

-export const AdvancePaymentContext = createContext();
-export const useAdvancePaymentContext = () => {
-  const context = useContext(AdvancePaymentContext);
-  if (!context) {
-    throw new Error(
-      "useAdvancePaymentContext must be used within an AdvancePaymentProvider"
-    );
-  }
-  return context;
-};
 const AdvancePaymentPage = () => {
-  const { employeeId } = useParams();
-
-  const { data: transactionData } = useExpenseTransactions(employeeId, {
-    enabled: !!employeeId
-  });
-
-  const employeeName = useMemo(() => {
-    if (Array.isArray(transactionData) && transactionData.length > 0) {
-      const emp = transactionData[0].employee;
-      if (emp) return `${emp.firstName} ${emp.lastName}`;
-    }
-    return "";
-  }, [transactionData]);
-
-  const [balance, setBalance] = useState(null);
-  const { control, reset, watch } = useForm({
-    defaultValues: {
-      employeeId: employeeId || "",
-      searchString: "",
-    },
-  });
-
-  const selectedEmployeeId = employeeId || watch("employeeId");
-
-  const searchString = watch("searchString");
-
-  useEffect(() => {
-    const selectedEmpoyee = sessionStorage.getItem("transaction-empId");
-    reset({
-      employeeId: selectedEmpoyee || "",
+    const { control, reset, watch } = useForm({
+        defaultValues: {
+            searchString: "",
+        },
    });
-  }, [reset]);
+    const searchString = watch("searchString");
    
-  return (
-    <AdvancePaymentContext.Provider value={{ setBalance }}>
-      <div className="container-fluid">
-        <Breadcrumb
-          data={[
-            { label: "Home", link: "/dashboard" },
-            { label: "Finance", link: "/advance-payment" },
-            { label: "Advance Payment", link: "/advance-payment" },
-            employeeName && { label: employeeName, link: "" },
-          ].filter(Boolean)}
-        />
-
-        <div className="card px-4 py-2 page-min-h ">
-          <div className="row py-1 justify-content-end">
-            <div className="col-md-8 d-flex align-items-center justify-content-end">
-              {balance ? (
-                <>
-                  <label className="fs-5 fw-semibold">Current Balance : </label>
-                  <span
-                    className={`${balance > 0 ? "text-success" : "text-danger"
-                      } fs-5 fw-bold ms-1`}
-                  >
-                    {balance > 0 ? (
-                      <i className="bx bx-plus b-sm"></i>
-                    ) : (
-                      <i className="bx bx-minus b-sm"></i>
-                    )}{" "}
-                    {formatFigure(balance, {
-                      type: "currency",
-                      currency: "INR",
-                    })}
-                  </span>
-                </>
-              ) : (
-                <></>
-              )}
+    return (
+        <div className="container-fluid">
+            <Breadcrumb
+                data={[
+                    { label: "Home", link: "/dashboard" },
+                    { label: "Finance", link: "/advance-payment" },
+                    { label: "Advance Payment" },
+                ]}
+            />
+            <div className="card px-4 py-2 page-min-h">
+                <div className="row py-1">                  
+                     <AdvancePaymentList1 searchString={searchString} />
+                </div>
            </div>          
-          </div>
-          <AdvancePaymentList employeeId={selectedEmployeeId} searchString={searchString} />
-        </div>
-      </div>
-    </AdvancePaymentContext.Provider>
-  );
-};

-export default AdvancePaymentPage;
+        </div>
+    )
+}
+
+export default AdvancePaymentPage
--- a/src/pages/AdvancePayment/AdvancePaymentPage1.jsx
+++ b/src/pages/AdvancePayment/AdvancePaymentPage1.jsx
@ -1,34 +0,0 @@
-import React from 'react'
-import Breadcrumb from '../../components/common/Breadcrumb'
-import AdvancePaymentList1 from '../../components/AdvancePayment/AdvancePaymentList1'
-import { useForm } from 'react-hook-form';
-import EmployeeSearchInput from '../../components/common/EmployeeSearchInput';
-
-const AdvancePaymentPage1 = () => {
-    const { control, reset, watch } = useForm({
-        defaultValues: {
-            searchString: "",
-        },
-    });
-    const searchString = watch("searchString");
-    
-    return (
-        <div className="container-fluid">
-            <Breadcrumb
-                data={[
-                    { label: "Home", link: "/dashboard" },
-                    { label: "Finance", link: "/advance-payment" },
-                    { label: "Advance Payment" },
-                ]}
-            />
-            <div className="card px-4 py-2 page-min-h">
-                <div className="row py-1">                  
-                     <AdvancePaymentList1 searchString={searchString} />
-                </div>
-            </div>          
-
-        </div>
-    )
-}
-
-export default AdvancePaymentPage1
--- a/src/pages/AdvancePayment/AdvancePaymentPageDetails.jsx
+++ b/src/pages/AdvancePayment/AdvancePaymentPageDetails.jsx
@ -0,0 +1,149 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import { useEmployee } from "../../hooks/useEmployees";
+import EmployeeSearchInput from "../../components/common/EmployeeSearchInput";
+import { useForm } from "react-hook-form";
+import Label from "../../components/common/Label";
+import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentListDetails";
+import { employee } from "../../data/masters";
+import { formatFigure } from "../../utils/appUtils";
+import { useParams } from "react-router-dom";
+import { useExpenseTransactions } from "../../hooks/useExpense";
+import handleAdvancePaymentExport from "../../components/AdvancePayment/handleAdvancePaymentExport";
+
+export const AdvancePaymentContext = createContext();
+export const useAdvancePaymentContext = () => {
+  const context = useContext(AdvancePaymentContext);
+  if (!context) {
+    throw new Error(
+      "useAdvancePaymentContext must be used within an AdvancePaymentProvider"
+    );
+  }
+  return context;
+};
+const AdvancePaymentPageDetails = () => {
+  const { employeeId } = useParams();
+
+  const { data: transactionData } = useExpenseTransactions(employeeId, {
+    enabled: !!employeeId
+  });
+
+  const employeeName = useMemo(() => {
+    if (Array.isArray(transactionData) && transactionData.length > 0) {
+      const emp = transactionData[0].employee;
+      if (emp) return `${emp.firstName} ${emp.lastName}`;
+    }
+    return "";
+  }, [transactionData]);
+
+  const [balance, setBalance] = useState(null);
+  const { control, reset, watch } = useForm({
+    defaultValues: {
+      employeeId: employeeId || "",
+      searchString: "",
+    },
+  });
+
+  const selectedEmployeeId = employeeId || watch("employeeId");
+
+  const searchString = watch("searchString");
+
+  useEffect(() => {
+    const selectedEmpoyee = sessionStorage.getItem("transaction-empId");
+    reset({
+      employeeId: selectedEmpoyee || "",
+    });
+  }, [reset]);
+
+
+  const tableRef = useRef(null);
+
+  const handleExport = (type) => {
+    handleAdvancePaymentExport(type, transactionData, tableRef);
+  };
+
+  return (
+    <AdvancePaymentContext.Provider value={{ setBalance }}>
+      <div className="container-fluid">
+        <Breadcrumb
+          data={[
+            { label: "Home", link: "/dashboard" },
+            { label: "Finance", link: "/advance-payment" },
+            { label: "Advance Payment", link: "/advance-payment" },
+            employeeName && { label: employeeName, link: "" },
+          ].filter(Boolean)}
+        />
+
+        <div className="card px-4 py-2 page-min-h ">
+          <div className="row py-1 align-items-center">
+
+            {/* LEFT SIDE → EXPORT DROPDOWN */}
+            <div className="col-md-4 d-flex align-items-center">
+              <div className="dropdown">
+                <button
+                  aria-label="Click me"
+                  className="btn btn-sm btn-label-secondary dropdown-toggle"
+                  type="button"
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                >
+                  <i className="bx bx-export me-2 bx-sm"></i>Export
+                </button>
+
+                <ul className="dropdown-menu">
+                  <li>
+                    <button className="dropdown-item" onClick={() => handleExport("print")}>
+                      <i className="bx bx-printer me-1"></i> Print
+                    </button>
+                  </li>
+                  <li>
+                    <button className="dropdown-item" onClick={() => handleExport("csv")}>
+                      <i className="bx bx-file me-1"></i> CSV
+                    </button>
+                  </li>
+                  <li>
+                    <button className="dropdown-item" onClick={() => handleExport("excel")}>
+                      <i className="bx bxs-file-export me-1"></i> Excel
+                    </button>
+                  </li>
+                  <li>
+                    <button className="dropdown-item" onClick={() => handleExport("pdf")}>
+                      <i className="bx bxs-file-pdf me-1"></i> PDF
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+
+            {/* RIGHT SIDE → CURRENT BALANCE */}
+            <div className="col-md-8 d-flex justify-content-end align-items-center">
+              {balance !== null ? (
+                <>
+                  <label className="fs-5 fw-semibold">Current Balance :</label>
+                  <span
+                    className={`${balance > 0 ? "text-success" : "text-danger"} fs-5 fw-bold ms-1`}
+                  >
+                    {balance > 0 && <i className="bx bx-plus b-sm"></i>}{" "}
+                    {formatFigure(balance, { type: "currency", currency: "INR" })}
+                  </span>
+                </>
+              ) : null}
+            </div>
+
+          </div>
+
+          <AdvancePaymentList employeeId={selectedEmployeeId} searchString={searchString} tableRef={tableRef} />
+        </div>
+      </div>
+    </AdvancePaymentContext.Provider>
+  );
+};
+
+export default AdvancePaymentPageDetails;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Kartik Sharma	82c6104483	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Weidget_Dashboard_Services	2025-12-06 16:51:05 +05:30
pramod.mahajan	d9c3964983	Merge pull request 'Add Pending Actions toggle near search box in Expense.' (#530 ) from Adding_Toggle_Button into Purchase_Invoice_Management Reviewed-on: #530 merged	2025-12-06 11:18:15 +00:00
Kartik Sharma	50e33b7b39	Add Pending Actions toggle near search box in Expense.	2025-12-06 11:18:15 +00:00
pramod.mahajan	d6a8040977	Merge pull request 'Attendance in Employee Profile Should Display Project-Wise' (#531 ) from Kartik_Enhancement_918 into Purchase_Invoice_Management Reviewed-on: #531 Merged	2025-12-06 11:14:50 +00:00
Kartik Sharma	95813c5869	Planned Work now accepts values with up to 2 decimal places.	2025-12-06 11:14:50 +00:00
Kartik Sharma	88dc11793c	Attendance in Employee Profile Should Display Project-Wise	2025-12-06 11:14:50 +00:00
pramod.mahajan	ca3cc590d2	Merge pull request 'Branch_Detail_View :- Adding details view in jobs.' (#532 ) from Branch_Detail_View into Purchase_Invoice_Management Reviewed-on: #532 merged	2025-12-06 11:13:10 +00:00
Kartik Sharma	1e151a8b10	Adding Cursor pointer for view branch in jobs.	2025-12-06 11:13:10 +00:00
Kartik Sharma	946e0b2883	Showing details view in Branches.	2025-12-06 11:13:10 +00:00
Kartik Sharma	b6bce04160	Adding rupees symbol at hover effect.	2025-12-06 15:43:12 +05:30
Kartik Sharma	8e68b5d487	Correction in Weidget.	2025-12-06 15:16:08 +05:30
Kartik Sharma	8020258a71	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Weidget_Dashboard_Services	2025-12-06 15:13:36 +05:30
pramod.mahajan	cdf9bbbe48	added padding to better space	2025-12-06 09:48:15 +05:30
pramod.mahajan	94fbeef5d1	added skeleton	2025-12-05 19:32:23 +05:30
pramod.mahajan	88053d1286	added optional chain for handle error	2025-12-05 18:55:23 +05:30
pramod.mahajan	23a7a56e32	added collection overview widget	2025-12-05 18:24:23 +05:30
pramod.mahajan	8f6d877548	removed scrolling inside job - status logs	2025-12-05 12:05:55 +05:30
pramod.mahajan	7930876b7d	Merge pull request 'Adding time line in Jobs Status.' (#527 ) from Implementing_TimeLine into Purchase_Invoice_Management Reviewed-on: #52 merged	2025-12-05 06:23:55 +00:00
Kartik Sharma	b8f2607b45	Adding Workdone label.	2025-12-05 06:23:55 +00:00
Kartik Sharma	47752e5e35	Adding time line in Jobs Status.	2025-12-05 06:23:55 +00:00
pramod.mahajan	25bb7d1f58	allow view pdf file	2025-12-05 11:38:54 +05:30
pramod.mahajan	427d728efc	Merge pull request 'Adding Tabs in attendancepage just like View Jobs.' (#529 ) from Attendance_Tabs into Purchase_Invoice_Management Reviewed-on: #529 Merged	2025-12-05 04:49:16 +00:00
Kartik Sharma	65043732d3	Adding Tabs in attendancepage just like View Jobs.	2025-12-05 04:49:16 +00:00
Kartik Sharma	6a0feacb1b	Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into Purchase_Invoice_Management	2025-12-04 17:38:32 +05:30
Kartik Sharma	949126d790	Adding height in ServiceProjectTeamlist.	2025-12-04 15:20:08 +05:30
Kartik Sharma	51db1193ce	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Weidget_Dashboard_Services	2025-12-04 15:07:22 +05:30
Kartik Sharma	64ad8e25ae	Adding Project name in Jobs Weidget.	2025-12-04 14:44:11 +05:30
pramod.mahajan	f9d66d73b0	changed sequnce of project nave	2025-12-04 13:44:23 +05:30
pramod.mahajan	0dbfc1f87a	hide time	2025-12-04 13:09:29 +05:30
Kartik Sharma	976d03d16e	Changes in services.	2025-12-04 13:02:10 +05:30
Kartik Sharma	1544df966b	Adding Weidget to the dashboard for jobs.	2025-12-04 12:59:59 +05:30
Kartik Sharma	49c07606aa	Adding Acknowledge number and date in View Purchase.	2025-12-04 11:32:58 +05:30
pramod.mahajan	865928c1cb	correct right path	2025-12-03 16:58:42 +05:30
pramod.mahajan	06882e557e	fixed- added right path	2025-12-03 16:54:48 +05:30
pramod.mahajan	581447ecb6	addd field inside view Purchase -	2025-12-03 16:44:21 +05:30
pramod.mahajan	2392a96eb8	added new column proform amount	2025-12-03 16:02:36 +05:30
pramod.mahajan	8a3228c0c1	added pagination inside infra list	2025-12-03 15:27:12 +05:30
pramod.mahajan	d615f6ca8a	added required start tick on field base proforma and base amount	2025-12-03 14:53:14 +05:30
pramod.mahajan	48f8d4aedb	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Purchase_Invoice_Management	2025-12-03 13:55:43 +05:30
pramod.mahajan	258bd82b54	handle proforma to base , Tax, amount condition	2025-12-03 13:55:39 +05:30
Kartik Sharma	ef38ac4cdb	added page-min-h in directorycontectlist.	2025-12-03 12:34:21 +05:30
pramod.mahajan	8dfc8e4336	Merge pull request 'Adding ImageGallery Chips.' (#517 ) from Image_Gallery_FilterChips into Purchase_Invoice_Management Reviewed-on: #517 merged	2025-12-03 06:55:13 +00:00
pramod.mahajan	25b334a83c	restriction before choosing project for gallery filter api calling an removed unused code	2025-12-03 06:55:13 +00:00
Kartik Sharma	a8c10a0a9a	UI updation in Collection.	2025-12-03 06:55:13 +00:00
Kartik Sharma	4a66dad07a	UI updation in Organization.	2025-12-03 06:55:13 +00:00
Kartik Sharma	21c2a5cf7d	Adding ImageGallery Chips.	2025-12-03 06:55:13 +00:00
pramod.mahajan	83bd99549a	Merge pull request 'Finance_Export_Functionality :- Implementing Export Functionality in Finance Module.' (#522 ) from Finance_Export_Functionality into Purchase_Invoice_Management Reviewed-on: #522 Merged	2025-12-03 06:45:30 +00:00
Kartik Sharma	8fc49ab4a7	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Finance_Export_Functionality	2025-12-03 12:14:41 +05:30
pramod.mahajan	7fc058565b	changed component, follow standard naming	2025-12-03 12:12:19 +05:30
pramod.mahajan	d9947daf83	changed component, follow standard naming	2025-12-03 12:09:35 +05:30
Kartik Sharma	36f5edf4f5	UI updation in all popups.	2025-12-03 11:42:44 +05:30
pramod.mahajan	9cd1d932b1	added preview image inside challan, remove restric of payment date	2025-12-03 11:33:23 +05:30
Kartik Sharma	214a416deb	UI updation in Create and Update Service and Infra projects.	2025-12-03 11:30:41 +05:30
pramod.mahajan	3e3ff189c9	changed class to className	2025-12-03 10:10:36 +05:30
Kartik Sharma	06ac8099ed	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Finance_Export_Functionality	2025-12-03 09:55:57 +05:30
Kartik Sharma	917e7f3ccc	Adding api for Finance for Export.	2025-12-03 09:53:41 +05:30
pramod.mahajan	927b1840b4	Merge pull request 'Correction in HoverPopup at Jobs View panel.' (#525 ) from Jobs_Side_Panel into Purchase_Invoice_Management Reviewed-on: #525 Merged	2025-12-03 04:18:02 +00:00
Kartik Sharma	8dbdd230af	Adding HoverPopup effect.	2025-12-03 04:18:02 +00:00
Kartik Sharma	57bbcd4b45	Correction in HoverPopup.	2025-12-03 04:18:02 +00:00
pramod.mahajan	c3720df294	removed invalid border for tittle	2025-12-02 17:32:27 +05:30
pramod.mahajan	a747880a77	fixed value of sume value	2025-12-02 17:27:55 +05:30
pramod.mahajan	3bfe108dab	removed all required condition	2025-12-02 17:23:03 +05:30
pramod.mahajan	aa2e732ff4	added merged payment and delete	2025-12-02 10:58:38 +05:30
pramod.mahajan	76d99d6a14	merged purchase_payment	2025-12-02 09:49:56 +05:30
pramod.mahajan	444ffa9696	Merge pull request 'At the time of Update in Purchase Automatically hit the sumit without click.' (#526 ) from Purchase_Invoice_Update into Purchase_Invoice_Management Reviewed-on: #526 merged	2025-12-02 04:13:53 +00:00
Kartik Sharma	03fb5f7bc3	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Finance_Export_Functionality	2025-12-01 15:16:51 +05:30
Kartik Sharma	4b0ac5b6db	Correction in Purchase List table-responsive.	2025-12-01 15:15:05 +05:30
Kartik Sharma	311c74587a	Adding Delete and Restore functionality in Purchase Invoice	2025-12-01 15:03:13 +05:30
pramod.mahajan	ef3312523f	added payment	2025-12-01 12:32:46 +05:30
Kartik Sharma	35b3384dac	At the time of Update in Purchase Automatically hit the sumit without click.	2025-12-01 11:39:34 +05:30
pramod.mahajan	194b032870	fixed attachment issue. using added documentId	2025-12-01 10:26:54 +05:30
pramod.mahajan	0482bfe191	Merge pull request 'Adding Upload functionlaiy in ManagePurchase.' (#524 ) from Multiple_File_Uploader into Purchase_Invoice_Management Reviewed-on: #524 Merged	2025-12-01 04:13:29 +00:00
pramod.mahajan	6fa2cc4ef0	fixed attachment remove and update operation	2025-11-29 13:27:07 +05:30
Kartik Sharma	cb9d263730	Adding activetab to 0	2025-11-29 09:36:13 +05:30
pramod.mahajan	f0d21b14a2	added attachement in invoice	2025-11-28 20:49:47 +05:30
Kartik Sharma	9ce47a9232	Adding Upload functionlaiy in ManagePurchase.	2025-11-28 18:01:42 +05:30
pramod.mahajan	5818b84760	chaange sequence of dashbord widgets	2025-11-28 12:36:23 +05:30
pramod.mahajan	f9a0098adb	Merge pull request 'Services_Bugs :- UI changes of Purchase Modal.' (#523 ) from Services_Bugs into Purchase_Invoice_Management Reviewed-on: #523 Merged	2025-11-28 06:42:44 +00:00
Kartik Sharma	00d5df5ebb	Merge branch 'Project_Branch_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Services_Bugs	2025-11-28 11:58:14 +05:30
Kartik Sharma	40b11d209c	UI updation at Purchase Invoice.	2025-11-28 11:49:26 +05:30
pramod.mahajan	cb00bd4f35	centered spinner inside purchase list	2025-11-28 11:37:53 +05:30
pramod.mahajan	aec6930e11	fixed challan attachmenet	2025-11-28 11:35:59 +05:30
pramod.mahajan	44e1e16d19	fixed challan list attchament icon	2025-11-28 11:24:41 +05:30
pramod.mahajan	76826f8cee	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Purchase_Invoice_Management	2025-11-28 11:20:49 +05:30
pramod.mahajan	09428b1ff1	change JobComment btn label - 'send' to 'Submit'	2025-11-28 11:20:45 +05:30
Kartik Sharma	e5bfc6be44	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Purchase_Invoice_Management	2025-11-28 11:10:16 +05:30
Kartik Sharma	d987bd2a51	Alignment in Add Chalan and adding Page-min-h at list.	2025-11-28 11:09:45 +05:30
pramod.mahajan	bd1a97716c	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Purchase_Invoice_Management	2025-11-28 11:02:38 +05:30
pramod.mahajan	e0789cda3a	fixed project, supplier and Organization filed fullfied whenevr open for update	2025-11-28 11:02:17 +05:30
Kartik Sharma	73f5b46a40	Adding Query key in useUpdatePurchaseInvoice.	2025-11-28 10:36:02 +05:30
pramod.mahajan	9234253c97	fixed perfoma amt and delivery charge validation	2025-11-28 10:26:26 +05:30
pramod.mahajan	2b4f086318	added add challan btn	2025-11-28 09:54:42 +05:30
pramod.mahajan	1c41c00d72	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Purchase_Invoice_Management	2025-11-27 21:25:26 +05:30
pramod.mahajan	b8d3e58428	added challan	2025-11-27 21:25:23 +05:30
Kartik Sharma	9eae0b2cd1	Correction in App routes.	2025-11-27 18:01:07 +05:30
Kartik Sharma	a791007561	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Finance_Export_Functionality	2025-11-27 17:57:56 +05:30
Kartik Sharma	af95009c1f	Adding Export functionality in Expense.	2025-11-27 17:49:38 +05:30
Kartik Sharma	a31d5d5015	Adding Export functionality in Payment Request.	2025-11-27 17:41:49 +05:30
Kartik Sharma	b5fb48104c	Adding Export functionality in Recurring Expense.	2025-11-27 17:23:13 +05:30
pramod.mahajan	1b3e090211	added updation invoice	2025-11-27 16:52:33 +05:30
Kartik Sharma	339a5ff257	UI alignment in Purchase Invoice popup and changes in Jobs Arcieve and Archieve button.	2025-11-27 15:56:19 +05:30
pramod.mahajan	528255c2bd	added view deatils of purchases	2025-11-27 12:42:40 +05:30
Kartik Sharma	359a787bdb	Merge branch 'Issues_Nov_4W' of https://git.marcoaiot.com/admin/marco.pms.web into Finance_Export_Functionality	2025-11-27 10:40:45 +05:30
Kartik Sharma	7e4a8157bf	Change the UI for Employee and Directory and adding export functionality.	2025-11-27 10:40:10 +05:30
Kartik Sharma	3072354ed2	Adding Export Functionality in Advance Payment and adding spinner on it.	2025-11-27 10:16:25 +05:30
pramod.mahajan	909022b034	added purchase list	2025-11-26 20:25:59 +05:30
pramod.mahajan	271787812b	added get api for purchases	2025-11-26 19:15:50 +05:30
pramod.mahajan	0eb3cc61a3	removed unused code	2025-11-26 18:56:36 +05:30
pramod.mahajan	ea0e38f100	removed console	2025-11-26 18:41:23 +05:30
pramod.mahajan	d27546073f	Merge branch 'Project_Branch_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Project_Branch_Management	2025-11-26 18:37:08 +05:30
pramod.mahajan	a1a8dd4447	added zoom in and size bar collaspeing	2025-11-26 18:37:05 +05:30
Kartik Sharma	80717f0458	Showing message on the center of the page in Branches.	2025-11-26 18:02:26 +05:30
pramod.mahajan	4dbfe2bd48	Merge branch 'Project_Branch_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Project_Branch_Management	2025-11-26 17:53:21 +05:30
pramod.mahajan	c2c8dabdd4	Merge branch 'Project_Branch_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Project_Branch_Management	2025-11-26 17:52:34 +05:30
pramod.mahajan	54ca807436	removed double class name	2025-11-26 17:52:22 +05:30
pramod.mahajan	6e57108f8e	Merge pull request 'UI alignment in Finance forms.' (#515 ) from Finance_Form_Layout into Project_Branch_Management Reviewed-on: #515 merged	2025-11-26 12:21:31 +00:00
Kartik Sharma	219161f15e	UI alignment in Finance forms.	2025-11-26 12:21:31 +00:00
pramod.mahajan	86039552c8	Merge pull request 'Weidget_Dashoard_Jobs :- Creating Weiget for Jobs.' (#521 ) from Weidget_Dashoard_Jobs into Project_Branch_Management Reviewed-on: #521 merged	2025-11-26 12:19:44 +00:00
Kartik Sharma	e8ebbe4d76	Hide the Weidget.	2025-11-26 12:19:44 +00:00
Kartik Sharma	3d7a404d1f	Changing Name of tabs.	2025-11-26 12:19:44 +00:00
Kartik Sharma	e041e0fe8a	Adding Permission in Attendance Weiget at dasboard and Project Profile.	2025-11-26 12:19:44 +00:00
Kartik Sharma	082df5fad3	Changes in Daily progress report filter panel and Daily task list view.	2025-11-26 12:19:44 +00:00
Kartik Sharma	cfcf80b6c2	Changes in ServiceJobs.	2025-11-26 12:19:44 +00:00
Kartik Sharma	7617146512	Adding Min Height in Attendance Weiget.	2025-11-26 12:19:44 +00:00
Kartik Sharma	711dfb8f00	Correction in Project Statistics.	2025-11-26 12:19:44 +00:00
Kartik Sharma	cf430881dc	Creating new weidget for dashboard for Service jobs.	2025-11-26 12:19:44 +00:00
Kartik Sharma	7b1ad80d78	Increase the gap for Advance Payment rows.	2025-11-26 16:56:01 +05:30
Kartik Sharma	833cb98dd3	Change the Name of AdvancePayment Component.	2025-11-26 16:51:01 +05:30
Kartik Sharma	80f5dbd639	reset after invoice created	2025-11-26 15:50:46 +05:30
pramod.mahajan	998284f398	added organization api and successfuly created invoice	2025-11-26 15:16:58 +05:30
Kartik Sharma	e8f6298f93	Clicking on Contact Name in Notes Should Redirect to That Contact’s Detail Page in Directory (Web)	2025-11-26 12:35:21 +05:30
pramod.mahajan	82c1dc4b8e	created purchase form	2025-11-26 12:29:40 +05:30
Kartik Sharma	da13e40fd5	Service title and group text appear too bold in Masters → Services	2025-11-26 11:12:53 +05:30
Kartik Sharma	9c02a4a925	Increase the size of date picker in OrganizationInfo at tenant and Page is not Refresh at Create form.	2025-11-26 10:49:57 +05:30
Kartik Sharma	c975e54331	Logs Tab Action Redirects Back to Page 1 Automatically	2025-11-26 10:33:04 +05:30
Kartik Sharma	2109a5f1f1	“Create Job” Popup Should Close Automatically After Job Creation.	2025-11-26 10:12:58 +05:30
pramod.mahajan	b8df8a2bde	initially setup purchaseform	2025-11-25 20:01:11 +05:30
pramod.mahajan	5d773b0680	Merge branch 'SideBarCollapsed' into Purchase_Invoice_Management	2025-11-25 15:24:19 +05:30
pramod.mahajan	f13005a031	fixed side issue collapsing	2025-11-24 19:48:03 +05:30