Increasing the size of plannedwork.

Changes in EditActivity Modal.
Merge pull request 'Adding_dropdown :- Adding custome dropdown across all the modal.' (#533 ) from Adding_dropdown into Purchase_Invoice_Management
2025-12-06 17:14:07 +05:30 · 2025-12-06 17:10:36 +05:30 · 2025-12-06 11:30:46 +00:00 · 2025-12-06 16:57:14 +05:30 · 2025-12-06 16:54:54 +05:30 · 2025-12-06 11:18:15 +00:00
166 changed files with 9266 additions and 3905 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;
 }
--- 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();
+    if (currentPage > totalPages) {
-  }, [filteredSearchData]);
+      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";
+const AdvancePaymentList = ({ searchString }) => {
 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 = ({ employeeId, searchString }) => {
+    const { data, isError, isLoading, error } =
-  const { setBalance } = useAdvancePaymentContext();
+        useExpenseAllTransactionsList(searchString);
  const { data, isError, isLoading, error, isFetching } =
    useExpenseTransactions(employeeId, { enabled: !!employeeId });
  const records = Array.isArray(data) ? data : [];
-  let currentBalance = 0;
+    const rows = data || [];
-  const rowsWithBalance = records.map((r) => {
+    const navigate = useNavigate();
    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(() => {
+    const columns = [
-    if (!employeeId) {
+        {
-      setBalance(null);
+            key: "employee",
-      return;
+            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) {
+    if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;
      setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance);
    } else {
      setBalance(0);
    }
  }, [employeeId, data, setBalance]);
  if (!employeeId) {
    return (
-      <div
+        <div className="card-datatable" id="payment-request-table">
-        className="d-flex justify-content-center align-items-center"
+            <div className="mx-2">
-        style={{ height: "200px" }}
+                <table className="table border-top dataTable text-nowrap align-middle">
-      >
+                    <thead>
-        <p className="text-muted m-0">Please select an employee</p>
+                        <tr>
-      </div>
+                            {columns.map((col) => (
-    );
+                                <th key={col.key} className={`sorting ${col.align}`}>
-  }
+                                    {col.label}
                                </th>
                            ))}
                        </tr>
                    </thead>
-  if (isLoading || isFetching) {
+                    <tbody>
-    return (
+                        {rows.length > 0 ? (
-      <div
+                            rows.map((row) => (
-        className="d-flex justify-content-center align-items-center"
+                                <tr key={row.id} className="align-middle" style={{ height: "50px" }}>
-        style={{ height: "200px" }}
+                                    {columns.map((col) => (
-      >
+                                        <td key={col.key} className={`d-table-cell ${col.align} py-3`}>
-        <SpinnerLoader />
+                                            {col.customRender
-      </div>
+                                                ? col.customRender(row)
-    );
+                                                : col.getValue(row)}
-  }
+                                        </td>
-
+                                    ))}
-  if (isError) {
+                                </tr>
-    return (
+                            ))
-      <div className="text-center py-3">
+                        ) : (
-        {error?.status === 404
+                            <tr>
-          ? "No advance payment transactions found."
+                                <td colSpan={columns.length} className="text-center border-0 py-3">
-          : <Error error={error} />}
+                                    No Employees Found
-      </div>
+                                </td>
-    );
+                            </tr>
-  }
+                        )}
-  const columns = [
+                    </tbody>
-    {
+                </table>
-      key: "date",
+            </div>
-      label: (
+        </div>
-        <>
+    )
-          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>
  );
 };
 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 className="d-flex align-items-center gap-2 mb-2">
-              <div class="avatar avatar-xs">
+              <div className="avatar avatar-xs">
-                <span class="avatar-initial rounded-circle bg-label-primary">
+                <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,
+  useDashboardProjectsCardData,
-    useDashboardTeamsCardData,
+  useDashboardTeamsCardData,
-    useDashboardTasksCardData,
+  useDashboardTasksCardData,
-    useAttendanceOverviewData
+  useAttendanceOverviewData,
  useGetCollectionOverview,
 } from "../../hooks/useDashboard_Data";
 import Projects from "./Projects";
@ -17,66 +18,178 @@ 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 { data,isLoading,isError } = useGetCollectionOverview();
-    const projectId = useSelector((store) => store.localVariables.projectId);
+  console.log("data-->", data);
-    const isAllProjectsSelected = projectId === null;
+  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
-        <div className="container-fluid mt-5">
+          className={`${
-            <div className="row gy-4">
+            !isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
-                {isAllProjectsSelected && (
+          }`}
-                    <div className="col-sm-6 col-lg-4">
+        >
-                        <Projects />
+          <Teams />
                    </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>
-    );
+
        <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>
        )}
        <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/ProjectProgressChart.jsx
+++ b/src/components/Dashboard/ProjectProgressChart.jsx
@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import LineChart from "../Charts/LineChart";
-import { useProjects } from "../../hooks/useProjects";
+import { useProjectName } from "../../hooks/useProjects";
 import { useDashboard_Data } from "../../hooks/useDashboard_Data";
 import { useSelector } from "react-redux";
@ -11,7 +11,7 @@ const ProjectProgressChart = ({
  const selectedProject = useSelector(
    (store) => store.localVariables.projectId
  );
-  const { projects } = useProjects();
+  const { projectNames } = useProjectName();
  const [range, setRange] = useState(DefaultRange);
  const [showAllEmployees, setShowAllEmployees] = useState(false);
@ -79,7 +79,9 @@ const ProjectProgressChart = ({
    })
  );
-  const selectedProjectData = projects?.find((p) => p.id === selectedProject);
+  const selectedProjectData = projectNames?.find(
    (p) => p.id === selectedProject
  );
  const selectedProjectName = selectedProjectData?.shortName?.trim()
    ? selectedProjectData.shortName
    : selectedProjectData?.name;
--- a/src/components/Dashboard/ServiceJobs.jsx
+++ b/src/components/Dashboard/ServiceJobs.jsx
@ -0,0 +1,237 @@
 import React from "react";
 const ServiceJobs = () => {
  return (
    <div className="col-xxl-4 col-lg-6">
      <div className="card h-100">
        <div className="card-header d-flex justify-content-between">
          <div className="card-title mb-0 text-start">
            <h5 className="mb-1">Service Jobs</h5>
            <p className="card-subtitle">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">
              <li className="nav-item">
                <button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
                  My Jobs
                </button>
              </li>
              <li className="nav-item">
                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
                  Assigned
                </button>
              </li>
              <li className="nav-item">
                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
                  In Progress
                </button>
              </li>
            </ul>
            {/* Tab Content */}
            <div className="tab-content border-0 mx-1 text-start">
              {/* ---------------------- NEW TAB ---------------------- */}
              <div className="tab-pane fade show active" id="tab-new">
                {/* Entry 1 */}
                <ul className="timeline mb-0">
                  <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">Sender</small>
                      </div>
                      <h6 className="my-50">Myrtle Ullrich</h6>
                      <p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
                    </div>
                  </li>
                  <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">Receiver</small>
                      </div>
                      <h6 className="my-50">Barry Schowalter</h6>
                      <p className="text-body mb-0">939 Orange, California(CA), 92118</p>
                    </div>
                  </li>
                </ul>
                <div className="border-1 border-light border-top border-dashed my-4"></div>
                {/* Entry 2 */}
                <ul className="timeline mb-0">
                  <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">Sender</small>
                      </div>
                      <h6 className="my-50">Veronica Herman</h6>
                      <p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
                    </div>
                  </li>
                  <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">Receiver</small>
                      </div>
                      <h6 className="my-50">Helen Jacobs</h6>
                      <p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
                    </div>
                  </li>
                </ul>
              </div>
              {/* ---------------------- PREPARING TAB ---------------------- */}
              <div className="tab-pane fade" id="tab-preparing">
                {/* Entry 1 */}
                <ul className="timeline mb-0">
                  <li className="timeline-item ps-6 border-left-dashed">
                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
                      <i className="bx bx-time-five"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-warning text-uppercase">Sender</small>
                      </div>
                      <h6 className="my-50">Oliver Grant</h6>
                      <p className="text-body mb-0">220 Pine St, California(CA), 95765</p>
                    </div>
                  </li>
                  <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">Receiver</small>
                      </div>
                      <h6 className="my-50">Samantha Lee</h6>
                      <p className="text-body mb-0">744 Bay Area, California(CA), 94016</p>
                    </div>
                  </li>
                </ul>
                <div className="border-1 border-light border-top border-dashed my-4"></div>
                {/* Entry 2 */}
                <ul className="timeline mb-0">
                  <li className="timeline-item ps-6 border-left-dashed">
                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
                      <i className="bx bx-time-five"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-warning text-uppercase">Sender</small>
                      </div>
                      <h6 className="my-50">Marcus Howard</h6>
                      <p className="text-body mb-0">58 Avenue, California(CA), 95376</p>
                    </div>
                  </li>
                  <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">Receiver</small>
                      </div>
                      <h6 className="my-50">Daniel Foster</h6>
                      <p className="text-body mb-0">312 Marina, California(CA), 94109</p>
                    </div>
                  </li>
                </ul>
              </div>
              {/* ---------------------- SHIPPING TAB ---------------------- */}
              <div className="tab-pane fade" id="tab-shipping">
                {/* Entry 1 */}
                <ul className="timeline mb-0">
                  <li className="timeline-item ps-6 border-left-dashed">
                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
                      <i className="bx bx-package"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-info text-uppercase">Sender</small>
                      </div>
                      <h6 className="my-50">James Carter</h6>
                      <p className="text-body mb-0">441 Market St, California(CA), 94111</p>
                    </div>
                  </li>
                  <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">Receiver</small>
                      </div>
                      <h6 className="my-50">Linda Moore</h6>
                      <p className="text-body mb-0">990 Willow Road, California(CA), 94025</p>
                    </div>
                  </li>
                </ul>
                <div className="border-1 border-light border-top border-dashed my-4"></div>
                {/* Entry 2 */}
                <ul className="timeline mb-0">
                  <li className="timeline-item ps-6 border-left-dashed">
                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
                      <i className="bx bx-package"></i>
                    </span>
                    <div className="timeline-event ps-1">
                      <div className="timeline-header">
                        <small className="text-info text-uppercase">Sender</small>
                      </div>
                      <h6 className="my-50">Sarah Bennett</h6>
                      <p className="text-body mb-0">882 Canyon Rd, California(CA), 94704</p>
                    </div>
                  </li>
                  <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">Receiver</small>
                      </div>
                      <h6 className="my-50">George Simmons</h6>
                      <p className="text-body mb-0">19 Palm St, California(CA), 93001</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
 };
 export default ServiceJobs;
--- a/src/components/Directory/BucketForm.jsx
+++ b/src/components/Directory/BucketForm.jsx
@ -43,7 +43,7 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
              Name
            </Label>
            <input
-              className="form-control form-control-sm"
+              className="form-control"
              {...register("name")}
            />
            {errors.name && (
@ -51,12 +51,12 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
            )}
          </div>
-          <div className="mb-3">
+          <div className="my-3">
            <Label htmlFor="description" className="text-start" required>
              Description
            </Label>
            <textarea
-              className="form-control form-control-sm"
+              className="form-control"
              {...register("description")}
              rows="3"
            />
--- a/src/components/Directory/BucketList.jsx
+++ b/src/components/Directory/BucketList.jsx
@ -14,7 +14,7 @@ const BucketList = ({ buckets, loading, searchTerm, onEdit, onDelete }) => {
  if (!loading && sorted.length === 0) return <div>No buckets found</div>;
  return (
-    <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0">
+    <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0 text-start">
      {sorted.map((bucket) => (
        <div className="col" key={bucket.id}>
          <div className="card h-100">
--- a/src/components/Directory/CardViewContact.jsx
+++ b/src/components/Directory/CardViewContact.jsx
@ -40,7 +40,7 @@ const CardViewContact = ({
        className="card text-start border-1"
        style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }}
      >
-        <div className="card-body  px-1 py-2 pb-0">
+        <div className="card-body px-1 py-2 pb-0">
          <div className="d-flex justify-content-between">
            <div
              className={`d-flex align-items-center ${
@ -61,7 +61,7 @@ const CardViewContact = ({
                  (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
                }
              />{" "}
-              <span className="text-heading fs-6 ms-2"> {contact?.name}</span>
+              <span className="text-heading fs-6 ms-2 mt-n1"> {contact?.name}</span>
            </div>
            <div>
              {IsActive && (
--- 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/ManageBucket1.jsx
+++ b/src/components/Directory/ManageBucket1.jsx
@ -45,7 +45,7 @@ const ManageBucket1 = () => {
  return (
    <div className="container m-0 p-0" style={{ minHeight: "00px" }}>
      <div className="d-flex justify-content-center">
-        <p className="fs-5 fw-semibold m-0">Manage Buckets</p>
+        <h5 className="m-0">Manage Buckets</h5>
      </div>
      {action ? (
--- a/src/components/Directory/ManageContact.jsx
+++ b/src/components/Directory/ManageContact.jsx
@ -19,6 +19,8 @@ import SelectMultiple from "../common/SelectMultiple";
 import { ContactSchema, defaultContactValue } from "./DirectorySchema";
 import InputSuggestions from "../common/InputSuggestion";
 import Label from "../common/Label";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 const ManageContact = ({ contactId, closeModal }) => {
  // fetch master data
@ -194,7 +196,7 @@ const ManageContact = ({ contactId, closeModal }) => {
              Name
            </Label>
            <input
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("name")}
            />
            {errors.name && (
@ -210,6 +212,7 @@ const ManageContact = ({ contactId, closeModal }) => {
              value={watch("organization") || ""}
              onChange={(val) => setValue("organization", val, { shouldValidate: true })}
              error={errors.organization?.message}
              size="md"
            />
          </div>
@ -222,7 +225,7 @@ const ManageContact = ({ contactId, closeModal }) => {
              Designation
            </Label>
            <input
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("designation")}
              onChange={handleDesignationChange}
            />
@ -257,7 +260,7 @@ const ManageContact = ({ contactId, closeModal }) => {
        </div>
        {/* Emails + Phones */}
-        <div className="row mt-1">
+        <div className="row mt-3">
          <div className="col-md-6">
            {emailFields.map((field, index) => (
              <div
@ -265,22 +268,39 @@ const ManageContact = ({ contactId, closeModal }) => {
                className="row d-flex align-items-center mb-1"
              >
                <div className="col-5 text-start">
-                  <label className="form-label">Label</label>
+                  <AppFormController
-                  <select
+                    name={`contactEmails.${index}.label`}
-                    className="form-select form-select-sm"
+                    control={control}
-                    {...register(`contactEmails.${index}.label`)}
+                    render={({ field }) => (
-                  >
+                      <SelectField
-                    <option value="Work">Work</option>
+                        label="Label"
-                    <option value="Personal">Personal</option>
+                        options={[
-                    <option value="Other">Other</option>
+                          { id: "Work", name: "Work" },
-                  </select>
+                          { id: "Personal", name: "Personal" },
                          { id: "Other", name: "Other" }
                        ]}
                        placeholder="Choose a Label"
                        required
                        labelKey="name"
                        valueKeyKey="id"
                        value={field.value}
                        onChange={field.onChange}
                        className="m-0"
                      />
                    )}
                  />
                  {errors.contactEmails?.[index]?.label && (
                    <small className="danger-text">
                      {errors.contactEmails[index].label.message}
                    </small>
                  )}
                </div>
-                <div className="col-7 text-start">
+                <div className="col-7 text-start mt-n3">
                  <label className="form-label">Email</label>
                  <div className="d-flex align-items-center">
                    <input
                      type="email"
-                      className="form-control form-control-sm"
+                      className="form-control "
                      {...register(`contactEmails.${index}.emailAddress`)}
                      placeholder="email@example.com"
                    />
@ -308,27 +328,43 @@ const ManageContact = ({ contactId, closeModal }) => {
          <div className="col-md-6">
            {phoneFields.map((field, index) => (
-              <div
+              <div key={field.id} className="row d-flex align-items-center mb-2">
-                key={field.id}
+
                className="row d-flex align-items-center mb-2"
              >
                <div className="col-5 text-start">
-                  <label className="form-label">Label</label>
+                  <AppFormController
-                  <select
+                    name={`contactPhones.${index}.label`}
-                    className="form-select form-select-sm"
+                    control={control}
-                    {...register(`contactPhones.${index}.label`)}
+                    render={({ field }) => (
-                  >
+                      <SelectField
-                    <option value="Office">Office</option>
+                        label="Label"
-                    <option value="Personal">Personal</option>
+                        options={[
-                    <option value="Business">Business</option>
+                          { id: "Office", name: "Office" },
-                  </select>
+                          { id: "Personal", name: "Personal" },
                          { id: "Business", name: "Business" }
                        ]}
                        placeholder="Choose a Label"
                        required
                        labelKey="name"
                        valueKeyKey="id"
                        value={field.value}
                        onChange={field.onChange}
                        className="m-0"
                      />
                    )}
                  />
                  {errors.contactPhones?.[index]?.label && (
                    <small className="danger-text">
                      {errors.contactPhones[index].label.message}
                    </small>
                  )}
                </div>
-                <div className="col-7 text-start">
+
                <div className="col-7 text-start mt-n3">
                  <label className="form-label">Phone</label>
                  <div className="d-flex align-items-center">
                    <input
                      type="text"
-                      className="form-control form-control-sm"
+                      className="form-control "
                      {...register(`contactPhones.${index}.phoneNumber`)}
                      placeholder="9876543210"
                    />
@ -350,42 +386,43 @@ const ManageContact = ({ contactId, closeModal }) => {
                    </small>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* Category + Projects */}
-        <div className="row my-1">
+        <div className="row">
          <div className="col-md-6 text-start">
-            <label className="form-label">Category</label>
+            <AppFormController
-            <select
+              name="contactCategoryId"
-              className="form-select form-select-sm"
+              control={control}
-              {...register("contactCategoryId")}
+              rules={{ required: "Category is required" }}
-            >
+              render={({ field }) => (
-              {contactCategoryLoading && !contactCategory ? (
+                <SelectField
-                <option disabled value="">
+                  label="Category"
-                  Loading...
+                  required
-                </option>
+                  options={contactCategory ?? []}
-              ) : (
+                  placeholder="Select Category"
-                <>
+                  labelKey="name"
-                  <option disabled value="">
+                  valueKeyKey="id"
-                    Select Category
+                  value={field.value}
-                  </option>
+                  onChange={field.onChange}
-                  {contactCategory?.map((cate) => (
+                  isLoading={contactCategoryLoading && !contactCategory}
-                    <option key={cate.id} value={cate.id}>
+                  className="m-0"
-                      {cate.name}
+                />
                    </option>
                  ))}
                </>
              )}
-            </select>
+            />
            {errors.contactCategoryId && (
              <small className="danger-text">
                {errors.contactCategoryId.message}
              </small>
            )}
          </div>
          <div className="col-12 col-md-6 text-start">
            <SelectMultiple
              name="projectIds"
@ -402,13 +439,14 @@ const ManageContact = ({ contactId, closeModal }) => {
        </div>
        {/* Tags */}
-        <div className="col-12 text-start">
+        <div className="col-12 text-start mt-3">
          <TagInput
            name="tags"
            label="Tags"
            options={contactTags}
            isRequired={true}
            placeholder="Enter Tag"
            size="sm"
          />
          {errors.tags && (
            <small className="danger-text">{errors.tags.message}</small>
@ -417,8 +455,8 @@ const ManageContact = ({ contactId, closeModal }) => {
        {/* Buckets */}
        <div className="row">
-          <div className="col-md-12 mt-1 text-start">
+          <div className="col-md-12 mt-3 text-start">
-            <label className="form-label ">Select Bucket</label>
+            <label className="form-label mb-2">Select Bucket</label>
            <ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
              {bucketsLoaging && <p>Loading...</p>}
              {buckets?.map((item) => (
@ -454,15 +492,15 @@ const ManageContact = ({ contactId, closeModal }) => {
        <div className="col-12 text-start">
          <label className="form-label">Address</label>
          <textarea
-            className="form-control form-control-sm"
+            className="form-control "
            rows="2"
            {...register("address")}
          />
        </div>
-        <div className="col-12 text-start">
+        <div className="col-12 text-start mt-3">
          <label className="form-label">Description</label>
          <textarea
-            className="form-control form-control-sm"
+            className="form-control "
            rows="2"
            {...register("description")}
          />
--- 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/Documents/ManageDocument.jsx
+++ b/src/components/Documents/ManageDocument.jsx
@ -17,6 +17,8 @@ import {
 import showToast from "../../services/toastService";
 import { useDocumentContext } from "./Documents";
 import { isPending } from "@reduxjs/toolkit";
 import { AppFormController, AppFormProvider } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 const toBase64 = (file) =>
  new Promise((resolve, reject) => {
@ -72,9 +74,12 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
    handleSubmit,
    watch,
    setValue,
    control,
    reset,
    formState: { errors },
  } = methods;
  const { mutate: UploadDocument, isPending: isUploading } = useUploadDocument(
    () => {
      showToast("Document Uploaded Successfully", "success");
@ -90,31 +95,31 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
  const onSubmit = (data) => {
-  const normalizeAttachment = (attachment) => {
+    const normalizeAttachment = (attachment) => {
-    if (!attachment) return null;
+      if (!attachment) return null;
-    return {
+      return {
-      ...attachment,
+        ...attachment,
-      fileSize: Math.ceil(attachment.fileSize / 1024), 
+        fileSize: Math.ceil(attachment.fileSize / 1024),
      };
    };
  };
-  const payload = {
+    const payload = {
-    ...data,
+      ...data,
-    attachment: normalizeAttachment(data.attachment),
+      attachment: normalizeAttachment(data.attachment),
  };
  if (ManageDoc?.document) {
    const DocumentPayload = {
      ...payload,
      id: DocData.id,
      tags: MergedTagsWithExistenStatus(data?.tags, DocData?.tags),
    };
-    UpdateDocument({ documentId: DocData?.id, DocumentPayload });
+
-  } else {
+    if (ManageDoc?.document) {
-    const DocumentPayload = { ...payload, entityId: Entity };
+      const DocumentPayload = {
-    UploadDocument(DocumentPayload);
+        ...payload,
-  }
+        id: DocData.id,
-};
+        tags: MergedTagsWithExistenStatus(data?.tags, DocData?.tags),
      };
      UpdateDocument({ documentId: DocData?.id, DocumentPayload });
    } else {
      const DocumentPayload = { ...payload, entityId: Entity };
      UploadDocument(DocumentPayload);
    }
  };
  const {
    data: DocData,
@ -134,7 +139,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
  const { DocumentTypes, isLoading: isTypeLoading } = useDocumentTypes(
    categoryId || null
  );
-  const {data:DocumentTags} = useDocumentTags()
+  const { data: DocumentTags } = useDocumentTags()
  // Update schema whenever document type changes
  useEffect(() => {
@ -144,7 +149,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
      (t) => String(t.id) === String(documentTypeId)
    );
    if (!type) return;
-   setSelectedType(type)
+    setSelectedType(type)
    const newSchema = DocumentPayloadSchema({
      isMandatory: type.isMandatory ?? false,
      regexExpression: type.regexExpression ?? null,
@ -200,10 +205,10 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
        t === "application/pdf"
          ? ".pdf"
          : t === "image/jpeg"
-          ? ".jpg,.jpeg"
+            ? ".jpg,.jpeg"
-          : t === "image/png"
+            : t === "image/png"
-          ? ".png"
+              ? ".png"
-          : ""
+              : ""
      )
      .join(",") || "";
@ -231,200 +236,209 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
  const isPending = isUploading || isUpdating;
  return (
-    <div className="p-2">
+    <AppFormProvider {...methods}>
-      <p className="fw-bold fs-6">Upload New Document</p>
+      <div className="p-2">
-      <FormProvider key={documentTypeId} {...methods}>
+        <h5 className="">Upload New Document</h5>
-        <form onSubmit={handleSubmit(onSubmit)} className="text-start">
+        <FormProvider key={documentTypeId} {...methods}>
-          {/* Category */}
+          <form onSubmit={handleSubmit(onSubmit)} className="text-start">
-          <div className="mb-2">
+            {/* Category */}
-            <Label htmlFor="documentCategoryId" required>Document Category</Label>
+            <div className="col-12 col-md-12 mb-2 mb-md-4">
-            <select
+              <AppFormController
-              {...register("documentCategoryId")}
+                name="documentCategoryId"
-              className="form-select form-select-sm"
+                control={control}
-            >
+                render={({ field }) => (
-              {isLoading && (
+                  <SelectField
-                <option disabled value="">
+                    label="Document Category"
-                  Loading...
+                    options={DocumentCategories ?? []}
-                </option>
+                    placeholder="Select Category"
-              )}
+                    required
-              {!isLoading && <option value="">Select Category</option>}
+                    labelKey="name"
-              {DocumentCategories?.map((type) => (
+                    valueKeyKey="id"
-                <option key={type.id} value={type.id}>
+                    value={field.value}
-                  {type.name}
+                    onChange={field.onChange}
-                </option>
+                    isLoading={isLoading}
-              ))}
+                    className="m-0"
-            </select>
+                  />
            {errors.documentCategoryId && (
              <div className="danger-text">
                {errors.documentCategoryId.message}
              </div>
            )}
          </div>
          {/* Type */}
          {categoryId && (
            <div className="mb-2">
              <Label htmlFor="documentTypeId" required>Document Type</Label>
              <select
                {...register("documentTypeId")}
                className="form-select form-select-sm"
              >
                {isTypeLoading && (
                  <option disabled value="">
                    Loading...
                  </option>
                )}
-                {DocumentTypes?.map((type) => (
+              />
-                  <option key={type.id} value={type.id}>
+
-                    {type.name}
+              {errors.documentCategoryId && (
-                  </option>
+                <small className="danger-text">
-                ))}
+                  {errors.documentCategoryId.message}
-              </select>
+                </small>
              {errors.documentTypeId && (
                <div className="danger-text">
                  {errors.documentTypeId.message}
                </div>
              )}
            </div>
          )}
-          {/* Document ID */}
+            {/* Type */}
-          <div className="mb-2">
+            {categoryId && (
-            <label
+              <div className="col-12 col-md-12 mb-2 mb-md-4">
-              htmlFor="documentId"
+                <AppFormController
-              required={selectedType?.isMandatory ?? false}
+                  name="documentTypeId"
-            >
+                  control={control}
-              Document ID
+                  render={({ field }) => (
-            </label>
+                    <SelectField
-            <input
+                      label="Document Type"
-              type="text"
+                      options={DocumentTypes ?? []}
-              className="form-control form-control-sm"
+                      placeholder="Select Document Type"
-              {...register("documentId")}
+                      required
-            />
+                      labelKey="name"
-            {errors.documentId && (
+                      valueKeyKey="id"
-              <div className="danger-text">{errors.documentId.message}</div>
+                      value={field.value}
-            )}
+                      onChange={field.onChange}
-          </div>
+                      isLoading={isTypeLoading}
-
+                      className="m-0"
-          {/* Document Name */}
+                    />
-          <div className="mb-2">
+                  )}
            <Label htmlFor="name" required>
              Document Name
            </Label>
            <input
              type="text"
              className="form-control form-control-sm"
              {...register("name")}
            />
            {errors.name && (
              <div className="danger-text">{errors.name.message}</div>
            )}
          </div>
          {/* Upload */}
          <div className="row my-2">
            <div className="col-md-12">
              <Label htmlFor="attachment" required>Upload Document</Label>
              <div
                className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
                style={{ cursor: "pointer" }}
                onClick={() => document.getElementById("attachment").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">
                  ({selectedType?.allowedContentType || "PDF/JPG/PNG"}, max{" "}
                  {selectedType?.maxSizeAllowedInMB ?? 25}MB)
                </small>
                <input
                  type="file"
                  id="attachment"
                  accept={selectedType?.allowedContentType}
                  style={{ display: "none" }}
                  onChange={(e) => {
                    onFileChange(e);
                    e.target.value = ""; // reset input
                  }}
                />
                {errors.documentTypeId && (
                  <small className="danger-text">
                    {errors.documentTypeId.message}
                  </small>
                )}
              </div>
-              {errors.attachment && (
+            )}
-                <small className="danger-text">
+
-                  {errors.attachment.message
+
-                    ? errors.attachment.message
+            {/* Document ID */}
-                    : errors.attachment.fileName?.message ||
+            <div className="mb-4">
              <label
                htmlFor="documentId"
                required={selectedType?.isMandatory ?? false}
              >
                Document ID
              </label>
              <input
                type="text"
                className="form-control "
                {...register("documentId")}
              />
              {errors.documentId && (
                <div className="danger-text">{errors.documentId.message}</div>
              )}
            </div>
            {/* Document Name */}
            <div className="mb-2">
              <Label htmlFor="name" required>
                Document Name
              </Label>
              <input
                type="text"
                className="form-control "
                {...register("name")}
              />
              {errors.name && (
                <div className="danger-text">{errors.name.message}</div>
              )}
            </div>
            {/* Upload */}
            <div className="row my-4">
              <div className="col-md-12">
                <Label htmlFor="attachment" required>Upload Document</Label>
                <div
                  className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
                  style={{ cursor: "pointer" }}
                  onClick={() => document.getElementById("attachment").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">
                    ({selectedType?.allowedContentType || "PDF/JPG/PNG"}, max{" "}
                    {selectedType?.maxSizeAllowedInMB ?? 25}MB)
                  </small>
                  <input
                    type="file"
                    id="attachment"
                    accept={selectedType?.allowedContentType}
                    style={{ display: "none" }}
                    onChange={(e) => {
                      onFileChange(e);
                      e.target.value = ""; // reset input
                    }}
                  />
                </div>
                {errors.attachment && (
                  <small className="danger-text">
                    {errors.attachment.message
                      ? errors.attachment.message
                      : errors.attachment.fileName?.message ||
                      errors.attachment.base64Data?.message ||
                      errors.attachment.contentType?.message ||
                      errors.attachment.fileSize?.message}
-                </small>
+                  </small>
-              )}
+                )}
-              {file?.base64Data && (
+                {file?.base64Data && (
-                <div className="d-flex justify-content-between text-start p-1 mt-2">
+                  <div className="d-flex justify-content-between text-start p-1 mt-2">
-                  <div>
+                    <div>
-                    <span className="mb-0 text-secondary small d-block">
+                      <span className="mb-0 text-secondary small d-block">
-                      {file.fileName}
+                        {file.fileName}
-                    </span>
+                      </span>
-                    <span className="text-body-secondary small d-block">
+                      <span className="text-body-secondary small d-block">
-                      {(file.fileSize / 1024).toFixed(1)} KB
+                        {(file.fileSize / 1024).toFixed(1)} KB
-                    </span>
+                      </span>
                    </div>
                    <i
                      className="bx bx-trash bx-sm cursor-pointer text-danger"
                      onClick={removeFile}
                    ></i>
                  </div>
-                  <i
+                )}
-                    className="bx bx-trash bx-sm cursor-pointer text-danger"
+              </div>
-                    onClick={removeFile}
+            </div>
-                  ></i>
+            <div className="mb-4">
-                </div>
+              <TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
              {errors.tags && (
                <small className="danger-text">{errors.tags.message}</small>
              )}
            </div>
          </div>
          <div className="mb-2">
            <TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
            {errors.tags && (
              <small className="danger-text">{errors.tags.message}</small>
            )}
          </div>
-          {/* Description */}
+            {/* Description */}
-          <div className="mb-2">
+            <div className="mb-4">
-            <Label htmlFor="description" required>Description</Label>
+              <Label htmlFor="description" required>Description</Label>
-            <textarea
+              <textarea
-              rows="2"
+                rows="2"
-              className="form-control"
+                className="form-control"
-              {...register("description")}
+                {...register("description")}
-            ></textarea>
+              ></textarea>
-            {errors.description && (
+              {errors.description && (
-              <div className="danger-text">{errors.description.message}</div>
+                <div className="danger-text">{errors.description.message}</div>
-            )}
+              )}
-          </div>
+            </div>
-          {/* Buttons */}
+            {/* Buttons */}
-          <div className="d-flex justify-content-end gap-3 mt-4">            
+            <div className="d-flex justify-content-end gap-3 mt-4">
-            <button
+              <button
-              type="reset"
+                type="reset"
-              className="btn btn-label-secondary btn-sm"
+                className="btn btn-label-secondary btn-sm"
-              disabled={isPending}
+                disabled={isPending}
-              onClick={closeModal}
+                onClick={closeModal}
-            >
+              >
-              Cancel
+                Cancel
-            </button>
+              </button>
-            <button
+              <button
-              type="submit"
+                type="submit"
-              className="btn btn-primary btn-sm"
+                className="btn btn-primary btn-sm"
-              disabled={isPending}
+                disabled={isPending}
-            >
+              >
-              {isPending ? "Please Wait..." : " Submit"}
+                {isPending ? "Please Wait..." : " Submit"}
-            </button>
+              </button>
-          </div>
+            </div>
-        </form>
+          </form>
-      </FormProvider>
+        </FormProvider>
-    </div>
+      </div>
    </AppFormProvider>
  );
 };
--- a/src/components/Employee/EmpActivities.jsx
+++ b/src/components/Employee/EmpActivities.jsx
@ -21,7 +21,7 @@ const EmpActivities = ({ employee }) => {
  if (isLoading) return <div>Loading...</div>
  return (
    <>
-      <div className="card h-100 mt-4">
+      <div className="card page-min-h mt-3">
        <div className="card-body">
          <div className="my-0 text-start">
            <DateRangePicker
--- a/src/components/Employee/EmpAttendance.jsx
+++ b/src/components/Employee/EmpAttendance.jsx
@ -71,7 +71,7 @@ const EmpAttendance = () => {
          <AttendLogs Id={attendanceId} />
        </GlobalModel>
      )}
-      <div className="card px-4 mt-5 py-2 " style={{ minHeight: "500px" }}>
+      <div className="card px-4 mt-3 py-2 " style={{ minHeight: "500px" }}>
        <div
          className="dataTables_length text-start py-2 d-flex justify-content-between "
          id="DataTables_Table_0_length"
@ -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/Employee/EmpDashboard.jsx
+++ b/src/components/Employee/EmpDashboard.jsx
@ -18,7 +18,7 @@ const EmpDashboard = ({ profile }) => {
          <EmpOverview profile={profile}></EmpOverview>
        </div>
-        <div className="col col-sm-6 pt-5">
+        <div className="col col-sm-6 mt-3">
          <div className="card ">
            <div className="card-body">
              <small className="card-text text-uppercase text-body-secondary small text-start d-block">
@ -82,7 +82,7 @@ const EmpDashboard = ({ profile }) => {
            </div>
          </div>
        </div>
-        <div className="col-12 col-sm-6 pt-5">
+        <div className="col-12 col-sm-6 pt-2">
          <EmpReportingManager
            employeeId={profile?.id}
            employee={profile}
--- a/src/components/Employee/EmpDocuments.jsx
+++ b/src/components/Employee/EmpDocuments.jsx
@ -6,10 +6,12 @@ import { useParams } from "react-router-dom";
 import { DOCUMENTS_ENTITIES } from "../../utils/constants";
 const EmpDocuments = ({ profile, loggedInUser }) => {
- const {employeeId} = useParams()
+  const { employeeId } = useParams()
  return (
    <>
-       <Documents Document_Entity={DOCUMENTS_ENTITIES.EmployeeEntity} Entity={employeeId} />
+      <div className="mt-3">
        <Documents Document_Entity={DOCUMENTS_ENTITIES.EmployeeEntity} Entity={employeeId} />
      </div>
    </>
  );
 };
--- a/src/components/Employee/EmpOverview.jsx
+++ b/src/components/Employee/EmpOverview.jsx
@ -5,7 +5,7 @@ const EmpOverview = ({ profile }) => {
  const { loggedInUserProfile } = useProfile();
  return (
-    <div className="row">
+    <div className="row mt-n2">
      <div className="col-12 mb-4">
        <div className="card">
          <div className="card-body">
--- a/src/components/Employee/ManageEmployee.jsx
+++ b/src/components/Employee/ManageEmployee.jsx
@ -17,6 +17,8 @@ import DatePicker from "../common/DatePicker";
 import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
 import { useOrganizationsList } from "../../hooks/useOrganization";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 const ManageEmployee = ({ employeeId, onClosed }) => {
  const dispatch = useDispatch();
@ -96,26 +98,26 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
    reset(
      currentEmployee
        ? {
-            id: currentEmployee.id || null,
+          id: currentEmployee.id || null,
-            firstName: currentEmployee.firstName || "",
+          firstName: currentEmployee.firstName || "",
-            middleName: currentEmployee.middleName || "",
+          middleName: currentEmployee.middleName || "",
-            lastName: currentEmployee.lastName || "",
+          lastName: currentEmployee.lastName || "",
-            email: currentEmployee.email || "",
+          email: currentEmployee.email || "",
-            currentAddress: currentEmployee.currentAddress || "",
+          currentAddress: currentEmployee.currentAddress || "",
-            birthDate: formatDate(currentEmployee.birthDate) || "",
+          birthDate: formatDate(currentEmployee.birthDate) || "",
-            joiningDate: formatDate(currentEmployee.joiningDate) || "",
+          joiningDate: formatDate(currentEmployee.joiningDate) || "",
-            emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
+          emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
-            emergencyContactPerson:
+          emergencyContactPerson:
-              currentEmployee.emergencyContactPerson || "",
+            currentEmployee.emergencyContactPerson || "",
-            aadharNumber: currentEmployee.aadharNumber || "",
+          aadharNumber: currentEmployee.aadharNumber || "",
-            gender: currentEmployee.gender || "",
+          gender: currentEmployee.gender || "",
-            panNumber: currentEmployee.panNumber || "",
+          panNumber: currentEmployee.panNumber || "",
-            permanentAddress: currentEmployee.permanentAddress || "",
+          permanentAddress: currentEmployee.permanentAddress || "",
-            phoneNumber: currentEmployee.phoneNumber || "",
+          phoneNumber: currentEmployee.phoneNumber || "",
-            jobRoleId: currentEmployee.jobRoleId?.toString() || "",
+          jobRoleId: currentEmployee.jobRoleId?.toString() || "",
-            organizationId: currentEmployee.organizationId || "",
+          organizationId: currentEmployee.organizationId || "",
-            hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
+          hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
-          }
+        }
        : {}
    );
    setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
@ -147,7 +149,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                  message: "Only letters are allowed",
                },
              })}
-              className="form-control form-control-sm"
+              className="form-control "
              id="firstName"
              placeholder="First Name"
              onInput={(e) => {
@ -173,7 +175,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                  message: "Only letters are allowed",
                },
              })}
-              className="form-control form-control-sm"
+              className="form-control "
              id="middleName"
              placeholder="Middle Name"
              onInput={(e) => {
@ -201,7 +203,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                  message: "Only letters are allowed",
                },
              })}
-              className="form-control form-control-sm"
+              className="form-control "
              id="lastName"
              placeholder="Last Name"
              onInput={(e) => {
@ -231,7 +233,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
              type="email"
              id="email"
              {...register("email")}
-              className="form-control form-control-sm"
+              className="form-control "
              placeholder="example@domain.com"
              maxLength={80}
              aria-describedby="Email"
@ -255,7 +257,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
              keyboardType="numeric"
              id="phoneNumber"
              {...register("phoneNumber")}
-              className="form-control form-control-sm"
+              className="form-control "
              placeholder="Phone Number"
              inputMode="numeric"
              maxLength={10}
@ -272,7 +274,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
        </div>
        <div className="row mb-3"></div>
        <div className="row mb-3">
-          <div className="col-sm-4">
+          {/* <div className="col-sm-4">
            <Label className="form-text text-start" required>
              Gender
            </Label>
@ -300,7 +302,44 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                {errors.gender.message}
              </div>
            )}
          </div> */}
          <div className="col-sm-4">
            <Label className="form-text text-start" required>
              Gender
            </Label>
            <div className="">
              <AppFormController
                name="gender"
                control={control}
                render={({ field }) => (
                  <SelectField
                    label=""
                    options={[
                      { id: "Male", name: "Male" },
                      { id: "Female", name: "Female" },
                      { id: "Other", name: "Other" },
                    ]}
                    placeholder="Select Gender"
                    required
                    labelKey="name"
                    valueKey="id"
                    value={field.value}
                    onChange={field.onChange}
                  />
                )}
              />
            </div>
            {errors.gender && (
              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                {errors.gender.message}
              </div>
            )}
          </div>
          <div className="col-sm-4">
            <Label className="form-text text-start" required>
              Birth Date
@ -358,7 +397,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
            <textarea
              id="currentAddress"
-              className="form-control form-control-sm"
+              className="form-control "
              placeholder="Current Address"
              aria-label="Current Address"
              aria-describedby="basic-icon-default-message2"
@ -388,7 +427,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
            <textarea
              id="permanentAddress"
-              className="form-control form-control-sm"
+              className="form-control "
              placeholder="Permanent Address"
              aria-label="Permanent Address"
              aria-describedby="basic-icon-default-message2"
@ -419,25 +458,34 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
            <Label className="form-text text-start" required>
              Organization
            </Label>
-            <div className="input-group">
+
-              <select
+            <div>
-                className="form-select form-select-sm"
+              <AppFormController
-                {...register("organizationId")}
+                name="organizationId"
-                id="organizationId"
+                control={control}
-                aria-label=""
+                render={({ field }) => (
-              >
+                  <SelectField
-                <option disabled value="">
+                    label="" // Already showing label above
-                  Select Organization
+                    options={
-                </option>
+                      organzationList?.data
-                {organzationList?.data
+                        ?.sort((a, b) => a?.name?.localeCompare(b?.name))
-                  .sort((a, b) => a?.name?.localeCompare(b?.name))
+                        ?.map((item) => ({
-                  .map((item) => (
+                          id: item.id,
-                    <option value={item?.id} key={item?.id}>
+                          name: item.name,
-                      {item?.name}
+                        })) || []
-                    </option>
+                    }
-                  ))}
+                    placeholder="Select Organization"
-              </select>
+                    required
                    labelKey="name"
                    valueKey="id"
                    value={field.value}
                    onChange={field.onChange}
                    className="m-0 form-select-sm w-100"
                  />
                )}
              />
            </div>
            {errors.organizationId && (
              <div
                className="danger-text text-start justify-content-center"
@ -448,6 +496,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
            )}
          </div>
          <div className="col-sm-6 d-flex align-items-center mt-2">
            <label className="form-check-label d-flex align-items-center">
              <input
@ -468,46 +517,42 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
          </div>
        </div>
        <div className="row mb-3">
-          <div className="col-sm-4">
+          <div className="col-sm-4 text-start">
-            <Label className="form-text text-start" required>
+            <AppFormController
-              Official Designation
+              name="jobRoleId"
-            </Label>
+              control={control}
-            <div className="input-group">
+              render={({ field }) => (
-              <select
+                <SelectField
-                className="form-select form-select-sm"
+                  label="Official Designation"
-                {...register("jobRoleId")}
+                  required
-                id="jobRoleId"
+                  options={[...job_role].sort((a, b) =>
-                aria-label=""
+                    a?.name?.localeCompare(b?.name)
-              >
+                  )}
-                <option disabled value="">
+                  placeholder="Select Role"
-                  Select Role
+                  labelKey="name"
-                </option>
+                  valueKeyKey="id"
-                {[...job_role]
+                  value={field.value}
-                  .sort((a, b) => a?.name?.localeCompare(b.name))
+                  onChange={field.onChange}
-                  .map((item) => (
+                  className="m-0"
-                    <option value={item?.id} key={item.id}>
+                />
-                      {item?.name}{" "}
+              )}
-                    </option>
+            />
-                  ))}
+
              </select>
            </div>
            {errors.jobRoleId && (
-              <div
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                className="danger-text text-start"
                style={{ fontSize: "12px" }}
              >
                {errors.jobRoleId.message}
              </div>
            )}
          </div>
-          <div className="col-sm-4">
+
          <div className="col-sm-4 mt-n1">
            <Label className="form-text text-start" required>
              Emergency Contact Person
            </Label>
            <input
              type="text"
              {...register("emergencyContactPerson")}
-              className="form-control form-control-sm"
+              className="form-control "
              id="emergencyContactPerson"
              maxLength={50}
              placeholder="Contact Person"
@ -521,14 +566,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
              </div>
            )}
          </div>
-          <div className="col-sm-4">
+          <div className="col-sm-4 mt-n1">
            <Label className="form-text text-start" required>
              Emergency Phone Number
            </Label>
            <input
              type="text"
              {...register("emergencyPhoneNumber")}
-              className="form-control form-control-sm phone-mask"
+              className="form-control  phone-mask"
              id="emergencyPhoneNumber"
              placeholder="Phone Number"
              inputMode="numeric"
@ -551,7 +596,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
            <input
              type="text"
              {...register("aadharNumber")}
-              className="form-control form-control-sm"
+              className="form-control "
              id="aadharNumber"
              placeholder="AADHAR Number"
              maxLength={12}
@ -569,7 +614,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
            <input
              type="text"
              {...register("panNumber")}
-              className="form-control form-control-sm"
+              className="form-control "
              id="panNumber"
              placeholder="PAN Number"
              maxLength={10}
--- 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
+      {files
-    .filter((file) => {
+        .filter((file) => {
-      if (expenseToEdit) {
+          if (expenseToEdit) {
-        return file.isActive;
+            return file.isActive;
-      }
+          }
-      return true;
+          return true;
-    })
+        })
-    .map((file, idx) => (
+        .map((file, idx) => (
-      <div className={`col-12 col-sm-${sm} col-md-${md} mb-2`} key={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">
+            <div className="d-flex align-items-center justify-content-between bg-white border rounded p-1">
-          {/* File icon and info */}
+              {/* File icon and info */}
-          <div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
+              <div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
-            <i
+                <i
-              className={`bx ${getIconByFileType(
+                  className={`bx ${getIconByFileType(file?.contentType)} fs-3 `}
-                file?.contentType
+                  style={{ minWidth: "30px" }}
-              )} fs-3 `}
+                ></i>
              style={{ minWidth: "30px" }}
            ></i>
-            <div className="d-flex flex-column text-truncate">
+                <Tooltip text={file.fileName}>
-              <span className="fw-semibold small text-truncate">
+                  <div className="d-flex flex-column text-truncate">
-                {file.fileName}
+                    <span className="fw-semibold small text-truncate">
-              </span>
+                      {file.fileName}
-              <span className="text-body-secondary small">
+                    </span>
-                {file.fileSize ? formatFileSize(file.fileSize) : ""}
+                    <span className="text-body-secondary small">
-              </span>
+                      {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 */}
+    </div>
          <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>
  );
 };
@ -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
+              <i className={`bx ${getIconByFileType(file?.fileName)} fs-3`}></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
@ -37,6 +37,7 @@ import SelectEmployeeServerSide, {
 } from "../common/Forms/SelectFieldServerSide";
 import { useAllocationServiceProjectTeam } from "../../hooks/useServiceProject";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
  const {
@ -182,15 +183,15 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
        currencyId: data.currency.id || DEFAULT_CURRENCY,
        billAttachments: data.documents
          ? data.documents.map((doc) => ({
-              fileName: doc.fileName,
+            fileName: doc.fileName,
-              base64Data: null,
+            base64Data: null,
-              contentType: doc.contentType,
+            contentType: doc.contentType,
-              documentId: doc.documentId,
+            documentId: doc.documentId,
-              fileSize: 0,
+            fileSize: 0,
-              description: "",
+            description: "",
-              preSignedUrl: doc.preSignedUrl,
+            preSignedUrl: doc.preSignedUrl,
-              isActive: doc.isActive ?? true,
+            isActive: doc.isActive ?? true,
-            }))
+          }))
          : [],
      });
    }
@ -237,30 +238,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">
+          <div className="col-12 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">
            <SelectProjectField
              label="Project"
              required
@ -282,30 +260,32 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            <Label htmlFor="expenseCategoryId" className="form-label" required>
              Expense Category
            </Label>
-            <select
+
-              className="form-select form-select-sm"
+            <AppFormController
-              id="expenseCategoryId"
+              name="expenseCategoryId"
-              {...register("expenseCategoryId")}
+              control={control}
-            >
+              rules={{ required: "Expense Category is required" }}
-              <option value="" disabled>
+              render={({ field }) => (
-                Select Category
+                <SelectField
-              </option>
+                  label="" // Label already shown above
-              {ExpenseLoading ? (
+                  placeholder="Select Category"
-                <option disabled>Loading...</option>
+                  options={expenseCategories ?? []}
-              ) : (
+                  value={field.value || ""}
-                expenseCategories?.map((expense) => (
+                  onChange={field.onChange}
-                  <option key={expense.id} value={expense.id}>
+                  required
-                    {expense.name}
+                  isLoading={ExpenseLoading}
-                  </option>
+                  className="m-0 form-select-sm w-100"
-                ))
+                />
              )}
-            </select>
+            />
-            {errors.expensesCategoryId && (
+
            {errors.expenseCategoryId && (
              <small className="danger-text">
-                {errors.expensesCategoryId.message}
+                {errors.expenseCategoryId.message}
              </small>
            )}
          </div>
        </div>
        <div className="row my-2 text-start">
@ -313,58 +293,47 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            <Label htmlFor="paymentModeId" className="form-label" required>
              Payment Mode
            </Label>
            <select
              className="form-select form-select-sm"
              id="paymentModeId"
              {...register("paymentModeId")}
            >
              <option value="" disabled>
                Select Mode
              </option>
              {PaymentModeLoading ? (
                <option disabled>Loading...</option>
              ) : (
                PaymentModes?.map((payment) => (
                  <option key={payment.id} value={payment.id}>
                    {payment.name}
                  </option>
                ))
              )}
            </select>
            {errors.paymentModeId && (
              <small className="danger-text">
                {errors.paymentModeId.message}
              </small>
            )}
          </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"
+              name="paymentModeId"
              control={control}
              rules={{ required: "Payment Mode is required" }}
              render={({ field }) => (
                <SelectField
                  label="" // Label is shown above
                  placeholder="Select Mode"
                  options={PaymentModes ?? []}
                  value={field.value || ""}
                  onChange={field.onChange}
                  required
                  isLoading={PaymentModeLoading}
                  className="m-0 form-select-sm w-100"
                />
              )}
            />
            {errors.paymentModeId && (
              <small className="danger-text">{errors.paymentModeId.message}</small>
            )}
          </div>
          <div className="col-12 col-md-6 text-start">
            <AppFormController
              name="paidById"
              control={control}
              render={({ field }) => (
                <SelectEmployeeServerSide
-                label="Paid By" required
+                  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 +343,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
              className="w-100"
              control={control}
              maxDate={new Date()}
              size="md"
            />
            {errors.transactionDate && (
@ -390,7 +360,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 +372,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 +380,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 +397,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 +405,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 +413,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 +430,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,42 +439,47 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            )}
          </div>
        </div>
-        <div className="row">
+        <div className="row mb-4">
-          <div className="col-md-6 text-start ">
+          <div className="col-md-6 text-start">
            <Label htmlFor="currencyId" className="form-label" required>
              Select Currency
            </Label>
-            <select
+
-              className="form-select form-select-sm"
+            <AppFormController
-              id="currencyId"
+              name="currencyId"
-              {...register("currencyId")}
+              control={control}
-            >
+              rules={{ required: "Currency is required" }}
-              <option value="" disabled>
+              render={({ field }) => (
-                Select Currency
+                <SelectField
-              </option>
+                  label="" // Label already shown above
-              {currencyLoading ? (
+                  placeholder="Select Currency"
-                <option disabled>Loading...</option>
+                  options={currencies?.map((currency) => ({
-              ) : (
+                    id: currency.id,
-                currencies?.map((currency) => (
+                    name: `${currency.currencyName} (${currency.symbol})`,
-                  <option key={currency.id} value={currency.id}>
+                  })) ?? []}
-                    {`${currency.currencyName} (${currency.symbol}) `}
+                  value={field.value || ""}
-                  </option>
+                  onChange={field.onChange}
-                ))
+                  required
                  isLoading={currencyLoading}
                  className="m-0 form-select-sm w-100"
                />
              )}
-            </select>
+            />
            {errors.currencyId && (
              <small className="danger-text">{errors.currencyId.message}</small>
            )}
          </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 +492,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 +511,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{" "}
@ -586,7 +561,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
                    (fileError?.fileSize?.message ||
                      fileError?.contentType?.message ||
                      fileError?.base64Data?.message,
-                    fileError?.documentId?.message)
+                      fileError?.documentId?.message)
                  }
                </div>
              ))}
@ -611,8 +586,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
            {isPending || createPending
              ? "Please Wait..."
              : expenseToEdit
-              ? "Update"
+                ? "Update"
-              : "Save as Draft"}
+                : "Save as Draft"}
          </button>
        </div>
      </form>
--- 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">
+      {/* Controls */}
-        <i
+      <div className="d-flex justify-content-start align-items-center mb-2">
-          className="bx bx-rotate-right cursor-pointer fs-4"
+        <div className="d-flex gap-3">
-          title="Rotate"
+          {!isPDF && (
-          onClick={() => setRotation((prev) => prev + 90)}
+            <>
-        ></i>
+              <i
-
+                className="bx bx-rotate-right cursor-pointer fs-4"
-        <i
+                onClick={() => setRotation((prev) => prev + 90)}
-          className="bx bx-zoom-in cursor-pointer fs-4"
+                title="Rotate"
-          title="Zoom In"
+              />
-          onClick={zoomIn}
+              <i
-        ></i>
+                className="bx bx-zoom-in cursor-pointer fs-4"
-
+                onClick={zoomIn}
-        <i
+                title="Zoom In"
-          className="bx bx-zoom-out cursor-pointer fs-4"
+              />
-          title="Zoom Out"
+              <i
-          onClick={zoomOut}
+                className="bx bx-zoom-out cursor-pointer fs-4"
-        ></i>
+                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"
+        onMouseDown={handleMouseDown}
-        style={{ minHeight: "80vh" }}
+        onMouseMove={handleMouseMove}
-      >
+        onMouseUp={handleMouseUp}
-        {loading && (
+        onMouseLeave={handleMouseUp}
-          <div className="text-secondary text-center mb-2">
+        onDoubleClick={handleDoubleClick}
-            Loading...
+        className="position-relative d-flex justify-content-center align-items-center bg-light-secondary overflow-hidden"
-          </div>
+        style={{
-        )}
+          minHeight: "70vh",
-        <div className="mb-3 d-flex justify-content-center align-items-center">
+          userSelect: "none",
-          <img
+          borderRadius: "10px",
-            src={imageUrl}
+        }}
-            alt="Full View"
+      >
-            className="img-fluid"
+        {loading && <div className="text-secondary">Loading...</div>}
        {/* PDF VIEW */}
        {isPDF ? (
          <iframe
            src={"./Expenses.pdf"}
            title="PDF Preview"
            style={{
-              maxHeight: "80vh",
+              width: "100%",
-              objectFit: "contain",
+              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})`,
+              transform: `
-              transition: "transform 0.3s ease",
+                translate(${position.x}px, ${position.y}px)
-              cursor: "grab",
+                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"
+      <div className="d-flex justify-content-between">
-            onClick={resetAll}
+        <div className="text-center text-muted mt-2 small">
-          >
+          Scroll = change file | Double click = reset (images only)
-            <i className="bx bx-reset"></i> Reset
+        </div>
-          </button>
+        <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
+          <a
-            className="app-brand-link fw-bold navbar-brand text-green fs-6"
+            href="/"
            className="app-brand-link d-flex align-items-center gap-1 fw-bold navbar-brand "
          >
-            <span className="app-brand-logo demo">
+            <span className="app-brand-logo demo d-flex align-items-center">
-              <img src="/img/brand/marco.png" width="50" />
+              <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="app-brand-text">
-            <span className="text-dark">.com</span>
+              <span className="text-primary ">OnField</span>
-          </small>
+              <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"
+              src="/public/assets/img/orgLogo.png"
-                    alt="logo"
+              alt="logo"
-                    width={40}
+              width={40}
-                    height={40}
+              height={40}
-                  />  <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
+            />  <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>
+            <i className="bx bx-sm me-2 bx-barcode"></i>
-  Service Provider Id (SPRID) :
+            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">
+                <div className="d-flex flex-column p-0 m-0 cursor-pointer mb-3">
-                  <span className="fs-6 fw-semibold">{org.name}</span>
+                  <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">
+                  <div className="d-flex flex-row gap-2 mb-4">
-                    <small className="text-small fw-semibold">Address:</small>
+                    <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">
+            <div className="accordion-item active shadow-none">
-              <h2 class="accordion-header d-flex align-items-center">
+              <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
@ -30,6 +30,8 @@ import InputSuggestions from "../common/InputSuggestion";
 import { useProfile } from "../../hooks/useProfile";
 import { blockUI } from "../../utils/blockUI";
 import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
  const {
@ -176,15 +178,15 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
        isAdvancePayment: data.isAdvancePayment || false,
        billAttachments: data.attachments
          ? data?.attachments?.map((doc) => ({
-              fileName: doc.fileName,
+            fileName: doc.fileName,
-              base64Data: null,
+            base64Data: null,
-              contentType: doc.contentType,
+            contentType: doc.contentType,
-              documentId: doc.id,
+            documentId: doc.id,
-              fileSize: 0,
+            fileSize: 0,
-              description: "",
+            description: "",
-              preSignedUrl: doc.preSignedUrl,
+            preSignedUrl: doc.preSignedUrl,
-              isActive: doc.isActive ?? true,
+            isActive: doc.isActive ?? true,
-            }))
+          }))
          : [],
      });
    }
@ -239,7 +241,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
@ -268,7 +270,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                })
              }
-                disabled={
+              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
              }
            />
@ -281,37 +283,37 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            <Label htmlFor="expenseCategoryId" className="form-label" required>
              Expense Category
            </Label>
-            <select
+
-              className="form-select form-select-sm"
+            <AppFormController
-              id="expenseCategoryId"
+              name="expenseCategoryId"
-              {...register("expenseCategoryId")}
+              control={control}
-              disabled={
+              rules={{ required: "Expense Category is required" }}
-                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
+              render={({ field }) => (
-              }
+                <SelectField
-            >
+                  label="" // Label already above
-              <option value="" disabled>
+                  placeholder="Select Category"
-                Select Category
+                  options={expenseCategories ?? []}
-              </option>
+                  value={field.value || ""}
-              {ExpenseLoading ? (
+                  onChange={field.onChange}
-                <option disabled>Loading...</option>
+                  required
-              ) : (
+                  isLoading={ExpenseLoading}
-                expenseCategories?.map((expense) => (
+                  isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
-                  <option key={expense.id} value={expense.id}>
+                  className="m-0 form-select-sm w-100"
-                    {expense.name}
+                />
                  </option>
                ))
              )}
-            </select>
+            />
            {errors.expenseCategoryId && (
              <small className="danger-text">
                {errors.expenseCategoryId.message}
              </small>
            )}
          </div>
        </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 +321,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 +332,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 +345,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 +389,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
              control={control}
              minDate={new Date()}
              className="w-100"
              size="md"
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
              }
@ -404,7 +407,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 +432,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                setValue("payee", val, { shouldValidate: true })
              }
              error={errors.payee?.message}
              size="md"
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
              }
@ -456,30 +460,39 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            <Label htmlFor="currencyId" className="form-label" required>
              Currency
            </Label>
            <select
              id="currencyId"
              className="form-select form-select-sm"
              {...register("currencyId")}
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
              }
            >
              <option value="">Select Currency</option>
-              {currencyLoading && <option>Loading...</option>}
+            <AppFormController
              name="currencyId"
              control={control}
              rules={{ required: "Currency is required" }}
              render={({ field }) => (
                <SelectField
                  label="" // Label already above
                  placeholder="Select Currency"
                  options={currencyData?.map((currency) => ({
                    id: currency.id,
                    name: `${currency.currencyName} (${currency.symbol})`,
                  })) ?? []}
                  value={field.value || ""}
                  onChange={field.onChange}
                  required
                  isLoading={currencyLoading}
                  isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
                  noOptionsMessage={() =>
                    !currencyLoading && !currencyError && (!currencyData || currencyData.length === 0)
                      ? "No currency found"
                      : null
                  }
                  className="m-0 form-select-sm w-100"
                />
              )}
            />
              {!currencyLoading &&
                !currencyError &&
                currencyData?.map((currency) => (
                  <option key={currency.id} value={currency.id}>
                    {`${currency.currencyName} (${currency.symbol})`}
                  </option>
                ))}
            </select>
            {errors.currencyId && (
              <small className="danger-text">{errors.currencyId.message}</small>
            )}
          </div>
        </div>
        {/* Description  */}
@ -490,7 +503,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            </Label>
            <textarea
              id="description"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("description")}
              rows="2"
              disabled={
@ -506,7 +519,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
        </div>
        {/* Upload Document  */}
-        <div className="row my-2 text-start">
+        <div className="row my-4 text-start">
          <div className="col-md-12">
            <Label className="form-label">Upload Bill </Label>
@ -557,7 +570,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                    (fileError?.fileSize?.message ||
                      fileError?.contentType?.message ||
                      fileError?.base64Data?.message,
-                    fileError?.documentId?.message)
+                      fileError?.documentId?.message)
                  }
                </div>
              ))}
@ -580,8 +593,8 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            {createPending || isPending
              ? "Please Wait..."
              : requestToEdit
-              ? "Update"
+                ? "Update"
-              : "Save as Draft"}
+                : "Save as Draft"}
          </button>
        </div>
      </form>
--- 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/AssignTask.jsx
+++ b/src/components/Project/AssignTask.jsx
@ -18,6 +18,8 @@ import {
 import eventBus from "../../services/eventBus";
 import { useCreateTask } from "../../hooks/useTasks";
 import Label from "../common/Label";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 const TaskSchema = (maxPlanned) => {
  return z.object({
@ -107,7 +109,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
    );
  const dispatch = useDispatch();
-  const { loading, data: jobRoleData } = useMaster();
+  const { loading, data: jobRoleData } = useMaster("Job Role");
  const [selectedRoles, setSelectedRoles] = useState(["all"]);
  const [displayedSelection, setDisplayedSelection] = useState("");
@ -128,8 +130,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
  const handleCheckboxChange = (event, user) => {
    const updatedSelectedEmployees = event.target.checked
      ? [...(watch("selectedEmployees") || []), user.id].filter(
-          (v, i, a) => a.indexOf(v) === i
+        (v, i, a) => a.indexOf(v) === i
-        )
+      )
      : (watch("selectedEmployees") || []).filter((id) => id !== user.id);
    setValue("selectedEmployees", updatedSelectedEmployees);
@ -241,48 +243,57 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
              <div className="row mb-1">
                <div className="col-12">
                  <div className="row text-start">
-                    <div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center">
+                    <div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center mt-4">
                      <div>
-                        <select
+                        <AppFormController
-                          className="form-select form-select-sm"
+                          name="organizationId"
-                          value={selectedOrganization || ""}
+                          control={control}
-                          onChange={(e) =>
+                          rules={{ required: "Organization is required" }}
-                            setSelectedOrganization(e.target.value)
+                          render={({ field }) => (
-                          }
+                            <SelectField
-                        >
+                              label="" // No label here, use external label if needed
-                          {isServiceLoading ? (
+                              options={organizationList ?? []}
-                            <option>Loading...</option>
+                              placeholder="--Select Organization--"
-                          ) : (
+                              required
-                            <>
+                              labelKey="name"
-                              <option value="">--Select Organization--</option>
+                              valueKeyKey="id"
-                              {organizationList?.map((org,index) => (
+                              value={field.value || ""}
-                                <option key={`${org.id}-${index}`} value={org.id}>
+                              onChange={field.onChange}
-                                  {org.name}
+                              isLoading={isServiceLoading}
-                                </option>
+                              className="m-0 form-select-sm w-100"
-                              ))}
+                            />
                            </>
                          )}
-                        </select>
+                        />
                        {errors.organizationId && (
                          <small className="danger-text">{errors.organizationId.message}</small>
                        )}
                      </div>
                      <div>
-                        <select
+                        <AppFormController
-                          className="form-select form-select-sm"
+                          name="serviceId"
-                          value={selectedService || ""}
+                          control={control}
-                          onChange={(e) => setSelectedService(e.target.value)}
+                          rules={{ required: "Service is required" }}
-                        >
+                          render={({ field }) => (
-                          {isOrgLoading ? (
+                            <SelectField
-                            <option>Loading...</option>
+                              label="" // No label as you have one above or elsewhere
-                          ) : (
+                              options={serviceList ?? []}
-                            <>
+                              placeholder="--Select Service--"
-                              <option value="">--Select Service--</option>
+                              required
-                              {serviceList?.map((service,index) => (
+                              labelKey="name"
-                                <option key={`${service.id}-${index}`}  value={service.id}>
+                              valueKeyKey="id"
-                                  {service.name}
+                              value={field.value || ""}
-                                </option>
+                              onChange={field.onChange}
-                              ))}
+                              isLoading={isOrgLoading}
-                            </>
+                              className="m-0 form-select-sm w-100"
                            />
                          )}
-                        </select>
+                        />
                        {errors.serviceId && (
                          <small className="danger-text">{errors.serviceId.message}</small>
                        )}
                      </div>
                    </div>
                    <div
@ -292,12 +303,11 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                      {/* Dropdown */}
                      <div className="dropdown position-relative d-inline-block">
                        <a
-                          className={`dropdown-toggle hide-arrow cursor-pointer ${
+                          className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") ||
                            selectedRoles.includes("all") ||
                            selectedRoles.length === 0
-                              ? "text-secondary"
+                            ? "text-secondary"
-                              : "text-primary"
+                            : "text-primary"
-                          }`}
+                            }`}
                          onClick={() => setOpen(!open)}
                        >
                          <i className="bx bx-slider-alt ms-2"></i>
@ -409,7 +419,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                        <p className="text-center">Loading employees...</p>
                      </div>
                    ) : filteredEmployees?.length > 0 ? (
-                      filteredEmployees.map((emp,index) => {
+                      filteredEmployees.map((emp, index) => {
                        const jobRole = jobRoleData?.find(
                          (role) => role?.id === emp?.jobRoleId
                        );
@ -479,14 +489,14 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                {watch("selectedEmployees")?.length > 0 && (
                  <div className="mt-1">
                    <div className="text-start px-2">
-                      {watch("selectedEmployees")?.map((empId,ind) => {
+                      {watch("selectedEmployees")?.map((empId, ind) => {
                        const emp = employees?.data?.find(
                          (emp) => emp.id === empId
                        );
                        return (
                          emp && (
                            <span
-                               key={`${empId}-${ind}`}
+                              key={`${empId}-${ind}`}
                              className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
                            >
                              {emp.firstName} {emp.lastName}
--- a/src/components/Project/Infrastructure/BuildingModel.jsx
+++ b/src/components/Project/Infrastructure/BuildingModel.jsx
@ -3,11 +3,11 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useSelector } from "react-redux";
 import { getCachedData } from "../../../slices/apiDataManager";
 import showToast from "../../../services/toastService";
 import { useManageProjectInfra } from "../../../hooks/useProjects";
 import useSelect from "../../common/useSelect";
 import Label from "../../common/Label";
 import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
 import SelectField from "../../common/Forms/SelectField";
 const buildingSchema = z.object({
  Id: z.string().optional(),
@ -22,14 +22,8 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
  const selectedProject = useSelector(
    (store) => store.localVariables.projectId
  );
-  const {
+
-    register,
+  const methods = useForm({
    handleSubmit,
    formState: { errors },
    setValue,
    watch,
    reset,
  } = useForm({
    resolver: zodResolver(buildingSchema),
    defaultValues: {
      Id: "0",
@ -37,12 +31,23 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
      description: "",
    },
  });
  const {
    register,
    handleSubmit,
    control,
    watch,
    reset,
    setValue,
    formState: { errors },
  } = methods;
  const watchedId = watch("Id");
  const { mutate: ManageBuilding, isPending } = useManageProjectInfra({
-    onSuccessCallback: (data, variables) => {
+    onSuccessCallback: () => {
      showToast(
-        watchedId != "0"
+        watchedId !== "0"
          ? "Building updated Successfully"
          : "Building created Successfully",
        "success"
@ -79,7 +84,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
        description: editingBuilding.description,
      });
    }
-  }, [editingBuilding]);
+  }, [editingBuilding, reset]);
  const onSubmitHandler = (data) => {
    const payload = {
@ -88,95 +93,109 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
      projectId: selectedProject,
    };
-    let infraObject = [
+    const infraObject = [
      {
        building: payload,
        floor: null,
        workArea: null,
      },
    ];
    ManageBuilding({ infraObject, projectId: selectedProject });
  };
  return (
-    <form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
+    <AppFormProvider {...methods}>
-      <h5 className="text-center mb-2">Manage Buildings </h5>
+      <form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
-      <div className="col-12 text-start">
+        <h5 className="text-center mb-2">Manage Buildings</h5>
-        <label className="form-label">Select Building</label>
+
-        <select
+        {/* Building Select */}
-          {...register("Id")}
+        <div className="col-12 text-start">
-          className="select2 form-select form-select-sm"
+          <Label htmlFor="Id" className="form-label">
-        >
+            Select Building
-          <option value="0">Add New Building</option>
+          </Label>
-          {sortedBuildings.length > 0 ? (
+          <AppFormController
-            sortedBuildings.map((b) => (
+            name="Id"
-              <option key={b.id} value={b.id}>
+            control={control}
-                {b.buildingName}
+            rules={{ required: "Building is required" }}
-              </option>
+            render={({ field }) => (
-            ))
+              <SelectField
-          ) : (
+                label=""
-            <option disabled>No buildings found</option>
+                placeholder="Select Building"
                options={[
                  { id: "0", name: "Add New Building" },
                  ...(sortedBuildings?.map((b) => ({
                    id: String(b.id),
                    name: b.buildingName,
                  })) ?? []),
                ]}
                value={field.value || ""}
                onChange={field.onChange}
                required
                noOptionsMessage={() =>
                  !sortedBuildings || sortedBuildings.length === 0
                    ? "No buildings found"
                    : null
                }
                className="m-0 form-select-sm w-100"
              />
            )}
          />
          {errors.Id && <span className="danger-text">{errors.Id.message}</span>}
        </div>
        {/* Name */}
        <div className="col-12 text-start">
          <Label className="form-label" required>
            {watchedId !== "0" ? "Rename Building Name" : "New Building Name"}
          </Label>
          <input
            {...register("name")}
            type="text"
            className="form-control "
          />
          {errors.name && <span className="danger-text">{errors.name.message}</span>}
        </div>
        {/* Description */}
        <div className="col-12 text-start">
          <Label className="form-label" required>
            Description
          </Label>
          <textarea
            {...register("description")}
            rows="5"
            maxLength="160"
            className="form-control "
          />
          {errors.description && (
            <span className="danger-text">{errors.description.message}</span>
          )}
-        </select>
+        </div>
        {errors.Id && <span className="danger-text">{errors.Id.message}</span>}
      </div>
-      {/* Name */}
+        {/* Buttons */}
-      <div className="col-12 text-start">
+        <div className="col-12 text-end mt-6 my-2">
-        <Label className="form-label" required>
+          <button
-          {watchedId !== "0" ? "Rename Building Name" : "New Building Name"}
+            type="reset"
-        </Label>
+            className="btn btn-sm btn-label-secondary me-3"
-        <input
+            disabled={isPending}
-          {...register("name")}
+            onClick={() => {
-          type="text"
+              onClose();
-          className="form-control form-control-sm"
+              reset();
-        />
+            }}
-        {errors.name && (
+          >
-          <span className="danger-text">{errors.name.message}</span>
+            Cancel
-        )}
+          </button>
-      </div>
+          <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
-
+            {isPending
-      {/* Description */}
+              ? "Please wait..."
-      <div className="col-12 text-start">
+              : watchedId !== "0"
-        <Label className="form-label" required>Description</Label>
+              ? "Edit Building"
-        <textarea
+              : "Add Building"}
-          {...register("description")}
+          </button>
-          rows="5"
+        </div>
-          maxLength="160"
+      </form>
-          className="form-control form-control-sm"
+    </AppFormProvider>
        />
        {errors.description && (
          <span className="danger-text">{errors.description.message}</span>
        )}
      </div>
      <div className="col-12 text-end mt-5">
        <button
          type="reset"
          className="btn btn-sm btn-label-secondary me-3"
          disabled={isPending}
          onClick={() => {
            onClose();
            reset();
          }}
        >
          Cancel
        </button>
        <button
          type="submit"
          className="btn btn-sm btn-primary"
          disabled={isPending}
        >
          {isPending
            ? "Please wait..."
            : watchedId !== "0"
            ? "Edit Building"
            : "Add Building"}
        </button>
      </div>
    </form>
  );
 };
--- a/src/components/Project/Infrastructure/EditActivityModal.jsx
+++ b/src/components/Project/Infrastructure/EditActivityModal.jsx
@ -12,12 +12,14 @@ import { useManageTask } from "../../../hooks/useProjects";
 import { cacheData, getCachedData } from "../../../slices/apiDataManager";
 import { refreshData } from "../../../slices/localVariablesSlice";
 import showToast from "../../../services/toastService";
 import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
 import SelectField from "../../common/Forms/SelectField";
 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(),
  })
@ -37,17 +39,7 @@ const EditActivityModal = ({
  const { activities, loading: loadingActivities } = useActivitiesMaster();
  const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
  const [selectedActivity, setSelectedActivity] = useState(null);
-
+  const methods = useForm({
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
    setValue,
    getValues,
    watch,
  } = useForm({
    resolver: zodResolver(taskSchema),
    defaultValues: {
      activityID: "",
      workCategoryId: "",
@ -55,7 +47,11 @@ const EditActivityModal = ({
      completedWork: 0,
      comment: "",
    },
    resolver: zodResolver(taskSchema),
  });
  const { register, control, watch, handleSubmit, reset, setValue, getValues, formState: { errors } } = methods;
  const { mutate: UpdateTask, isPending } = useManageTask({
    onSuccessCallback: (response) => {
      showToast(response?.message, "success")
@ -63,8 +59,6 @@ const EditActivityModal = ({
    }
  });
  const activityID = watch("activityID");
  const sortedActivities = useMemo(
@ -107,6 +101,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,
@ -125,156 +120,169 @@ const EditActivityModal = ({
    });
  }
  return (
-    <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
+    <AppFormProvider {...methods}>
-      <div className="text-center mb-1">
+      <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
-        <h5 className="mb-1">Manage Task</h5>
+        <div className="text-center mb-1">
-      </div>
+          <h5 className="mb-1">Manage Task</h5>
        </div>
-      <div className="row g-2 text-start">
+        <div className="row g-2 text-start">
-        <div className="col-12 col-md-6">
+          <div className="col-12 col-md-6">
-          <label className="form-label">Select Building</label>
+            <label className="form-label">Select Building</label>
            <input
              className="form-control"
              value={building?.buildingName}
              disabled
            />
          </div>
          <div className="col-12 col-md-6">
            <label className="form-label">Select Floor</label>
            <input
              className="form-control"
              value={floor?.floorName}
              disabled
            />
          </div>
        </div>
        <div className="col-12 text-start">
          <label className="form-label">Select Work Area</label>
          <input
-            className="form-control form-control-sm"
+            className="form-control"
-            value={building?.buildingName}
+            value={workArea?.areaName}
            disabled
          />
        </div>
        <div className="col-12 text-start">
          <label className="form-label">Select Service</label>
          <input
            className="form-control"
            value={
              workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
            }
            disabled
          />
        </div>
-        <div className="col-12 col-md-6">
+
-          <label className="form-label">Select Floor</label>
+        <div className="col-12 text-start">
-          <input
+          <label className="form-label">Select Activity</label>
-            className="form-control form-control-sm"
+          <select
-            value={floor?.floorName}
+            {...register("activityID")}
            className="form-select"
            disabled
          >
            <option >Select Activity</option>
            {loadingActivities ? (
              <option>Loading...</option>
            ) : (
              sortedActivities.map((a) => (
                <option key={a.id} value={a.id}>
                  {a.activityName}
                </option>
              ))
            )}
          </select>
          {errors.activityID && (
            <p className="danger-text">{errors.activityID.message}</p>
          )}
        </div>
        <div className="col-12 text-start">
          <AppFormController
            name="workCategoryId"
            control={control}
            render={({ field }) => (
              <SelectField
                label="Select Work Category"
                placeholder="Select Category"
                options={
                  loadingCategories
                    ? []
                    : sortedCategories?.map((c) => ({
                      id: String(c.id),
                      name: c.name,
                    })) ?? []
                }
                isLoading={loadingCategories}
                labelKey="name"
                valueKey="id"
                value={field.value}
                onChange={field.onChange}
                className="m-0"
              />
            )}
          />
          {errors.workCategoryId && (
            <small className="danger-text">{errors.workCategoryId.message}</small>
          )}
        </div>
        <div className="col-5 text-start">
          <label className="form-label">Planned Work</label>
          <input
            {...register("plannedWork", { valueAsNumber: true })}
            type="number"
            step="0.01"   // <-- allows 2 decimal places
            className="form-control"
          />
          {errors.plannedWork && (
            <p className="danger-text">{errors.plannedWork.message}</p>
          )}
        </div>
        <div className="col-5 text-start">
          <label className="form-label">Completed Work</label>
          <input
            {...register("completedWork", { valueAsNumber: true })}
            type="number"
            disabled={getValues("completedWork") > 0}
            className="form-control"
          />
          {errors.completedWork && (
            <p className="danger-text">{errors.completedWork.message}</p>
          )}
        </div>
        <div className="col-2 text-start">
          <label className="form-label">Unit</label>
          <input
            className="form-control"
            disabled
            value={selectedActivity?.unitOfMeasurement || ""}
          />
        </div>
      </div>
-      <div className="col-12 text-start">
+        <div className="col-12 text-start">
-        <label className="form-label">Select Work Area</label>
+          <label className="form-label">Comment</label>
-        <input
+          <textarea {...register("comment")} rows="2" className="form-control" />
-          className="form-control form-control-sm"
+          {errors.comment && (
-          value={workArea?.areaName}
+            <div className="danger-text">{errors.comment.message}</div>
          disabled
        />
      </div>
      <div className="col-12 text-start">
        <label className="form-label">Select Service</label>
        <input
          className="form-control form-control-sm"
          value={
            workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
          }
          disabled
        />
      </div>
      <div className="col-12 text-start">
        <label className="form-label">Select Activity</label>
        <select
          {...register("activityID")}
          className="form-select form-select-sm"
          disabled
        >
          <option >Select Activity</option>
          {loadingActivities ? (
            <option>Loading...</option>
          ) : (
            sortedActivities.map((a) => (
              <option key={a.id} value={a.id}>
                {a.activityName}
              </option>
            ))
          )}
-        </select>
+        </div>
        {errors.activityID && (
          <p className="danger-text">{errors.activityID.message}</p>
        )}
      </div>
-      <div className="col-12 text-start">
+        <div className="col-12 text-end mt-5">
-        <label className="form-label">Select Work Category</label>
+          <button
-        <select
+            type="button"
-          {...register("workCategoryId")}
+            className="btn btn-sm btn-label-secondary me-2"
-          className="form-select form-select-sm"
+            onClick={onClose}
-        >
+            disabled={isPending}
-          <option disabled>Select Category</option>
+          >
-          {loadingCategories ? (
+            Cancel
-            <option>Loading...</option>
+          </button>
-          ) : (
+          <button
-            sortedCategories.map((c) => (
+            type="submit"
-              <option key={c.id} value={c.id}>
+            className="btn btn-sm btn-primary"
-                {c.name}
+            disabled={isPending}
-              </option>
+          >
-            ))
+            {isPending ? "Please Wait..." : "Edit Task"}
-          )}
+          </button>
-        </select>
+        </div>
-        {errors.workCategoryId && (
+      </form>
-          <p className="danger-text">{errors.workCategoryId.message}</p>
+    </AppFormProvider>
        )}
      </div>
      <div className="col-5 text-start">
        <label className="form-label">Planned Work</label>
        <input
          {...register("plannedWork", { valueAsNumber: true })}
          type="number"
          className="form-control form-control-sm"
        />
        {errors.plannedWork && (
          <p className="danger-text">{errors.plannedWork.message}</p>
        )}
      </div>
      <div className="col-5 text-start">
        <label className="form-label">Completed Work</label>
        <input
          {...register("completedWork", { valueAsNumber: true })}
          type="number"
          disabled={getValues("completedWork") > 0}
          className="form-control form-control-sm"
        />
        {errors.completedWork && (
          <p className="danger-text">{errors.completedWork.message}</p>
        )}
      </div>
      <div className="col-2 text-start">
        <label className="form-label">Unit</label>
        <input
          className="form-control form-control-sm"
          disabled
          value={selectedActivity?.unitOfMeasurement || ""}
        />
      </div>
      <div className="col-12 text-start">
        <label className="form-label">Comment</label>
        <textarea {...register("comment")} rows="2" className="form-control" />
        {errors.comment && (
          <div className="danger-text">{errors.comment.message}</div>
        )}
      </div>
      <div className="col-12 text-end mt-5">
        <button
          type="button"
          className="btn btn-sm btn-label-secondary me-2"
          onClick={onClose}
          disabled={isPending}
        >
          Cancel
        </button>
        <button
          type="submit"
          className="btn btn-sm btn-primary"
          disabled={isPending}
        >
          {isPending ? "Please Wait..." : "Edit Task"}
        </button>
      </div>
    </form>
  );
 };
--- a/src/components/Project/Infrastructure/FloorModel.jsx
+++ b/src/components/Project/Infrastructure/FloorModel.jsx
@ -6,6 +6,8 @@ import showToast from "../../../services/toastService";
 import { useManageProjectInfra } from "../../../hooks/useProjects";
 import { useSelector } from "react-redux";
 import Label from "../../common/Label";
 import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
 import SelectField from "../../common/Forms/SelectField";
 // Schema
 const floorSchema = z.object({
@ -27,17 +29,12 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
  );
  const [selectedBuilding, setSelectedBuilding] = useState(null);
-  const {
+  const methods = useForm({
    register,
    handleSubmit,
    setValue,
    reset,
    watch,
    formState: { errors },
  } = useForm({
    defaultValues,
    resolver: zodResolver(floorSchema),
  });
  const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
  const watchId = watch("id");
  const watchBuildingId = watch("buildingId");
  const { mutate: ManageFloor, isPending } = useManageProjectInfra({
@ -48,7 +45,7 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
          : "Floor created Successfully",
        "success"
      );
-      reset({ id: "0", floorName: ""});
+      reset({ id: "0", floorName: "" });
      // onClose?.();
    },
  });
@ -98,94 +95,139 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
  };
  return (
-    <form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
+    <AppFormProvider {...methods}>
-      <div className="text-center mb-1">
+      <form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
-        <h5 className="mb-1">Manage Floor</h5>
+        <div className="text-center mb-1">
-      </div>
+          <h5 className="mb-1">Manage Floor</h5>
-      <div className="col-12 text-start">
+        </div>
-        <Label className="form-label" required>Select Building</Label>
+        <div className="col-12 text-start">
-        <select
+          <Label className="form-label" required>
-          {...register("buildingId")}
+            Select Building
-          className="form-select form-select-sm"
+          </Label>
-          onChange={handleBuildingChange}
+          <AppFormController
-        >
+            name="buildingId"
-          <option value="0">Select Building</option>
+            control={control}
-          {project?.length > 0 &&
+            rules={{ required: "Building is required" }}
-            project
+            render={({ field }) => (
-              .filter((b) => b.buildingName)
+              <SelectField
-              .sort((a, b) => a.buildingName.localeCompare(b.buildingName))
+                label=""
-              .map((b) => (
+                placeholder="Select Building"
-                <option key={b.id} value={b.id}>
+                options={
-                  {b.buildingName}
+                  project
-                </option>
+                    ?.filter((b) => b.buildingName)
-              ))}
+                    .sort((a, b) => a.buildingName.localeCompare(b.buildingName))
-        </select>
+                    .map((b) => ({ id: String(b.id), name: b.buildingName })) ?? []
-        {errors.buildingId && (
+                }
-          <p className="danger-text">{errors.buildingId.message}</p>
+                value={field.value || ""}
-        )}
+                onChange={(value) => {
-      </div>
+                  field.onChange(value);
-
+                  setValue("id", "0");
-      {watchBuildingId !== "0" && (
+                  setValue("floorName", "");
-        <>
+                }}
-          <div className="col-12 text-start">
+                required
-            <label className="form-label">Select Floor</label>
+                noOptionsMessage={() => (!project || project.length === 0 ? "No buildings found" : null)}
-            <select
+                className="m-0 form-select-sm w-100"
-              {...register("id")}
+              />
              className="form-select form-select-sm"
              onChange={handleFloorChange}
            >
              <option value="0">Add New Floor</option>
              {selectedBuilding?.floors?.length > 0 &&
                selectedBuilding.floors
                  .filter((f) => f.floorName)
                  .sort((a, b) => a.floorName.localeCompare(b.floorName))
                  .map((f) => (
                    <option key={f.id} value={f.id}>
                      {f.floorName}
                    </option>
                  ))}
            </select>
          </div>
          <div className="col-12 text-start">
            <Label className="form-label" required>
              {watchId !== "0" ? "Edit Floor Name" : "New Floor Name"}
            </Label>
            <input
              {...register("floorName")}
              className="form-control form-control-sm"
              placeholder="Floor Name"
            />
            {errors.floorName && (
              <p className="danger-text">{errors.floorName.message}</p>
            )}
-          </div>
+          />
-        </>
+          {errors.buildingId && <p className="danger-text">{errors.buildingId.message}</p>}
-      )}
+        </div>
-      <div className="col-12 text-end mt-5">
+        {watchBuildingId !== "0" && (
-         <button
+          <>
-          type="button"
+            <div className="col-12 text-start">
-          className="btn btn-sm btn-label-secondary me-3"
+              <Label className="form-label">
-          disabled={isPending}
+                Select Floor
-          onClick={onClose}
+              </Label>
        >
          Cancel
        </button>
        <button
          type="submit"
          className="btn btn-sm btn-primary"
          disabled={isPending}
        >
          {isPending
            ? "Please Wait"
            : watchId !== "0"
            ? "Edit Floor"
            : "Add Floor"}
        </button>
-      </div>
+              <AppFormController
-    </form>
+                name="id"
                control={control}
                rules={{ required: "Floor is required" }}
                render={({ field }) => {
                  // Prepare options
                  const floorOptions = [
                    { id: "0", name: "Add New Floor" },
                    ...(selectedBuilding?.floors
                      ?.filter((f) => f.floorName)
                      .sort((a, b) => a.floorName.localeCompare(b.floorName))
                      .map((f) => ({ id: f.id, name: f.floorName })) ?? []),
                  ];
                  return (
                    <SelectField
                      label=""
                      placeholder="Select Floor"
                      options={floorOptions}
                      value={field.value || "0"} // default to "0"
                      onChange={(val) => {
                        field.onChange(val); // update react-hook-form
                        if (val === "0") {
                          setValue("floorName", ""); // clear for new floor
                        } else {
                          const floor = selectedBuilding?.floors?.find(f => f.id === val);
                          setValue("floorName", floor?.floorName || "");
                        }
                      }}
                      required
                      noOptionsMessage={() =>
                        !selectedBuilding?.floors || selectedBuilding.floors.length === 0
                          ? "No floors found"
                          : null
                      }
                      className="m-0 form-select-sm w-100"
                    />
                  );
                }}
              />
              {errors.id && (
                <span className="danger-text">{errors.id.message}</span>
              )}
            </div>
            <div className="col-12 text-start">
              <Label className="form-label" required>
                {watchId !== "0" ? "Edit Floor Name" : "New Floor Name"}
              </Label>
              <input
                {...register("floorName")}
                className="form-control"
                placeholder="Floor Name"
              />
              {errors.floorName && (
                <p className="danger-text">{errors.floorName.message}</p>
              )}
            </div>
          </>
        )}
        <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>
          <button
            type="submit"
            className="btn btn-sm btn-primary"
            disabled={isPending}
          >
            {isPending
              ? "Please Wait"
              : watchId !== "0"
                ? "Edit Floor"
                : "Add Floor"}
          </button>
        </div>
      </form>
    </AppFormProvider>
  );
 };
--- a/src/components/Project/Infrastructure/TaskModel.jsx
+++ b/src/components/Project/Infrastructure/TaskModel.jsx
@ -8,10 +8,12 @@ import {
  useGroups,
  useWorkCategoriesMaster,
 } from "../../../hooks/masterHook/useMaster";
-import { useManageTask,  useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
+import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
 import showToast from "../../../services/toastService";
 import Label from "../../common/Label";
 import { useSelectedProject } from "../../../slices/apiDataManager";
 import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
 import SelectField from "../../common/Forms/SelectField";
 const taskSchema = z.object({
  buildingID: z.string().min(1, "Building is required"),
@ -76,19 +78,13 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
    setValue("activityID", "");
  };
-
+  const methods = useForm({
  const {
    register,
    handleSubmit,
    watch,
    setValue,
    reset,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(taskSchema),
    defaultValues: defaultModel,
    resolver: zodResolver(taskSchema),
  });
  const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [activityData, setActivityData] = useState([]);
  const [categoryData, setCategoryData] = useState([]);
@ -112,10 +108,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
  const { mutate: CreateTask, isPending } = useManageTask({
    onSuccessCallback: (response) => {
      showToast(response?.message, "success");
-      setValue("activityID",""),
+      setValue("activityID", ""),
-      setValue("plannedWork",0),
+        setValue("plannedWork", 0),
-      setValue("completedWork",0)
+        setValue("completedWork", 0)
-      setValue("comment","")
+      setValue("comment", "")
    },
  });
  useEffect(() => {
@ -148,224 +144,290 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
  };
  return (
-    <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
+    <AppFormProvider {...methods}>
-      <div className="text-center mb-1">
+      <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
-        <h5 className="mb-1">Manage Task</h5>
+        <div className="text-center mb-1">
-      </div>
+          <h5 className="mb-1">Manage Task</h5>
-      <div className="col-6 text-start">
+        </div>
-        <Label className="form-label" required>Select Building</Label>
+        {/* Select Building */}
        <select
          className="form-select form-select-sm"
          {...register("buildingID")}
        >
          <option value="">Select Building</option>
          {project
            ?.filter((b) => b?.buildingName)
            ?.sort((a, b) => a?.buildingName.localeCompare(b.buildingName))
            ?.map((b) => (
              <option key={b.id} value={b.id}>
                {b.buildingName}
              </option>
            ))}
        </select>
        {errors.buildingID && (
          <p className="danger-text">{errors.buildingID.message}</p>
        )}
      </div>
      {selectedBuilding && (
        <div className="col-6 text-start">
-          <Label className="form-label" required>Select Floor</Label>
+          <AppFormController
-          <select
+            name="buildingID"
-            className="form-select form-select-sm"
+            control={control}
-            {...register("floorId")}
+            render={({ field }) => (
-          >
+              <SelectField
-            <option value="">Select Floor</option>
+                label="Select Building"
-            {selectedBuilding.floors
+                options={project ?? []}
-              ?.sort((a, b) => a.floorName.localeCompare(b.floorName))
+                placeholder="Select Building"
-              ?.map((f) => (
+                required
-                <option key={f.id} value={f.id}>
+                labelKey="buildingName"
-                  {f.floorName}
+                valueKey="id"
-                </option>
+                value={field.value}
-              ))}
+                onChange={(value) => {
-          </select>
+                  field.onChange(value);
-          {errors.floorId && (
+                  setValue("floorId", "");
-            <p className="danger-text">{errors.floorId.message}</p>
+                  setValue("workAreaId", "");
-          )}
+                  setSelectedService("");
-        </div>
+                  setSelectedGroup("");
-      )}
+                }}
-
+                className="m-0"
-      {/* Work Area Selection */}
+              />
      {selectedFloor && (
        <div className="col-12 text-start">
          <Label className="form-label" required>Select Work Area</Label>
          <select
            className="form-select form-select-sm"
            {...register("workAreaId")}
          >
            <option value="">Select Work Area</option>
            {selectedFloor.workAreas
              ?.sort((a, b) => a.areaName.localeCompare(b.areaName))
              ?.map((w) => (
                <option key={w.id} value={w.id}>
                  {w.areaName}
                </option>
              ))}
          </select>
          {errors.workAreaId && (
            <p className="danger-text">{errors.workAreaId.message}</p>
          )}
        </div>
      )}
      {/* Services Selection */}
      {selectedWorkArea && (
        <div className="col-12 text-start">
          <Label className="form-label" required>Select Service</Label>
          <select
            className="form-select form-select-sm"
            {...register("serviceId")}
            value={selectedService}
            // onChange={handleServiceChange}
            onChange={(e) => {
              handleServiceChange(e);
              setValue("serviceId", e.target.value);
            }}
          >
            <option value="">Select Service</option>
            {servicesLoading && <option>Loading...</option>}
            {assignedServices?.map((service) => (
              <option key={service.id} value={service.id}>
                {service.name}
              </option>
            ))}
          </select>
        </div>
      )}
      {/* Activity Group (Organization) Selection */}
      {selectedService && (
        <div className="col-12 text-start">
          <Label className="form-label" required>Select Activity Group</Label>
          <select
            className="form-select form-select-sm"
            {...register("activityGroupId")}
            value={selectedGroup}
            onChange={handleGroupChange}
          >
            <option value="">Select Group</option>
            {groupsLoading && <option>Loading...</option>}
            {groups?.map((g) => (
              <option key={g.id} value={g.id}>{g.name}</option>
            ))}
          </select>
          {errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
        </div>
      )}
      {/* Activity Selection */}
      {selectedGroup && (
        <div className="col-12 text-start">
          <Label className="form-label" required>Select Activity</Label>
          <select className="form-select form-select-sm" {...register("activityID")}>
            <option value="">Select Activity</option>
            {activitiesLoading && <option>Loading...</option>}
            {activities?.map((a) => (
              <option key={a.id} value={a.id}>{a.activityName}</option>
            ))}
          </select>
          {errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
        </div>
      )}
      {watchActivityId && (
        <div className="col-12 text-start">
          <label className="form-label">Select Work Category</label>
          <select
            className="form-select form-select-sm"
            {...register("workCategoryId")}
          >
            {categoryData.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name}
              </option>
            ))}
          </select>
          {errors.workCategoryId && (
            <p className="danger-text">{errors.workCategoryId.message}</p>
          )}
        </div>
      )}
      {selectedActivity && selectedCategory && (
        <>
          <div className="col-5 text-start">
            <Label className="form-label" required>Planned Work</Label>
            <input
              type="number"
              className="form-control form-control-sm"
              {...register("plannedWork", { valueAsNumber: true })}
            />
            {errors.plannedWork && (
              <p className="danger-text">{errors.plannedWork.message}</p>
            )}
          </div>
          <div className="col-5 text-start">
            <label className="form-label">Completed Work</label>
            <input
              type="number"
              className="form-control form-control-sm"
              {...register("completedWork", { valueAsNumber: true })}
            />
            {errors.completedWork && (
              <p className="danger-text">{errors.completedWork.message}</p>
            )}
          </div>
          <div className="col-2 text-start">
            <label className="form-label">Unit</label>
            <input
              type="text"
              className="form-control form-control-sm"
              disabled
              value={selectedActivity?.unitOfMeasurement || ""}
            />
          </div>
        </>
      )}
      {selectedActivity && selectedCategory && (
        <div className="col-12 text-start">
          <label className="form-label">Comment</label>
          <textarea
            className="form-control"
            rows="2"
            {...register("comment")}
          />
-          {errors.comment && (
+          {errors.buildingID && (
-            <p className="danger-text">{errors.comment.message}</p>
+            <small className="danger-text">{errors.buildingID.message}</small>
          )}
        </div>
      )}
-      <div className="col-12 text-end mt-5">
+        {/* Select Floor */}
-        <button
+        {selectedBuilding && (
-          type="button"
+          <div className="col-6 text-start">
-          className="btn btn-sm btn-label-secondary me-3"
+            <AppFormController
-          onClick={onClose}
+              name="floorId"
-        >
+              control={control}
-          Cancel
+              render={({ field }) => (
-        </button>
+                <SelectField
-        <button
+                  label="Select Floor"
-          type="submit"
+                  options={selectedBuilding?.floors ?? []}
-          className="btn btn-sm btn-primary"
+                  placeholder={
-          // disabled={isSubmitting}
+                    selectedBuilding?.floors?.length > 0
-           disabled={isPending}
+                      ? "Select Floor"
-        >
+                      : "No Floor Found"
-          {isPending ? "Please Wait..." : "Add Task"}
+                  }
-        </button>
+                  required
-      </div>
+                  labelKey="floorName"
-    </form>
+                  valueKey="id"
                  value={field.value}
                  onChange={(value) => {
                    field.onChange(value);
                    setValue("workAreaId", "");
                  }}
                  className="m-0"
                />
              )}
            />
            {errors.floorId && (
              <small className="danger-text">{errors.floorId.message}</small>
            )}
          </div>
        )}
        {/* Select Work Area */}
        {selectedFloor && (
          <div className="col-12 text-start">
            <AppFormController
              name="workAreaId"
              control={control}
              render={({ field }) => (
                <SelectField
                  label="Select Work Area"
                  options={selectedFloor?.workAreas ?? []}
                  placeholder="Select Work Area"
                  required
                  labelKey="areaName"
                  valueKey="id"
                  value={field.value}
                  onChange={(value) => {
                    field.onChange(value);
                    setSelectedService("");
                    setSelectedGroup("");
                  }}
                  className="m-0"
                />
              )}
            />
            {errors.workAreaId && (
              <small className="danger-text">{errors.workAreaId.message}</small>
            )}
          </div>
        )}
        {/* Select Service */}
        {selectedWorkArea && (
          <div className="col-12 text-start">
            <AppFormController
              name="serviceId"
              control={control}
              render={({ field }) => (
                <SelectField
                  label="Select Service"
                  options={assignedServices ?? []}
                  placeholder="Select Service"
                  required
                  labelKey="name"
                  valueKey="id"
                  value={field.value}
                  onChange={(value) => {
                    field.onChange(value);
                    setSelectedService(value);
                    setSelectedGroup("");
                    setValue("activityGroupId", "");
                    setValue("activityID", "");
                  }}
                  isLoading={servicesLoading}
                  className="m-0"
                />
              )}
            />
            {errors.serviceId && (
              <small className="danger-text">{errors.serviceId.message}</small>
            )}
          </div>
        )}
        {/* Select Activity Group */}
        {selectedService && (
          <div className="col-12 text-start">
            <AppFormController
              name="activityGroupId"
              control={control}
              render={({ field }) => (
                <SelectField
                  label="Select Activity Group"
                  options={groups ?? []}
                  placeholder="Select Activity Group"
                  required
                  labelKey="name"
                  valueKey="id"
                  value={field.value}
                  onChange={(value) => {
                    field.onChange(value);
                    setSelectedGroup(value);
                    setValue("activityID", "");
                  }}
                  isLoading={groupsLoading}
                  className="m-0"
                />
              )}
            />
            {errors.activityGroupId && (
              <small className="danger-text">{errors.activityGroupId.message}</small>
            )}
          </div>
        )}
        {/* Select Activity */}
        {selectedGroup && (
          <div className="col-12 text-start">
            <AppFormController
              name="activityID"
              control={control}
              render={({ field }) => (
                <SelectField
                  label="Select Activity"
                  options={activities ?? []}
                  placeholder="Select Activity"
                  required
                  labelKey="activityName"
                  valueKey="id"
                  value={field.value}
                  onChange={field.onChange}
                  isLoading={activitiesLoading}
                  className="m-0"
                />
              )}
            />
            {errors.activityID && (
              <small className="danger-text">{errors.activityID.message}</small>
            )}
          </div>
        )}
        {watchActivityId && (
          <div className="col-12 text-start">
            <AppFormController
              name="workCategoryId"
              control={control}
              render={({ field }) => (
                <SelectField
                  label="Select Work Category"
                  options={categoryData ?? []}
                  placeholder="Select Work Category"
                  required
                  labelKey="name"
                  valueKey="id"
                  value={field.value}
                  onChange={field.onChange}
                  className="m-0"
                />
              )}
            />
            {errors.workCategoryId && (
              <small className="danger-text">{errors.workCategoryId.message}</small>
            )}
          </div>
        )}
        {selectedActivity && selectedCategory && (
          <>
            <div className="col-5 text-start">
              <Label className="form-label" required>Planned Work</Label>
              <input
                type="number"
                className="form-control "
                {...register("plannedWork", { valueAsNumber: true })}
              />
              {errors.plannedWork && (
                <p className="danger-text">{errors.plannedWork.message}</p>
              )}
            </div>
            <div className="col-5 text-start">
              <label className="form-label">Completed Work</label>
              <input
                type="number"
                className="form-control "
                {...register("completedWork", { valueAsNumber: true })}
              />
              {errors.completedWork && (
                <p className="danger-text">{errors.completedWork.message}</p>
              )}
            </div>
            <div className="col-2 text-start">
              <label className="form-label">Unit</label>
              <input
                type="text"
                className="form-control "
                disabled
                value={selectedActivity?.unitOfMeasurement || ""}
              />
            </div>
          </>
        )}
        {selectedActivity && selectedCategory && (
          <div className="col-12 text-start">
            <label className="form-label">Comment</label>
            <textarea
              className="form-control"
              rows="2"
              {...register("comment")}
            />
            {errors.comment && (
              <p className="danger-text">{errors.comment.message}</p>
            )}
          </div>
        )}
        <div className="col-12 text-end mt-6 my-2">
          <button
            type="button"
            className="btn btn-sm btn-label-secondary me-3"
            onClick={onClose}
          >
            Cancel
          </button>
          <button
            type="submit"
            className="btn btn-sm btn-primary"
            // disabled={isSubmitting}
            disabled={isPending}
          >
            {isPending ? "Please Wait..." : "Add Task"}
          </button>
        </div>
      </form>
    </AppFormProvider>
  );
 };
--- a/src/components/Project/Infrastructure/WorkAreaModel.jsx
+++ b/src/components/Project/Infrastructure/WorkAreaModel.jsx
@ -6,6 +6,8 @@ import showToast from "../../../services/toastService";
 import { useManageProjectInfra } from "../../../hooks/useProjects";
 import { useSelector } from "react-redux";
 import Label from "../../common/Label";
 import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
 import SelectField from "../../common/Forms/SelectField";
 const workAreaSchema = z.object({
  id: z.string().optional(),
@ -26,19 +28,14 @@ const defaultModel = {
 const WorkAreaModel = ({ project, onSubmit, onClose }) => {
  const [selectedBuilding, setSelectedBuilding] = useState(null);
  const [selectedFloor, setSelectedFloor] = useState(null);
-  const selectedProject = useSelector((store) => store.localVariables.projectId)
+  const selectedProject = useSelector((store) => store.localVariables.projectId);
-  const {
+  const methods = useForm({
    register,
    handleSubmit,
    formState: { errors },
    setValue,
    reset,
    watch,
  } = useForm({
    resolver: zodResolver(workAreaSchema),
    defaultValues: defaultModel,
    resolver: zodResolver(workAreaSchema),
  });
  const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
  const watchBuildingId = watch("buildingId");
  const watchFloorId = watch("floorId");
  const watchWorkAreaId = watch("id");
@ -104,99 +101,122 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
  };
  return (
-    <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
+    <AppFormProvider {...methods}>
-      <div className="text-center mb-1">
+      <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
-        <h5 className="mb-1">Manage Work Area</h5>
+        <div className="text-center mb-1">
-      </div>
+          <h5 className="mb-1">Manage Work Area</h5>
-      <div className="col-12 col-sm-6 text-start">
+        </div>
        <Label className="form-label" required>Select Building</Label>
        <select
          {...register("buildingId")}
          className="form-select form-select-sm"
        >
          <option value="0">Select Building</option>
          {project?.map((b) => (
            <option key={b.id} value={b.id}>
              {b.buildingName}
            </option>
          ))}
        </select>
        {errors.buildingId && (
          <p className="danger-text">{errors.buildingId.message}</p>
        )}
      </div>
      {watchBuildingId !== "0" && (
        <div className="col-12 col-sm-6 text-start">
-          <Label className="form-label" required>Select Floor</Label>
+          <AppFormController
-          <select
+            name="buildingId"
-            {...register("floorId")}
+            control={control}
-            className="form-select form-select-sm"
+            render={({ field }) => (
-          >
+              <SelectField
-            <option value="0">
+                label="Select Building"
-              {selectedBuilding?.floor?.length > 0
+                options={project ?? []}
-                ? "NO Floor Found"
+                placeholder="Select Building"
-                : "Select Floor"}
+                required
-            </option>
+                labelKey="buildingName"
                valueKey="id"
                value={field.value}
                onChange={field.onChange}
                className="m-0"
              />
            )}
          />
-            {selectedBuilding?.floors?.map((f) => (
+          {errors.buildingId && (
-              <option key={f.id} value={f.id}>
+            <small className="danger-text">{errors.buildingId.message}</small>
                {f.floorName}
              </option>
            ))}
          </select>
          {errors.floorId && (
            <p className="danger-text">{errors.floorId.message}</p>
          )}
        </div>
      )}
      {watchFloorId !== "0" && (
        <>
          <div className="col-12 text-start">
            <label className="form-label">Select Work Area</label>
            <select
              {...register("id")}
              className="form-select form-select-sm"
              onChange={handleWrokAreaChange}
            >
              <option value="0">Create New Work Area</option>
              {selectedFloor?.workAreas?.length > 0 &&
                selectedFloor?.workAreas?.map((w) => (
                  <option key={w.id} value={w.id}>
                    {w.areaName}
                  </option>
                ))}
            </select>
          </div>
-          <div className="col-12 text-start">
+
-            <Label className="form-label" required>
+        {watchBuildingId !== "0" && (
-              {watchWorkAreaId === "0"
+          <div className="col-12 col-sm-6 text-start">
-                ? "Enter Work Area Name"
+            <AppFormController
-                : "Edit Work Area Name"}
+              name="floorId"
-            </Label>
+              control={control}
-            <input
+              render={({ field }) => (
-              type="text"
+                <SelectField
-              className="form-control form-control-sm"
+                  label="Select Floor"
-              placeholder="Work Area"
+                  options={selectedBuilding?.floors ?? []}
-              {...register("areaName")}
+                  placeholder={
                    selectedBuilding?.floors?.length > 0
                      ? "Select Floor"
                      : "No Floor Found"
                  }
                  required
                  labelKey="floorName"
                  valueKey="id"
                  value={field.value}
                  onChange={(value) => {
                    field.onChange(value);
                    setValue("areaName", ""); // reset Work Area name when floor changes
                  }}
                  className="m-0"
                />
              )}
            />
-            {errors.areaName && (
+            {errors.floorId && (
-              <p className="danger-text">{errors.areaName.message}</p>
+              <small className="danger-text">{errors.floorId.message}</small>
            )}
          </div>
-        </>
+        )}
      )}
      <div className="col-12 text-end mt-5">
        <button type="button" className="btn btn-sm btn-label-secondary me-3" disabled={isPending} onClick={onClose}>
          Cancel
        </button>
        <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
          {isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
        </button>
-      </div>
+        {watchFloorId !== "0" && (
-    </form>
+          <>
            <div className="col-12 text-start">
              <AppFormController
                name="id"
                control={control}
                render={({ field }) => (
                  <SelectField
                    label="Select Work Area"
                    options={selectedFloor?.workAreas ?? []}
                    placeholder="Create New Work Area"
                    required={false}
                    labelKey="areaName"
                    valueKey="id"
                    value={field.value}
                    onChange={(value) => {
                      field.onChange(value);
                      handleWrokAreaChange({ target: { value } }); // preserve your existing handler
                    }}
                    className="m-0"
                  />
                )}
              />
            </div>
            <div className="col-12 text-start">
              <Label className="form-label" required>
                {watchWorkAreaId === "0"
                  ? "Enter Work Area Name"
                  : "Edit Work Area Name"}
              </Label>
              <input
                type="text"
                className="form-control"
                placeholder="Work Area"
                {...register("areaName")}
              />
              {errors.areaName && (
                <p className="danger-text">{errors.areaName.message}</p>
              )}
            </div>
          </>
        )}
        <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>
          <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
            {isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
          </button>
        </div>
      </form>
    </AppFormProvider>
  );
 };
--- a/src/components/Project/ManageProjectInfo.jsx
+++ b/src/components/Project/ManageProjectInfo.jsx
@ -17,6 +17,8 @@ import {
  useOrganizationsList,
 } from "../../hooks/useOrganization";
 import { localToUtc } from "../../utils/appUtils";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 const currentDate = new Date().toLocaleDateString("en-CA");
 const formatDate = (date) => {
@ -42,8 +44,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
    1,
    true
  );
-  const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
+  const { mutate: UpdateProject, isPending } = useUpdateProject(() => { onClose?.() });
-  const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
+  const { mutate: CeateProject, isPending: isCreating } = useCreateProject(() => { onClose?.() })
  const {
    register,
@ -74,7 +76,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
        pmcId: projects_Details?.pmc?.id || "",
      });
    setAddressLength(projects_Details?.projectAddress?.length || 0);
-  }, [project, projects_Details, reset,data]);
+  }, [project, projects_Details, reset, data]);
  const onSubmitForm = (formData) => {
    if (project) {
@ -85,8 +87,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
        id: project,
      };
      UpdateProject({ projectId: project, payload: payload });
-    }else{
+    } else {
-       let payload = {
+      let payload = {
        ...formData,
        startDate: localToUtc(formData.startDate),
        endDate: localToUtc(formData.endDate),
@ -122,7 +124,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
            type="text"
            id="name"
            name="name"
-            className="form-control form-control-sm"
+            className="form-control "
            placeholder="Project Name"
            {...register("name")}
          />
@ -143,7 +145,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
            type="text"
            id="shortName"
            name="shortName"
-            className="form-control form-control-sm"
+            className="form-control "
            placeholder="Short Name"
            {...register("shortName")}
          />
@ -164,7 +166,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
            type="text"
            id="contactPerson"
            name="contactPerson"
-            className="form-control form-control-sm"
+            className="form-control "
            placeholder="Contact Person"
            maxLength={50}
            {...register("contactPerson")}
@ -190,6 +192,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
            placeholder="DD-MM-YYYY"
            maxDate={new Date()} // optional: restrict future dates
            className="w-100"
            size="md"
          />
          {errors.startDate && (
@ -213,6 +216,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
            placeholder="DD-MM-YYYY"
            minDate={getValues("startDate")} // optional: restrict future dates
            className="w-100"
            size="md"
          />
          {errors.endDate && (
@ -225,103 +229,108 @@ const ManageProjectInfo = ({ project, onClose }) => {
          )}
        </div>
-        <div className="col-12 ">
+        <div className="col-12">
-          <label className="form-label" htmlFor="modalEditUserStatus">
+          <Label htmlFor="modalEditUserStatus" className="form-label">
            Status
-          </label>
+          </Label>
-          <select
+
-            id="modalEditUserStatus"
+          <AppFormController
-            name="modalEditUserStatus"
+            name="projectStatusId"
-            className="select2 form-select form-select-sm"
+            control={control}
-            aria-label="Default select example"
+            rules={{ required: "Status is required" }}
-            {...register("projectStatusId", {
+            render={({ field }) => (
-              required: "Status is required",
+              <SelectField
-              valueAsNumber: false,
+                label="" // Label is already above
-            })}
+                placeholder="Select Status"
-          >
+                options={PROJECT_STATUS?.map((status) => ({
-            {PROJECT_STATUS.map((status) => (
+                  id: status.id,
-              <option key={status.id} value={status.id}>
+                  name: status.label,
-                {status.label}
+                })) ?? []}
-              </option>
+                value={field.value || ""}
-            ))}
+                onChange={field.onChange}
-          </select>
+                required
                className="m-0 form-select-sm w-100"
              />
            )}
          />
          {errors.projectStatusId && (
-            <div
+            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
              className="danger-text text-start"
              style={{ fontSize: "12px" }}
            >
              {errors.projectStatusId.message}
            </div>
          )}
        </div>
-        <div className="col-12 ">
+
-          <label className="form-label" htmlFor="modalEditUserStatus">
+        <div className="col-12">
          <Label htmlFor="promoterId" className="form-label">
            Promoter
-          </label>
+          </Label>
-          <select
+
-            className="select2 form-select form-select-sm"
+          <AppFormController
-            aria-label="Default select example"
+            name="promoterId"
-            {...register("promoterId", {
+            control={control}
-              required: "Promoter is required",
+            rules={{ required: "Promoter is required" }}
-              valueAsNumber: false,
+            render={({ field }) => (
-            })}
+              <SelectField
-          >
+                label="" // Label is already above
-            {isLoading ? (
+                placeholder="Select Promoter"
-              <option>Loading...</option>
+                options={data?.data ?? []}
-            ) : (
+                value={field.value || ""}
-              <>
+                onChange={field.onChange}
-                <option value="">Select Promoter</option>
+                required
-                {data?.data?.map((org) => (
+                isLoading={isLoading}
-                  <option key={org.id} value={org.id}>
+                className="m-0 form-select-sm w-100"
-                    {org.name}
+                noOptionsMessage={() =>
-                  </option>
+                  !isLoading && (!data?.data || data.data.length === 0)
-                ))}
+                    ? "No promoters found"
-              </>
+                    : null
                }
              />
            )}
-          </select>
+          />
          {errors.promoterId && (
-            <div
+            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
              className="danger-text text-start"
              style={{ fontSize: "12px" }}
            >
              {errors.promoterId.message}
            </div>
          )}
        </div>
-        <div className="col-12 ">
+
-          <label className="form-label" htmlFor="modalEditUserStatus">
+        <div className="col-12">
          <Label htmlFor="pmcId" className="form-label">
            PMC
-          </label>
+          </Label>
-          <select
+
-            className="select2 form-select form-select-sm"
+          <AppFormController
-            aria-label="Default select example"
+            name="pmcId"
-            {...register("pmcId", {
+            control={control}
-              required: "Promoter is required",
+            rules={{ required: "PMC is required" }}
-              valueAsNumber: false,
+            render={({ field }) => (
-            })}
+              <SelectField
-          >
+                label="" // Label is already above
-            {isLoading ? (
+                placeholder="Select PMC"
-              <option>Loading...</option>
+                options={data?.data ?? []}
-            ) : (
+                value={field.value || ""}
-              <>
+                onChange={field.onChange}
-                <option value="">Select PMC</option>
+                required
-                {data?.data?.map((org) => (
+                isLoading={isLoading}
-                  <option key={org.id} value={org.id}>
+                className="m-0 form-select-sm w-100"
-                    {org.name}
+                noOptionsMessage={() =>
-                  </option>
+                  !isLoading && (!data?.data || data.data.length === 0)
-                ))}
+                    ? "No PMC found"
-              </>
+                    : null
                }
              />
            )}
-          </select>
+          />
          {errors.pmcId && (
-            <div
+            <div className="danger-text text-start" style={{ fontSize: "12px" }}>
              className="danger-text text-start"
              style={{ fontSize: "12px" }}
            >
              {errors.pmcId.message}
            </div>
          )}
        </div>
        <div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
          <span>
            <i className="bx bx-sm bx-info-circle"></i> Not found PMC and
@ -376,7 +385,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
            className="btn btn-primary btn-sm"
            disabled={isPending || isCreating || loading}
          >
-            {isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
+            {isPending || isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
          </button>
        </div>
      </form>
--- a/src/components/Project/ProjectInfra.jsx
+++ b/src/components/Project/ProjectInfra.jsx
@ -30,6 +30,9 @@ import { useParams } from "react-router-dom";
 import GlobalModel from "../common/GlobalModel";
 import { setService } from "../../slices/globalVariablesSlice";
 import { SpinnerLoader } from "../common/Loader";
 import { useForm } from "react-hook-form";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
  const projectId = useSelectedProject();
@ -52,6 +55,12 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
  const { data: assignedServices, isLoading: servicesLoading } =
    useProjectAssignedServices(projectId);
  const { control } = useForm({
    defaultValues: {
      serviceId: selectedService || "",
    },
  });
  useEffect(() => {
    setProject(projectInfra);
  }, [data, projects_Details]);
@ -60,6 +69,11 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
    setProject(response);
  };
  const handleServiceChange = (serviceId) => {
    dispatch(setService(serviceId));
  };
  return (
    <>
      {showModalBuilding && (
@ -115,37 +129,39 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
          <div className="card-body" style={{ padding: "0.5rem" }}>
            <div className="align-items-center">
              <div className="row ">
-                <div
+                <div className="col-md-4 col-12 dataTables_length text-start py-2 px-2">
-                  className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
+                  <div className="ms-4 mt-n1">
-                  id="DataTables_Table_0_length"
+                    {!servicesLoading && assignedServices?.length > 0 && (
-                >
+                      assignedServices.length > 1 ? (
-                  {!servicesLoading &&
+                        <AppFormController
-                    assignedServices?.length > 0 &&
+                          name="serviceId"
-                    (assignedServices.length > 1 ? (
+                          control={control}
-                      <label>
+                          render={({ field }) => (
-                        <select
+                            <SelectField
-                          name="DataTables_Table_0_length"
+                              label="Select Service"
-                          aria-controls="DataTables_Table_0"
+                              options={[{ id: "", name: "All Projects" }, ...(assignedServices ?? [])]} 
-                          className="form-select form-select-sm"
+                              placeholder="Choose a Service"
-                          aria-label="Select Service"
+                              required
-                          value={selectedService}
+                              labelKey="name"
-                          onChange={(e) => dispatch(setService(e.target.value))}
+                              valueKey="id"
-                        >
+                              value={field.value}
-                          <option value="">All Services</option>
+                              onChange={(val) => {
-                          {assignedServices.map((service) => (
+                                field.onChange(val);
-                            <option key={service.id} value={service.id}>
+                                handleServiceChange(val);
-                              {service.name}
+                              }}
-                            </option>
+                              isLoading={servicesLoading}
-                          ))}
+                            />
-                        </select>
+                          )}
-                      </label>
+                        />
-                    ) : (
+                      ) : (
-                      <h5>{assignedServices[0].name}</h5>
+                        <h5>{assignedServices[0].name}</h5>
-                    ))}
+                      )
                    )}
                  </div>
                </div>
                {/* Buttons Section (aligned to right) */}
-                <div className="col-md-8 col-12 text-end mb-1">
+                <div className="col-md-8 col-12 text-end mt-4">
                  {ManageInfra && (
                    <>
                      <button
@ -199,7 +215,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/ProjectPermission.jsx
+++ b/src/components/Project/ProjectPermission.jsx
@ -10,6 +10,8 @@ import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import showToast from "../../services/toastService";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 export const ProjectPermissionSchema = z.object({
  employeeId: z.string().min(1, "Employee is required"),
@ -46,26 +48,26 @@ const ProjectPermission = () => {
  );
  useEffect(() => {
-  if (!selectedEmployee) return;
+    if (!selectedEmployee) return;
-  const enabledPerms =
+    const enabledPerms =
      selectedEmpPermissions?.permissions
        ?.filter((perm) => perm.isEnabled)
        ?.map((perm) => perm.id) || [];
    setValue("selectedPermissions", enabledPerms, { shouldValidate: true });
  }, [selectedEmpPermissions, setValue, selectedEmployee]);
  const selectedPermissions = watch("selectedPermissions") || [];
  const existingEnabledIds =
    selectedEmpPermissions?.permissions
-      ?.filter((perm) => perm.isEnabled)
+      ?.filter((p) => p.isEnabled)
-      ?.map((perm) => perm.id) || [];
+      ?.map((p) => p.id) || [];
-  setValue("selectedPermissions", enabledPerms, { shouldValidate: true });
+  const hasChanges =
-}, [selectedEmpPermissions, setValue, selectedEmployee]);
+    selectedPermissions.length !== existingEnabledIds.length ||
-
+    selectedPermissions.some((id) => !existingEnabledIds.includes(id));
 const selectedPermissions = watch("selectedPermissions") || [];
 const existingEnabledIds =
  selectedEmpPermissions?.permissions
    ?.filter((p) => p.isEnabled)
    ?.map((p) => p.id) || [];
 const hasChanges =
  selectedPermissions.length !== existingEnabledIds.length ||
  selectedPermissions.some((id) => !existingEnabledIds.includes(id));
  const { mutate: updatePermission, isPending } =
    useUpdateProjectLevelEmployeePermission();
@ -115,35 +117,42 @@ const hasChanges =
      <form className="row" onSubmit={handleSubmit(onSubmit)}>
        <div className="d-flex justify-content-between align-items-end gap-2 mb-3">
          <div className="text-start d-flex align-items-center gap-2">
-            <div className="d-block">
+            {/* <div className="d-block">
              <label className="form-label">Select Employee</label>
-            </div>
+            </div> */}
-            <div className="d-block">
+
-              {" "}
+            <div className="d-block flex-grow-1">
-              <select
+              <AppFormController
-                className="form-select form-select-sm"
+                name="employeeId"
-                {...register("employeeId")}
+                control={control}
-                disabled={isPending}
+                render={({ field }) => (
-              >
+                  <SelectField
-                {loading ? (
+                    label="Select Employee"
-                  <option value="">Loading...</option>
+                    options={
-                ) : (
+                      employees
-                  <>
+                        ?.sort((a, b) =>
-                    <option value="">-- Select Employee --</option>
+                          `${a?.firstName} ${a?.lastName}`.localeCompare(
-                    {[...employees]
+                            `${b?.firstName} ${b?.lastName}`
-                      ?.sort((a, b) =>
+                          )
                        `${a?.firstName} ${a?.firstName}`?.localeCompare(
                          `${b?.firstName} ${b?.lastName}`
                        )
-                      )
+                        ?.map((emp) => ({
-                      ?.map((emp) => (
+                          id: emp.id,
-                        <option key={emp.id} value={emp.id}>
+                          name: `${emp.firstName} ${emp.lastName}`,
-                          {emp.firstName} {emp.lastName}
+                        })) ?? []
-                        </option>
+                    }
-                      ))}
+                    placeholder="-- Select Employee --"
-                  </>
+                    required
                    labelKey="name"
                    valueKeyKey="id"
                    value={field.value}
                    onChange={field.onChange}
                    isLoading={loading}
                    disabled={isPending}
                    className="m-0"
                  />
                )}
-              </select>
+              />
              {errors.employeeId && (
                <div className="d-block text-danger small">
                  {errors.employeeId.message}
@ -152,6 +161,7 @@ const hasChanges =
            </div>
          </div>
          <div className="mt-3 text-end">
            {hasChanges && (
              <button
--- 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
@ -2,8 +2,11 @@ import React, { useState } from "react";
 import TeamEmployeeList from "./TeamEmployeeList";
 import { useOrganization } from "../../../hooks/useDirectory";
 import { useOrganizationsList } from "../../../hooks/useOrganization";
-import {  useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
+import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
 import { useSelectedProject } from "../../../slices/apiDataManager";
 import { AppFormController } from "../../../hooks/appHooks/useAppForm";
 import SelectField from "../../common/Forms/SelectField";
 import { useForm } from "react-hook-form";
 const TeamAssignToProject = ({ closeModal }) => {
  const [searchText, setSearchText] = useState("");
@ -11,53 +14,48 @@ const TeamAssignToProject = ({ closeModal }) => {
  const project = useSelectedProject();
  const { data, isLoading, isError, error } =
    useProjectAssignedOrganizationsName(project);
  const { control, watch, formState: { errors } } = useForm({
    defaultValues: { organizationId: "" },
  });
  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="row align-items-center gx-5 text-start">
-        <div className="col">
+          <div className="col-12 col-md-6 mb-2">
-          <div className="d-flex flex-grow-1 align-items-center gap-2">
+            <AppFormController
-            {isLoading ? (
+              name="organizationId"
-              <select className="form-select form-select-sm w-100" disabled>
+              control={control}
-                <option value="">Loading...</option>
+              rules={{ required: "Organization is required" }}
-              </select>
+              render={({ field }) => (
-            ) : data?.length === 0 ? (
+                <SelectField
-              <p className="mb-0 badge bg-label-secondary">No organizations found</p>
+                  label="Select Organization"
-            ) : (
+                  options={data ?? []}
-              <>
+                  placeholder="Choose an Organization"
-                <label
+                  required
-                  htmlFor="organization"
+                  labelKey="name"
-                  className="form-label mb-0 text-nowrap"
+                  valueKey="id"
-                >
+                  value={field.value}
-                  Select Organization
+                  onChange={field.onChange}
-                </label>
+                  isLoading={isLoading}
-                <select
+                  className="m-0 w-100"
-                  id="organization"
+                />
-                  className="form-select form-select-sm w-100"
+              )}
-                  value={selectedOrg || ""}
+            />
-                  onChange={(e) => setSelectedOrg(e.target.value)}
+            {errors.organizationId && (
-                >
+              <small className="danger-text">{errors.organizationId.message}</small>
                  <option value="">Select</option>
                  {data.map((org) => (
                    <option key={org.id} value={org.id}>
                      {org.name}
                    </option>
                  ))}
                </select>
              </>
            )}
          </div>
-        </div>
+        <div className="col-12 col-md-6 mt-n5">
-        <div className="col">
+          <div className="d-flex flex-column">
-          <div className="d-flex flex-grow-1 align-items-center gap-2">
+            <label htmlFor="search" className="form-label mb-1">
            <label htmlFor="search" className="form-label mb-0 text-nowrap">
              Search Employee
            </label>
            <input
              id="search"
              type="search"
-              className="form-control form-control-sm w-100"
+              className="form-control w-100"
              placeholder="Search..."
              value={searchText}
              onChange={(e) => setSearchText(e.target.value)}
--- 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/Project/Team/Teams.jsx
+++ b/src/components/Project/Team/Teams.jsx
@ -22,6 +22,9 @@ import { useSelectedProject } from "../../../slices/apiDataManager";
 import GlobalModel from "../../common/GlobalModel";
 import TeamAssignToProject from "./TeamAssignToProject";
 import { SpinnerLoader } from "../../common/Loader";
 import { AppFormController } from "../../../hooks/appHooks/useAppForm";
 import SelectField from "../../common/Forms/SelectField";
 import { useForm } from "react-hook-form";
 const Teams = () => {
  const selectedProject = useSelectedProject();
@ -30,9 +33,15 @@ const Teams = () => {
  const [employees, setEmployees] = useState([]);
  const [selectedEmployee, setSelectedEmployee] = useState(null);
  const [deleteEmployee, setDeleteEmplyee] = useState(null);
  const [searchTerm, setSearchTerm] = useState(""); // State for search term
  const [selectedService, setSelectedService] = useState(null);
  const [activeEmployee, setActiveEmployee] = useState(false);
  const { control, watch } = useForm({
    defaultValues: {
      selectedService: "",
      searchTerm: "",
    },
  });
  const selectedService = watch("selectedService");
  const searchTerm = watch("searchTerm");
  const { data: assignedServices, isLoading: servicesLoading } =
    useProjectAssignedServices(selectedProject);
@ -95,26 +104,23 @@ const Teams = () => {
  const filteredEmployees = useMemo(() => {
    if (!projectEmployees) return [];
    let filtered = projectEmployees;
    if (activeEmployee) {
      filtered = projectEmployees.filter((emp) => !emp.isActive);
    }
    // Apply search filter if present
    if (searchTerm?.trim()) {
      const lower = searchTerm.toLowerCase();
      filtered = filtered.filter((emp) => {
        const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase();
-        const jobRole = getJobRole(emp?.jobRoleId)?.toLowerCase();
+        return fullName.includes(lower) || (emp.jobRoleName ?? "").toLowerCase().includes(lower);
        return fullName.includes(lower) || jobRole.includes(lower);
      });
    }
    return filtered;
  }, [projectEmployees, searchTerm, activeEmployee]);
-  const handleSearch = (e) => setSearchTerm(e.target.value);
+
  const employeeHandler = useCallback(
    (msg) => {
      if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
@ -124,6 +130,7 @@ const Teams = () => {
    [filteredEmployees, refetch]
  );
  useEffect(() => {
    eventBus.on("employee", employeeHandler);
    return () => eventBus.off("employee", employeeHandler);
@ -154,62 +161,68 @@ const Teams = () => {
      <div className="card card-action mb-6">
        <div className="card-body">
          <div className="row align-items-center justify-content-between mb-4 g-3">
-            <div className="col-md-6 col-12 algin-items-center">
+            <div className="col-md-6 col-12 d-flex flex-wrap align-items-center gap-3">
-              <div className="d-flex flex-wrap align-items-center gap-3">
+              {!servicesLoading && assignedServices && (
-                <div>
+                <>
-                  {!servicesLoading && (
+                  {assignedServices.length === 1 && (
-                    <>
+                    <h5 className="mb-2">{assignedServices[0].name}</h5>
                      {assignedServices?.length === 1 && (
                        <h5 className="mb-2">{assignedServices[0].name}</h5>
                      )}
                      {assignedServices?.length > 1 && (
                        <select
                          className="form-select form-select-sm"
                          aria-label="Select Service"
                          value={selectedService}
                          onChange={handleServiceChange}
                        >
                          <option value="">All Services</option>
                          {assignedServices.map((service) => (
                            <option key={service.id} value={service.id}>
                              {service.name}
                            </option>
                          ))}
                        </select>
                      )}
                    </>
                  )}
                </div>
-                <div className="form-check form-switch d-flex align-items-center text-nowrap">
+                  {assignedServices.length > 1 && (
-                  <input
+                    <div className="col-12 col-md-6 mb-2 text-start">
-                    type="checkbox"
+                      <AppFormController
-                    className="form-check-input"
+                        name="selectedService"
-                    id="activeEmployeeSwitch"
+                        control={control}
-                    checked={activeEmployee}
+                        render={({ field }) => (
-                    onChange={handleToggleActive}
+                          <SelectField
-                  />
+                            label="Select Service"
-                  <label
+                            options={[{ id: "", name: "All Services" }, ...assignedServices]} 
-                    className="form-check-label ms-2"
+                            placeholder="Choose a Service"
-                    htmlFor="activeEmployeeSwitch"
+                            labelKey="name"
-                  >
+                            valueKey="id"
-                    {activeEmployee ? "Active Employees" : "In-active Employees"}
+                            value={field.value}
-                  </label>
+                            onChange={field.onChange}
-                </div>
+                            isLoading={servicesLoading}
                            className="w-100"
                          />
                        )}
                      />
                    </div>
                  )}
                </>
              )}
              <div className="form-check form-switch d-flex align-items-center text-nowrap">
                <input
                  type="checkbox"
                  className="form-check-input"
                  id="activeEmployeeSwitch"
                  checked={activeEmployee}
                  onChange={handleToggleActive}
                />
                <label className="form-check-label ms-2" htmlFor="activeEmployeeSwitch">
                  {activeEmployee ? "Active Employees" : "In-active Employees"}
                </label>
              </div>
            </div>
-            <div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
+            <div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3 mt-n1">
-              <input
+              <div className="col-12 col-md-4">
-                type="search"
+                <AppFormController
-                className="form-control form-control-sm"
+                  name="searchTerm"
-                placeholder="Search by Name or Role"
+                  control={control}
-                aria-controls="DataTables_Table_0"
+                  render={({ field }) => (
-                style={{ maxWidth: "200px" }}
+                    <input
-                value={searchTerm}
+                      type="search"
-                onChange={handleSearch}
+                      className="form-control form-control-sm w-100"
-              />
+                      placeholder="Search by Name or Role"
                      value={field.value}
                      onChange={field.onChange}
                    />
                  )}
                />
              </div>
              {HasAssignUserPermission && (
                <button
@ -246,74 +259,73 @@ const Teams = () => {
                  </tr>
                </thead>
                <tbody className="table-border-bottom-0">
-                  {filteredEmployees &&
+                  {filteredEmployees
-                    filteredEmployees
+                    .sort((a, b) =>
-                      .sort((a, b) =>
+                      (a.firstName || "").localeCompare(b.firstName || "")
-                        (a.firstName || "").localeCompare(b.firstName || "")
+                    )
-                      )
+                    .map((emp) => (
-                      .map((emp) => (
+                      <tr key={emp.id}>
-                        <tr key={emp.id}>
+                        <td>
-                          <td>
+                          <div className="d-flex justify-content-start align-items-center">
-                            <div className="d-flex justify-content-start align-items-center">
+                            <Avatar
-                              <Avatar
+                              firstName={emp.firstName}
-                                firstName={emp.firstName}
+                              lastName={emp.lastName}
-                                lastName={emp.lastName}
+                            />
-                              />
+                            <div className="d-flex flex-column">
-                              <div className="d-flex flex-column">
+                              <a
-                                <a
+                                onClick={() =>
-                                  onClick={() =>
+                                  navigate(
-                                    navigate(
+                                    `/employee/${emp.employeeId}?for=attendance`
-                                      `/employee/${emp.employeeId}?for=attendance`
+                                  )
-                                    )
+                                }
-                                  }
+                                className="text-heading text-truncate cursor-pointer"
                                  className="text-heading text-truncate cursor-pointer"
                                >
                                  <span className="fw-normal">
                                    {emp.firstName}{"  "}
                                    {emp.lastName}
                                  </span>
                                </a>
                              </div>
                            </div>
                          </td>
                          <td>{emp.serviceName || "N/A"}</td>
                          <td>{emp.organizationName || "N/A"}</td>
                          <td>
                            {moment(emp.allocationDate).format("DD-MMM-YYYY")}
                          </td>
                          {activeEmployee && (
                            <td>
                              {emp.reAllocationDate
                                ? moment(emp.reAllocationDate).format(
                                  "DD-MMM-YYYY"
                                )
                                : "Present"}
                            </td>
                          )}
                          <td>
                            <span className="badge bg-label-primary me-1">
                              {getJobRole(emp.jobRoleId)}
                            </span>
                          </td>
                          <td>
                            {emp.isActive ? (
                              <button
                                aria-label="Delete"
                                type="button"
                                title="Remove from project"
                                className="btn p-0 dropdown-toggle hide-arrow"
                                onClick={() => setSelectedEmployee(emp)}
                              >
-                                <i className="bx bx-trash me-1 text-danger"></i>
+                                <span className="fw-normal">
-                              </button>
+                                  {emp.firstName}{"  "}
-                            ) : (
+                                  {emp.lastName}
-                              <span>Not in project</span>
+                                </span>
-                            )}
+                              </a>
                            </div>
                          </div>
                        </td>
                        <td>{emp.serviceName || "N/A"}</td>
                        <td>{emp.organizationName || "N/A"}</td>
                        <td>
                          {moment(emp.allocationDate).format("DD-MMM-YYYY")}
                        </td>
                        {activeEmployee && (
                          <td>
                            {emp.reAllocationDate
                              ? moment(emp.reAllocationDate).format(
                                "DD-MMM-YYYY"
                              )
                              : "Present"}
                          </td>
-                        </tr>
+                        )}
-                      ))}
+                        <td>
                          <span className="badge bg-label-primary me-1">
                            {getJobRole(emp.jobRoleId)}
                          </span>
                        </td>
                        <td>
                          {emp.isActive ? (
                            <button
                              aria-label="Delete"
                              type="button"
                              title="Remove from project"
                              className="btn p-0 dropdown-toggle hide-arrow"
                              onClick={() => setSelectedEmployee(emp)}
                            >
                              <i className="bx bx-trash me-1 text-danger"></i>
                            </button>
                          ) : (
                            <span>Not in project</span>
                          )}
                        </td>
                      </tr>
                    ))}
                </tbody>
              </table>
            )}
--- a/src/components/RecurringExpense/ManageRecurringExpense.jsx
+++ b/src/components/RecurringExpense/ManageRecurringExpense.jsx
@ -28,6 +28,8 @@ import { useEmployeesName } from "../../hooks/useEmployees";
 import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
 import HoverPopup from "../common/HoverPopup";
 import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
  const {
@ -165,7 +167,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>
@ -200,34 +202,36 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
            <Label htmlFor="expenseCategoryId" className="form-label" required>
              Expense Category
            </Label>
-            <select
+
-              className="form-select form-select-sm"
+            <AppFormController
-              id="expenseCategoryId"
+              name="expenseCategoryId"
-              {...register("expenseCategoryId")}
+              control={control}
-            >
+              rules={{ required: "Expense Category is required" }}
-              <option value="" disabled>
+              render={({ field }) => (
-                Select Category
+                <SelectField
-              </option>
+                  label="" // Label is already above
-              {ExpenseLoading ? (
+                  placeholder="Select Category"
-                <option disabled>Loading...</option>
+                  options={expenseCategories ?? []}
-              ) : (
+                  value={field.value || ""}
-                expenseCategories?.map((expense) => (
+                  onChange={field.onChange}
-                  <option key={expense.id} value={expense.id}>
+                  required
-                    {expense.name}
+                  isLoading={ExpenseLoading}
-                  </option>
+                  className="m-0 form-select-sm w-100"
-                ))
+                />
              )}
-            </select>
+            />
            {errors.expenseCategoryId && (
              <small className="danger-text">
                {errors.expenseCategoryId.message}
              </small>
            )}
          </div>
        </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 +239,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 +248,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 +256,15 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
              <HoverPopup
                title="Payment Type"
                id="payment_type"
                content={
-                  <div className=" w-50">
+                  <div className="text-wrap" style={{ maxWidth: "200px" }}>
-                    <p>
+                    Choose whether the payment amount varies or remains fixed
-                      Choose whether the payment amount varies or remains fixed
+                    each cycle.
-                      each cycle.
+                    <br />
-                      <br />
+                    <strong>Is Variable:</strong> Amount changes per cycle.
-                      <strong>Is Variable:</strong> Amount changes per cycle.
+                    <br />
-                      <br />
+                    <strong>Fixed:</strong> Amount stays constant.
                      <strong>Fixed:</strong> Amount stays constant.
                    </p>
                  </div>
                }
              >
@ -274,7 +277,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 +330,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 +344,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 +358,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 +371,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
              }
              error={errors.payee?.message}
              placeholder="Select or enter payee"
              size="md"
            />
          </div>
@ -374,34 +379,45 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
            <Label htmlFor="currencyId" className="form-label" required>
              Currency
            </Label>
            <select
              id="currencyId"
              className="form-select form-select-sm"
              {...register("currencyId")}
            >
              <option value="">Select Currency</option>
-              {currencyLoading && <option>Loading...</option>}
+            <AppFormController
              name="currencyId"
              control={control}
              rules={{ required: "Currency is required" }}
              render={({ field }) => (
                <SelectField
                  label="" // Label already shown above
                  placeholder="Select Currency"
                  options={currencyData?.map((currency) => ({
                    id: currency.id,
                    name: `${currency.currencyName} (${currency.symbol})`,
                  })) ?? []}
                  value={field.value || ""}
                  onChange={field.onChange}
                  required
                  isLoading={currencyLoading}
                  noOptionsMessage={() =>
                    !currencyLoading && !currencyError && (!currencyData || currencyData.length === 0)
                      ? "No currency found"
                      : null
                  }
                  className="m-0 form-select-sm w-100"
                />
              )}
            />
              {!currencyLoading &&
                !currencyError &&
                currencyData?.map((currency) => (
                  <option key={currency.id} value={currency.id}>
                    {`${currency.currencyName} (${currency.symbol})`}
                  </option>
                ))}
            </select>
            {errors.currencyId && (
              <small className="danger-text">{errors.currencyId.message}</small>
            )}
          </div>
        </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>
+              <Label htmlFor="frequency" className="form-label mb-1" required>
                Frequency
              </Label>
              <HoverPopup
@ -414,51 +430,69 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                  </p>
                }
              >
-                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
+                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer mb-1"></i>
              </HoverPopup>
            </div>
-            <select
+            <AppFormController
-              id="frequency"
+              name="frequency"
-              className="form-select form-select-sm mt-1"
+              control={control}
-              {...register("frequency", { valueAsNumber: true })}
+              rules={{ required: "Frequency is required" }}
-            >
+              render={({ field }) => (
-              <option value="">Select Frequency</option>
+                <SelectField
-              {Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => (
+                  label="" // Label shown above
-                <option key={key} value={key}>
+                  placeholder="Select Frequency"
-                  {label}
+                  options={Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => ({
-                </option>
+                    id: key,
-              ))}
+                    name: label,
-            </select>
+                  }))}
                  value={field.value || ""}
                  onChange={field.onChange}
                  required
                  className="m-0 mt-1"
                />
              )}
            />
            {errors.frequency && (
              <small className="danger-text">{errors.frequency.message}</small>
            )}
          </div>
          <div className="col-md-6">
            <Label htmlFor="statusId" className="form-label" required>
              Status
            </Label>
-            <select
+
-              id="statusId"
+            <AppFormController
-              className="form-select form-select-sm"
+              name="statusId"
-              {...register("statusId")}
+              control={control}
-            >
+              rules={{ required: "Status is required" }}
-              <option value="">Select Status</option>
+              render={({ field }) => (
-              {statusLoading && <option>Loading...</option>}
+                <SelectField
-              {!statusLoading &&
+                  label="" // Label already shown above
-                !statusError &&
+                  placeholder="Select Status"
-                statusData?.map((status) => (
+                  options={statusData ?? []}
-                  <option key={status.id} value={status.id}>
+                  value={field.value || ""}
-                    {status.name}
+                  onChange={field.onChange}
-                  </option>
+                  required
-                ))}
+                  isLoading={statusLoading}
-            </select>
+                  noOptionsMessage={() =>
                    !statusLoading && !statusError && (!statusData || statusData.length === 0)
                      ? "No status found"
                      : null
                  }
                  className="m-0 form-select-sm w-100"
                />
              )}
            />
            {errors.statusId && (
              <small className="danger-text">{errors.statusId.message}</small>
            )}
          </div>
        </div>
        {/* Payment Buffer Days and End Date */}
@ -476,10 +510,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 +523,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 +545,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 +561,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
              control={control}
              minDate={StrikeDate}
              className="w-100 mt-1"
              size="md"
            />
            {errors.endDate && (
@ -561,14 +597,14 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
        </div>
        {/* Description  */}
-        <div className="row my-2 text-start">
+        <div className="row my-4 text-start">
          <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>
@ -592,8 +628,8 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
            {createPending || isPending
              ? "Please wait...."
              : requestToEdit
-              ? "Update"
+                ? "Update"
-              : "Save as Draft"}
+                : "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?.currency?.symbol ? e.currency.symbol + " " : ""
+          }${e.amount.toLocaleString()}`
            }${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">
+          <div className="mx-2">
-           {Array.isArray(filteredData) && filteredData.length > 0 && (
+            {Array.isArray(filteredData) && filteredData.length > 0 && (
-            <table className="table border-top dataTable text-nowrap  align-middle">
+              <table className="table border-top dataTable text-nowrap align-middle">
-              <thead>
+                <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>
                  ))
                ) : (
                  <tr>
-                    <td
+                    {recurringExpenseColumns.map((col) => (
-                      colSpan={recurringExpenseColumns?.length + 1}
+                      <th key={col.key} className={`sorting ${col.align}`}>
-                      className="text-center border-0 py-8"
+                        {col.label}
-                    ></td>
+                      </th>
                    ))}
                    <th className="text-end">Action</th>
                  </tr>
-                )}
+                </thead>
-              </tbody>
+
-            </table>
+                <tbody>
-          )}
+                  {filteredData?.length > 0 ? (
-          {!filteredData ||
+                    filteredData?.map((recurringExpense) => (
-            filteredData.length === 0
+                      <tr
-           && (
+                        key={recurringExpense.id}
-              <div className="d-flex justify-content-center align-items-center h-64">
+                        className="align-middle"
-                {isError ? (<p>{error.message}</p>):(<p>No Recurring Expense Found</p>)}
+                        style={{ height: "40px" }}
-              </div>
+                      >
                        {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
+              <div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
-                type="button"
+                <button
-                className={`btn btn-sm ${showArchive ? "btn-secondary" : "btn-outline-secondary"}`}
+                  type="button"
-                onClick={() => setShowArchive(!showArchive)}
+                  className={`btn px-3 py-1 rounded-0 text-tiny ${!showArchive ? "btn-primary text-white" : ""
-              >
+                    }`}
-               <i className="bx bx-archive bx-sm me-1 mt-1"></i>  Archived
+                  onClick={() => setShowArchive(false)}
-              </button>
+                >
                  <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
@ -23,6 +23,8 @@ import {
  useServiceProject,
  useUpdateServiceProject,
 } from "../../hooks/useServiceProject";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 const ManageServiceProject = ({ serviceProjectId, onClose }) => {
  const {
@ -117,51 +119,54 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
        </div>
        <div className="row text-start">
          <div className="col-12 mb-2">
-            <Label htmlFor="name" required>
+            <Label htmlFor="clientId" required>
              Client
            </Label>
-            <div className="d-flex align-items-center gap-2">
+
-              <select
+            <div className="d-flex align-items-center gap-2 w-100">
-                className="select2 form-select form-select-sm flex-grow-1"
+              <div className="flex-grow-1" style={{ minWidth: "250px" }}>
-                aria-label="Default select example"
+                <AppFormController
-                {...register("clientId", {
+                  name="clientId"
-                  required: "Client is required",
+                  control={control}
-                  valueAsNumber: false,
+                  rules={{ required: "Client is required" }}
-                })}
+                  render={({ field }) => (
-              >
+                    <SelectField
-                {isLoading ? (
+                      label=""
-                  <option>Loading...</option>
+                      options={organization?.data ?? []}
-                ) : (
+                      placeholder="Select Client"
-                  <>
+                      required
-                    <option value="">Select Client</option>
+                      labelKey="name"
-                    {organization?.data?.map((org) => (
+                      valueKeyKey="id"
-                      <option key={org.id} value={org.id}>
+                      value={field.value}
-                        {org.name}
+                      onChange={field.onChange}
-                      </option>
+                      isLoading={isLoading}
-                    ))}
+                      className="m-0 w-100"
-                  </>
+                    />
-                )}
+                  )}
-              </select>
+                />
              </div>
              <i
-                className="bx bx-plus-circle bx-xs cursor-pointer text-primary"
+                className="bx bx-plus-circle bx-xs cursor-pointer text-primary "
                onClick={() => {
                  onClose();
-                  openOrgModal({ startStep: 2 });  // Step 4 = ManagOrg
+                  openOrgModal({ startStep: 2 });
                }}
              />
            </div>
            {errors?.clientId && (
-              <span className="danger-text">{errors.clientId.message}</span>
+              <small className="danger-text">{errors.clientId.message}</small>
            )}
          </div>
-          <div className="col-12 mb-2">
+          <div className="col-12 mb-4">
            <Label htmlFor="name" required>
              Project Name
            </Label>
            <input
              type="text"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("name")}
              placeholder="Enter Project Name.."
            />
@ -175,7 +180,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
            </Label>
            <input
              type="text"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("shortName")}
              placeholder="Enter Project Short Name.."
            />
@ -183,24 +188,38 @@ 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>
+            <Label htmlFor="statusId" required>
              Select Status
            </Label>
-            <select
+
-              className="form-select form-select-sm"
+            <AppFormController
-              {...register("statusId")}
+              name="statusId"
-            >
+              control={control}
-              <option>Select Service</option>
+              render={({ field }) => (
-              {PROJECT_STATUS?.map((status) => (
+                <SelectField
-                <option key={status.id} value={status.id}>{status.label}</option>
+                  label="" // label already above
-              ))}
+                  options={PROJECT_STATUS?.map((status) => ({
-            </select>
+                    id: status.id,
                    name: status.label,
                  }))}
                  placeholder="Select Status"
                  required
                  labelKey="name"
                  valueKey="id"
                  value={field.value}
                  onChange={field.onChange}
                  className="form-select w-100"
                />
              )}
            />
            {errors?.statusId && (
              <span className="danger-text">{errors.statusId.message}</span>
            )}
          </div>
-          <div className="col-12  mb-2">
+
          <div className="col-12 mb-4">
            <SelectMultiple
              options={data?.data}
              isLoading={isLoading}
@ -214,18 +233,15 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
            )}
          </div>
-          <div className="col-12 col-md-6 mb-2">
+          <div className="col-12 col-md-6 mb-4">
            <Label htmlFor="name" required>
              Contact Person
            </Label>
            <input
              type="text"
-              className="form-control form-control-sm"
+              className="form-control "
              {...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>
@ -237,7 +253,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
            </Label>
            <input
              type="text"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("contactEmail")}
              placeholder="Enter Employee Email.."
            />
@ -245,14 +261,14 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
              <span className="danger-text">{errors.contactEmail.message}</span>
            )}
          </div>
-          <div className="col-12 col-md-6 mb-2">
+          <div className="col-12 col-md-6 mb-4">
            <Label htmlFor="name" required>
              Contact Number
            </Label>
            <input
              type="text"
              maxLength={10}
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("contactPhone")}
              placeholder="Enter Employee Contact.."
              onInput={(e) => {
@ -271,6 +287,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
              name="assignedDate"
              className="w-100"
              control={control}
              size="md"
            />
          </div>
          <div className="col-12 col-md-12 mb-2">
@ -300,7 +317,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
            )}
          </div>
        </div>
-        <div className="d-flex justify-content-end gap-4">
+        <div className="d-flex justify-content-end gap-2 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">
+                        <div className="d-flex justify-content-center align-items-center gap-2">
-                          <button
+                          {/* View Icon */}
-                            type="button"
+                          {/* <i
-                            className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
+                            className="bx bx-show text-primary cursor-pointer"
-                            data-bs-toggle="dropdown"
+                            onClick={() =>
-                          >
+                              setViewRequest({ branchId: branch.id, view: true })
-                            <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
+                            }
-                          </button>
+                          ></i> */}
-                          <ul className="dropdown-menu dropdown-menu-end w-auto">
+
-                            {!showInactive ? (
+                          <div className="dropdown z-2">
-                              <>
+                            <button
-                                <li
+                              type="button"
-                                  onClick={() =>
+                              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
-                                    setManageState({
+                              data-bs-toggle="dropdown"
-                                      IsOpen: true,
+                            >
-                                      branchId: branch.id,
+                              <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
-                                    })
+                            </button>
-                                  }
+                            <ul className="dropdown-menu dropdown-menu-end w-auto">
-                                >
+                              {!showInactive ? (
-                                  <a className="dropdown-item px-2 cursor-pointer py-1">
+                                <>
-                                    <i className="bx bx-edit text-primary bx-xs me-2"></i>
+                                  <li
-                                    Modify
+                                    onClick={() =>
-                                  </a>
+                                      setManageState({
-                                </li>
+                                        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>
+                                    <i className="bx bx-undo text-danger me-2"></i>
-                                    Delete
+                                    Restore
                                  </a>
                                </li>
-                              </>
+                              )}
-                            ) : (
+                            </ul>
-                              <li
+                          </div>
                                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>
                        </div>
                      </td>
                    </tr>
@ -237,14 +268,17 @@ const ServiceBranch = () => {
                  !isError &&
                  (!data?.data || data.data.length === 0) && (
                    <tr>
-                      <td
+                      <td colSpan={columns.length + 1}>
-                        colSpan={columns.length + 1}
+                        <div
-                        className="text-center py-12"
+                          className="d-flex justify-content-center align-items-center"
-                      >
+                          style={{ height: "150px" }}
-                        No Branch Found
+                        >
                          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/ChangeStatus.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/ChangeStatus.jsx
@ -68,7 +68,7 @@ const ChangeStatus = ({ statusId, projectId, jobId, popUpId }) => {
                options={data ?? []}
                placeholder="Choose a Status"
                required
-                labelKeyKey="name"
+                labelKey="name"
                valueKeyKey="id"
                value={field.value}
                onChange={field.onChange}
--- 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 React, { useMemo } from "react";
 import Avatar from "../../common/Avatar";
 import { formatUTCToLocalTime } from "../../../utils/dateUtils";
 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="card-body p-3">
-        <div className="list-group">
+        <Timeline items={timelineData} transparent={true} />
          {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>
    </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
@ -221,8 +236,8 @@ const ManageJob = ({ Job }) => {
                    options={data ?? []}
                    placeholder="Choose a Status"
                    required
-                    labelKeyKey="name"
+                    labelKey="name"
-                    valueKeyKey="id"
+                    valueKey="id"
                    value={field.value}
                    onChange={field.onChange}
                    isLoading={isLoading}
@ -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/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")
+    .min(1, "Contact name is required"),
    .regex(/^[A-Za-z\s]+$/, "Contact name can contain only letters"),
  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/ContactInfro.jsx
+++ b/src/components/Tenant/ContactInfro.jsx
@ -32,7 +32,7 @@ const ContactInfro = ({ onNext }) => {
        <input
          id="firstName"
          type="text"
-          className={`form-control form-control-sm`}
+          className={`form-control `}
          {...register("firstName")}
        />
        {errors.firstName && (
@ -46,7 +46,7 @@ const ContactInfro = ({ onNext }) => {
        <input
          id="lastName"
          type="text"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
          {...register("lastName")}
        />
        {errors.lastName && (
@ -60,7 +60,7 @@ const ContactInfro = ({ onNext }) => {
        <input
          id="email"
          type="email"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
          {...register("email")}
        />
        {errors.email && (
@ -74,7 +74,7 @@ const ContactInfro = ({ onNext }) => {
        <input
          id="contactNumber"
          type="text"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
          {...register("contactNumber")}
          inputMode="tel"
          placeholder="+91 9876543210"
--- a/src/components/Tenant/EditProfile.jsx
+++ b/src/components/Tenant/EditProfile.jsx
@ -7,6 +7,8 @@ import { LogoUpload } from './LogoUpload';
 import showToast from '../../services/toastService';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { EditTenant } from './TenantSchema';
 import { AppFormController } from '../../hooks/appHooks/useAppForm';
 import SelectField from '../common/Forms/SelectField';
 const EditProfile = ({ TenantId, onClose }) => {
  const { data, isLoading, isError, error } = useTenantDetails(TenantId);
@ -37,7 +39,7 @@ const EditProfile = ({ TenantId, onClose }) => {
    }
  });
-  const { register, reset, handleSubmit, formState: { errors } } = methods;
+  const { register, control, reset, handleSubmit, formState: { errors } } = methods;
  const onSubmit = (formData) => {
    const tenantPayload = { ...formData, contactName: `${formData.firstName} ${formData.lastName}`, id: data.id, }
@ -74,93 +76,122 @@ const EditProfile = ({ TenantId, onClose }) => {
      <form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
        <h5>Edit Tenant</h5>
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6 mt-n2 text-start">
          <Label htmlFor="firstName" required>First Name</Label>
-          <input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
+          <input id="firstName" type="text" className="form-control " {...register("firstName")} inputMode='text' />
          {errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
        </div>
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6 mt-n2 text-start">
          <Label htmlFor="lastName" required>Last Name</Label>
-          <input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
+          <input id="lastName" type="text" className="form-control " {...register("lastName")} />
          {errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
        </div>
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6  text-start">
          <Label htmlFor="contactNumber" required>Contact Number</Label>
-          <input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} inputMode="tel"
+          <input id="contactNumber" type="text" className="form-control " {...register("contactNumber")} inputMode="tel"
            placeholder="+91 9876543210" />
          {errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
        </div>
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6  text-start">
          <Label htmlFor="domainName" >Domain Name</Label>
-          <input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
+          <input id="domainName" type="text" className="form-control " {...register("domainName")} />
          {errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
        </div>
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6  text-start">
          <Label htmlFor="taxId" >Tax ID</Label>
-          <input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
+          <input id="taxId" type="text" className="form-control " {...register("taxId")} />
          {errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
        </div>
-        <div className="col-sm-6 mt-1 text-start">
+        <div className="col-sm-6  text-start">
          <Label htmlFor="officeNumber" >Office Number</Label>
-          <input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
+          <input id="officeNumber" type="text" className="form-control " {...register("officeNumber")} />
          {errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
        </div>
        <div className="col-sm-6 mt-1 text-start">
          <Label htmlFor="industryId" required>Industry</Label>
          <select className="form-select form-select-sm" {...register("industryId")}>
            {industryLoading ? <option value="">Loading...</option> :
              Industries?.map((indu) => (
                <option key={indu.id} value={indu.id}>{indu.name}</option>
              ))
            }
          </select>
          {errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
        </div>
        <div className="col-sm-6 mt-1 text-start">
          <Label htmlFor="reference">Reference</Label>
          <select className="form-select form-select-sm" {...register("reference")}>
            {reference.map((org) => (
              <option key={org.val} value={org.val}>{org.name}</option>
            ))}
          </select>
          {errors.reference && <div className="danger-text">{errors.reference.message}</div>}
        </div>
        <div className="col-sm-6 text-start">
-          <Label htmlFor="organizationSize" required>
+          <AppFormController
-            Organization Size
+            name="industryId"
-          </Label>
+            control={control}
            render={({ field }) => (
              <SelectField
                label="Industry"
                options={Industries ?? []}
                placeholder={industryLoading ? "Loading..." : "Choose an Industry"}
                required
                labelKey="name"
                valueKey="id"
                value={field.value}
                onChange={field.onChange}
                isLoading={industryLoading}
                className="m-0 w-100"
              />
            )}
          />
-          <select
+          {errors.industryId && (
-            className="form-select form-select-sm"
+            <small className="danger-text">{errors.industryId.message}</small>
            {...register("organizationSize")}
          >
            {orgSize.map((org) => (
              <option key={org.val} value={org.val}>
                {org.name}
              </option>
            ))}
          </select>
          {errors.organizationSize && (
            <div className="danger-text">{errors.organizationSize.message}</div>
          )}
        </div>
-        <div className="col-12 mt-1 text-start">
+
        <div className="col-sm-6 text-start">
          <AppFormController
            name="reference"
            control={control}
            render={({ field }) => (
              <SelectField
                label="Reference"
                placeholder="Select Reference"
                options={reference ?? []}
                labelKey="name"
                valueKey="val"
                value={field.value}
                onChange={field.onChange}
                className="shadow-none border py-1 px-2 small m-0"                
              />
            )}
          />
          {errors.reference && (
            <small className="danger-text">{errors.reference.message}</small>
          )}
        </div>
        <div className="col-sm-6 text-start">
          <AppFormController
            name="organizationSize"
            control={control}
            render={({ field }) => (
              <SelectField
                label="Organization Size"
                placeholder="Select Organization Size"
                options={orgSize ?? []}
                labelKey="name"
                valueKey="val"
                value={field.value}
                onChange={field.onChange}
                className="shadow-none border py-1 px-2 small m-0"
                required
              />
            )}
          />
          {errors.organizationSize && (
            <small className="danger-text">{errors.organizationSize.message}</small>
          )}
        </div>
        <div className="col-12  text-start">
          <Label htmlFor="billingAddress" required>Billing Address</Label>
          <textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
          {errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
        </div>
-        <div className="col-12 mt-1 text-start">
+        <div className="col-12  text-start">
          <Label htmlFor="description">Description</Label>
          <textarea id="description" className="form-control" {...register("description")} rows={2} />
          {errors.description && <div className="danger-text">{errors.description.message}</div>}
--- a/src/components/Tenant/OrganizationInfo.jsx
+++ b/src/components/Tenant/OrganizationInfo.jsx
@ -8,6 +8,9 @@ import { orgSize, reference } from "../../utils/constants";
 import moment from "moment";
 import { useGlobalServices } from "../../hooks/masterHook/useMaster";
 import SelectMultiple from "../common/SelectMultiple";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 import { fill } from "pdf-lib";
 const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
  const { data, isError, isLoading: industryLoading } = useIndustries();
@ -53,21 +56,22 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
      // onSubmitTenant(data);
      // onNext();
      const tenantPayload = { ...data, onBoardingDate: moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
-      CreateTenant(tenantPayload);
+      // CreateTenant(tenantPayload);
      console.log(tenantPayload)
    }
  };
  useEffect(() => {
-  const logoImage = getValues("logoImage"); 
+    const logoImage = getValues("logoImage");
-  if (logoImage) {
+    if (logoImage) {
-    setLogoPreview(logoImage); 
+      setLogoPreview(logoImage);
-    setLogoName("Uploaded Logo"); 
+      setLogoName("Uploaded Logo");
-  }
+    }
-}, [getValues]);
+  }, [getValues]);
  return (
-    <div className="row g-2 text-start">
+    <div className="row g-6 text-start">
      <div className="col-sm-6">
        <Label htmlFor="organizationName" required>
          Organization Name
@ -75,7 +79,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
        <input
          id="organizationName"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
          {...register("organizationName")}
        />
        {errors.organizationName && (
@ -89,7 +93,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
        </Label>
        <input
          id="officeNumber"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
          {...register("officeNumber")}
        />
        {errors.officeNumber && (
@ -103,7 +107,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
        </Label>
        <input
          id="domainName"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
          {...register("domainName")}
        />
        {errors.domainName && (
@ -117,7 +121,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
        </Label>
        <input
          id="taxId"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
          {...register("taxId")}
        />
        {errors.taxId && (
@ -131,10 +135,11 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
        </Label>
        <DatePicker
          name="onBoardingDate"
          size="md"
          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">
@ -143,73 +148,79 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
        )}
      </div>
-      <div className="col-sm-6">
+      <div className="col-sm-6 mb-2 mb-md-4">
-        <Label htmlFor="organizationSize" required>
+        <AppFormController
-          Organization Size
+          name="organizationSize"
-        </Label>
+          control={control}
-
+          render={({ field }) => (
-        <select
+            <SelectField
-          id="organizationSize"
+              label="Organization Size"
-          className="form-select shadow-none border py-1 px-2"
+              placeholder="Select Organization Size"
-          style={{ fontSize: "0.875rem" }} // Bootstrap's small text size
+              options={orgSize ?? []}
-          {...register("organizationSize", { required: "Organization size is required" })}
+              labelKey="name"
-        >
+              valueKey="val"
-          {orgSize.map((org) => (
+              value={field.value}
-            <option key={org.val} value={org.val}>
+              onChange={field.onChange}
-              {org.name}
+              className="shadow-none border py-1 px-2 small m-0"
-            </option>
+              required
-          ))}
+            />
-        </select>
+          )}
-
+        />
        {errors.organizationSize && (
-          <div className="danger-text">{errors.organizationSize.message}</div>
+          <small className="danger-text">{errors.organizationSize.message}</small>
        )}
      </div>
-
+      <div className="col-sm-6 mt-n3">
-      <div className="col-sm-6">
+        <AppFormController
-        <Label htmlFor="industryId" required>
+          name="industryId"
-          Industry
+          control={control} // make sure `control` comes from useForm
-        </Label>
+          render={({ field }) => (
-        <select
+            <SelectField
-          id="industryId"
+              label="Industry"
-          className="form-select shadow-none border py-1 px-2 small"
+              placeholder={industryLoading ? "Loading..." : "Select Industry"}
-          {...register("industryId")}
+              options={data ?? []}
-        >
+              labelKey="name"
-          {industryLoading ? (
+              valueKeyKey="id"
-            <option value="">Loading...</option>
+              value={field.value}
-          ) : (
+              onChange={field.onChange}
-            data?.map((indu) => (
+              isLoading={industryLoading}
-              <option key={indu.id} value={indu.id}>
+              className="shadow-none border py-1 px-2 small"
-                {indu.name}
+              required
-              </option>
+            />
            ))
          )}
-        </select>
+        />
        {errors.industryId && (
          <div className="danger-text">{errors.industryId.message}</div>
        )}
      </div>
-      <div className="col-sm-6">
+      <div className="col-sm-6 mb-2 mb-md-4 mt-n3">
-        <Label htmlFor="reference" required>Reference</Label>
+        <AppFormController
-        <select
+          name="reference"
-          id="reference"
+          control={control}
-          className="form-select shadow-none border py-1 px-2 small"
+          render={({ field }) => (
-          {...register("reference")}
+            <SelectField
-        >
+              label="Reference"
-          {reference.map((org) => (
+              placeholder="Select Reference"
-            <option key={org.val} value={org.val}>
+              options={reference ?? []}
-              {org.name}
+              labelKey="name"
-            </option>
+              valueKey="val"
-          ))}
+              value={field.value}
-        </select>
+              onChange={field.onChange}
              className="shadow-none border py-1 px-2 small m-0"
              required
            />
          )}
        />
        {errors.reference && (
-          <div className="danger-text">{errors.reference.message}</div>
+          <small className="danger-text">{errors.reference.message}</small>
        )}
      </div>
-      <div className="col-sm-6">
+
      <div className="col-sm-6 mt-n3">
        <SelectMultiple
          name="serviceIds"
          label="Services"
@ -229,7 +240,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
        <textarea
          id="description"
          rows={3}
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
          {...register("description")}
        />
        {errors.description && (
--- a/src/components/Tenant/TenantForm.jsx
+++ b/src/components/Tenant/TenantForm.jsx
@ -43,6 +43,7 @@ const TenantForm = () => {
  const tenantForm = useForm({
    resolver: zodResolver(newTenantSchema),
    defaultValues: tenantDefaultValues,
    mode: "onChange",
  });
  const subscriptionForm = useForm({
--- a/src/components/Tenant/TenantsList.jsx
+++ b/src/components/Tenant/TenantsList.jsx
@ -114,9 +114,8 @@ const TenantsList = ({
      align: "text-center",
      getValue: (t) => (
        <span
-          className={`badge ${
+          className={`badge ${getTenantStatus(t.tenantStatus?.id) || "secondary"
-            getTenantStatus(t.tenantStatus?.id) || "secondary"
+            }`}
          }`}
        >
          {t.tenantStatus?.name || "Unknown"}
        </span>
@ -151,13 +150,12 @@ const TenantsList = ({
            <tbody>
              {data?.data.length > 0 ? (
                data.data.map((tenant) => (
-                  <tr key={tenant.id}>
+                  <tr key={tenant.id} style={{ height: "50px" }}>
                    {TenantColumns.map((col) => (
                      <td
                        key={col.key}
-                        className={`d-table-cell px-3 py-2 align-middle ${
+                        className={`d-table-cell px-3 py-2 align-middle ${col.align ?? ""
-                          col.align ?? ""
+                          }`}
                        }`}
                      >
                        {col.customRender
                          ? col.customRender(tenant)
--- a/src/components/collections/AddPayment.jsx
+++ b/src/components/collections/AddPayment.jsx
@ -12,6 +12,8 @@ import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import Avatar from "../common/Avatar";
 import { PaymentHistorySkeleton } from "./CollectionSkeleton";
 import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 const AddPayment = ({ onClose }) => {
  const { addPayment } = useCollectionContext();
@ -60,7 +62,7 @@ const AddPayment = ({ onClose }) => {
              <Label required>TransanctionId</Label>
              <input
                type="text"
-                className="form-control form-control-sm"
+                className="form-control "
                {...register("transactionId")}
              />
              {errors.transactionId && (
@ -78,10 +80,10 @@ const AddPayment = ({ onClose }) => {
                minDate={
                  data?.clientSubmitedDate
                    ? new Date(
-                        new Date(data?.clientSubmitedDate).setDate(
+                      new Date(data?.clientSubmitedDate).setDate(
-                          new Date(data?.clientSubmitedDate).getDate() + 1
+                        new Date(data?.clientSubmitedDate).getDate() + 1
                        )
                      )
                    )
                    : null
                }
                maxDate={new Date()}
@ -93,33 +95,30 @@ const AddPayment = ({ onClose }) => {
              )}
            </div>
-            <div className="col-12 col-md-6  mb-2">
+            <div className="col-12 col-md-6 mb-2">
-              <Label
+              <Label htmlFor="paymentAdjustmentHeadId" className="form-label" required>
                htmlFor="paymentAdjustmentHeadId"
                className="form-label"
                required
              >
                Payment Adjustment Head
              </Label>
-              <select
+
-                className="form-select form-select-sm "
+              <AppFormController
-                {...register("paymentAdjustmentHeadId")}
+                name="paymentAdjustmentHeadId"
-              >
+                control={control}
-                {isPaymentTypeLoading ? (
+                rules={{ required: "Payment Adjustment Head is required" }}
-                  <option>Loading..</option>
+                render={({ field }) => (
-                ) : (
+                  <SelectField
-                  <>
+                    label="" // Label is already above
-                    <option value="">Select Payment Head</option>
+                    placeholder="Select Payment Head"
-                    {paymentTypes?.data
+                    options={paymentTypes?.data
-                      ?.sort((a, b) => a.name.localeCompare(b.name))
+                      ?.sort((a, b) => a.name.localeCompare(b.name)) ?? []}
-                      ?.map((type) => (
+                    value={field.value || ""}
-                        <option key={type.id} value={type.id}>
+                    onChange={field.onChange}
-                          {type.name}
+                    required
-                        </option>
+                    isLoading={isPaymentTypeLoading}
-                      ))}
+                    className="m-0 form-select-sm w-100"
-                  </>
+                  />
                )}
-              </select>
+              />
              {errors.paymentAdjustmentHeadId && (
                <small className="danger-text">
                  {errors.paymentAdjustmentHeadId.message}
@ -127,6 +126,7 @@ const AddPayment = ({ onClose }) => {
              )}
            </div>
            <div className="col-12 col-md-6  mb-2">
              <Label htmlFor="amount" className="form-label" required>
                Amount
@ -134,7 +134,7 @@ const AddPayment = ({ onClose }) => {
              <input
                type="number"
                id="amount"
-                className="form-control form-control-sm"
+                className="form-control "
                min="1"
                step="0.01"
                inputMode="decimal"
@ -150,7 +150,7 @@ const AddPayment = ({ onClose }) => {
              </Label>
              <textarea
                id="comment"
-                className="form-control form-control-sm"
+                className="form-control "
                {...register("comment")}
              />
              {errors.comment && (
--- a/src/components/collections/ManageCollection.jsx
+++ b/src/components/collections/ManageCollection.jsx
@ -19,6 +19,8 @@ import { formatDate } from "../../utils/dateUtils";
 import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import { useOrganizationsList } from "../../hooks/useOrganization";
 import { AppFormController } from "../../hooks/appHooks/useAppForm";
 import SelectField from "../common/Forms/SelectField";
 const ManageCollection = ({ collectionId, onClose }) => {
  const { data, isError, isLoading, error } = useCollection(collectionId);
@ -189,38 +191,35 @@ const ManageCollection = ({ collectionId, onClose }) => {
            </div>
            <div className="col-12 col-md-6 mb-2">
-              <Label htmlFor="name" required>
+              <Label htmlFor="billedToId" required>
                Bill To
              </Label>
-              <div className="d-flex align-items-center gap-2">
+
-                <select
+              <AppFormController
-                  className="select2 form-select form-select flex-grow-1"
+                name="billedToId"
-                  aria-label="Default select example"
+                control={control}
-                  {...register("billedToId", {
+                rules={{ required: "Client is required" }}
-                    required: "Client is required",
+                render={({ field }) => (
-                    valueAsNumber: false,
+                  <SelectField
-                  })}
+                    label="" // Label already shown above
-                >
+                    placeholder="Select Client"
-                  {isLoading ? (
+                    options={organization?.data ?? []}
-                    <option>Loading...</option>
+                    value={field.value || ""}
-                  ) : (
+                    onChange={field.onChange}
-                    <>
+                    required
-                      <option value="">Select Client</option>
+                    isLoading={isLoading}
-                      {organization?.data?.map((org) => (
+                    className="m-0 flex-grow-1"
-                        <option key={org.id} value={org.id}>
+                  />
-                          {org.name}
+                )}
-                        </option>
+              />
-                      ))}
+
-                    </>
+              {errors?.billedToId && (
                  )}
                </select>
              </div>
              {errors?.clientId && (
                <span className="danger-text">{errors.billedToId.message}</span>
              )}
            </div>
-            <div className="col-12 col-md-6 mb-2">
+
            <div className="col-12 col-md-6 mb-4">
              <Label required>Title</Label>
              <input
                type="text"
@ -231,7 +230,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                <small className="danger-text">{errors.title.message}</small>
              )}
            </div>
-            <div className="col-12 col-md-6  mb-2">
+            <div className="col-12 col-md-6 mb-2">
              <Label required>Invoice Number</Label>
              <input
                type="text"
@ -257,7 +256,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                </small>
              )}
            </div>
-            <div className="col-12 col-md-6  mb-2">
+            <div className="col-12 col-md-6 mb-4">
              <Label required>Invoice Date</Label>
              <DatePicker
                className="w-100"
@ -272,7 +271,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                </small>
              )}
            </div>
-            <div className="col-12 col-md-6  mb-2">
+            <div className="col-12 col-md-6 mb-4">
              <Label required>Expected Payment Date</Label>
              <DatePicker
                className="w-100"
@ -287,7 +286,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                </small>
              )}
            </div>
-            <div className="col-12 col-md-6  mb-2">
+            <div className="col-12 col-md-6 mb-2">
              <Label required>Submission Date (Client)</Label>
              <DatePicker
                className="w-100"
@ -341,7 +340,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                </small>
              )}
            </div>
-            <div className="col-12 my-2 text-start  mb-2">
+            <div className="col-12 my-2 text-start mb-2">
              <div className="col-md-12">
                <Label htmlFor="description" className="form-label" required>
                  Description
@ -360,7 +359,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
              </div>
            </div>
-            <div className="col-12">
+            <div className="col-12 my-3">
              <Label className="form-label" required>
                Upload Bill{" "}
              </Label>
--- a/src/components/common/Forms/SelectField.jsx
+++ b/src/components/common/Forms/SelectField.jsx
@ -12,6 +12,8 @@ const SelectField = ({
  labelKey = "name",
  isLoading = false,
 }) => {
  const [position, setPosition] = useState("bottom");
  const [open, setOpen] = useState(false);
  const dropdownRef = useRef(null);
@ -34,10 +36,26 @@ const SelectField = ({
    setOpen(false);
  };
-  const toggleDropdown = () => setOpen((prev) => !prev);
+  const toggleDropdown = () => {
    if (!open) {
      const rect = dropdownRef.current?.getBoundingClientRect();
      const viewportHeight = window.innerHeight;
      const spaceBelow = viewportHeight - rect.bottom;
      const dropdownHeight = 200; 
      if (spaceBelow < dropdownHeight) {
        setPosition("top"); // open upward
      } else {
        setPosition("bottom"); // open downward
      }
    }
    setOpen((prev) => !prev);
  };
  return (
-    <div className="mb-3 position-relative" ref={dropdownRef}>
+    <div className="position-relative mb-3" ref={dropdownRef}>
      {label && (
        <Label className="form-label" required={required}>
          {label}
@ -60,32 +78,45 @@ const SelectField = ({
      </button>
      {open && !isLoading && (
-        <ul
+        <div
-          className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
+          className="w-full px-1 shadow-md rounded p-1"
          style={{
            position: "absolute",
-            top: "100%",
+            top: position === "bottom" ? "100%" : "auto",
            bottom: position === "top" ? "100%" : "auto",
            left: 0,
            zIndex: 1050,
-            marginTop: "4px",
+
-            borderRadius: "0.375rem",
+            marginTop: position === "bottom" ? "2px" : "0",
-            overflow: "hidden",
+            marginBottom: position === "top" ? "2px" : "0",
          }}
        >
-          {options.map((option, i) => (
+          <ul
-            <li key={i}>
+            className="dropdown-menu w-100 show border-0 rounded px-1 py-1"
-              <button
+            style={{
-                type="button"
+              position: "static",
-                className={`dropdown-item ${
+
-                  option[valueKey] === value ? "active" : ""
+              maxHeight: "220px",
-                }`}
+              overflowY: "auto",
-                onClick={() => handleSelect(option)}
+              overflowX: "hidden",
-              >
+            }}
-                {option[labelKey]}
+            id="vertical-example"
-              </button>
+          >
-            </li>
+            {options.map((option, i) => (
-          ))}
+              <li key={i}>
-        </ul>
+                <button
                  type="button"
                  className={`dropdown-item rounded text-truncate ${
                    option[valueKey] === value ? "active" : ""
                  }`}
                  onClick={() => handleSelect(option)}
                >
                  {option[labelKey]}
                </button>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
--- 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) => {
+  const getDisplayName = (entity) =>
-    if (!entity) return "";
+    entity ? `${entity[labelKey] || ""}`.trim() : "";
    return `${entity[labelKey] || ""}`.trim();
  };
-  /** -----------------------------
+  /** ----------------------------- SELECTED OPTION ----------------------------- */
   * SELECTED OPTION (SINGLE)
   * ----------------------------- */
  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;
+    selectedList = isFullObject
-    else {
+      ? value
-      selectedList = options.filter((opt) => value.includes(opt[valueKey]));
+      : 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;
-  /** -----------------------------
+  /** ----------------------------- OUTSIDE CLICK ----------------------------- */
   * HANDLE 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
+  /** ----------------------------- MERGED OPTIONS ----------------------------- */
-  const [mergedOptions, setMergedOptions] = useState([]);
+  const [mergedOptions, setMergedOptions] = useState(options);
  useEffect(() => {
    let finalList = [...options];
-    if (!isMultiple && value && !isFullObject) {
+    if (!isMultiple && value && !isFullObject && typeof value === "object") {
-      // already selected option inside options?
+      const exists = options.some((o) => o[valueKey] === value[valueKey]);
-      const exists = options.some((o) => o[valueKey] === value);
+      if (!exists) finalList.unshift(value);
      // if selected item not found, try to get from props (value) as fallback
      if (!exists && typeof value === "object") {
        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);
+    // Only update if different to avoid infinite loop
-  }, [options, value]);
+    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
+      onChange(isFullObject ? option : option[valueKey]);
-      if (isFullObject) onChange(option);
+      setOpen(false)
      else onChange(option[valueKey]);
    } else {
      // MULTIPLE SELECT
      let updated = [];
      const exists = selectedList.some((e) => e[valueKey] === option[valueKey]);
-
+      const updated = exists
-      if (exists) {
+        ? selectedList.filter((e) => e[valueKey] !== option[valueKey])
-        // remove
+        : [...selectedList, option];
-        updated = selectedList.filter((e) => e[valueKey] !== option[valueKey]);
+      onChange(isFullObject ? updated : updated.map((x) => x[valueKey]));
      } else {
        // add
        updated = [...selectedList, option];
      }
      if (isFullObject) onChange(updated);
      else onChange(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",
+            marginTop: "1px",
            borderRadius: "0.375rem",
            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 && (
+            {!isLoading &&
-            <li className="dropdown-item text-muted text-center">Loading...</li>
+              mergedOptions.map((option) => {
-          )}
+                const isActive = isMultiple
                  ? selectedList.some((x) => x[valueKey] === option[valueKey])
                  : selectedSingle &&
                    selectedSingle[valueKey] === option[valueKey];
-          {!isLoading && options.length === 0 && (
+                return (
-            <li className="dropdown-item text-muted text-center">
+                  <li key={option[valueKey]}>
-              No results found
+                    <button
-            </li>
+                      type="button"
-          )}
+                      className={`dropdown-item rounded ${
-
+                        isActive ? "active" : ""
-          {!isLoading &&
+                      }`}
-            options.map((option) => {
+                      onClick={() => handleSelect(option)}
-              const isActive = isMultiple
+                    >
-                ? selectedList.some((x) => x[valueKey] === option[valueKey])
+                      {getDisplayName(option)}
-                : selectedSingle &&
+                    </button>
-                  selectedSingle[valueKey] === option[valueKey];
+                  </li>
-
+                );
-              return (
+              })}
-                <li key={option[valueKey]}>
+          </div>
                  <button
                    type="button"
                    className={`dropdown-item ${isActive ? "active" : ""}`}
                    onClick={() => handleSelect(option)}
                  >
                    {getDisplayName(option)}
                  </button>
                </li>
              );
            })}
        </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 = () => {
+  const handleMouseEnter = () => Mode === "hover" && dispatch(openPopup(id));
-    if (Mode === "hover") dispatch(openPopup(id));
+  const handleMouseLeave = () => Mode === "hover" && dispatch(closePopup(id));
  };
  const handleMouseLeave = () => {
    if (Mode === "hover") dispatch(closePopup(id));
  };
  const handleClick = (e) => {
-    if (Mode === "click") {
+    if (Mode !== "click") return;
-      e.stopPropagation();
+    e.stopPropagation();
-      dispatch(togglePopup(id));
+    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();
+      const triggerRect = trigger.getBoundingClientRect();
      // reset styles first
      popup.style.left = "";
      popup.style.right = "";
      popup.style.transform = "";
      popup.style.top = "";
      const popupRect = popup.getBoundingClientRect();
      const parentRect = boundaryRect; // alias
-      // Convert trigger center to parent coordinates
+      let left;
      const triggerCenterX =
        triggerRect.left + triggerRect.width / 2 - parentRect.left;
-      // preferred left so popup center aligns to trigger center:
+      // AUTO ALIGN (smart)
-      const preferredLeft = triggerCenterX - popupRect.width / 2;
+      if (align === "auto") {
        const center =
          triggerRect.left +
          triggerRect.width / 2 -
          boundaryRect.left -
          popupRect.width / 2;
-      // Helpers to set styles in parent's coordinate system:
+        left = Math.max(
-      const setLeft = (leftPx) => {
+          0,
-        popup.style.left = `${leftPx}px`;
+          Math.min(center, boundaryRect.width - popupRect.width)
-        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;
      }
-      // align === "auto": try preferred centered position, but flip fully if overflow
+      // LEFT ALIGN
-      // clamp preferredLeft to boundaries so it doesn't render partially outside
+      else if (align === "left") {
-      const leftIfCentered = Math.max(
+        left = triggerRect.left - boundaryRect.left;
-        0,
+        if (left + popupRect.width > boundaryRect.width) {
-        Math.min(preferredLeft, parentRect.width - popupRect.width)
+          left = boundaryRect.width - popupRect.width; // clamp right
-      );
+        }
      // if centered fits, use it
      if (leftIfCentered === preferredLeft) {
        setLeft(leftIfCentered);
        return;
      }
-      // if centering would overflow right -> stick popup fully to left (left=0)
+      // RIGHT ALIGN
-      if (preferredLeft > parentRect.width - popupRect.width) {
+      else if (align === "right") {
-        // place popup so its right aligns to parent's right
+        left =
-        // i.e., left = parent width - popup width
+          triggerRect.left +
-        setLeft(parentRect.width - popupRect.width);
+          triggerRect.width -
-        return;
+          boundaryRect.left -
          popupRect.width;
        if (left < 0) left = 0; // clamp left
      }
-      // if centering would overflow left -> stick popup fully to left=0
+      popup.style.left = `${left}px`;
-      if (preferredLeft < 0) {
+      popup.style.top = `100%`;
        setLeft(0);
        return;
      }
      // fallback center
      setLeft(leftIfCentered);
    });
  }, [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}
+        ref={triggerRef}
-        className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
+        onMouseEnter={handleMouseEnter}
-        style={{
+        onMouseLeave={handleMouseLeave}
-          zIndex: 2000,
+        onClick={handleClick}
-          top: "100%",
+        style={{ cursor: "pointer", display: "inline-block" }}
          width: "max-content",
          minWidth: "120px",
        }}
        onClick={(e) => e.stopPropagation()}
      >
-        {title && <h6 className="fw-semibold mb-2">{title}</h6>}
+        {children}
        <div>{content}</div>
      </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 ${
+              className={`dropdown-item ${org === value ? "active" : ""
                  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/common/TagInput.jsx
+++ b/src/components/common/TagInput.jsx
@ -2,7 +2,7 @@ import { useFormContext, useWatch } from "react-hook-form";
 import React, { useEffect, useState } from "react";
 import Label from "./Label";
-const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [] }) => {
+const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [],size="sm" }) => {
  const { setValue, watch } = useFormContext();
  const tags = watch(name) || [];
  const [input, setInput] = useState("");
@ -70,7 +70,7 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = fals
      </Label>
      <div
-        className="form-control form-control-sm p-1"
+        className={`form-control form-control-sm-${size}`}
        style={{ minHeight: "33px", position: "relative" }}
      >
        <div className="d-flex flex-wrap align-items-center gap-1">
--- 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) {
+  if (!data?.data?.length && !isLoading) {
-  return (
+    return (
-    <div
+      <div
-      className="d-flex justify-content-center align-items-center text-muted"
+        className="d-flex justify-content-center align-items-center text-muted"
-      style={{ minHeight: "50vh" }}
+        style={{ minHeight: "50vh" }}
-    >
+      >
-      <span style={{ fontSize: "0.9rem" }}>
+        <span style={{ fontSize: "0.9rem" }}>
-        {selectedProject
+          {selectedProject
-          ? "No images match the selected filters."
+            ? "No images match the selected filters."
-          : "Please Select Project!"}
+            : "Please Select Project!"}
-      </span>
+        </span>
-    </div>
+      </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 || ""} ${
+          const userName = `${doc.uploadedBy?.firstName || ""} ${doc.uploadedBy?.lastName || ""
-            doc.uploadedBy?.lastName || ""
+            }`.trim();
          }`.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/CreateRole.jsx
+++ b/src/components/master/CreateRole.jsx
@ -228,7 +228,7 @@ const CreateRole = ({ modalType, onClose }) => {
      </div>
      {masterFeatures && (
-        <div className="col-12 text-end">
+        <div className="col-12 text-end mt-5">
           <button
            type="reset"
            className="btn btn-sm btn-label-secondary me-3"
--- a/src/components/master/CreateWorkCategory.jsx
+++ b/src/components/master/CreateWorkCategory.jsx
@ -90,7 +90,7 @@ const CreateWorkCategory = ({ onClose }) => {
          />
          {errors.name && <p className="text-danger">{errors.name.message}</p>}
        </div> 
-        <div className="col-12 col-md-12 text-start">
+        <div className="col-12 col-md-12 text-start my-3">
          <Label className="form-label" htmlFor="description" required>Description</Label>
        <textarea
          rows="3"
--- 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
@ -276,7 +276,7 @@ const EditMaster = ({ master, onClose }) => {
-      <div className="col-12 text-end mt-3">
+      <div className="col-12 text-end mt-5">
        <button
          type="button"
          className="btn btn-sm btn-label-secondary me-3"
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Kartik Sharma	3d90eebd44	Increasing the size of plannedwork.	2025-12-06 17:14:07 +05:30
Kartik Sharma	d5582400b0	Changes in EditActivity Modal.	2025-12-06 17:10:36 +05:30
pramod.mahajan	8b3ca8d57a	Merge pull request 'Adding_dropdown :- Adding custome dropdown across all the modal.' (#533 ) from Adding_dropdown into Purchase_Invoice_Management Reviewed-on: #533 merged	2025-12-06 11:30:46 +00:00
Kartik Sharma	7eb2274584	Resolving Error in EditActivitymodal.	2025-12-06 16:57:14 +05:30
Kartik Sharma	5a8a8c4676	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Adding_dropdown	2025-12-06 16:54:54 +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
pramod.mahajan	baa17ab0cf	fixed visile dropdown issue inside master page	2025-12-06 16:42:10 +05:30
Kartik Sharma	7de27cc335	Correction in Master Page.	2025-12-06 16:35:02 +05:30
Kartik Sharma	3c3468f8f9	Correction in EmpProfile.	2025-12-06 16:00:07 +05:30
Kartik Sharma	c4a46cbe80	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Adding_dropdown	2025-12-06 15:08:54 +05:30
Kartik Sharma	c83e7eb75f	Adding dropdown in Edit Task.	2025-12-06 15:07:18 +05:30
Kartik Sharma	72b533226a	Adding dropdown across all places.	2025-12-06 14:49:23 +05:30
Kartik Sharma	48ff718da4	Correction in directory managecontact.	2025-12-06 13:00:35 +05:30
Kartik Sharma	654e34ebfa	Adding Dropdown in all places.	2025-12-06 12:58:43 +05:30
pramod.mahajan	c7e72946ea	added mission hook	2025-12-06 11:58:09 +05:30
pramod.mahajan	19c8975e8f	added margin bottom for selectField	2025-12-06 11:30:32 +05:30
pramod.mahajan	1f64cf65f9	Merge branch 'Adding_dropdown' of https://git.marcoaiot.com/admin/marco.pms.web into Adding_dropdown	2025-12-06 11:12:35 +05:30
pramod.mahajan	29cebedfad	fixed selectfield ui	2025-12-06 11:12:25 +05:30
Kartik Sharma	a1680c709a	Adding dropdown in Daily task.	2025-12-06 10:22:24 +05:30
Kartik Sharma	0e75a3e1c9	Adding Dropdown in Employee.	2025-12-06 10:11:58 +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
Kartik Sharma	dbf4f5e9c8	Adding New dropdown in across all modules.	2025-12-05 17:57:08 +05:30
Kartik Sharma	7df9d47f07	Adding dropdown in directory.	2025-12-05 15:40:38 +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
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	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