Merge remote-tracking branch 'origin/Subscription_Plan' into Purchase_Invoice_Management

Link Project to detail page in Attendance Report Widget

package-lock.json

@@ -18,6 +18,7 @@
         "apexcharts": "^4.5.0",
         "axios": "^1.7.9",
         "axios-retry": "^4.5.0",
+        "crypto-js": "^4.2.0",
         "date-fns": "^4.1.0",
         "dotenv": "^16.4.7",
         "dotenv-webpack": "^8.1.0",
@@ -2414,6 +2415,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",

package.json

@@ -21,6 +21,7 @@
     "apexcharts": "^4.5.0",
     "axios": "^1.7.9",
     "axios-retry": "^4.5.0",
+    "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
     "dotenv": "^16.4.7",
     "dotenv-webpack": "^8.1.0",

src/components/Activities/AttendcesLogs.jsx

@@ -20,14 +20,21 @@ import { SpinnerLoader } from "../common/Loader";
 
 const usePagination = (data, itemsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
-  const maxPage = Math.ceil(data.length / itemsPerPage);
+  // const maxPage = Math.ceil(data.length / itemsPerPage);
+  const maxPage = Math.max(1, Math.ceil(data.length / itemsPerPage));
   const currentItems = useMemo(() => {
     const startIndex = (currentPage - 1) * itemsPerPage;
     const endIndex = startIndex + itemsPerPage;
     return data.slice(startIndex, endIndex);
   }, [data, currentPage, itemsPerPage]);
 
-  const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
+  // const paginate = useCallback((pageNumber) => setCurrentPage(pageNumber), []);
+
+  const paginate = useCallback((pageNumber) => {
+    // keep page within 1..maxPage
+    const p = Math.max(1, Math.min(pageNumber, maxPage));
+    setCurrentPage(p);
+  }, [maxPage]);
   const resetPage = useCallback(() => setCurrentPage(1), []);
 
   return {
@@ -36,6 +43,7 @@ const usePagination = (data, itemsPerPage) => {
     currentItems,
     paginate,
     resetPage,
+    setCurrentPage,
   };
 };
 
@@ -125,9 +133,16 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
     resetPage,
   } = usePagination(filteredSearchData, 20);
 
+  // useEffect(() => {
+  //   resetPage();
+  // }, [filteredSearchData]);
+
   useEffect(() => {
-    resetPage();
-  }, [filteredSearchData]);
+    if (currentPage > totalPages) {
+      paginate(totalPages || 1);
+    }
+    // NOTE: do NOT force reset to page 1 here — keep the same page if still valid
+  }, [filteredSearchData, totalPages, currentPage, paginate]);
 
   const handler = useCallback(
     (msg) => {
@@ -144,10 +159,9 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
             record.id === msg.response.id ? { ...record, ...msg.response } : record
           );
         });
-        resetPage();
       }
     },
-    [selectedProject, dateRange, resetPage]
+    [selectedProject, dateRange]
   );
 
   useEffect(() => {
@@ -214,7 +228,7 @@ const AttendanceLog = ({ handleModalData, searchTerm, organizationId }) => {
         {isLoading ? (
           <div
             className="d-flex justify-content-center align-items-center"
-           style={{ minHeight: "50vh" }}
+            style={{ minHeight: "50vh" }}
           >
             <SpinnerLoader />
           </div>

src/components/AdvancePayment/AdvancePaymentList.jsx

@@ -1,233 +1,108 @@
+import React from 'react'
+import Avatar from "../common/Avatar"; // <-- ADD THIS
+import { useExpenseAllTransactionsList } from '../../hooks/useExpense';
+import { useNavigate } from 'react-router-dom';
+import { formatFigure } from '../../utils/appUtils';
+import { SpinnerLoader } from '../common/Loader';
 
-import React, { useEffect, useMemo } from "react";
-import { useExpenseAllTransactionsList, useExpenseTransactions } from "../../hooks/useExpense";
-import Error from "../common/Error";
-import { formatUTCToLocalTime } from "../../utils/dateUtils";
-import Loader, { SpinnerLoader } from "../common/Loader";
-import { useForm, useFormContext } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { employee } from "../../data/masters";
-import { useAdvancePaymentContext } from "../../pages/AdvancePayment/AdvancePaymentPage";
-import { formatFigure } from "../../utils/appUtils";
+const AdvancePaymentList = ({ searchString }) => {
 
-const AdvancePaymentList = ({ employeeId, searchString }) => {
-  const { setBalance } = useAdvancePaymentContext();
-  const { data, isError, isLoading, error, isFetching } =
-    useExpenseTransactions(employeeId, { enabled: !!employeeId });
-  const records = Array.isArray(data) ? data : [];
+    const { data, isError, isLoading, error } =
+        useExpenseAllTransactionsList(searchString);
 
-  let currentBalance = 0;
-  const rowsWithBalance = records.map((r) => {
-    const isCredit = r.amount > 0;
-    const credit = isCredit ? r.amount : 0;
-    const debit = !isCredit ? Math.abs(r.amount) : 0;
-    currentBalance += credit - debit;
-    return {
-      id: r.id,
-      description: r.title || "-",
-      projectName: r.project?.name || "-",
-      createdAt: r.createdAt,
-      credit,
-      debit,
-      financeUId: r.financeUId,
-      balance: currentBalance,
-    };
-  });
+    const rows = data || [];
+    const navigate = useNavigate();
 
-  useEffect(() => {
-    if (!employeeId) {
-      setBalance(null);
-      return;
+    const columns = [
+        {
+            key: "employee",
+            label: "Employee Name",
+            align: "text-start",
+            customRender: (r) => (
+                <div className="d-flex align-items-center gap-2" onClick={() => navigate(`/advance-payment/${r.id}`)}
+                    style={{ cursor: "pointer" }}>
+                    <Avatar firstName={r.firstName} lastName={r.lastName} />
+
+                    <span className="fw-medium">
+                        {r.firstName} {r.lastName}
+                    </span>
+                </div>
+            ),
+        },
+        {
+            key: "jobRoleName",
+            label: "Job Role",
+            align: "text-start",
+            customRender: (r) => (
+                <span className="fw-semibold">
+                    {r.jobRoleName}
+                </span>
+            ),
+        },
+        {
+            key: "balanceAmount",
+            label: "Balance (₹)",
+            align: "text-end",
+            customRender: (r) => (
+                <span className="fw-semibold fs-6">
+                    {formatFigure(r.balanceAmount, {
+                        // type: "currency",
+                        currency: "INR",
+                    })}
+                </span>
+            ),
+        },
+    ];
+
+    if (isLoading) {
+        return (
+            <div className="d-flex justify-content-center align-items-center py-4" style={{ height: "300px" }}>
+                <SpinnerLoader />
+            </div>
+        );
     }
 
-    if (rowsWithBalance.length > 0) {
-      setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance);
-    } else {
-      setBalance(0);
-    }
-  }, [employeeId, data, setBalance]);
+    if (isError) return <p className="text-center py-4 text-danger">{error.message}</p>;
 
-  if (!employeeId) {
     return (
-      <div
-        className="d-flex justify-content-center align-items-center"
-        style={{ height: "200px" }}
-      >
-        <p className="text-muted m-0">Please select an employee</p>
-      </div>
-    );
-  }
+        <div className="card-datatable" id="payment-request-table">
+            <div className="mx-2">
+                <table className="table border-top dataTable text-nowrap align-middle">
+                    <thead>
+                        <tr>
+                            {columns.map((col) => (
+                                <th key={col.key} className={`sorting ${col.align}`}>
+                                    {col.label}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
 
-  if (isLoading || isFetching) {
-    return (
-      <div
-        className="d-flex justify-content-center align-items-center"
-        style={{ height: "200px" }}
-      >
-        <SpinnerLoader />
-      </div>
-    );
-  }
-
-  if (isError) {
-    return (
-      <div className="text-center py-3">
-        {error?.status === 404
-          ? "No advance payment transactions found."
-          : <Error error={error} />}
-      </div>
-    );
-  }
-  const columns = [
-    {
-      key: "date",
-      label: (
-        <>
-          Date
-        </>
-      ),
-      align: "text-start",
-    },
-    { key: "description", label: "Description", align: "text-start" },
-
-    {
-      key: "credit",
-      label: (
-        <>
-          Credit <i className="bx bx-rupee text-success"></i>
-        </>
-      ),
-      align: "text-end",
-    },
-    {
-      key: "debit",
-      label: (
-        <>
-          Debit <i className="bx bx-rupee text-danger"></i>
-        </>
-      ),
-      align: "text-end",
-    },
-
-    {
-      key: "balance",
-      label: (
-        <>
-          Balance <i className="bi bi-currency-rupee text-primary"></i>
-        </>
-      ),
-      align: "text-end fw-bold",
-    },
-  ];
-
-  // Handle empty records
-  if (rowsWithBalance.length === 0) {
-    return (
-      <div className="text-center text-muted py-3">
-        No advance payment records found.
-      </div>
-    );
-  }
-  const DecideCreditOrDebit = ({ financeUId }) => {
-    if (!financeUId) return null;
-
-    const prefix = financeUId?.substring(0, 2).toUpperCase();
-
-    if (prefix === "PR") return <span className="text-success">+</span>;
-    if (prefix === "EX") return <span className="text-danger">-</span>;
-
-    return null;
-  };
-
-  return (
-    <div className="table-responsive">
-      <table className="table align-middle">
-        <thead className="table_header_border">
-          <tr>
-            {columns.map((col) => (
-              <th key={col.key} className={col.align}>
-                {col.label}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {Array.isArray(data) && data.length > 0 ? (
-            data.map((row) => (
-              <tr key={row.id}>
-                {columns.map((col) => (
-                  <td key={col.key} className={`${col.align} p-2`}>
-                    {col.key === "credit" ? (
-                      row.amount > 0 ? (
-                        <span>{row.amount.toLocaleString("en-IN")}</span>
-                      ) : (
-                        "-"
-                      )
-                    ) : col.key === "debit" ? (
-                      row.amount < 0 ? (
-                        <span>
-                          {Math.abs(row.amount).toLocaleString("en-IN")}
-                        </span>
-                      ) : (
-                        "-"
-                      )
-                    ) : col.key === "balance" ? (
-                      <div className="d-flex align-items-center justify-content-end">
-                        {/* <DecideCreditOrDebit financeUId={row?.financeUId} /> */}
-                        <span className="mx-2">
-                          {formatFigure(row.currentBalance)}
-                        </span>
-                      </div>
-                    ) : col.key === "date" ? (
-                      <small className="text-muted px-1">
-                        {formatUTCToLocalTime(row.paidAt)}
-                      </small>
-                    ) : (
-                      <div className="d-flex flex-column text-start gap-1 py-1">
-                        <small className="fw-semibold text-dark">
-                          {row.project?.name || "-"}
-                        </small>
-                        <small>{row.title || "-"}</small>
-                      </div>
-                    )}
-                  </td>
-                ))}
-              </tr>
-            ))
-          ) : (
-            <tr>
-              <td
-                colSpan={columns.length}
-                className="text-center text-muted py-3"
-              >
-                No advance payment records found.
-              </td>
-            </tr>
-          )}
-        </tbody>
-
-        <tfoot className=" fw-bold">
-          <tr className="tr-group text-dark py-2">
-            <td className="text-start">
-              {" "}
-              <div className="d-flex align-items-center px-1 py-2">
-                Final Balance
-              </div>
-            </td>
-            <td className="text-end" colSpan="4">
-              <div className="d-flex align-items-center justify-content-end px-1  py-2">
-                {currentBalance.toLocaleString("en-IN", {
-                  style: "currency",
-                  currency: "INR",
-                })}
-              </div>
-            </td>
-          </tr>
-        </tfoot>
-      </table>
-    </div>
-  );
-};
+                    <tbody>
+                        {rows.length > 0 ? (
+                            rows.map((row) => (
+                                <tr key={row.id} className="align-middle" style={{ height: "50px" }}>
+                                    {columns.map((col) => (
+                                        <td key={col.key} className={`d-table-cell ${col.align} py-3`}>
+                                            {col.customRender
+                                                ? col.customRender(row)
+                                                : col.getValue(row)}
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))
+                        ) : (
+                            <tr>
+                                <td colSpan={columns.length} className="text-center border-0 py-3">
+                                    No Employees Found
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}
 
 export default AdvancePaymentList;

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;

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;

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;

src/components/Charts/HorizontalBarChart.jsx

@@ -42,7 +42,12 @@ const HorizontalBarChart = ({
     categories.length === seriesData.length;
 
   if (!hasValidData) {
-    return <div className="text-center text-gray-500">No data to display</div>;
+    return <div
+      className="d-flex justify-content-center align-items-center text-muted"
+      style={{ height: "300px" }}
+    >
+      No data found
+    </div>
   }
   // Combine seriesData and categories, then sort in descending order
   const combined = seriesData.map((value, index) => ({

src/components/DailyProgressRport/TaskReportFilterChips.jsx

@@ -0,0 +1,95 @@
+import React, { useMemo } from "react";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+
+const TaskReportFilterChips = ({ filter, filterData, removeFilterChip, clearFilter }) => {
+  const data = filterData?.data || filterData || {};
+
+  const filterChips = useMemo(() => {
+    const chips = [];
+
+    const addGroup = (ids, list, label, key) => {
+      if (!ids || ids.length === 0) return;
+
+      const items = ids.map((id) => ({
+        id,
+        name: list?.find((i) => i.id === id)?.name || id,
+      }));
+
+      chips.push({ key, label, items });
+    };
+
+    // Building
+    addGroup(filter?.buildingIds, data?.buildings, "Building", "buildingIds");
+
+    // Floor
+    addGroup(filter?.floorIds, data?.floors, "Floor", "floorIds");
+
+    // Activities
+    addGroup(filter?.activityIds, data?.activities, "Activity", "activityIds");
+
+    // Date Range Chips
+    if (filter?.dateFrom || filter?.dateTo) {
+      chips.push({
+        key: "date",
+        label: "Date Range",
+        items: [
+          {
+            id: "date-range",
+            name: `${filter?.dateFrom ? formatUTCToLocalTime(filter.dateFrom) : ""} 
+                   ${filter?.dateTo ? " to " + formatUTCToLocalTime(filter.dateTo) : ""}`,
+          },
+        ],
+      });
+    }
+
+    return chips;
+  }, [filter, filterData]);
+
+  if (!filterChips.length) return null;
+
+  return (
+    <div className="d-flex flex-wrap align-items-center gap-2 mt-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>
+
+              {/* If date chip → remove whole date range */}
+              {chipGroup.key === "date" ? (
+                <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={() => clearFilter()}
+                />
+              ) : (
+                <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 TaskReportFilterChips;

src/components/DailyProgressRport/TaskReportFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
 import { useCurrentService } from "../../hooks/useProjects";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { FormProvider, useForm } from "react-hook-form";
@@ -11,8 +11,9 @@ import { DateRangePicker1 } from "../common/DateRangePicker";
 import SelectMultiple from "../common/SelectMultiple";
 import { localToUtc } from "../../utils/appUtils";
 import { useTaskFilter } from "../../hooks/useTasks";
+import { set } from "date-fns";
 
-const TaskReportFilterPanel = ({ handleFilter }) => {
+const TaskReportFilterPanel = forwardRef(({ handleFilter, setFilterdata, clearFilter }, ref) => {
   const [resetKey, setResetKey] = useState(0);
   const selectedProject = useSelectedProject();
   const selectedService = useCurrentService();
@@ -23,10 +24,42 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
     defaultValues: TaskReportDefaultValue,
   });
 
+  const dynamicDefaultFilter = useMemo(() => {
+    return {
+      ...TaskReportDefaultValue,
+      buildingIds: TaskReportDefaultValue.buildingIds || [],
+      floorIds: TaskReportDefaultValue.floorIds || [],
+      activityIds: TaskReportDefaultValue.activityIds || [],
+      dateFrom: TaskReportDefaultValue.dateFrom,
+      dateTo: TaskReportDefaultValue.dateTo,
+    };
+  }, [selectedProject]);
+
+  useImperativeHandle(ref, () => ({
+    resetFieldValue: (name, value) => {
+      // Reset specific field
+      if (value !== undefined) {
+        setValue(name, value);
+      } else {
+        // Fix: Use TaskReportDefaultValue or get current values before setting new ones
+        // reset({ ...methods.getValues(), [name]: TaskReportDefaultValue[name] }); // Updated to use TaskReportDefaultValue
+        setValue(name, TaskReportDefaultValue[name]);
+      }
+    },
+    getValues: methods.getValues,
+    onClear: onClear, // 💡 EXPOSE THE ONCLEAR FUNCTION
+  }));
+
+  useEffect(() => {
+    if (data && setFilterdata) {
+      setFilterdata(data);
+    }
+  }, [data, setFilterdata]);
   const {
     register,
     reset,
     handleSubmit,
+    setValue,
     formState: { errors },
   } = methods;
   const closePanel = () => {
@@ -52,7 +85,7 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
         <div className="mb-3 w-100">
           <label className="fw-semibold">Choose Date Range:</label>
           <DateRangePicker1
-          className="w-100"
+            className="w-100"
             placeholder="DD-MM-YYYY To DD-MM-YYYY"
             startField="dateFrom"
             endField="dateTo"
@@ -105,6 +138,6 @@ const TaskReportFilterPanel = ({ handleFilter }) => {
       </form>
     </FormProvider>
   );
-};
+});
 
 export default TaskReportFilterPanel;

src/components/DailyProgressRport/TaskReportList.jsx

@@ -17,8 +17,9 @@ import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import Pagination from "../common/Pagination";
 import { TaskReportListSkeleton } from "./TaskRepprtListSkeleton";
 import HoverPopup from "../common/HoverPopup";
+import TaskReportFilterChips from "./TaskReportFilterChips";
 
-const TaskReportList = () => {
+const TaskReportList = ({ filter, filterData, removeFilterChip, clearFilter }) => {
   const [currentPage, setCurrentPage] = useState(1);
   const [filters, setFilters] = useState({
     selectedBuilding: "",
@@ -29,7 +30,7 @@ const TaskReportList = () => {
   const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK);
   const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK);
 
-  const { service, openModal, closeModal, filter } = useDailyProgrssContext();
+  const { service, openModal, closeModal, filter: contextFilter } = useDailyProgrssContext();
   const selectedProject = useSelectedProject();
   const { projectNames } = useProjectName();
 
@@ -37,7 +38,7 @@ const TaskReportList = () => {
     selectedProject,
     ITEMS_PER_PAGE,
     currentPage,
-    service, filter
+    service, contextFilter
   );
 
   const ProgrssReportColumn = [
@@ -147,13 +148,13 @@ const TaskReportList = () => {
       data-bs-placement="left"
       data-bs-html="true"
       data-bs-content={`
-        <div class="border border-secondary rounded custom-popover p-2 px-3">
+        <div className="border border-secondary rounded custom-popover p-2 px-3">
           ${task.teamMembers
           .map(
             (m) => `
-            <div class="d-flex align-items-center gap-2 mb-2">
-              <div class="avatar avatar-xs">
-                <span class="avatar-initial rounded-circle bg-label-primary">
+            <div className="d-flex align-items-center gap-2 mb-2">
+              <div className="avatar avatar-xs">
+                <span className="avatar-initial rounded-circle bg-label-primary">
                   ${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
               }
                 </span>
@@ -193,124 +194,135 @@ const TaskReportList = () => {
   if (isError) return <div>Loading....</div>;
   return (
     <div>
-      <div className="mt-2 table-responsive text-nowrap">
-        <table className="table">
-          <thead>
-            <tr>
-              <th className="text-start">Activity</th>
-              <th>
-                <span>
-                  Total Pending{" "}
-                  <HoverPopup
-                    id="total_pending_task"
-                    title="Total Pending Task"
-                    content={
-                      <div className="text-wrap" style={{ maxWidth: "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={
-                      <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>
-            </tr>
-          </thead>
-          <tbody>
-            {groupedTasks.length === 0 && (
+      <div className="main-content">
+        <div className="col-12 mb-2 mt-2 px-4">
+          <TaskReportFilterChips
+            filter={filter}
+            filterData={filterData}
+            removeFilterChip={removeFilterChip}
+            clearFilter={clearFilter}
+          />
+        </div>
+        <div className="mt-2 table-responsive text-nowrap">
+          <table className="table">
+            <thead>
               <tr>
-                <td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
-                  No reports available
-                </td>
-              </tr>
-            )}
+                <th className="text-start">Activity</th>
+                <th>
+                  <span>
+                    Total Pending{" "}
+                    <HoverPopup
+                      id="total_pending_task"
+                      title="Total Pending Task"
+                      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>
 
-            {groupedTasks.map(({ date, tasks }) => (
-              <React.Fragment key={date}>
-                <tr className="table-row-header text-start">
-                  <td colSpan={6}>
-                    <strong>{formatUTCToLocalTime(date)}</strong>
+                <th>
+                  <span>
+                    Reported/Planned{" "}
+                    <HoverPopup
+                      id="reportes_and_planned_task"
+                      title="Reported and Planned Task"
+                      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>
+              </tr>
+            </thead>
+            <tbody>
+              {groupedTasks.length === 0 && (
+                <tr>
+                  <td colSpan={6} className="text-center align-middle" style={{ height: "200px", borderBottom: "none" }}>
+                    No reports available
                   </td>
                 </tr>
-                {tasks.map((task, idx) => (
-                  <tr key={task.id || idx}>
-                    <td className="flex-wrap text-start">
-                      <div>
-                        {task.workItem.activityMaster?.activityName || "No Activity Name"}
-                      </div>
-                      <div className="text-sm py-2">
-                        {task.workItem.workArea?.floor?.building?.name} ›{" "}
-                        {task.workItem.workArea?.floor?.floorName} ›{" "}
-                        {task.workItem.workArea?.areaName}
-                      </div>
-                    </td>
-                    <td>
-                      {formatNumber(task.workItem.plannedWork)}
-                    </td>
-                    <td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
-                    <td>{formatUTCToLocalTime(task.assignmentDate)}</td>
-                    <td className="text-center">{renderTeamMembers(task, idx)}</td>
-                    <td className="text-center">
-                      <div className="d-flex justify-content-end gap-2">
-                        {ReportTaskRights && !task.reportedDate && (
-                          <button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
-                            Report
-                          </button>
-                        )}
-                        {ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
-                          <button
-                            className="btn btn-xs btn-warning"
-                            onClick={() => openModal("comments", { task, isActionAllow: true })}
-                          >
-                            QC
-                          </button>
-                        )}
-                        <button
-                          className="btn btn-xs btn-primary"
-                          onClick={() => openModal("comments", { task, isActionAllow: false })}
-                        >
-                          Comment
-                        </button>
-                      </div>
+              )}
+
+              {groupedTasks.map(({ date, tasks }) => (
+                <React.Fragment key={date}>
+                  <tr className="table-row-header text-start">
+                    <td colSpan={6}>
+                      <strong>{formatUTCToLocalTime(date)}</strong>
                     </td>
                   </tr>
-                ))}
-              </React.Fragment>
-            ))}
-          </tbody>
-        </table>
+                  {tasks.map((task, idx) => (
+                    <tr key={task.id || idx}>
+                      <td className="flex-wrap text-start">
+                        <div>
+                          {task.workItem.activityMaster?.activityName || "No Activity Name"}
+                        </div>
+                        <div className="text-sm py-2">
+                          {task.workItem.workArea?.floor?.building?.name} ›{" "}
+                          {task.workItem.workArea?.floor?.floorName} ›{" "}
+                          {task.workItem.workArea?.areaName}
+                        </div>
+                      </td>
+                      <td>
+                        {formatNumber(task.workItem.plannedWork)}
+                      </td>
+                      <td>{`${formatNumber(task.completedTask)} / ${formatNumber(task.plannedTask)}`}</td>
+                      <td>{formatUTCToLocalTime(task.assignmentDate)}</td>
+                      <td className="text-center">{renderTeamMembers(task, idx)}</td>
+                      <td className="text-center">
+                        <div className="d-flex justify-content-end gap-2">
+                          {ReportTaskRights && !task.reportedDate && (
+                            <button className="btn btn-xs btn-primary" onClick={() => openModal("report", task)}>
+                              Report
+                            </button>
+                          )}
+                          {ApprovedTaskRights && task.reportedDate && !task.approvedBy && (
+                            <button
+                              className="btn btn-xs btn-warning"
+                              onClick={() => openModal("comments", { task, isActionAllow: true })}
+                            >
+                              QC
+                            </button>
+                          )}
+                          <button
+                            className="btn btn-xs btn-primary"
+                            onClick={() => openModal("comments", { task, isActionAllow: false })}
+                          >
+                            Comment
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </React.Fragment>
+              ))}
+            </tbody>
+          </table>
 
-      </div>
-      {
-        data?.data?.length > 0 && (
-          <Pagination
-            currentPage={currentPage}
-            totalPages={data.totalPages}
-            onPageChange={paginate}
-          />
-        )
-      }
+        </div>
+        {
+          data?.data?.length > 0 && (
+            <Pagination
+              currentPage={currentPage}
+              totalPages={data.totalPages}
+              onPageChange={paginate}
+            />
+          )
+        }
+      </div >
     </div >
   );
 };

src/components/Dashboard/Attendance.jsx

@@ -31,7 +31,7 @@ const selectedProjectId = useSelectedProject()
       <div className="card-header mb-1 pb-0">
         <div className="d-flex flex-wrap justify-content-between align-items-center">
           <div className="card-title mb-0 text-start">
-            <h5 className="mb-1">Attendance</h5>
+             <h5 class="card-title m-0 me-2">Attendance</h5>
             <p className="card-subtitle">Daily Attendance Data</p>
           </div>
 

src/components/Dashboard/AttendanceOverview.jsx

@@ -10,7 +10,7 @@ const formatDate = (dateStr) => {
   const date = new Date(dateStr);
   return date.toLocaleDateString("en-GB", {
     day: "2-digit",
-    month: "long",
+    month: "short",
   });
 };
 
@@ -104,7 +104,7 @@ const AttendanceOverview = () => {
       {/* Header */}
       <div className="d-flex mt-2 justify-content-between align-items-center mb-3">
         <div className="card-title mb-0 text-start">
-          <h5 className="mb-1 fw-bold">Attendance Overview</h5>
+          <h5 className="mb-1 fw-semibold">Attendance Overview</h5>
           <p className="card-subtitle">Role-wise present count</p>
         </div>
         <div className="d-flex gap-2">

src/components/Dashboard/CollectionOverview.jsx

@@ -0,0 +1,344 @@
+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 className="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 className="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 className="card-header d-flex align-items-center justify-content-between">
+          <h5 className="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 className="card-header d-flex align-items-end justify-content-between"></div>
+        <div className="p-1  m-1 text-start">
+          <small className="fw-medium">Overdue Days</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>
+  );
+};

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>
+
+  );
+};

src/components/Dashboard/Dashboard.jsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import {
-    useDashboardProjectsCardData,
-    useDashboardTeamsCardData,
-    useDashboardTasksCardData,
-    useAttendanceOverviewData
+  useDashboardProjectsCardData,
+  useDashboardTeamsCardData,
+  useDashboardTasksCardData,
+  useAttendanceOverviewData,
+  useGetCollectionOverview,
 } from "../../hooks/useDashboard_Data";
 
 import Projects from "./Projects";
@@ -19,77 +20,106 @@ 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 {
+  REGULARIZE_ATTENDANCE,
+  SELF_ATTENDANCE,
+  TEAM_ATTENDANCE,
+} from "../../utils/constants";
+import CollectionOverview, { TopicBarChart } from "./CollectionOverview";
+import { CollectionOverviewSkeleton } from "./CollectionOverviewSkeleton";
+import ProjectWiseTeamCount from "./ProjectWiseTeamCount";
+
 
 const Dashboard = () => {
+  // Get the selected project ID from Redux store
+  const projectId = useSelector((store) => store.localVariables.projectId);
+  const isAllProjectsSelected = projectId === null;
+  const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
+  const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
+  const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
 
-    // Get the selected project ID from Redux store
-    const projectId = useSelector((store) => store.localVariables.projectId);
-    const isAllProjectsSelected = projectId === null;
-    const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
-    const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
-    const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
+  const { data, isLoading, isError } = useGetCollectionOverview();
+  return (
+    <div className="container-fluid mt-5">
+      <div className="row gy-4">
+        {isAllProjectsSelected && (
+          <div className="col-sm-6 col-lg-6">
+            <Projects />
+          </div>
+        )}
 
-
-    return (
-        <div className="container-fluid mt-5">
-            <div className="row gy-4">
-                {isAllProjectsSelected && (
-                    <div className="col-sm-6 col-lg-4">
-                        <Projects />
-                    </div>
-                )}
-
-                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
-                    <Teams />
-                </div>
-
-                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
-                    <TasksCard />
-                </div>
-                <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-12 col-md-12">
-                    <ServiceJobs />
-                </div> */}
-            </div>
+        <div
+          className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-6"
+            }`}
+        >
+          <Teams />
         </div>
-    );
+
+          {!isAllProjectsSelected && (   <div
+          className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-6"
+            }`}
+        >
+          <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-12 col-md-6 mb-sm-0 mb-4">
+              <ProjectWiseTeamCount />
+            </div>}
+
+        {!isAllProjectsSelected && (
+          <div className="col-xxl-4 col-lg-4">
+            <div className="card h-100">
+              <ProjectStatistics />
+            </div>
+          </div>
+        )}
+        {isAllProjectsSelected && (
+          <div className="col-12 col-md-4 mb-sm-0 mb-4">
+            <ServiceJobs />
+          </div>
+        )}
+        <div className="col-md-8">
+          {isLoading ? (
+            <CollectionOverviewSkeleton />
+          ) : (
+            data && (
+              <div className="card">
+                <TopicBarChart data={data} />
+              </div>
+            )
+          )}
+        </div>
+      </div>
+    </div>
+  );
 };
 
-export default Dashboard;
+export default Dashboard;

src/components/Dashboard/ExpenseAnalysis.jsx

@@ -52,6 +52,18 @@ const ExpenseAnalysis = () => {
     legend: { show: false },
     dataLabels: { enabled: true, formatter: (val) => `${val.toFixed(0)}%` },
     colors: flatColors,
+    tooltip: {
+      y: {
+        formatter: function (value) {
+          return formatCurrency(value);
+        },
+      },
+      x: {
+        formatter: function (label) {
+          return label;
+        },
+      },
+    },
     plotOptions: {
       pie: {
         donut: {
@@ -88,7 +100,7 @@ const ExpenseAnalysis = () => {
 
         <div className="text-end text-sm-end">
           <FormProvider {...methods}>
-            <DateRangePicker1 />
+            <DateRangePicker1 pastDays="30" />
           </FormProvider>
         </div>
       </div>
@@ -140,7 +152,9 @@ const ExpenseAnalysis = () => {
                       className="col-6"
                       key={idx}
                       style={{
-                        borderLeft: `3px solid ${flatColors[idx % flatColors.length]}`,
+                        borderLeft: `3px solid ${
+                          flatColors[idx % flatColors.length]
+                        }`,
                       }}
                     >
                       <div className="d-flex flex-column text-start">
@@ -165,7 +179,6 @@ const ExpenseAnalysis = () => {
                         </span>
                       </div>
                     </div>
-
                   ))}
                 </div>
               </div>

src/components/Dashboard/ExpenseByProject.jsx

@@ -92,45 +92,40 @@ const ExpenseByProject = () => {
     <div className="card shadow-sm h-100 rounded ">
       {/* Header */}
       <div className="card-header">
-        <div className="d-flex justify-content-between align-items-center mb-1 mt-1">
+        <div className="d-block justify-content-between align-items-center mb-1 mt-1">
           <div className="text-start">
-            <h5 className="mb-1 me-6 card-title">Monthly Expense -</h5>
-            <p className="card-subtitle m-0">{projectName}</p>
-          </div>
-          <div className="btn-group mb-5 ms-n8">
-            <button
-              className="btn btn-sm dropdown-toggle fs-5"
-              type="button"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
+            <h5 className="mb-1 me-6 card-title">Monthly Expense </h5>
+            <div className="row w-100">
+               <div className="col-6">          <p className="card-subtitle m-0">{projectName}</p></div>
+               <div className="col-6  d-flex justify-content-between align-items-center px-0">
+
+           
+    
+            <select
+              className="form-select form-select-sm ms-auto  mt-sm-0"
+              value={selectedType}
+              onChange={(e) => setSelectedType(e.target.value)}
+              disabled={typeLoading}
+              style={{ maxWidth: "200px" }}
             >
-              {viewMode}
-            </button>
-            <ul className="dropdown-menu dropdown-menu-end ">
-              <li>
-                <button
-                  className="dropdown-item"
-                  onClick={() => {
-                    setViewMode("Category");
-                    setSelectedType("");
-                  }}
-                >
-                  Category
-                </button>
-              </li>
-              <li>
-                <button
-                  className="dropdown-item"
-                  onClick={() => {
-                    setViewMode("Project");
-                    setSelectedType("");
-                  }}
-                >
-                  Project
-                </button>
-              </li>
-            </ul>
+              <option value="">All Categories</option>
+              {expenseCategories?.map((type) => (
+                <option key={type.id} value={type.id}>
+                  {type.name}
+                </option>
+              ))}
+            </select>
+        
+               </div>
+
+  
+
+          
+            </div>
+
+             
           </div>
+        
         </div>
 
         {/* Range Buttons + Expense Dropdown */}
@@ -148,22 +143,7 @@ const ExpenseByProject = () => {
               {item}
             </button>
           ))}
-          {viewMode === "Category" && (
-            <select
-              className="form-select form-select-sm ms-auto mb-3 mt-1 mt-sm-0"
-              value={selectedType}
-              onChange={(e) => setSelectedType(e.target.value)}
-              disabled={typeLoading}
-              style={{ maxWidth: "200px" }}
-            >
-              <option value="">All Types</option>
-              {expenseCategories?.map((type) => (
-                <option key={type.id} value={type.id}>
-                  {type.name}
-                </option>
-              ))}
-            </select>
-          )}
+          
         </div>
       </div>
 

src/components/Dashboard/ProjectCompletionChart.jsx

@@ -12,14 +12,17 @@ const ProjectCompletionChart = () => {
     isError,
     error,
   } = useProjectCompletionStatus();
-  const projectNames = projects?.map((p) => p.name) || [];
-  const projectProgress =
-    projects?.map((p) => {
-      const completed = p.completedWork || 0;
-      const planned = p.plannedWork || 1;
-      const percent = planned ? (completed / planned) * 100 : 0;
-      return Math.min(Math.round(percent), 100);
-    }) || [];
+  const filteredProjects = projects?.filter((p) => p.completedWork > 0) || [];
+
+  const projectNames = filteredProjects.map((p) => p.name);
+  
+  const projectProgress = filteredProjects.map((p) => {
+  const completed = p.completedWork || 0;
+  const planned = p.plannedWork || 1;
+  const percent = planned ? (completed / planned) * 100 : 0;
+  return Math.min(parseFloat(percent.toFixed(2)), 100); // limit to 2 decimals
+});
+
 
   return (
     <div className="card h-100">

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;
@@ -90,7 +92,7 @@ const ProjectProgressChart = ({
         <div className="d-flex flex-wrap justify-content-between align-items-start mb-2">
           {/* Left: Title */}
           <div className="card-title text-start">
-            <h5 className="mb-1 fw-bold">Project Progress</h5>
+            <h5 className="mb-1 fw-semibold">Project Progress</h5>
             <p className="card-subtitle">Progress Overview by Project</p>
           </div>
         </div>

src/components/Dashboard/ProjectWiseTeamCount.jsx

@@ -0,0 +1,112 @@
+import React from "react";
+import { useProjectName } from "../../hooks/useProjects";
+import { BUCKET_BG_CLASSES } from "../../utils/constants";
+import { useAttendaceProjectWiseOveriew } from "../../hooks/useDashboard_Data";
+import { AppColors, localToUtc } from "../../utils/appUtils";
+import DatePicker from "../common/DatePicker";
+import { useAppForm, useAppWatch } from "../../hooks/appHooks/useAppForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { setProjectId } from "../../slices/localVariablesSlice";
+import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
+
+const ProjectWiseTeamCount = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const { control } = useAppForm({
+    resolver: zodResolver(
+      z.object({
+        date: z.string().optional(),
+      })
+    ),
+    defaultValues: {
+      date: new Date().toISOString().slice(0, 10),
+    },
+  });
+
+  const goToProject = (projectId) => () => {
+    dispatch(setProjectId(projectId));
+    navigate(`/projects/details`);
+  };
+
+  const selectedDate = useAppWatch({ control, name: "date" });
+
+  const { data, isLoading, isFetching, isError, error } =
+    useAttendaceProjectWiseOveriew(localToUtc(selectedDate));
+
+  const percent = (teamCount, attendanceCount) => {
+    return teamCount > 0 ? Math.round((attendanceCount / teamCount) * 100) : 0;
+  };
+
+  return (
+    <div className="card h-100 p-3">
+      {/* Header */}
+      <div className="d-flex justify-content-between text-start mb-2">
+        <h5 className="card-title m-0 me-2">Attendance by Project</h5>
+        <DatePicker name="date" control={control} maxDate={new Date()} />
+      </div>
+
+      {/* Only show spinner for new data, not full component */}
+      {isFetching && !isLoading && (
+        <div className="small text-end text-muted">Updating…</div>
+      )}
+
+      {/* Table */}
+      <div className="table-container">
+        <table className="table table-borderless mb-0">
+          <thead className="table-header">
+            <tr>
+              <th style={{ width: 200 }} className="text-start">
+                Project
+              </th>
+              <th style={{ width: 100 }}>Team Size</th>
+              <th style={{ width: 80 }} className="text-start">
+                Logged In
+              </th>
+              {/* <th>Percentage</th> */}
+            </tr>
+          </thead>
+        </table>
+
+        <div
+          className="table-body-scroll overflow-auto pe-1"
+          style={{ maxHeight: "60vh" }}
+        >
+          <table className="table table-borderless mb-0">
+            <tbody>
+              {(data ?? []).map((item, index) => (
+                <tr key={item.projectId || index}>
+                  <td style={{ width: 200 }}>
+                    <div
+                      className="d-flex align-items-center text-wrap my-2 text-start"
+                      style={{ width: "180px" }}
+                    >
+                      <a
+                        onClick={goToProject(item.projectId)}
+                        className="text-heading text-truncate cursor-pointer"
+                      >
+                        {" "}
+                        <span className="text-heading">{item.projectName}</span>
+                      </a>
+                    </div>
+                  </td>
+                  <td className="text-center" style={{ width: 80 }}>
+                    {item.teamCount}
+                  </td>
+                  <td className="text-center" style={{ width: 80 }}>
+                    {item.attendanceCount}
+                  </td>
+                  {/* <td>{percent(item.teamCount, item.attendanceCount)}%</td> */}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProjectWiseTeamCount;

src/components/Dashboard/ServiceJobs.jsx

@@ -1,234 +1,185 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useJobsProgression } from "../../hooks/useDashboard_Data";
+import { SpinnerLoader } from "../common/Loader";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { useServiceProject } from "../../hooks/useServiceProject";
 
 const ServiceJobs = () => {
+  const { projectId } = useParams();
+
+  const { data, isLoading, isError } = useJobsProgression(projectId);
+  const jobs = data || {};
+
+  const { data: projectData, isLoading: projectLoading } =
+    useServiceProject(projectId);
+
+  const [activeTab, setActiveTab] = useState("tab-new");
+
+  // 👇 prevents re-running auto logic after first load
+  const hasInitializedTab = useRef(false);
+
+  const tabMapping = [
+    { id: "tab-new", label: "My Jobs", key: "myJobs" },
+    { id: "tab-shipping", label: "In Progress", key: "inProgressJobs" },
+    { id: "tab-preparing", label: "Assigned", key: "assignedJobs" },
+  ];
+
+  /* ---------- INITIAL TAB SELECTION ONLY ---------- */
+ useEffect(() => {
+  if (hasInitializedTab.current || !jobs) return;
+
+  if (jobs.myJobs?.length > 0) {
+    setActiveTab("tab-new");
+  } else if (jobs.inProgressJobs?.length > 0) {
+    setActiveTab("tab-shipping");
+  } else {
+    setActiveTab("tab-preparing");
+  }
+
+  hasInitializedTab.current = true;
+}, [jobs]);
+
+
   return (
-    <div className="col-xxl-4 col-lg-6">
-      <div className="card h-100">
+    <div>
+      <div className="card page-min-h">
+        {/* Header */}
         <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>
+            <h5 className="mb-1 fw-bold">Service Jobs</h5>
+            <p className="card-subtitle">
+              {projectLoading
+                ? "Loading..."
+                : projectData?.name || "All Projects"}
+            </p>
           </div>
         </div>
 
         <div className="card-body p-0">
           <div className="nav-align-top">
-
             {/* Tabs */}
-            <ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
-              <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 className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced">
+              {tabMapping.map((tab) => (
+                <li className="nav-item" key={tab.id}>
+                  <button
+                    type="button"
+                    className={`nav-link ${
+                      activeTab === tab.id ? "active" : ""
+                    }`}
+                    onClick={() => setActiveTab(tab.id)}
+                  >
+                    {tab.label}
+                  </button>
+                </li>
+              ))}
             </ul>
 
-            {/* Tab Content */}
+            {/* Content */}
             <div className="tab-content border-0 mx-1 text-start">
+              {isLoading && (
+                <div
+                  className="text-center"
+                  style={{
+                    height: "250px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <SpinnerLoader />
+                </div>
+              )}
 
-              {/* ---------------------- 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>
+              {isError && (
+                <p
+                  className="text-center"
+                  style={{
+                    height: "250px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    margin: 0,
+                  }}
+                >
+                  No data found
+                </p>
+              )}
+
+              {!isLoading &&
+                !isError &&
+                tabMapping.map((tab) => {
+                  const list = jobs[tab.key] || [];
+
+                  return (
+                    <div
+                      key={tab.id}
+                      className={`tab-pane fade ${
+                        activeTab === tab.id ? "show active" : ""
+                      }`}
+                    >
+                      {list.length === 0 ? (
+                        <p
+                          className="text-center"
+                          style={{
+                            height: "250px",
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            margin: 0,
+                          }}
+                        >
+                          No jobs found
+                        </p>
+                      ) : (
+                        <div className="job-scroll-wrapper">
+                          {list.map((job, index) => (
+                            <React.Fragment key={index}>
+                              <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">
+                                    <small className="text-success text-uppercase">
+                                      Assigned By
+                                    </small>
+                                    <h6 className="my-50">{job.assignedBy}</h6>
+                                    <p className="text-body mb-0">
+                                      {formatUTCToLocalTime(job.assignedAt)}
+                                    </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">
+                                    <small className="text-primary text-uppercase">
+                                      Project
+                                    </small>
+                                    <h6 className="my-50">{job.project}</h6>
+                                    <p className="text-body mb-0">
+                                      {job.title}
+                                    </p>
+                                  </div>
+                                </li>
+                              </ul>
+
+                              {index < list.length - 1 && (
+                                <div className="border-1 border-light border-top border-dashed my-4"></div>
+                              )}
+                            </React.Fragment>
+                          ))}
+                        </div>
+                      )}
                     </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>
   );

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"
             />

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">

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 && (

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">
@@ -120,8 +120,8 @@ const ListViewContact = ({ data, Pagination }) => {
                 {Array.isArray(data) && data.length > 0 ? (
                   data.map((row, i) => (
                     <tr
-                      key={i}
-                      style={{ background: `${!showActive ? "#f8f6f6" : ""}` }}
+                      key={i} 
+                      style={{height: "50px", background: `${!showActive ? "#f8f6f6" : ""}` }}
                     >
                       {contactList.map((col) => (
                         <td key={col.key} className={col.align}>

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 ? (

src/components/Directory/ManageContact.jsx

@@ -19,6 +19,9 @@ 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";
+import { BUCKET_BG_CLASSES } from "../../utils/constants";
 
 const ManageContact = ({ contactId, closeModal }) => {
   // fetch master data
@@ -194,7 +197,7 @@ const ManageContact = ({ contactId, closeModal }) => {
               Name
             </Label>
             <input
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("name")}
             />
             {errors.name && (
@@ -210,6 +213,7 @@ const ManageContact = ({ contactId, closeModal }) => {
               value={watch("organization") || ""}
               onChange={(val) => setValue("organization", val, { shouldValidate: true })}
               error={errors.organization?.message}
+              size="md"
             />
 
           </div>
@@ -222,7 +226,7 @@ const ManageContact = ({ contactId, closeModal }) => {
               Designation
             </Label>
             <input
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("designation")}
               onChange={handleDesignationChange}
             />
@@ -257,7 +261,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 +269,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>
-                  <select
-                    className="form-select form-select-sm"
-                    {...register(`contactEmails.${index}.label`)}
-                  >
-                    <option value="Work">Work</option>
-                    <option value="Personal">Personal</option>
-                    <option value="Other">Other</option>
-                  </select>
+                  <AppFormController
+                    name={`contactEmails.${index}.label`}
+                    control={control}
+                    render={({ field }) => (
+                      <SelectField
+                        label="Label"
+                        options={[
+                          { id: "Work", name: "Work" },
+                          { 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 +329,43 @@ const ManageContact = ({ contactId, closeModal }) => {
 
           <div className="col-md-6">
             {phoneFields.map((field, index) => (
-              <div
-                key={field.id}
-                className="row d-flex align-items-center mb-2"
-              >
+              <div key={field.id} className="row d-flex align-items-center mb-2">
+
                 <div className="col-5 text-start">
-                  <label className="form-label">Label</label>
-                  <select
-                    className="form-select form-select-sm"
-                    {...register(`contactPhones.${index}.label`)}
-                  >
-                    <option value="Office">Office</option>
-                    <option value="Personal">Personal</option>
-                    <option value="Business">Business</option>
-                  </select>
+                  <AppFormController
+                    name={`contactPhones.${index}.label`}
+                    control={control}
+                    render={({ field }) => (
+                      <SelectField
+                        label="Label"
+                        options={[
+                          { id: "Office", name: "Office" },
+                          { 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 +387,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>
-            <select
-              className="form-select form-select-sm"
-              {...register("contactCategoryId")}
-            >
-              {contactCategoryLoading && !contactCategory ? (
-                <option disabled value="">
-                  Loading...
-                </option>
-              ) : (
-                <>
-                  <option disabled value="">
-                    Select Category
-                  </option>
-                  {contactCategory?.map((cate) => (
-                    <option key={cate.id} value={cate.id}>
-                      {cate.name}
-                    </option>
-                  ))}
-                </>
+            <AppFormController
+              name="contactCategoryId"
+              control={control}
+              rules={{ required: "Category is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="Category"
+                  required
+                  options={contactCategory ?? []}
+                  placeholder="Select Category"
+                  labelKey="name"
+                  valueKeyKey="id"
+                  value={field.value}
+                  onChange={field.onChange}
+                  isLoading={contactCategoryLoading && !contactCategory}
+                  className="m-0"
+                />
               )}
-            </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 +440,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,16 +456,26 @@ const ManageContact = ({ contactId, closeModal }) => {
 
         {/* Buckets */}
         <div className="row">
-          <div className="col-md-12 mt-1 text-start">
-            <label className="form-label ">Select Bucket</label>
-            <ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
+          <div className="col-md-12 mt-3 text-start">
+            <Label className="form-label mb-2" required>Select Bucket</Label>
+
+            <div
+              className="d-flex flex-wrap gap-3 p-1"
+              style={{
+                maxHeight: "200px",
+                overflowY: "auto",
+              }}
+            >
               {bucketsLoaging && <p>Loading...</p>}
-              {buckets?.map((item) => (
-                <li
+
+              {buckets?.map((item, index) => (
+                <div
                   key={item.id}
-                  className="list-inline-item flex-shrink-0 me-6 mb-1"
+                  className={`card p-2 shadow-sm flex-shrink-0 ${BUCKET_BG_CLASSES[index % BUCKET_BG_CLASSES.length]}`}
+                  onClick={() => handleCheckboxChange(item.id)}
                 >
-                  <div className="form-check">
+
+                  <div className="form-check m-0">
                     <input
                       type="checkbox"
                       className="form-check-input"
@@ -434,16 +483,17 @@ const ManageContact = ({ contactId, closeModal }) => {
                       checked={watchBucketIds.includes(item.id)}
                       onChange={() => handleCheckboxChange(item.id)}
                     />
-                    <label
-                      className="form-check-label"
-                      htmlFor={`item-${item.id}`}
-                    >
+                    <label className="form-check-label ms-0" htmlFor={`item-${item.id}`}>
                       {item.name}
                     </label>
                   </div>
-                </li>
+                </div>
               ))}
-            </ul>
+
+            </div>
+
+          </div>
+          <div className="text-start mt-3 mb-3">
             {errors.bucketIds && (
               <small className="danger-text">{errors.bucketIds.message}</small>
             )}
@@ -454,15 +504,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")}
           />

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">

src/components/Documents/DocumentFilterPanel.jsx

@@ -59,12 +59,18 @@ const DocumentFilterPanel = forwardRef(
     useImperativeHandle(ref, () => ({
       resetFieldValue: (name, value) => {
         if (value !== undefined) {
-          setValue(name, value);
+          setValue(name, value, { shouldValidate: true, shouldDirty: true });
         } else {
           reset({ ...methods.getValues(), [name]: DocumentFilterDefaultValues[name] });
         }
+
+        if ((name === "startDate" || name === "endDate") && value === null) {
+          setTimeout(() => {
+            setResetKey((prev) => prev + 1);
+          }, 0);
+        }
       },
-      getValues: methods.getValues, // optional, to read current filter state
+      getValues: methods.getValues,
     }));
 
     //changes
@@ -141,6 +147,7 @@ const DocumentFilterPanel = forwardRef(
               defaultRange={false}
               resetSignal={resetKey}
               maxDate={new Date()}
+              className="w-100"
             />
           </div>
 

src/components/Documents/Documents.jsx

@@ -124,26 +124,27 @@ const Documents = ({ Document_Entity, Entity }) => {
     const updatedFilters = { ...filters };
     if (Array.isArray(updatedFilters[key])) {
       updatedFilters[key] = updatedFilters[key].filter((v) => v !== id);
-      updatedRef.current?.resetFieldValue(key,updatedFilters[key]);
+      updatedRef.current?.resetFieldValue(key, updatedFilters[key]);
     }
     else if (key === "dateRange") {
       updatedFilters.startDate = null;
       updatedFilters.endDate = null;
-      updatedRef.current?.resetFieldValue("startDate",null);
-      updatedRef.current?.resetFieldValue("endDate",null);
+      // These calls correctly tell the DocumentFilterPanel to update its form state:
+      updatedRef.current?.resetFieldValue("startDate", null);
+      updatedRef.current?.resetFieldValue("endDate", null);
     }
     else {
       updatedFilters[key] = null;
     }
     setFilter(updatedFilters);
-   return updatedFilters;
+    return updatedFilters;
   };
 
   return (
     <DocumentContext.Provider value={contextValues}>
       <div className="mt-2">
         <div className="card page-min-h d-flex p-5">
-          <DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} />
+
           <div className="row align-items-center">
             {/* Search */}
             <div className="d-flex flex-row gap-2 col-12 col-md-8 col-lg-4 mb-md-0 align-items-center mb-2">
@@ -194,6 +195,9 @@ const Documents = ({ Document_Entity, Entity }) => {
               )}
             </div>
           </div>
+          <div className="ms-n1">
+            <DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} />
+          </div>
           <DocumentsList
             Document_Entity={DocumentEntity}
             Entity={Entity}

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

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");
@@ -88,33 +93,33 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
     }
   );
 
- 
+
   const onSubmit = (data) => {
-  const normalizeAttachment = (attachment) => {
-    if (!attachment) return null;
-    return {
-      ...attachment,
-      fileSize: Math.ceil(attachment.fileSize / 1024), 
+    const normalizeAttachment = (attachment) => {
+      if (!attachment) return null;
+      return {
+        ...attachment,
+        fileSize: Math.ceil(attachment.fileSize / 1024),
+      };
     };
-  };
 
-  const payload = {
-    ...data,
-    attachment: normalizeAttachment(data.attachment),
-  };
-
-  if (ManageDoc?.document) {
-    const DocumentPayload = {
-      ...payload,
-      id: DocData.id,
-      tags: MergedTagsWithExistenStatus(data?.tags, DocData?.tags),
+    const payload = {
+      ...data,
+      attachment: normalizeAttachment(data.attachment),
     };
-    UpdateDocument({ documentId: DocData?.id, DocumentPayload });
-  } else {
-    const DocumentPayload = { ...payload, entityId: Entity };
-    UploadDocument(DocumentPayload);
-  }
-};
+
+    if (ManageDoc?.document) {
+      const 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"
-          : t === "image/png"
-          ? ".png"
-          : ""
+            ? ".jpg,.jpeg"
+            : t === "image/png"
+              ? ".png"
+              : ""
       )
       .join(",") || "";
 
@@ -231,200 +236,209 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
 
   const isPending = isUploading || isUpdating;
   return (
-    <div className="p-2">
-      <p className="fw-bold fs-6">Upload New Document</p>
-      <FormProvider key={documentTypeId} {...methods}>
-        <form onSubmit={handleSubmit(onSubmit)} className="text-start">
-          {/* Category */}
-          <div className="mb-2">
-            <Label htmlFor="documentCategoryId" required>Document Category</Label>
-            <select
-              {...register("documentCategoryId")}
-              className="form-select form-select-sm"
-            >
-              {isLoading && (
-                <option disabled value="">
-                  Loading...
-                </option>
-              )}
-              {!isLoading && <option value="">Select Category</option>}
-              {DocumentCategories?.map((type) => (
-                <option key={type.id} value={type.id}>
-                  {type.name}
-                </option>
-              ))}
-            </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>
+    <AppFormProvider {...methods}>
+      <div className="p-2">
+        <h5 className="">Upload New Document</h5>
+        <FormProvider key={documentTypeId} {...methods}>
+          <form onSubmit={handleSubmit(onSubmit)} className="text-start">
+            {/* Category */}
+            <div className="col-12 col-md-12 mb-2 mb-md-4">
+              <AppFormController
+                name="documentCategoryId"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label="Document Category"
+                    options={DocumentCategories ?? []}
+                    placeholder="Select Category"
+                    required
+                    labelKey="name"
+                    valueKeyKey="id"
+                    value={field.value}
+                    onChange={field.onChange}
+                    isLoading={isLoading}
+                    className="m-0"
+                  />
                 )}
-                {DocumentTypes?.map((type) => (
-                  <option key={type.id} value={type.id}>
-                    {type.name}
-                  </option>
-                ))}
-              </select>
-              {errors.documentTypeId && (
-                <div className="danger-text">
-                  {errors.documentTypeId.message}
-                </div>
+              />
+
+              {errors.documentCategoryId && (
+                <small className="danger-text">
+                  {errors.documentCategoryId.message}
+                </small>
               )}
             </div>
-          )}
 
-          
-          {/* Document ID */}
-          <div className="mb-2">
-            <label
-              htmlFor="documentId"
-              required={selectedType?.isMandatory ?? false}
-            >
-              Document ID
-            </label>
-            <input
-              type="text"
-              className="form-control form-control-sm"
-              {...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 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
-                  }}
+            {/* Type */}
+            {categoryId && (
+              <div className="col-12 col-md-12 mb-2 mb-md-4">
+                <AppFormController
+                  name="documentTypeId"
+                  control={control}
+                  render={({ field }) => (
+                    <SelectField
+                      label="Document Type"
+                      options={DocumentTypes ?? []}
+                      placeholder="Select Document Type"
+                      required
+                      labelKey="name"
+                      valueKeyKey="id"
+                      value={field.value}
+                      onChange={field.onChange}
+                      isLoading={isTypeLoading}
+                      className="m-0"
+                    />
+                  )}
                 />
+
+                {errors.documentTypeId && (
+                  <small className="danger-text">
+                    {errors.documentTypeId.message}
+                  </small>
+                )}
               </div>
 
-              {errors.attachment && (
-                <small className="danger-text">
-                  {errors.attachment.message
-                    ? errors.attachment.message
-                    : errors.attachment.fileName?.message ||
+            )}
+
+
+            {/* Document ID */}
+            <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 && (
-                <div className="d-flex justify-content-between text-start p-1 mt-2">
-                  <div>
-                    <span className="mb-0 text-secondary small d-block">
-                      {file.fileName}
-                    </span>
-                    <span className="text-body-secondary small d-block">
-                      {(file.fileSize / 1024).toFixed(1)} KB
-                    </span>
+                {file?.base64Data && (
+                  <div className="d-flex justify-content-between text-start p-1 mt-2">
+                    <div>
+                      <span className="mb-0 text-secondary small d-block">
+                        {file.fileName}
+                      </span>
+                      <span className="text-body-secondary small d-block">
+                        {(file.fileSize / 1024).toFixed(1)} KB
+                      </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"
-                    onClick={removeFile}
-                  ></i>
-                </div>
+                )}
+              </div>
+            </div>
+            <div className="mb-4">
+              <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 */}
-          <div className="mb-2">
-            <Label htmlFor="description" required>Description</Label>
-            <textarea
-              rows="2"
-              className="form-control"
-              {...register("description")}
-            ></textarea>
-            {errors.description && (
-              <div className="danger-text">{errors.description.message}</div>
-            )}
-          </div>
+            {/* Description */}
+            <div className="mb-4">
+              <Label htmlFor="description" required>Description</Label>
+              <textarea
+                rows="2"
+                className="form-control"
+                {...register("description")}
+              ></textarea>
+              {errors.description && (
+                <div className="danger-text">{errors.description.message}</div>
+              )}
+            </div>
 
-          {/* Buttons */}
-          <div className="d-flex justify-content-end gap-3 mt-4">            
-            <button
-              type="reset"
-              className="btn btn-label-secondary btn-sm"
-              disabled={isPending}
-              onClick={closeModal}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className="btn btn-primary btn-sm"
-              disabled={isPending}
-            >
-              {isPending ? "Please Wait..." : " Submit"}
-            </button>
-          </div>
-        </form>
-      </FormProvider>
-    </div>
+            {/* Buttons */}
+            <div className="d-flex justify-content-end gap-3 mt-4">
+              <button
+                type="reset"
+                className="btn btn-label-secondary btn-sm"
+                disabled={isPending}
+                onClick={closeModal}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className="btn btn-primary btn-sm"
+                disabled={isPending}
+              >
+                {isPending ? "Please Wait..." : " Submit"}
+              </button>
+            </div>
+          </form>
+        </FormProvider>
+      </div>
+    </AppFormProvider>
   );
 };
 

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

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")}

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}

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>
     </>
   );
 };

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">

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,
-            firstName: currentEmployee.firstName || "",
-            middleName: currentEmployee.middleName || "",
-            lastName: currentEmployee.lastName || "",
-            email: currentEmployee.email || "",
-            currentAddress: currentEmployee.currentAddress || "",
-            birthDate: formatDate(currentEmployee.birthDate) || "",
-            joiningDate: formatDate(currentEmployee.joiningDate) || "",
-            emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
-            emergencyContactPerson:
-              currentEmployee.emergencyContactPerson || "",
-            aadharNumber: currentEmployee.aadharNumber || "",
-            gender: currentEmployee.gender || "",
-            panNumber: currentEmployee.panNumber || "",
-            permanentAddress: currentEmployee.permanentAddress || "",
-            phoneNumber: currentEmployee.phoneNumber || "",
-            jobRoleId: currentEmployee.jobRoleId?.toString() || "",
-            organizationId: currentEmployee.organizationId || "",
-            hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
-          }
+          id: currentEmployee.id || null,
+          firstName: currentEmployee.firstName || "",
+          middleName: currentEmployee.middleName || "",
+          lastName: currentEmployee.lastName || "",
+          email: currentEmployee.email || "",
+          currentAddress: currentEmployee.currentAddress || "",
+          birthDate: formatDate(currentEmployee.birthDate) || "",
+          joiningDate: formatDate(currentEmployee.joiningDate) || "",
+          emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
+          emergencyContactPerson:
+            currentEmployee.emergencyContactPerson || "",
+          aadharNumber: currentEmployee.aadharNumber || "",
+          gender: currentEmployee.gender || "",
+          panNumber: currentEmployee.panNumber || "",
+          permanentAddress: currentEmployee.permanentAddress || "",
+          phoneNumber: currentEmployee.phoneNumber || "",
+          jobRoleId: currentEmployee.jobRoleId?.toString() || "",
+          organizationId: currentEmployee.organizationId || "",
+          hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
+        }
         : {}
     );
     setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
@@ -125,7 +127,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
   const hasAccessAplication = watch("hasApplicationAccess");
   return (
     <>
-      <form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
+      <form onSubmit={handleSubmit(onSubmit)} className="p-sm-2 p-2">
         <div className="text-center">
           <p className="fs-5 fw-semibold">
             {" "}
@@ -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
-                className="form-select form-select-sm"
-                {...register("organizationId")}
-                id="organizationId"
-                aria-label=""
-              >
-                <option disabled value="">
-                  Select Organization
-                </option>
-                {organzationList?.data
-                  .sort((a, b) => a?.name?.localeCompare(b?.name))
-                  .map((item) => (
-                    <option value={item?.id} key={item?.id}>
-                      {item?.name}
-                    </option>
-                  ))}
-              </select>
+
+            <div>
+              <AppFormController
+                name="organizationId"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label="" // Already showing label above
+                    options={
+                      organzationList?.data
+                        ?.sort((a, b) => a?.name?.localeCompare(b?.name))
+                        ?.map((item) => ({
+                          id: item.id,
+                          name: item.name,
+                        })) || []
+                    }
+                    placeholder="Select Organization"
+                    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">
-            <Label className="form-text text-start" required>
-              Official Designation
-            </Label>
-            <div className="input-group">
-              <select
-                className="form-select form-select-sm"
-                {...register("jobRoleId")}
-                id="jobRoleId"
-                aria-label=""
-              >
-                <option disabled value="">
-                  Select Role
-                </option>
-                {[...job_role]
-                  .sort((a, b) => a?.name?.localeCompare(b.name))
-                  .map((item) => (
-                    <option value={item?.id} key={item.id}>
-                      {item?.name}{" "}
-                    </option>
-                  ))}
-              </select>
-            </div>
+          <div className="col-sm-4 text-start">
+            <AppFormController
+              name="jobRoleId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Official Designation"
+                  required
+                  options={[...job_role].sort((a, b) =>
+                    a?.name?.localeCompare(b?.name)
+                  )}
+                  placeholder="Select Role"
+                  labelKey="name"
+                  valueKeyKey="id"
+                  value={field.value}
+                  onChange={field.onChange}
+                  className="m-0"
+                />
+              )}
+            />
+
             {errors.jobRoleId && (
-              <div
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
+              <div 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}

src/components/Expenses/ExpenseFilterPanel.jsx

@@ -1,4 +1,10 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useState, useMemo } from "react";
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+  useMemo,
+} from "react";
 import { FormProvider, useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultFilter, SearchSchema } from "./ExpenseSchema";
@@ -15,282 +21,297 @@ import { useExpenseFilter } from "../../hooks/useExpense";
 import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 
-const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }, ref) => {
-  const { status } = useParams();
-  const navigate = useNavigate();
-  const selectedProjectId = useSelector(
-    (store) => store.localVariables.projectId
-  );
-  const { data, isLoading, isError, error, isFetching, isFetched } =
-    useExpenseFilter();
+const ExpenseFilterPanel = forwardRef(
+  ({ onApply, handleGroupBy, setFilterdata }, ref) => {
+    const { status } = useParams();
+    const navigate = useNavigate();
+    const selectedProjectId = useSelector(
+      (store) => store.localVariables.projectId
+    );
+    const { data, isLoading, isError, error, isFetching, isFetched } =
+      useExpenseFilter();
 
-  const groupByList = useMemo(() => {
-    return [
-      { id: "transactionDate", name: "Transaction Date" },
-      { id: "status", name: "Status" },
-      { id: "submittedBy", name: "Submitted By" },
-      { id: "project", name: "Project" },
-      { id: "paymentMode", name: "Payment Mode" },
-      { id: "expenseCategory", name: "Expense Category" },
-      { id: "createdAt", name: "Submitted Date" },
-    ].sort((a, b) => a.name.localeCompare(b.name));
-  }, []);
+    const groupByList = useMemo(() => {
+      return [
+        { id: "none", name: "None" },
+        { id: "transactionDate", name: "Transaction Date" },
+        { id: "status", name: "Status" },
+        { id: "submittedBy", name: "Submitted By" },
+        { id: "project", name: "Project" },
+        { id: "paymentMode", name: "Payment Mode" },
+        { id: "expenseCategory", name: "Expense Category" },
+        { id: "createdAt", name: "Submitted Date" },
+      ].sort((a, b) => a.name.localeCompare(b.name));
+    }, []);
 
-  const [selectedGroup, setSelectedGroup] = useState(groupByList[6]);
-  const [resetKey, setResetKey] = useState(0);
+    const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);
+    const [resetKey, setResetKey] = useState(0);
 
-  const dynamicDefaultFilter = useMemo(() => {
-    return {
-      ...defaultFilter,
-      statusIds: status ? [status] : defaultFilter.statusIds || [],
-      projectIds: defaultFilter.projectIds || [],
-      createdByIds: defaultFilter.createdByIds || [],
-      paidById: defaultFilter.paidById || [],
-      expenseCategoryIds: defaultFilter.expenseCategoryIds || [],
-      isTransactionDate: defaultFilter.isTransactionDate ?? true,
-      startDate: defaultFilter.startDate,
-      endDate: defaultFilter.endDate,
-    };
-  }, [status, selectedProjectId]);
-
-  const methods = useForm({
-    resolver: zodResolver(SearchSchema),
-    defaultValues: dynamicDefaultFilter,
-  });
-
-  const { control, handleSubmit, reset, setValue, watch } = methods;
-  const isTransactionDate = watch("isTransactionDate");
-
-  const closePanel = () => {
-    document.querySelector(".offcanvas.show .btn-close")?.click();
-  };
-
-  // Change here
-  useEffect(() => {
-    if (data && setFilterdata) {
-      setFilterdata(data);
-    }
-  }, [data, setFilterdata]);
-
-  const handleGroupChange = (e) => {
-    const group = groupByList.find((g) => g.id === e.target.value);
-    if (group) setSelectedGroup(group);
-  };
-
-  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
-  }));
-
-  const onSubmit = (formData) => {
-    onApply({
-      ...formData,
-      startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
-      endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
-    });
-    handleGroupBy(selectedGroup.id);
-    // closePanel();
-  };
-
-  const onClear = () => {
-    reset(defaultFilter);
-    setResetKey((prev) => prev + 1);
-    setSelectedGroup(groupByList[0]);
-    onApply(defaultFilter);
-    handleGroupBy(groupByList[0].id);
-    // closePanel();
-    if (status) {
-      navigate("/expenses", { replace: true });
-    }
-  };
-
-  const location = useLocation();
-  useEffect(() => {
-    closePanel();
-  }, [location]);
-
-  const [appliedStatusId, setAppliedStatusId] = useState(null);
-
-  useEffect(() => {
-    if (!status || !data) return;
-
-    if (status !== appliedStatusId) {
-      const filterWithStatus = {
-        ...dynamicDefaultFilter,
-        projectIds: selectedProjectId ? [selectedProjectId] : dynamicDefaultFilter.projectIds || [],
-        startDate: dynamicDefaultFilter.startDate
-          ? moment.utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY").toISOString()
-          : undefined,
-        endDate: dynamicDefaultFilter.endDate
-          ? moment.utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY").toISOString()
-          : undefined,
+    const dynamicDefaultFilter = useMemo(() => {
+      return {
+        ...defaultFilter,
+        statusIds: status ? [status] : defaultFilter.statusIds || [],
+        projectIds: defaultFilter.projectIds || [],
+        createdByIds: defaultFilter.createdByIds || [],
+        paidById: defaultFilter.paidById || [],
+        expenseCategoryIds: defaultFilter.expenseCategoryIds || [],
+        isTransactionDate: defaultFilter.isTransactionDate ?? true,
+        startDate: defaultFilter.startDate,
+        endDate: defaultFilter.endDate,
       };
+    }, [status, selectedProjectId]);
 
-      onApply(filterWithStatus);
+    const methods = useForm({
+      resolver: zodResolver(SearchSchema),
+      defaultValues: dynamicDefaultFilter,
+    });
+
+    const { control, handleSubmit, reset, setValue, watch } = methods;
+    const isTransactionDate = watch("isTransactionDate");
+
+    const closePanel = () => {
+      document.querySelector(".offcanvas.show .btn-close")?.click();
+    };
+
+    // Change here
+    useEffect(() => {
+      if (data && setFilterdata) {
+        setFilterdata(data);
+      }
+    }, [data, setFilterdata]);
+
+    const handleGroupChange = (e) => {
+      const group = groupByList.find((g) => g.id === e.target.value);
+      if (group) setSelectedGroup(group);
+    };
+
+    useImperativeHandle(ref, () => ({
+      resetFieldValue: (name, value) => {
+        // Reset specific field
+        if (value !== undefined) {
+          setValue(name, value);
+        } else {
+          reset({ ...methods.getValues(), [name]: defaultFilter[name] });
+        }
+      },
+      // --- START FIX: Add resetDateRange method ---
+      resetDateRange: () => {
+        setValue("startDate", null);
+        setValue("endDate", null);
+        // Trigger re-render/reset of the DateRangePicker component
+        setResetKey((prev) => prev + 1);
+      },
+      // --- END FIX ---
+      getValues: methods.getValues, // optional, to read current filter state
+    }));
+
+    const onSubmit = (formData) => {
+      onApply({
+        ...formData,
+        startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
+        endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
+      });
       handleGroupBy(selectedGroup.id);
-      setAppliedStatusId(status);
-    }
-  }, [
-    status,
-    data,
-    dynamicDefaultFilter,
-    onApply,
-    handleGroupBy,
-    selectedGroup.id,
-    appliedStatusId,
-    selectedProjectId, 
-  ]);
+      // closePanel();
+    };
 
-  if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
-  if (isError && isFetched)
-    return <div>Something went wrong Here- {error.message} </div>;
+    const onClear = () => {
+      reset(defaultFilter);
+      setResetKey((prev) => prev + 1);
+      setSelectedGroup(groupByList[0]);
+      onApply(defaultFilter);
+      handleGroupBy(groupByList[0].id);
+      // closePanel();
+      if (status) {
+        navigate("/expenses", { replace: true });
+      }
+    };
 
+    const location = useLocation();
+    useEffect(() => {
+      closePanel();
+    }, [location]);
 
+    const [appliedStatusId, setAppliedStatusId] = useState(null);
 
-  return (
-    <>
-      <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
-          <div className="mb-3 w-100">
-            <div className="d-flex align-items-center mb-2">
-              <label className="form-label me-2">Filter By:</label>
-              <div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
-                <button
-                  type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${isTransactionDate ? "active btn-primary text-white" : ""
-                    }`}
-                  onClick={() => setValue("isTransactionDate", true)}
-                >
-                  Transaction Date
-                </button>
-                <button
-                  type="button"
-                  className={`btn px-2 py-1 rounded-0 text-tiny ${!isTransactionDate ? "active btn-primary text-white" : ""
-                    }`}
-                  onClick={() => setValue("isTransactionDate", false)}
-                >
-                  Submitted Date
-                </button>
+    useEffect(() => {
+      if (!status || !data) return;
+
+      if (status !== appliedStatusId) {
+        const filterWithStatus = {
+          ...dynamicDefaultFilter,
+          projectIds: selectedProjectId
+            ? [selectedProjectId]
+            : dynamicDefaultFilter.projectIds || [],
+          startDate: dynamicDefaultFilter.startDate
+            ? moment
+              .utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY")
+              .toISOString()
+            : undefined,
+          endDate: dynamicDefaultFilter.endDate
+            ? moment
+              .utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY")
+              .toISOString()
+            : undefined,
+        };
+
+        onApply(filterWithStatus);
+        handleGroupBy(selectedGroup.id);
+        setAppliedStatusId(status);
+      }
+    }, [
+      status,
+      data,
+      dynamicDefaultFilter,
+      onApply,
+      handleGroupBy,
+      selectedGroup.id,
+      appliedStatusId,
+      selectedProjectId,
+    ]);
+
+    if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
+    if (isError && isFetched)
+      return <div>Something went wrong Here- {error.message} </div>;
+
+    return (
+      <>
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
+            <div className="mb-3 w-100">
+              <div className="d-flex align-items-center mb-2">
+                <label className="form-label me-2">Filter By:</label>
+                <div className="d-inline-flex border rounded-pill mb-1 overflow-hidden shadow-none">
+                  <button
+                    type="button"
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${isTransactionDate ? "active btn-primary text-white" : ""
+                      }`}
+                    onClick={() => setValue("isTransactionDate", true)}
+                  >
+                    Transaction Date
+                  </button>
+                  <button
+                    type="button"
+                    className={`btn px-2 py-1 rounded-0 text-tiny ${!isTransactionDate ? "active btn-primary text-white" : ""
+                      }`}
+                    onClick={() => setValue("isTransactionDate", false)}
+                  >
+                    Submitted Date
+                  </button>
+                </div>
+              </div>
+              <DateRangePicker1
+                placeholder="DD-MM-YYYY To DD-MM-YYYY"
+                startField="startDate"
+                endField="endDate"
+                resetSignal={resetKey}
+                defaultRange={false}
+                maxDate={new Date()}
+                className="w-100"
+              />
+            </div>
+
+            <div className="row g-2">
+              <SelectMultiple
+                name="projectIds"
+                label="Projects :"
+                options={data.projects}
+                labelKey="name"
+                valueKey="id"
+              />
+              <SelectMultiple
+                name="createdByIds"
+                label="Submitted By :"
+                options={data.createdBy}
+                labelKey={(item) => item.name}
+                valueKey="id"
+              />
+              <SelectMultiple
+                name="paidById"
+                label="Paid By :"
+                options={data.paidBy}
+                labelKey={(item) => item.name}
+                valueKey="id"
+              />
+              <SelectMultiple
+                name="expenseCategoryIds"
+                label="Category :"
+                options={data.expenseCategory}
+                labelKey={(item) => item.name}
+                valueKey="id"
+              />
+
+              <div className="mb-3">
+                <label className="form-label">Status :</label>
+                <div className="row flex-wrap">
+                  {data?.status
+                    ?.slice()
+                    .sort((a, b) => a.name.localeCompare(b.name))
+                    .map((status) => (
+                      <div className="col-6" key={status.id}>
+                        <Controller
+                          control={control}
+                          name="statusIds"
+                          render={({ field: { value = [], onChange } }) => (
+                            <div className="d-flex align-items-center me-3 mb-2">
+                              <input
+                                type="checkbox"
+                                className="form-check-input"
+                                value={status.id}
+                                checked={value.includes(status.id)}
+                                onChange={(e) => {
+                                  const checked = e.target.checked;
+                                  onChange(
+                                    checked
+                                      ? [...value, status.id]
+                                      : value.filter((v) => v !== status.id)
+                                  );
+                                }}
+                              />
+                              <label className="ms-2 mb-0">{status.name}</label>
+                            </div>
+                          )}
+                        />
+                      </div>
+                    ))}
+                </div>
               </div>
             </div>
-            <DateRangePicker1
-              placeholder="DD-MM-YYYY To DD-MM-YYYY"
-              startField="startDate"
-              endField="endDate"
-              resetSignal={resetKey}
-              defaultRange={false}
-              maxDate={new Date()}
-              className="w-100"
-            />
-          </div>
-
-          <div className="row g-2">
-            <SelectMultiple
-              name="projectIds"
-              label="Projects :"
-              options={data.projects}
-              labelKey="name"
-              valueKey="id"
-            />
-            <SelectMultiple
-              name="createdByIds"
-              label="Submitted By :"
-              options={data.createdBy}
-              labelKey={(item) => item.name}
-              valueKey="id"
-            />
-            <SelectMultiple
-              name="paidById"
-              label="Paid By :"
-              options={data.paidBy}
-              labelKey={(item) => item.name}
-              valueKey="id"
-            />
-            <SelectMultiple
-              name="expenseCategoryIds"
-              label="Category :"
-              options={data.expenseCategory}
-              labelKey={(item) => item.name}
-              valueKey="id"
-            />
-
-            <div className="mb-3">
-              <label className="form-label">Status :</label>
-              <div className="row flex-wrap">
-                {data?.status
-                  ?.slice()
-                  .sort((a, b) => a.name.localeCompare(b.name))
-                  .map((status) => (
-                    <div className="col-6" key={status.id}>
-                      <Controller
-                        control={control}
-                        name="statusIds"
-                        render={({ field: { value = [], onChange } }) => (
-                          <div className="d-flex align-items-center me-3 mb-2">
-                            <input
-                              type="checkbox"
-                              className="form-check-input"
-                              value={status.id}
-                              checked={value.includes(status.id)}
-                              onChange={(e) => {
-                                const checked = e.target.checked;
-                                onChange(
-                                  checked
-                                    ? [...value, status.id]
-                                    : value.filter((v) => v !== status.id)
-                                );
-                              }}
-                            />
-                            <label className="ms-2 mb-0">{status.name}</label>
-                          </div>
-                        )}
-                      />
-                    </div>
-                  ))}
-              </div>
+            <div className="mb-2 text-start ">
+              <label htmlFor="groupBySelect" className="form-label">
+                Group By :
+              </label>
+              <select
+                id="groupBySelect"
+                className="form-select form-select-sm"
+                value={selectedGroup?.id || "none"}
+                onChange={handleGroupChange}
+              >
+                {groupByList.map((group) => (
+                  <option key={group.id} value={group.id}>
+                    {group.name}
+                  </option>
+                ))}
+              </select>
             </div>
-          </div>
-          <div className="mb-2 text-start ">
-            <label htmlFor="groupBySelect" className="form-label">
-              Group By :
-            </label>
-            <select
-              id="groupBySelect"
-              className="form-select form-select-sm"
-              value={selectedGroup?.id || ""}
-              onChange={handleGroupChange}
-            >
-              {groupByList.map((group) => (
-                <option key={group.id} value={group.id}>
-                  {group.name}
-                </option>
-              ))}
-            </select>
-          </div>
 
-          <div className="d-flex justify-content-end py-3 gap-2">
-            <button
-              type="button"
-              className="btn btn-label-secondary btn-sm"
-              onClick={onClear}
-            >
-              Clear
-            </button>
-            <button type="submit" className="btn btn-primary btn-sm">
-              Apply
-            </button>
-          </div>
-        </form>
-      </FormProvider>
-    </>
-  );
-});
+            <div className="d-flex justify-content-end py-3 gap-2">
+              <button
+                type="button"
+                className="btn btn-label-secondary btn-sm"
+                onClick={onClear}
+              >
+                Clear
+              </button>
+              <button type="submit" className="btn btn-primary btn-sm">
+                Apply
+              </button>
+            </div>
+          </form>
+        </FormProvider>
+      </>
+    );
+  }
+);
 
-export default ExpenseFilterPanel;
+export default ExpenseFilterPanel;

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";
@@ -23,8 +23,15 @@ import { useSelector } from "react-redux";
 import ExpenseFilterChips from "./ExpenseFilterChips";
 import { defaultFilter } from "./ExpenseSchema";
 import { useNavigate } from "react-router-dom";
+import { displayName } from "react-quill";
 
-const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
+const ExpenseList = ({
+  filters,
+  groupBy,
+  searchText,
+  tableRef,
+  onDataFiltered,
+}) => {
   const [deletingId, setDeletingId] = useState(null);
   const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const {
@@ -47,6 +54,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
   );
@@ -71,6 +84,16 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
   };
 
   const groupByField = (items, field) => {
+    if (!field || field === "none") {
+      return {
+        All: {
+          key: "All",
+          displayField: "All",
+          items: items || []
+        }
+      };
+    }
+
     return items.reduce((acc, item) => {
       let key;
       let displayField;
@@ -85,8 +108,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
           displayField = "Status";
           break;
         case "submittedBy":
-          key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
-            }`.trim();
+          key = `${item?.createdBy?.firstName ?? ""} ${item?.createdBy?.lastName ?? ""}`.trim();
           displayField = "Submitted By";
           break;
         case "project":
@@ -110,7 +132,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
           displayField = "Others";
       }
 
-      const groupKey = `${field}_${key}`; // unique key for object property
+      const groupKey = `${field}_${key}`;
       if (!acc[groupKey]) {
         acc[groupKey] = { key, displayField, items: [] };
       }
@@ -120,6 +142,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
     }, {});
   };
 
+
   const expenseColumns = [
     {
       key: "expenseUId",
@@ -212,12 +235,18 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
     return <ExpenseTableSkeleton headers={headers} />;
   if (isError) return <div>{error?.message}</div>;
 
-  const grouped = groupBy
-    ? groupByField(data?.data ?? [], groupBy)
-    : { All: data?.data ?? [] };
+  const isNoGrouping = !groupBy || groupBy === "none";
+  const grouped = isNoGrouping
+    ? { All: { key: "All", displayField: "All", items: data?.data ?? [] } }
+    : groupByField(data?.data ?? [], groupBy);
+
+
+
+
   const IsGroupedByDate = [
+    { key: "none", displayField: "None" },
     { key: "transactionDate", displayField: "Transaction Date" },
-    { key: "createdAt", displayField: "created Date" },
+    { key: "createdAt", displayField: "created Date", },
   ]?.includes(groupBy);
 
   const canEditExpense = (expense) => {
@@ -258,7 +287,8 @@ 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 ">
@@ -286,21 +316,23 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                 {Object.keys(grouped).length > 0 ? (
                   Object.values(grouped).map(({ key, displayField, items }) => (
                     <React.Fragment key={key}>
-                      <tr className="tr-group text-dark">
-                        <td colSpan={8} className="text-start">
-                          <div className="d-flex align-items-center px-2">
-                            {" "}
-                            <small className="fs-6 py-1">
-                              {displayField} :{" "}
-                            </small>{" "}
-                            <small className="fs-6  ms-3">
-                              {IsGroupedByDate
-                                ? formatUTCToLocalTime(key)
-                                : key}
-                            </small>
-                          </div>
-                        </td>
-                      </tr>
+                      {!isNoGrouping && (
+                        <tr className="tr-group text-dark">
+                          <td colSpan={8} className="text-start">
+                            <div className="d-flex align-items-center px-2">
+                              {" "}
+                              <small className="fs-6 py-1">
+                                {displayField} :{" "}
+                              </small>{" "}
+                              <small className="fs-6  ms-3">
+                                {IsGroupedByDate
+                                  ? formatUTCToLocalTime(key)
+                                  : key}
+                              </small>
+                            </div>
+                          </td>
+                        </tr>
+                      )}
                       {items?.map((expense) => (
                         <tr key={expense.id}>
                           {expenseColumns.map(
@@ -406,7 +438,18 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
                   <tr>
                     <td colSpan={8} className="text-center border-0 ">
                       <div className="py-8">
-                        <p>No Expense Found</p>
+                        <p
+                          className="text-center"
+                          style={{
+                            height: "250px",
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                          }}
+                        >
+                          No Expense found
+                        </p>
+
                       </div>
                     </td>
                   </tr>

src/components/Expenses/Filelist.jsx

@@ -119,7 +119,7 @@ export const FileView = ({ file, viewFile }) => {
             <span className="text-muted small text-truncate mb-n4">
               {file.fileName}
             </span>
-            <span className="text-body-secondary small">
+            <span className="text-body-secondary small mt-2">
               <Tooltip text={"Click on file"}>
                 {" "}
                 {file.fileSize ? formatFileSize(file.fileSize) : ""}

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,
-              base64Data: null,
-              contentType: doc.contentType,
-              documentId: doc.documentId,
-              fileSize: 0,
-              description: "",
-              preSignedUrl: doc.preSignedUrl,
-              isActive: doc.isActive ?? true,
-            }))
+            fileName: doc.fileName,
+            base64Data: null,
+            contentType: doc.contentType,
+            documentId: doc.documentId,
+            fileSize: 0,
+            description: "",
+            preSignedUrl: doc.preSignedUrl,
+            isActive: doc.isActive ?? true,
+          }))
           : [],
       });
     }
@@ -236,7 +237,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
         {expenseToEdit ? "Update Expense " : "Create New Expense"}
       </h5>
       <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
-        <div className="row my-2 text-start">         
+        <div className="row my-2 text-start">
           <div className="col-12 col-md-6">
             <SelectProjectField
               label="Project"
@@ -259,30 +260,32 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <Label htmlFor="expenseCategoryId" className="form-label" required>
               Expense Category
             </Label>
-            <select
-              className="form-select "
-              id="expenseCategoryId"
-              {...register("expenseCategoryId")}
-            >
-              <option value="" disabled>
-                Select Category
-              </option>
-              {ExpenseLoading ? (
-                <option disabled>Loading...</option>
-              ) : (
-                expenseCategories?.map((expense) => (
-                  <option key={expense.id} value={expense.id}>
-                    {expense.name}
-                  </option>
-                ))
+
+            <AppFormController
+              name="expenseCategoryId"
+              control={control}
+              rules={{ required: "Expense Category is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label already shown above
+                  placeholder="Select Category"
+                  options={expenseCategories ?? []}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  isLoading={ExpenseLoading}
+                  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">
@@ -290,40 +293,40 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <Label htmlFor="paymentModeId" className="form-label" required>
               Payment Mode
             </Label>
-            <select
-              className="form-select "
-              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>
-                ))
+
+            <AppFormController
+              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"
+                />
               )}
-            </select>
+            />
+
             {errors.paymentModeId && (
-              <small className="danger-text">
-                {errors.paymentModeId.message}
-              </small>
+              <small className="danger-text">{errors.paymentModeId.message}</small>
             )}
           </div>
-          <div className="col-12 col-md-6 text-start">           
+
+          <div className="col-12 col-md-6 text-start">
             <AppFormController
-              name="paidById"              
+              name="paidById"
               control={control}
               render={({ field }) => (
                 <SelectEmployeeServerSide
-                label="Paid By" required
+                  label="Paid By" required
                   value={field.value}
                   onChange={field.onChange}
-                  isFullObject={false} 
+                  isFullObject={false}
                 />
               )}
             />
@@ -437,32 +440,37 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
           </div>
         </div>
         <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 "
-              id="currencyId"
-              {...register("currencyId")}
-            >
-              <option value="" disabled>
-                Select Currency
-              </option>
-              {currencyLoading ? (
-                <option disabled>Loading...</option>
-              ) : (
-                currencies?.map((currency) => (
-                  <option key={currency.id} value={currency.id}>
-                    {`${currency.currencyName} (${currency.symbol}) `}
-                  </option>
-                ))
+
+            <AppFormController
+              name="currencyId"
+              control={control}
+              rules={{ required: "Currency is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label already shown above
+                  placeholder="Select Currency"
+                  options={currencies?.map((currency) => ({
+                    id: currency.id,
+                    name: `${currency.currencyName} (${currency.symbol})`,
+                  })) ?? []}
+                  value={field.value || ""}
+                  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">
               <Label className="form-label" required>
@@ -553,7 +561,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
                     (fileError?.fileSize?.message ||
                       fileError?.contentType?.message ||
                       fileError?.base64Data?.message,
-                    fileError?.documentId?.message)
+                      fileError?.documentId?.message)
                   }
                 </div>
               ))}
@@ -578,8 +586,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             {isPending || createPending
               ? "Please Wait..."
               : expenseToEdit
-              ? "Update"
-              : "Save as Draft"}
+                ? "Update"
+                : "Save as Draft"}
           </button>
         </div>
       </form>

src/components/Expenses/PreviewDocument.jsx

@@ -1,4 +1,6 @@
+import { error } from "pdf-lib";
 import { useState, useRef, useEffect } from "react";
+import { iframeDocuments } from "../../utils/constants";
 
 const PreviewDocument = ({ files = [] }) => {
   const images = Array.isArray(files) ? files : [files];
@@ -15,9 +17,13 @@ const PreviewDocument = ({ files = [] }) => {
   const MIN_ZOOM = 0.4;
   const MAX_ZOOM = 3;
 
-  const currentImage = images[index];
+  const currentFile = images[index];
+  const fileUrl = currentFile?.preSignedUrl;
+
+  const isDocumentType = iframeDocuments.includes(
+    currentFile?.contentType.toLowerCase()
+  );
 
-  // Reset on image change
   useEffect(() => {
     setRotation(0);
     setScale(1);
@@ -25,8 +31,10 @@ const PreviewDocument = ({ files = [] }) => {
     setLoading(true);
   }, [index]);
 
-  const zoomIn = () => setScale((prev) => Math.min(prev + 0.2, MAX_ZOOM));
-  const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, MIN_ZOOM));
+  const zoomIn = () =>
+    !isDocumentType && setScale((prev) => Math.min(prev + 0.2, MAX_ZOOM));
+  const zoomOut = () =>
+    !isDocumentType && setScale((prev) => Math.max(prev - 0.2, MIN_ZOOM));
 
   const resetAll = () => {
     setRotation(0);
@@ -42,24 +50,8 @@ const PreviewDocument = ({ files = [] }) => {
     if (index > 0) setIndex((i) => i - 1);
   };
 
-  const handleWheel = (e) => {
-    e.preventDefault();
-
-    if (e.ctrlKey) {
-      const delta = e.deltaY > 0 ? -0.1 : 0.1;
-      setScale((prev) => {
-        let next = prev + delta;
-        if (next < MIN_ZOOM) next = MIN_ZOOM;
-        if (next > MAX_ZOOM) next = MAX_ZOOM;
-        return next;
-      });
-    } else {
-      if (e.deltaY > 0) nextImage();
-      else prevImage();
-    }
-  };
-
   const handleMouseDown = (e) => {
+    if (isDocumentType) return;
     setDragging(true);
     startPos.current = {
       x: e.clientX - position.x,
@@ -67,8 +59,30 @@ const PreviewDocument = ({ files = [] }) => {
     };
   };
 
+const handleWheel = (e) => {
+  if (isDocumentType) return;
+
+  e.preventDefault();
+  const delta = e.deltaY;
+
+  setScale((prev) => {
+    let newScale = prev;
+
+    if (delta < 0) {
+      // Scroll UP -> Zoom IN
+      newScale = Math.min(prev + 0.1, MAX_ZOOM);
+    } else {
+      // Scroll DOWN -> Zoom OUT
+      newScale = Math.max(prev - 0.1, MIN_ZOOM);
+    }
+
+    return newScale;
+  });
+};
+
+
   const handleMouseMove = (e) => {
-    if (!dragging) return;
+    if (!dragging || isDocumentType) return;
 
     setPosition({
       x: e.clientX - startPos.current.x,
@@ -78,14 +92,15 @@ const PreviewDocument = ({ files = [] }) => {
 
   const handleMouseUp = () => setDragging(false);
 
-  const handleDoubleClick = () => resetAll();
+  const handleDoubleClick = () => !isDocumentType && resetAll();
 
   return (
-    <>
-      {/* Top Controls */}
-      <div className="d-flex justify-content-start align-items-center mb-2">
-        {/* Left */}
-        <div className="d-flex gap-3">
+<>
+  {/* Controls */}
+  <div className="d-flex justify-content-start align-items-center mb-2">
+    <div className="d-flex gap-3">
+      {!isDocumentType && (
+        <>
           <i
             className="bx bx-rotate-right cursor-pointer fs-4"
             onClick={() => setRotation((prev) => prev + 90)}
@@ -106,63 +121,80 @@ const PreviewDocument = ({ files = [] }) => {
             onClick={resetAll}
             title="Reset"
           />
-        </div>
-      </div>
+        </>
+      )}
+    </div>
+  </div>
 
-      <div
-        onWheel={handleWheel}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
-        onDoubleClick={handleDoubleClick}
-        className="position-relative d-flex justify-content-center align-items-center bg-light-secondary overflow-hidden"
+  <div
+
+    onWheel={handleWheel}
+    onMouseDown={handleMouseDown}
+    onMouseMove={handleMouseMove}
+    onMouseUp={handleMouseUp}
+    onMouseLeave={handleMouseUp}
+    onDoubleClick={handleDoubleClick}
+    className="position-relative d-flex justify-content-center align-items-center bg-light-secondary overflow-hidden"
+    style={{
+      minHeight: "70vh",
+      userSelect: "none",
+      borderRadius: "10px",
+    }}
+  >
+    {loading && <div className="text-secondary">Loading...</div>}
+
+    {isDocumentType ? (
+      <iframe
+        src={fileUrl}
+        title="Document Preview"
         style={{
-          minHeight: "70vh",
-          userSelect: "none",
-          borderRadius: "10px",
+          width: "100%",
+          height: "70vh",
+          border: "none",
         }}
-      >
-        {loading && <div className="text-secondary">Loading...</div>}
+        onLoad={() => setLoading(false)}
+      />
+    ) : (
+      <img
+        src={fileUrl}
+        alt="Preview"
+        draggable="false"
+        style={{
+          maxHeight: "60vh",
+          display: loading ? "none" : "block",
+          transform: `
+            translate(${position.x}px, ${position.y}px)
+            scale(${scale})
+            rotate(${rotation}deg)
+          `,
+          transition: dragging ? "none" : "transform 0.2s ease",
+          cursor: dragging ? "grabbing" : "grab",
+        }}
+        onLoad={() => setLoading(false)}
+      />
+    )}
+  </div>
 
-        <img
-          src={currentImage?.preSignedUrl}
-          alt="Preview"
-          draggable="false"
-          style={{
-            maxHeight: "60vh",
-            display: loading ? "none" : "block",
-            transform: `
-              translate(${position.x}px, ${position.y}px)
-              scale(${scale})
-              rotate(${rotation}deg)
-            `,
-            transition: dragging ? "none" : "transform 0.2s ease",
-            cursor: dragging ? "grabbing" : "grab",
-          }}
-          onLoad={() => setLoading(false)}
-        />
-      </div>
+  <div className="d-flex justify-content-between mt-2">
+    <div className="text-muted small">
+      Scroll = change file | Double click = reset (images only)
+    </div>
+    <div className="d-flex align-items-center gap-2">
+      <i
+        className="bx bx-chevron-left cursor-pointer fs-4"
+        onClick={prevImage}
+      />
+      <span>
+        {index + 1} / {images.length}
+      </span>
+      <i
+        className="bx bx-chevron-right cursor-pointer fs-4"
+        onClick={nextImage}
+      />
+    </div>
+  </div>
+</>
 
-      <div className="d-flex justify-content-between">
-        <div className="text-center text-muted mt-2 small">
-          Scroll = change image | Double click = reset
-        </div>
-        <div className="d-flex align-items-center gap-2">
-          <i
-            className="bx bx-chevron-left cursor-pointer fs-4"
-            onClick={prevImage}
-          />
-          <span>
-            {index + 1} / {images.length}
-          </span>
-          <i
-            className="bx bx-chevron-right cursor-pointer fs-4"
-            onClick={nextImage}
-          />
-        </div>
-      </div>
-    </>
   );
 };
 

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,
                             Images: data?.documents,
                           });
-                        }
                       }}
                     >
                       <i
@@ -620,4 +618,4 @@ const tdsPercentage = Number(watch("tdsPercentage")) || 0;
   );
 };
 
-export default ViewExpense;
+export default ViewExpense;

src/components/Layout/Sidebar.jsx

@@ -13,37 +13,22 @@ const Sidebar = () => {
       id="layout-menu"
       className="layout-menu menu-vertical menu bg-menu-theme "
     >
-      <div className="app-brand" style={{ paddingLeft: "30px" }}>
+      <div className="app-brand" style={{ paddingLeft: "15px" }}>
         <Link to="/dashboard" className="app-brand-link">
-          {/* <span className="app-brand-logo  rounded-circle app-brand-logo-border">
+          <span className="app-brand-logo demo d-flex align-items-center">
             <img
-              className="app-brand-logo-sidebar"
               src="/img/brand/marco.png"
-              alt="logo"
-              aria-label="logo image"
-              style={{ margin: "5px", paddingRight: "5px" }}
+              width="50"
+              height="40"
+              alt="OnFieldWork logo"
             />
-          </span> */}
+          </span>
 
-          <a
-            href="/"
-            className="app-brand-link d-flex align-items-center gap-1 fw-bold navbar-brand "
-          >
-            <span className="app-brand-logo demo d-flex align-items-center">
-              <img
-                src="/img/brand/marco.png"
-                width="40"
-                height="40"
-                alt="OnFieldWork logo"
-              />
-            </span>
-
-            <span className="app-brand-text">
-              <span className="text-primary ">OnField</span>
-              <span className="mx-1">Work</span>
-              <span className="text-dark">.com</span>
-            </span>
-          </a>
+          <span className="app-brand-text">
+            <span className="text-blue ms-1">OnField</span>
+            <span className="text-green">Work</span>
+            <span className="text-dark">.com</span>
+          </span>
         </Link>
 
         <small className="layout-menu-toggle menu-link text-large ms-auto cursor-pointer">
@@ -69,7 +54,7 @@ const Sidebar = () => {
           </>
         )}
         {data &&
-          data?.data.map((section) => (
+          data?.data?.map((section) => (
             <React.Fragment
               key={section.id || section.header || section.items[0]?.id}
             >

src/components/Organization/AssignOrg.jsx

@@ -33,8 +33,11 @@ const AssignOrg = ({ setStep }) => {
     });
   const isPending = isPendingProject || isPendingTenat;
   const mergedServices = useMemo(() => {
-    if (!masterService || !projectServices) return [];
-    const combined = [...masterService?.data, ...projectServices];
+    const master = Array.isArray(masterService?.data) ? masterService.data : [];
+    const project = Array.isArray(projectServices) ? projectServices : [];
+
+    const combined = [...master, ...project];
+
     return combined.filter(
       (item, index, self) => index === self.findIndex((s) => s.id === item.id)
     );
@@ -96,11 +99,12 @@ const AssignOrg = ({ setStep }) => {
         <div className="d-flex justify-content-between align-items-center text-start mb-1">
           <div className="d-flex flex-row gap-2 align-items-center text-wrap">
             <img
-                    src="/public/assets/img/orgLogo.png"
-                    alt="logo"
-                    width={40}
-                    height={40}
-                  />  <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
+              src="/public/assets/img/orgLogo.png"
+              alt="logo"
+              width={40}
+              height={40}
+            />{" "}
+            <p className="fw-semibold fs-5 mt-2 m-0">{orgData.name}</p>
           </div>
           <div className="text-end">
             <button
@@ -113,60 +117,63 @@ const AssignOrg = ({ setStep }) => {
           </div>
         </div>
       </div>
-      <div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
+      <div className="d-flex text-secondary mb-3">
+        {" "}
+        <i className="bx bx-sm bx-info-circle me-2" /> Organization Info
+      </div>
       {/* Contact Info */}
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-4">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-           <i className="bx bx-sm bx-user me-1" /> Contact Person :
+            <i className="bx bx-sm bx-user me-1" /> Contact Person :
           </label>
           <div className="text-muted">{orgData.contactPerson}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-4">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-           <i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
+            <i className="bx bx-sm me-1 bx-phone"></i> Contact Number :
           </label>
           <div className="text-muted">{orgData.contactNumber}</div>
         </div>
       </div>
-      <div className="col-md-6 mb-3">
+      <div className="col-md-12 mb-4">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-          <i className='bx bx-sm me-1 bx-envelope'></i>  Email Address :
+            <i className="bx bx-sm me-1 bx-envelope"></i> Email Address :
           </label>
-          <div className="text-muted">{orgData.email}</div>
+          <div className="text-muted text-wrap">{orgData.email}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-4">
         <div className="d-flex">
           <label
             className="form-label me-2 mb-0 fw-semibold"
             style={{ maxWidth: "130px" }}
           >
-          <i className="bx bx-sm me-1 bx-barcode"></i>
-  Service Provider Id (SPRID) :
+            <i className="bx bx-sm me-2 bx-barcode"></i>
+            Service Provider Id (SPRID) :
           </label>
           <div className="text-muted">{orgData.sprid}</div>
         </div>
       </div>
-      <div className="col-12 mb-3">
+      <div className="col-12 mb-4">
         <div className="d-flex">
           <label
             className="form-label me-1 mb-0 fw-semibold"
             style={{ minWidth: "130px" }}
           >
-           <i className='bx bx-sm me-1 bx-map'></i> Address :
+            <i className="bx bx-sm me-1 bx-map"></i> Address :
           </label>
           <div className="text-muted text-start">{orgData.address}</div>
         </div>
@@ -180,7 +187,11 @@ const AssignOrg = ({ setStep }) => {
             <>
               {/* Organization Type */}
               <div className="mb-3 text-start">
-                <Label htmlFor="organizationTypeId" className="mb-3 fw-semibold" required>
+                <Label
+                  htmlFor="organizationTypeId"
+                  className="mb-3 fw-semibold"
+                  required
+                >
                   Organization Type
                 </Label>
                 <div className="d-flex flex-wrap gap-3 mt-1">
@@ -214,7 +225,11 @@ const AssignOrg = ({ setStep }) => {
 
               {/* Services */}
               <div className="mb-3">
-                <Label htmlFor="serviceIds" className="mb-3 fw-semibold" required>
+                <Label
+                  htmlFor="serviceIds"
+                  className="mb-3 fw-semibold"
+                  required
+                >
                   Select Services
                 </Label>
                 {mergedServices?.map((service) => (
@@ -255,8 +270,8 @@ const AssignOrg = ({ setStep }) => {
               {isPending
                 ? "Please wait..."
                 : flowType === "default"
-                  ? "Assign to Organization"
-                  : "Assign to Project"}
+                ? "Assign to Organization"
+                : "Assign to Project"}
             </button>
           </div>
         </form>

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"

src/components/Organization/OrgPickerFromSPId.jsx

@@ -45,7 +45,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
   return (
     <div className="d-block mt-4">
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="row align-items-center g-2">
+        <div className="row align-items-center g-2 mb-3">
           {/* Input Section */}
           <div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start">
             <Label className="text-nowrap mb-1 mb-md-0" required>
@@ -88,7 +88,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
         <div className="py-2 text-tiny text-center">
           <div className="d-flex flex-column gap-2 border-0 bg-none">
             {data.data.map((org) => (
-              <div className="d-flex flex-row gap-2 text-start text-black ">
+              <div className="d-flex flex-row gap-2 text-start text-black mt-3">
                 <div className="mt-1">
                   <img
                     src="/public/assets/img/orgLogo.png"
@@ -97,19 +97,19 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
                     height={50}
                   />
                 </div>
-                <div className="d-flex flex-column p-0 m-0 cursor-pointer">
-                  <span className="fs-6 fw-semibold">{org.name}</span>
+                <div className="d-flex flex-column p-0 m-0 cursor-pointer mb-3">
+                  <span className="fs-6 fw-semibold mb-2">{org.name}</span>
                   <div className="d-flex gap-2">
                     <small
-                      className=" fw-semibold text-uppercase"
+                      className=" fw-semibold text-uppercase mb-2"
                       style={{ letterSpacing: "1px" }}
                     >
                       SPRID :{" "}
                     </small>
                     <small className="fs-6">{org.sprid}</small>
                   </div>
-                  <div className="d-flex flex-row gap-2">
-                    <small className="text-small fw-semibold">Address:</small>
+                  <div className="d-flex flex-row gap-2 mb-4">
+                    <small className="text-small fw-semibold ">Address:</small>
                     <div className="d-flex text-wrap">{org.address}</div>
                   </div>
                   <div className="m-0 p-0">

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>

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

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">

src/components/PaymentRequest/ActionPaymentRequest.jsx

@@ -191,16 +191,16 @@ const ActionPaymentRequest = ({ requestId }) => {
       {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
         <>
           {isProccesed ? (
-            <div class="accordion-item active shadow-none">
-              <h2 class="accordion-header d-flex align-items-center">
+            <div className="accordion-item active shadow-none">
+              <h2 className="accordion-header d-flex align-items-center">
                 <button
                   type="button"
-                  class="accordion-button"
+                  className="accordion-button"
                   data-bs-toggle="collapse"
                   data-bs-target="#accordionWithIcon-1"
                   aria-expanded="true"
                 >
-                  <i class="icon-base bx bx-receipt me-2"></i>
+                  <i className="icon-base bx bx-receipt me-2"></i>
                   Make Expense
                 </button>
               </h2>

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,
-              base64Data: null,
-              contentType: doc.contentType,
-              documentId: doc.id,
-              fileSize: 0,
-              description: "",
-              preSignedUrl: doc.preSignedUrl,
-              isActive: doc.isActive ?? true,
-            }))
+            fileName: doc.fileName,
+            base64Data: null,
+            contentType: doc.contentType,
+            documentId: doc.id,
+            fileSize: 0,
+            description: "",
+            preSignedUrl: doc.preSignedUrl,
+            isActive: doc.isActive ?? true,
+          }))
           : [],
       });
     }
@@ -266,9 +268,9 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                   shouldDirty: true,
                   shouldValidate: true,
                 })
-                
+
               }
-                disabled={
+              disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
               }
             />
@@ -281,33 +283,33 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             <Label htmlFor="expenseCategoryId" className="form-label" required>
               Expense Category
             </Label>
-            <select
-              className="form-select "
-              id="expenseCategoryId"
-              {...register("expenseCategoryId")}
-              disabled={
-                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
-              }
-            >
-              <option value="" disabled>
-                Select Category
-              </option>
-              {ExpenseLoading ? (
-                <option disabled>Loading...</option>
-              ) : (
-                expenseCategories?.map((expense) => (
-                  <option key={expense.id} value={expense.id}>
-                    {expense.name}
-                  </option>
-                ))
+
+            <AppFormController
+              name="expenseCategoryId"
+              control={control}
+              rules={{ required: "Expense Category is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label already above
+                  placeholder="Select Category"
+                  options={expenseCategories ?? []}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  isLoading={ExpenseLoading}
+                  isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
+                  className="m-0 form-select-sm w-100"
+                />
               )}
-            </select>
+            />
+
             {errors.expenseCategoryId && (
               <small className="danger-text">
                 {errors.expenseCategoryId.message}
               </small>
             )}
           </div>
+
         </div>
 
         {/* Title and Advance Payment  */}
@@ -458,30 +460,39 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             <Label htmlFor="currencyId" className="form-label" required>
               Currency
             </Label>
-            <select
-              id="currencyId"
-              className="form-select "
-              {...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  */}
@@ -508,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>
 
@@ -559,7 +570,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                     (fileError?.fileSize?.message ||
                       fileError?.contentType?.message ||
                       fileError?.base64Data?.message,
-                    fileError?.documentId?.message)
+                      fileError?.documentId?.message)
                   }
                 </div>
               ))}
@@ -582,8 +593,8 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             {createPending || isPending
               ? "Please Wait..."
               : requestToEdit
-              ? "Update"
-              : "Save as Draft"}
+                ? "Update"
+                : "Save as Draft"}
           </button>
         </div>
       </form>

src/components/PaymentRequest/PaymentRequestFilterChips.jsx

@@ -1,3 +1,4 @@
+import moment from "moment";
 import React, { useMemo } from "react";
 
 const PaymentRequestFilterChips = ({ filters, filterData, removeFilterChip, clearFilter }) => {
@@ -22,6 +23,21 @@ const PaymentRequestFilterChips = ({ filters, filterData, removeFilterChip, clea
         addGroup(filters.projectIds, data.projects, "Projects", "projectIds");
         addGroup(filters.statusIds, data.status, "Status", "statusIds");
 
+        if (filters.startDate || filters.endDate) {
+            const start = filters.startDate ? moment(filters.startDate).format("DD MMM YYYY") : "";
+            const end = filters.endDate ? moment(filters.endDate).format("DD MMM YYYY") : "";
+            chips.push({
+                key: "dateRange",
+                label: "Date",
+                items: [
+                    {
+                        id: "dateRange",
+                        name: start && end ? `${start} to ${end}` : start || end,
+                    },
+                ],
+            });
+        }
+
         return chips;
     }, [filters, filterData]);
 

src/components/PaymentRequest/PaymentRequestFilterPanel.jsx

@@ -76,9 +76,18 @@ const PaymentRequestFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilte
             if (value !== undefined) {
                 setValue(name, value);
             } else {
-                reset({ ...methods.getValues(), [name]: defaultFilter[name] });
+                // NOTE: Using defaultPaymentRequestFilter for clear functionality
+                reset({ ...methods.getValues(), [name]: defaultPaymentRequestFilter[name] });
             }
         },
+        // --- START FIX: Add resetDateRange method ---
+        resetDateRange: () => {
+            setValue("startDate", null);
+            setValue("endDate", null);
+            // Trigger re-render/reset of the DateRangePicker component
+            setResetKey((prev) => prev + 1);
+        },
+        // --- END FIX ---
         getValues: methods.getValues, // optional, to read current filter state
     }));
 
@@ -94,7 +103,7 @@ const PaymentRequestFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilte
             startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
             endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
         });
-        handleGroupBy(selectedGroup.id);
+        // handleGroupBy(selectedGroup.id);
         // closePanel();
     };
 

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>
@@ -348,8 +355,18 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
               ) : (
                 <tr>
                   <td colSpan={8} className="text-center border-0 ">
-                    <div className="py-8">
-                      <p>No Request Found</p>
+                    <div >
+                      <p
+                        className="text-center"
+                        style={{
+                          height: "250px",
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "center",
+                        }}
+                      >
+                        No data found
+                      </p>
                     </div>
                   </td>
                 </tr>

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;

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;

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);
@@ -235,160 +237,169 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                 ))}
             </span>
           </p>
+          <div
+            className="col-12 col-md-4 d-flex flex-row gap-3 align-items-center mt-4 mb-6 justify-content-end"
+            ref={dropdownRef}
+          >
+            <div className="d-flex justify-content-between align-items-center w-100">
+
+              {/* Left Side → Heading + Search */}
+              <div className="d-flex flex-column w-100">
+                <label className=" text-start small mb-1">Search Employee</label>
+
+                <input
+                  type="text"
+                  className="form-control form-control-sm"
+                  placeholder="Search employees or roles..."
+                  value={searchTerm}
+                  onChange={handleSearchChange}
+                />
+              </div>
+
+              {/* Right Side → Dropdown */}
+              <div className="dropdown position-relative d-inline-block ms-2 mt-4">
+                <a
+                  className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
+                    ? "text-secondary"
+                    : "text-primary"
+                    }`}
+                  onClick={() => setOpen(!open)}
+                >
+                  <i className="bx bx-slider-alt ms-2"></i>
+                </a>
+
+                {/* Badge */}
+                {selectedRolesCount > 0 && (
+                  <span
+                    className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white text-tiny"
+                    style={{
+                      fontSize: "0.65rem",
+                      minWidth: "18px",
+                      height: "18px",
+                      padding: "0",
+                      lineHeight: "18px",
+                      textAlign: "center",
+                      zIndex: 10,
+                    }}
+                  >
+                    {selectedRolesCount}
+                  </span>
+                )}
+
+                {/* Dropdown Menu */}
+                {open && (
+                  <ul
+                    className="dropdown-menu show p-2 text-capitalize"
+                    style={{ maxHeight: "300px", overflowY: "auto" }}
+                  >
+                    {/* All Roles */}
+                    <li key="all">
+                      <div className="form-check dropdown-item py-0">
+                        <input
+                          className="form-check-input"
+                          type="checkbox"
+                          id="checkboxAllRoles"
+                          value="all"
+                          checked={selectedRoles.includes("all")}
+                          onChange={(e) => handleRoleChange(e, e.target.value)}
+                        />
+                        <label
+                          className="form-check-label ms-2"
+                          htmlFor="checkboxAllRoles"
+                        >
+                          All Roles
+                        </label>
+                      </div>
+                    </li>
+
+                    {/* Dynamic Roles */}
+                    {jobRolesForDropdown?.map((role) => (
+                      <li key={role.id}>
+                        <div className="form-check dropdown-item py-0">
+                          <input
+                            className="form-check-input"
+                            type="checkbox"
+                            id={`checkboxRole-${role.id}`}
+                            value={role.id}
+                            checked={selectedRoles.includes(String(role.id))}
+                            onChange={(e) => handleRoleChange(e, e.target.value)}
+                          />
+                          <label
+                            className="form-check-label ms-2"
+                            htmlFor={`checkboxRole-${role.id}`}
+                          >
+                            {role.name}
+                          </label>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+
+            </div>
+          </div>
+
 
           <form onSubmit={handleSubmit(onSubmit)}>
             <div className="form-label text-start">
               <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 d-none">
                       <div>
-                        <select
-                          className="form-select form-select-sm"
-                          value={selectedOrganization || ""}
-                          onChange={(e) =>
-                            setSelectedOrganization(e.target.value)
-                          }
-                        >
-                          {isServiceLoading ? (
-                            <option>Loading...</option>
-                          ) : (
-                            <>
-                              <option value="">--Select Organization--</option>
-                              {organizationList?.map((org,index) => (
-                                <option key={`${org.id}-${index}`} value={org.id}>
-                                  {org.name}
-                                </option>
-                              ))}
-                            </>
+                        <AppFormController
+                          name="organizationId"
+                          control={control}
+                          rules={{ required: "Organization is required" }}
+                          render={({ field }) => (
+                            <SelectField
+                              label="" // No label here, use external label if needed
+                              options={organizationList ?? []}
+                              placeholder="--Select Organization--"
+                              required
+                              labelKey="name"
+                              valueKeyKey="id"
+                              value={field.value || ""}
+                              onChange={field.onChange}
+                              isLoading={isServiceLoading}
+                              className="m-0 form-select-sm w-100"
+                            />
                           )}
-                        </select>
-                      </div>
-                      <div>
-                        <select
-                          className="form-select form-select-sm"
-                          value={selectedService || ""}
-                          onChange={(e) => setSelectedService(e.target.value)}
-                        >
-                          {isOrgLoading ? (
-                            <option>Loading...</option>
-                          ) : (
-                            <>
-                              <option value="">--Select Service--</option>
-                              {serviceList?.map((service,index) => (
-                                <option key={`${service.id}-${index}`}  value={service.id}>
-                                  {service.name}
-                                </option>
-                              ))}
-                            </>
-                          )}
-                        </select>
-                      </div>
-                    </div>
-                    <div
-                      className="col-12 col-md-4 d-flex flex-row gap-3 align-items-center justify-content-end"
-                      ref={dropdownRef}
-                    >
-                      {/* Dropdown */}
-                      <div className="dropdown position-relative d-inline-block">
-                        <a
-                          className={`dropdown-toggle hide-arrow cursor-pointer ${
-                            selectedRoles.includes("all") ||
-                            selectedRoles.length === 0
-                              ? "text-secondary"
-                              : "text-primary"
-                          }`}
-                          onClick={() => setOpen(!open)}
-                        >
-                          <i className="bx bx-slider-alt ms-2"></i>
-                        </a>
-
-                        {/* Badge */}
-                        {selectedRolesCount > 0 && (
-                          <span
-                            className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white text-tiny"
-                            style={{
-                              fontSize: "0.65rem",
-                              minWidth: "18px",
-                              height: "18px",
-                              padding: "0",
-                              lineHeight: "18px",
-                              textAlign: "center",
-                              zIndex: 10,
-                            }}
-                          >
-                            {selectedRolesCount}
-                          </span>
-                        )}
-
-                        {/* Dropdown Menu */}
-                        {open && (
-                          <ul
-                            className="dropdown-menu show p-2 text-capitalize"
-                            style={{ maxHeight: "300px", overflowY: "auto" }}
-                          >
-                            {/* All Roles */}
-                            <li key="all">
-                              <div className="form-check dropdown-item py-0">
-                                <input
-                                  className="form-check-input"
-                                  type="checkbox"
-                                  id="checkboxAllRoles"
-                                  value="all"
-                                  checked={selectedRoles.includes("all")}
-                                  onChange={(e) =>
-                                    handleRoleChange(e, e.target.value)
-                                  }
-                                />
-                                <label
-                                  className="form-check-label ms-2"
-                                  htmlFor="checkboxAllRoles"
-                                >
-                                  All Roles
-                                </label>
-                              </div>
-                            </li>
-
-                            {/* Dynamic Roles */}
-                            {jobRolesForDropdown?.map((role) => (
-                              <li key={role.id}>
-                                <div className="form-check dropdown-item py-0">
-                                  <input
-                                    className="form-check-input"
-                                    type="checkbox"
-                                    id={`checkboxRole-${role.id}`}
-                                    value={role.id}
-                                    checked={selectedRoles.includes(
-                                      String(role.id)
-                                    )}
-                                    onChange={(e) =>
-                                      handleRoleChange(e, e.target.value)
-                                    }
-                                  />
-                                  <label
-                                    className="form-check-label ms-2"
-                                    htmlFor={`checkboxRole-${role.id}`}
-                                  >
-                                    {role.name}
-                                  </label>
-                                </div>
-                              </li>
-                            ))}
-                          </ul>
-                        )}
-                      </div>
-
-                      {/* Search Box */}
-                      <div>
-                        <input
-                          type="text"
-                          className="form-control form-control-sm ms-auto mb-2 mt-2"
-                          placeholder="Search employees or roles..."
-                          value={searchTerm}
-                          onChange={handleSearchChange}
                         />
+
+                        {errors.organizationId && (
+                          <small className="danger-text">{errors.organizationId.message}</small>
+                        )}
+                      </div>
+
+                      <div>
+                        <AppFormController
+                          name="serviceId"
+                          control={control}
+                          rules={{ required: "Service is required" }}
+                          render={({ field }) => (
+                            <SelectField
+                              label="" // No label as you have one above or elsewhere
+                              options={serviceList ?? []}
+                              placeholder="--Select Service--"
+                              required
+                              labelKey="name"
+                              valueKeyKey="id"
+                              value={field.value || ""}
+                              onChange={field.onChange}
+                              isLoading={isOrgLoading}
+                              className="m-0 form-select-sm w-100"
+                            />
+                          )}
+                        />
+
+                        {errors.serviceId && (
+                          <small className="danger-text">{errors.serviceId.message}</small>
+                        )}
                       </div>
                     </div>
+
                   </div>
                 </div>
               </div>
@@ -409,7 +420,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 +490,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}

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,
-    handleSubmit,
-    formState: { errors },
-    setValue,
-    watch,
-    reset,
-  } = useForm({
+
+  const methods = 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">
-      <h5 className="text-center mb-2">Manage Buildings </h5>
-      <div className="col-12 text-start">
-        <label className="form-label">Select Building</label>
-        <select
-          {...register("Id")}
-          className="select2 form-select form-select-sm"
-        >
-          <option value="0">Add New Building</option>
-          {sortedBuildings.length > 0 ? (
-            sortedBuildings.map((b) => (
-              <option key={b.id} value={b.id}>
-                {b.buildingName}
-              </option>
-            ))
-          ) : (
-            <option disabled>No buildings found</option>
+    <AppFormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
+        <h5 className="text-center mb-2">Manage Buildings</h5>
+
+        {/* Building Select */}
+        <div className="col-12 text-start">
+          <Label htmlFor="Id" className="form-label">
+            Select Building
+          </Label>
+          <AppFormController
+            name="Id"
+            control={control}
+            rules={{ required: "Building is required" }}
+            render={({ field }) => (
+              <SelectField
+                label=""
+                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>
-        {errors.Id && <span className="danger-text">{errors.Id.message}</span>}
-      </div>
+        </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 form-control-sm"
-        />
-        {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 form-control-sm"
-        />
-        {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>
+        {/* Buttons */}
+        <div className="col-12 text-end mt-6 my-2">
+          <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>
+    </AppFormProvider>
   );
 };
 

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 {
-    register,
-    handleSubmit,
-    formState: { errors },
-    reset,
-    setValue,
-    getValues,
-    watch,
-  } = useForm({
-    resolver: zodResolver(taskSchema),
+  const methods = useForm({
     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)}>
-      <div className="text-center mb-1">
-        <h5 className="mb-1">Manage Task</h5>
-      </div>
+    <AppFormProvider {...methods}>
+      <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
+        <div className="text-center mb-1">
+          <h5 className="mb-1">Manage Task</h5>
+        </div>
 
-      <div className="row g-2 text-start">
-        <div className="col-12 col-md-6">
-          <label className="form-label">Select Building</label>
+        <div className="row g-2 text-start">
+          <div className="col-12 col-md-6">
+            <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"
-            value={building?.buildingName}
+            className="form-control"
+            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>
-          <input
-            className="form-control form-control-sm"
-            value={floor?.floorName}
+
+        <div className="col-12 text-start">
+          <label className="form-label">Select Activity</label>
+          <select
+            {...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">
-        <label className="form-label">Select Work Area</label>
-        <input
-          className="form-control form-control-sm"
-          value={workArea?.areaName}
-          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>
-            ))
+        <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>
           )}
-        </select>
-        {errors.activityID && (
-          <p className="danger-text">{errors.activityID.message}</p>
-        )}
-      </div>
+        </div>
 
-      <div className="col-12 text-start">
-        <label className="form-label">Select Work Category</label>
-        <select
-          {...register("workCategoryId")}
-          className="form-select form-select-sm"
-        >
-          <option disabled>Select Category</option>
-          {loadingCategories ? (
-            <option>Loading...</option>
-          ) : (
-            sortedCategories.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name}
-              </option>
-            ))
-          )}
-        </select>
-        {errors.workCategoryId && (
-          <p className="danger-text">{errors.workCategoryId.message}</p>
-        )}
-      </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>
+        <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>
+    </AppFormProvider>
   );
 };
 

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 {
-    register,
-    handleSubmit,
-    setValue,
-    reset,
-    watch,
-    formState: { errors },
-  } = useForm({
+  const methods = 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)}>
-      <div className="text-center mb-1">
-        <h5 className="mb-1">Manage Floor</h5>
-      </div>
-      <div className="col-12 text-start">
-        <Label className="form-label" required>Select Building</Label>
-        <select
-          {...register("buildingId")}
-          className="form-select form-select-sm"
-          onChange={handleBuildingChange}
-        >
-          <option value="0">Select Building</option>
-          {project?.length > 0 &&
-            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>
-
-      {watchBuildingId !== "0" && (
-        <>
-          <div className="col-12 text-start">
-            <label className="form-label">Select Floor</label>
-            <select
-              {...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>
+    <AppFormProvider {...methods}>
+      <form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
+        <div className="text-center mb-1">
+          <h5 className="mb-1">Manage Floor</h5>
+        </div>
+        <div className="col-12 text-start">
+          <Label className="form-label" required>
+            Select Building
+          </Label>
+          <AppFormController
+            name="buildingId"
+            control={control}
+            rules={{ required: "Building is required" }}
+            render={({ field }) => (
+              <SelectField
+                label=""
+                placeholder="Select Building"
+                options={
+                  project
+                    ?.filter((b) => b.buildingName)
+                    .sort((a, b) => a.buildingName.localeCompare(b.buildingName))
+                    .map((b) => ({ id: String(b.id), name: b.buildingName })) ?? []
+                }
+                value={field.value || ""}
+                onChange={(value) => {
+                  field.onChange(value);
+                  setValue("id", "0");
+                  setValue("floorName", "");
+                }}
+                required
+                noOptionsMessage={() => (!project || project.length === 0 ? "No buildings found" : null)}
+                className="m-0 form-select-sm w-100"
+              />
             )}
-          </div>
-        </>
-      )}
+          />
+          {errors.buildingId && <p className="danger-text">{errors.buildingId.message}</p>}
+        </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"
-            : watchId !== "0"
-            ? "Edit Floor"
-            : "Add Floor"}
-        </button>
-       
-      </div>
-    </form>
+        {watchBuildingId !== "0" && (
+          <>
+            <div className="col-12 text-start">
+              <Label className="form-label">
+                Select Floor
+              </Label>
+
+              <AppFormController
+                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>
   );
 };
 

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 { useCurrentService, 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"),
@@ -26,12 +28,16 @@ const taskSchema = z.object({
   comment: z.string(),
 });
 
-const defaultModel = {
+
+
+const TaskModel = ({ project, onSubmit, onClose }) => {
+    const currentService = useCurrentService()
+  const defaultModel = {
   id: null,
   buildingID: "",
   floorId: "",
   workAreaId: "",
-  serviceId: "",
+  serviceId: currentService ?? "",
   activityGroupId: "",
   activityID: "",
   workCategoryId: "",
@@ -39,8 +45,6 @@ const defaultModel = {
   completedWork: 0,
   comment: "",
 };
-
-const TaskModel = ({ project, onSubmit, onClose }) => {
   // const { activities, loading: activityLoading } = useActivitiesMaster();
   const { categories, categoryLoading } = useWorkCategoriesMaster();
 
@@ -76,19 +80,13 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
     setValue("activityID", "");
   };
 
-
-  const {
-    register,
-    handleSubmit,
-    watch,
-    setValue,
-    reset,
-    formState: { errors },
-  } = useForm({
-    resolver: zodResolver(taskSchema),
+  const methods = useForm({
     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 +110,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   const { mutate: CreateTask, isPending } = useManageTask({
     onSuccessCallback: (response) => {
       showToast(response?.message, "success");
-      setValue("activityID",""),
-      setValue("plannedWork",0),
-      setValue("completedWork",0)
-      setValue("comment","")
+      setValue("activityID", ""),
+        setValue("plannedWork", 0),
+        setValue("completedWork", 0)
+      setValue("comment", "")
     },
   });
   useEffect(() => {
@@ -148,224 +146,290 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   };
 
   return (
-    <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
-      <div className="text-center mb-1">
-        <h5 className="mb-1">Manage Task</h5>
-      </div>
-      <div className="col-6 text-start">
-        <Label className="form-label" required>Select Building</Label>
-        <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 && (
+    <AppFormProvider {...methods}>
+      <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
+        <div className="text-center mb-1">
+          <h5 className="mb-1">Manage Task</h5>
+        </div>
+        {/* Select Building */}
         <div className="col-6 text-start">
-          <Label className="form-label" required>Select Floor</Label>
-          <select
-            className="form-select form-select-sm"
-            {...register("floorId")}
-          >
-            <option value="">Select Floor</option>
-            {selectedBuilding.floors
-              ?.sort((a, b) => a.floorName.localeCompare(b.floorName))
-              ?.map((f) => (
-                <option key={f.id} value={f.id}>
-                  {f.floorName}
-                </option>
-              ))}
-          </select>
-          {errors.floorId && (
-            <p className="danger-text">{errors.floorId.message}</p>
-          )}
-        </div>
-      )}
-
-      {/* 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>
+          <AppFormController
+            name="buildingID"
+            control={control}
+            render={({ field }) => (
+              <SelectField
+                label="Select Building"
+                options={project ?? []}
+                placeholder="Select Building"
+                required
+                labelKey="buildingName"
+                valueKey="id"
+                value={field.value}
+                onChange={(value) => {
+                  field.onChange(value);
+                  setValue("floorId", "");
+                  setValue("workAreaId", "");
+                  setSelectedService("");
+                  setSelectedGroup("");
+                }}
+                className="m-0"
+              />
             )}
-          </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 && (
-            <p className="danger-text">{errors.comment.message}</p>
+          {errors.buildingID && (
+            <small className="danger-text">{errors.buildingID.message}</small>
           )}
         </div>
-      )}
 
-      <div className="col-12 text-end mt-5">
-        <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>
+        {/* Select Floor */}
+        {selectedBuilding && (
+          <div className="col-6 text-start">
+            <AppFormController
+              name="floorId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Floor"
+                  options={selectedBuilding?.floors ?? []}
+                  placeholder={
+                    selectedBuilding?.floors?.length > 0
+                      ? "Select Floor"
+                      : "No Floor Found"
+                  }
+                  required
+                  labelKey="floorName"
+                  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>
   );
 };
 

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 {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setValue,
-    reset,
-    watch,
-  } = useForm({
-    resolver: zodResolver(workAreaSchema),
+  const selectedProject = useSelector((store) => store.localVariables.projectId);
+  const methods = useForm({
     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)}>
-      <div className="text-center mb-1">
-        <h5 className="mb-1">Manage Work Area</h5>
-      </div>
-      <div className="col-12 col-sm-6 text-start">
-        <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" && (
+    <AppFormProvider {...methods}>
+      <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
+        <div className="text-center mb-1">
+          <h5 className="mb-1">Manage Work Area</h5>
+        </div>
         <div className="col-12 col-sm-6 text-start">
-          <Label className="form-label" required>Select Floor</Label>
-          <select
-            {...register("floorId")}
-            className="form-select form-select-sm"
-          >
-            <option value="0">
-              {selectedBuilding?.floor?.length > 0
-                ? "NO Floor Found"
-                : "Select Floor"}
-            </option>
+          <AppFormController
+            name="buildingId"
+            control={control}
+            render={({ field }) => (
+              <SelectField
+                label="Select Building"
+                options={project ?? []}
+                placeholder="Select Building"
+                required
+                labelKey="buildingName"
+                valueKey="id"
+                value={field.value}
+                onChange={field.onChange}
+                className="m-0"
+              />
+            )}
+          />
 
-            {selectedBuilding?.floors?.map((f) => (
-              <option key={f.id} value={f.id}>
-                {f.floorName}
-              </option>
-            ))}
-          </select>
-          {errors.floorId && (
-            <p className="danger-text">{errors.floorId.message}</p>
+          {errors.buildingId && (
+            <small className="danger-text">{errors.buildingId.message}</small>
           )}
         </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>
-              {watchWorkAreaId === "0"
-                ? "Enter Work Area Name"
-                : "Edit Work Area Name"}
-            </Label>
-            <input
-              type="text"
-              className="form-control form-control-sm"
-              placeholder="Work Area"
-              {...register("areaName")}
+
+        {watchBuildingId !== "0" && (
+          <div className="col-12 col-sm-6 text-start">
+            <AppFormController
+              name="floorId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Floor"
+                  options={selectedBuilding?.floors ?? []}
+                  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 && (
-              <p className="danger-text">{errors.areaName.message}</p>
+            {errors.floorId && (
+              <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>
-    </form>
+        {watchFloorId !== "0" && (
+          <>
+            <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>
   );
 };
 

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:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
+  const { mutate: UpdateProject, isPending } = useUpdateProject(() => { 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{
-       let payload = {
+    } else {
+      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 ">
-          <label className="form-label" htmlFor="modalEditUserStatus">
+        <div className="col-12">
+          <Label htmlFor="modalEditUserStatus" className="form-label">
             Status
-          </label>
-          <select
-            id="modalEditUserStatus"
-            name="modalEditUserStatus"
-            className="select2 form-select form-select-sm"
-            aria-label="Default select example"
-            {...register("projectStatusId", {
-              required: "Status is required",
-              valueAsNumber: false,
-            })}
-          >
-            {PROJECT_STATUS.map((status) => (
-              <option key={status.id} value={status.id}>
-                {status.label}
-              </option>
-            ))}
-          </select>
+          </Label>
+
+          <AppFormController
+            name="projectStatusId"
+            control={control}
+            rules={{ required: "Status is required" }}
+            render={({ field }) => (
+              <SelectField
+                label="" // Label is already above
+                placeholder="Select Status"
+                options={PROJECT_STATUS?.map((status) => ({
+                  id: status.id,
+                  name: status.label,
+                })) ?? []}
+                value={field.value || ""}
+                onChange={field.onChange}
+                required
+                className="m-0 form-select-sm w-100"
+              />
+            )}
+          />
+
           {errors.projectStatusId && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
+            <div 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>
-          <select
-            className="select2 form-select form-select-sm"
-            aria-label="Default select example"
-            {...register("promoterId", {
-              required: "Promoter is required",
-              valueAsNumber: false,
-            })}
-          >
-            {isLoading ? (
-              <option>Loading...</option>
-            ) : (
-              <>
-                <option value="">Select Promoter</option>
-                {data?.data?.map((org) => (
-                  <option key={org.id} value={org.id}>
-                    {org.name}
-                  </option>
-                ))}
-              </>
+          </Label>
+
+          <AppFormController
+            name="promoterId"
+            control={control}
+            rules={{ required: "Promoter is required" }}
+            render={({ field }) => (
+              <SelectField
+                label="" // Label is already above
+                placeholder="Select Promoter"
+                options={data?.data ?? []}
+                value={field.value || ""}
+                onChange={field.onChange}
+                required
+                isLoading={isLoading}
+                className="m-0 form-select-sm w-100"
+                noOptionsMessage={() =>
+                  !isLoading && (!data?.data || data.data.length === 0)
+                    ? "No promoters found"
+                    : null
+                }
+              />
             )}
-          </select>
+          />
+
           {errors.promoterId && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
+            <div 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>
-          <select
-            className="select2 form-select form-select-sm"
-            aria-label="Default select example"
-            {...register("pmcId", {
-              required: "Promoter is required",
-              valueAsNumber: false,
-            })}
-          >
-            {isLoading ? (
-              <option>Loading...</option>
-            ) : (
-              <>
-                <option value="">Select PMC</option>
-                {data?.data?.map((org) => (
-                  <option key={org.id} value={org.id}>
-                    {org.name}
-                  </option>
-                ))}
-              </>
+          </Label>
+
+          <AppFormController
+            name="pmcId"
+            control={control}
+            rules={{ required: "PMC is required" }}
+            render={({ field }) => (
+              <SelectField
+                label="" // Label is already above
+                placeholder="Select PMC"
+                options={data?.data ?? []}
+                value={field.value || ""}
+                onChange={field.onChange}
+                required
+                isLoading={isLoading}
+                className="m-0 form-select-sm w-100"
+                noOptionsMessage={() =>
+                  !isLoading && (!data?.data || data.data.length === 0)
+                    ? "No PMC found"
+                    : null
+                }
+              />
             )}
-          </select>
+          />
+
           {errors.pmcId && (
-            <div
-              className="danger-text text-start"
-              style={{ fontSize: "12px" }}
-            >
+            <div 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>

src/components/Project/ProjectCard.jsx

@@ -105,7 +105,7 @@ const ProjectCard = ({ project, isCore = true }) => {
                   >
                     {project?.shortName ? project?.shortName : project?.name}
                   </h5>
-                  <div className="client-info text-body">
+                  <div className="client-info text-body text-start">
                     <span>{project?.shortName ? project?.name : ""}</span>
                   </div>
                 </div>

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, setValue } = useForm({
+    defaultValues: {
+      serviceId: selectedService || "",
+    },
+  });
+
   useEffect(() => {
     setProject(projectInfra);
   }, [data, projects_Details]);
@@ -60,6 +69,27 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
     setProject(response);
   };
 
+  const handleServiceChange = (serviceId) => {
+    dispatch(setService(serviceId));
+
+  };
+
+  useEffect(() => {
+    if (!servicesLoading && assignedServices?.length === 1) {
+      const serviceId = assignedServices[0].id;
+
+      // set form value
+      setValue("serviceId", serviceId, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+
+      // sync redux
+      dispatch(setService(serviceId));
+    }
+  }, [assignedServices, servicesLoading, setValue, dispatch]);
+
+
   return (
     <>
       {showModalBuilding && (
@@ -115,37 +145,35 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
           <div className="card-body" style={{ padding: "0.5rem" }}>
             <div className="align-items-center">
               <div className="row ">
-                <div
-                  className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
-                  id="DataTables_Table_0_length"
-                >
-                  {!servicesLoading &&
-                    assignedServices?.length > 0 &&
-                    (assignedServices.length > 1 ? (
-                      <label>
-                        <select
-                          name="DataTables_Table_0_length"
-                          aria-controls="DataTables_Table_0"
-                          className="form-select form-select-sm"
-                          aria-label="Select Service"
-                          value={selectedService}
-                          onChange={(e) => dispatch(setService(e.target.value))}
-                        >
-                          <option value="">All Services</option>
-                          {assignedServices.map((service) => (
-                            <option key={service.id} value={service.id}>
-                              {service.name}
-                            </option>
-                          ))}
-                        </select>
-                      </label>
-                    ) : (
-                      <h5>{assignedServices[0].name}</h5>
-                    ))}
+                <div className="col-md-4 col-12 dataTables_length text-start py-2 px-2">
+                  <div className="ms-4 mt-n1">
+                    {!servicesLoading && assignedServices?.length > 0 && (
+                      <AppFormController
+                        name="serviceId"
+                        control={control}
+                        render={({ field }) => (
+                          <SelectField
+                            label="Select Service"
+                            options={[...(assignedServices ?? [])]}
+                            placeholder="Choose a Service"
+                            labelKey="name"
+                            valueKey="id"
+                            value={field.value}
+                            onChange={(val) => {
+                              field.onChange(val);
+                              dispatch(setService(val));
+                            }}
+                            isLoading={servicesLoading}
+                          />
+                        )}
+                      />
+                    )}
+
+                  </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 +227,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>
                 )}

src/components/Project/ProjectListView.jsx

@@ -159,8 +159,9 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
                     </td>
                   ))}
                   <td
-                    className={`mx-2 ${canManageProject ? "d-sm-table-cell" : "d-none"
-                      }`}
+                    className={`mx-2 ${
+                      canManageProject ? "d-sm-table-cell" : "d-none"
+                    }`}
                   >
                     <div className="dropdown z-2">
                       <button
@@ -218,7 +219,7 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
               <tr
                 className="no-hover"
                 style={{
-                  pointerEvents: "none", 
+                  pointerEvents: "none",
                   backgroundColor: "transparent",
                 }}
               >
@@ -238,7 +239,7 @@ const ProjectListView = ({ data, currentPage, totalPages, paginate }) => {
       <Pagination
         currentPage={currentPage}
         totalPages={totalPages}
-        paginate={paginate}
+        onPageChange={paginate}
       />
     </div>
   );

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 (

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)}

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)
-      ?.map((perm) => perm.id) || [];
+      ?.filter((p) => p.isEnabled)
+      ?.map((p) => p.id) || [];
 
-  setValue("selectedPermissions", enabledPerms, { shouldValidate: true });
-}, [selectedEmpPermissions, setValue, selectedEmployee]);
-
-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 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 className="d-block">
-              {" "}
-              <select
-                className="form-select form-select-sm"
-                {...register("employeeId")}
-                disabled={isPending}
-              >
-                {loading ? (
-                  <option value="">Loading...</option>
-                ) : (
-                  <>
-                    <option value="">-- Select Employee --</option>
-                    {[...employees]
-                      ?.sort((a, b) =>
-                        `${a?.firstName} ${a?.firstName}`?.localeCompare(
-                          `${b?.firstName} ${b?.lastName}`
+            </div> */}
+
+            <div className="d-block flex-grow-1">
+              <AppFormController
+                name="employeeId"
+                control={control}
+                render={({ field }) => (
+                  <SelectField
+                    label="Select Employee"
+                    options={
+                      employees
+                        ?.sort((a, b) =>
+                          `${a?.firstName} ${a?.lastName}`.localeCompare(
+                            `${b?.firstName} ${b?.lastName}`
+                          )
                         )
-                      )
-                      ?.map((emp) => (
-                        <option key={emp.id} value={emp.id}>
-                          {emp.firstName} {emp.lastName}
-                        </option>
-                      ))}
-                  </>
+                        ?.map((emp) => ({
+                          id: emp.id,
+                          name: `${emp.firstName} ${emp.lastName}`,
+                        })) ?? []
+                    }
+                    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

src/components/Project/ProjectStatistics.jsx

@@ -170,7 +170,7 @@ const ProjectStatistics = ({ project }) => {
         <h5 className="card-action-title mb-0">
           {" "}
           <i className="fa fa-line-chart rounded-circle text-primary"></i>
-          <span className="ms-2 fw-bold">Project Statistics</span>
+          <span className="ms-2 fw-semibold">Project Statistics</span>
         </h5>
       </div>
       <div className="card-body">

src/components/Project/Team/TeamAssignToProject.jsx

@@ -1,9 +1,12 @@
-import React, { useState } from "react";
+import React, { useEffect, 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,58 @@ const TeamAssignToProject = ({ closeModal }) => {
   const project = useSelectedProject();
   const { data, isLoading, isError, error } =
     useProjectAssignedOrganizationsName(project);
+  const { control, watch, setValue, formState: { errors } } = useForm({
+    defaultValues: { organizationId: "" },
+  });
+
+  useEffect(() => {
+    if (data?.length === 1) {
+      setValue("organizationId", data[0].id, {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+    }
+  }, [data, setValue]);
+
   return (
     <div className="container">
-      <p className="fs-5 fs-seminbod ">Assign Employee To Project </p>
+      {/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */}
+      <h5 className="mb-4">Assign Employee To Project</h5>
 
-      <div className="row align-items-center gx-5">
-        <div className="col">
-          <div className="d-flex flex-grow-1 align-items-center gap-2">
-            {isLoading ? (
-              <select className="form-select form-select-sm w-100" disabled>
-                <option value="">Loading...</option>
-              </select>
-            ) : data?.length === 0 ? (
-              <p className="mb-0 badge bg-label-secondary">No organizations found</p>
-            ) : (
-              <>
-                <label
-                  htmlFor="organization"
-                  className="form-label mb-0 text-nowrap"
-                >
-                  Select Organization
-                </label>
-                <select
-                  id="organization"
-                  className="form-select form-select-sm w-100"
-                  value={selectedOrg || ""}
-                  onChange={(e) => setSelectedOrg(e.target.value)}
-                >
-                  <option value="">Select</option>
-                  {data.map((org) => (
-                    <option key={org.id} value={org.id}>
-                      {org.name}
-                    </option>
-                  ))}
-                </select>
-              </>
+      <div className="row align-items-center gx-5 text-start">
+        <div className="col-12 col-md-6 mb-2">
+          <AppFormController
+            name="organizationId"
+            control={control}
+            rules={{ required: "Organization is required" }}
+            render={({ field }) => (
+              <SelectField
+                label="Select Organization"
+                options={data ?? []}
+                placeholder="Choose an Organization"
+                required
+                labelKey="name"
+                valueKey="id"
+                value={field.value}
+                onChange={field.onChange}
+                isLoading={isLoading}
+                className="m-0 w-100"
+              />
             )}
-          </div>
+          />
+          {errors.organizationId && (
+            <small className="danger-text">{errors.organizationId.message}</small>
+          )}
         </div>
-        <div className="col">
-          <div className="d-flex flex-grow-1 align-items-center gap-2">
-            <label htmlFor="search" className="form-label mb-0 text-nowrap">
+        <div className="col-12 col-md-6 mt-n2">
+          <div className="d-flex flex-column">
+            <label htmlFor="search" className="form-label mb-1">
               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)}

src/components/Project/Team/TeamEmployeeList.jsx

@@ -10,11 +10,13 @@ import {
 import useMaster, { useServices } from "../../../hooks/masterHook/useMaster";
 import showToast from "../../../services/toastService";
 import { useOrganizationEmployees } from "../../../hooks/useOrganization";
+import { useDispatch } from "react-redux";
+import { changeMaster } from "../../../slices/localVariablesSlice";
 
 const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
   const selectedProject = useSelectedProject();
   const debounceSearchTerm = useDebounce(searchTerm, 500);
-
+  const dispatch = useDispatch();
   const {
     data: employeesData = [],
     isLoading,
@@ -45,6 +47,7 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
     });
 
   useEffect(() => {
+    dispatch(changeMaster("Job Role"));
     if (employeesData?.data?.length > 0) {
       const available = employeesData.data.filter((emp) => {
         const projEmp = projectEmployees.find((pe) => pe.employeeId === emp.id);
@@ -119,7 +122,7 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
       status: true,
     }));
 
-    handleAssignEmployee({ payload,actionType:"assign"} );
+    handleAssignEmployee({ payload, actionType: "assign" });
 
     setEmployees((prev) =>
       prev.map((emp) => ({
@@ -132,42 +135,50 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
     );
   };
 
-if (isLoading) {
-  return (   <div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">Loading employees...</p></div>) ;
-}
+  if (isLoading) {
+    return (<div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">Loading employees...</p></div>);
+  }
 
-if (isError) {
-  return (
-    <div className="page-min-h d-flex justify-content-center align-items-center ">
-  {error?.status === 400 ? (
-    <p className="m-0">Enter employee you want to find.</p>
-  ) : (
-    <p className="m-0 dange-text">Something went wrong. Please try again later.</p>
-  )}
-</div>
+  if (isError) {
+    return (
+      <div className="page-min-h d-flex justify-content-center align-items-center ">
+        {error?.status === 400 ? (
+          <p className="m-0">Enter employee you want to find.</p>
+        ) : (
+          <p className="m-0 dange-text">Something went wrong. Please try again later.</p>
+        )}
+      </div>
 
-  );
-}
+    );
+  }
 
-if (employees.length === 0) {
-  return(<div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">No available employees to assign.</p></div>) ;
-}
+  if (employees.length === 0) {
+    return (<div className="page-min-h d-flex justify-content-center align-items-center "><p className="text-muted">No available employees to assign.</p></div>);
+  }
 
 
   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>
+            <th>Select</th>
             <th>Employee</th>
             <th>Service</th>
             <th>Job Role</th>
-            <th>Select</th>
           </tr>
         </thead>
         <tbody>
           {employees.map((emp, index) => (
             <tr key={emp.id}>
+              <td>
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  checked={emp.isChecked}
+                  onChange={() => handleCheckboxChange(index)}
+                />
+              </td>
               <td>
                 <div className="d-flex align-items-center">
                   <Avatar firstName={emp.firstName} lastName={emp.lastName} />
@@ -176,6 +187,7 @@ if (employees.length === 0) {
                   </span>
                 </div>
               </td>
+
               <td>
                 <select
                   value={emp.serviceId}
@@ -183,9 +195,8 @@ if (employees.length === 0) {
                   onChange={(e) =>
                     handleSelectChange(index, "serviceId", e.target.value)
                   }
-                  className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
-                    emp.errors.serviceId ? "is-invalid" : ""
-                  }`}
+                  className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${emp.errors.serviceId ? "is-invalid" : ""
+                    }`}
                 >
                   <option value="">Select Service</option>
                   {services?.map((s) => (
@@ -205,9 +216,8 @@ if (employees.length === 0) {
                   onChange={(e) =>
                     handleSelectChange(index, "jobRole", e.target.value)
                   }
-                  className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${
-                    emp.errors.jobRole ? "is-invalid" : ""
-                  }`}
+                  className={`form-select form-select-sm w-auto border-none rounded-0 py-1 px-auto ${emp.errors.jobRole ? "is-invalid" : ""
+                    }`}
                 >
                   <option value="">Select Job Role</option>
                   {jobRoles?.map((r) => (
@@ -220,27 +230,20 @@ if (employees.length === 0) {
                   <div className="danger-text">{emp.errors.jobRole}</div>
                 )}
               </td>
-              <td>
-                <input
-                  type="checkbox"
-                  className="form-check-input"
-                  checked={emp.isChecked}
-                  onChange={() => handleCheckboxChange(index)}
-                />
-              </td>
+
             </tr>
           ))}
         </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>

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, setValue } = 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) || jobRole.includes(lower);
+        return fullName.includes(lower) || (emp.jobRoleName ?? "").toLowerCase().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,11 +130,24 @@ const Teams = () => {
     [filteredEmployees, refetch]
   );
 
+
   useEffect(() => {
     eventBus.on("employee", employeeHandler);
     return () => eventBus.off("employee", employeeHandler);
   }, [employeeHandler]);
 
+  useEffect(() => {
+    if (!servicesLoading && assignedServices?.length === 1) {
+      const serviceId = assignedServices[0].id;
+
+      setValue("selectedService", serviceId, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+    }
+  }, [assignedServices, servicesLoading, setValue]);
+
+
   return (
     <>
       {AssigTeam && (
@@ -154,62 +173,61 @@ 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="d-flex flex-wrap align-items-center gap-3">
-                <div>
-                  {!servicesLoading && (
-                    <>
-                      {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">
-                  <input
-                    type="checkbox"
-                    className="form-check-input"
-                    id="activeEmployeeSwitch"
-                    checked={activeEmployee}
-                    onChange={handleToggleActive}
+            <div className="col-md-6 col-12 d-flex flex-wrap align-items-center gap-3">
+              {!servicesLoading && assignedServices?.length > 0 && (
+                <div className="col-12 col-md-6 mb-2 text-start">
+                  <AppFormController
+                    name="selectedService"
+                    control={control}
+                    render={({ field }) => (
+                      <SelectField
+                        label="Select Service"
+                        options={[ ...assignedServices]}
+                        placeholder="Choose a Service"
+                        labelKey="name"
+                        valueKey="id"
+                        value={field.value}
+                        onChange={field.onChange}
+                        isLoading={servicesLoading}
+                        className="w-100"
+                      />
+                    )}
                   />
-                  <label
-                    className="form-check-label ms-2"
-                    htmlFor="activeEmployeeSwitch"
-                  >
-                    {activeEmployee ? "Active Employees" : "In-active Employees"}
-                  </label>
                 </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">
-              <input
-                type="search"
-                className="form-control form-control-sm"
-                placeholder="Search by Name or Role"
-                aria-controls="DataTables_Table_0"
-                style={{ maxWidth: "200px" }}
-                value={searchTerm}
-                onChange={handleSearch}
-              />
+            <div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3 mt-n1">
+              <div className="col-12 col-md-4">
+                <AppFormController
+                  name="searchTerm"
+                  control={control}
+                  render={({ field }) => (
+                    <input
+                      type="search"
+                      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 +264,73 @@ const Teams = () => {
                   </tr>
                 </thead>
                 <tbody className="table-border-bottom-0">
-                  {filteredEmployees &&
-                    filteredEmployees
-                      .sort((a, b) =>
-                        (a.firstName || "").localeCompare(b.firstName || "")
-                      )
-                      .map((emp) => (
-                        <tr key={emp.id}>
-                          <td>
-                            <div className="d-flex justify-content-start align-items-center">
-                              <Avatar
-                                firstName={emp.firstName}
-                                lastName={emp.lastName}
-                              />
-                              <div className="d-flex flex-column">
-                                <a
-                                  onClick={() =>
-                                    navigate(
-                                      `/employee/${emp.employeeId}?for=attendance`
-                                    )
-                                  }
-                                  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)}
+                  {filteredEmployees
+                    .sort((a, b) =>
+                      (a.firstName || "").localeCompare(b.firstName || "")
+                    )
+                    .map((emp) => (
+                      <tr key={emp.id}>
+                        <td>
+                          <div className="d-flex justify-content-start align-items-center">
+                            <Avatar
+                              firstName={emp.firstName}
+                              lastName={emp.lastName}
+                            />
+                            <div className="d-flex flex-column">
+                              <a
+                                onClick={() =>
+                                  navigate(
+                                    `/employee/${emp.employeeId}?for=attendance`
+                                  )
+                                }
+                                className="text-heading text-truncate cursor-pointer"
                               >
-                                <i className="bx bx-trash me-1 text-danger"></i>
-                              </button>
-                            ) : (
-                              <span>Not in project</span>
-                            )}
+                                <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>
-                        </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>
             )}

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 {
@@ -200,30 +202,32 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             <Label htmlFor="expenseCategoryId" className="form-label" required>
               Expense Category
             </Label>
-            <select
-              className="form-select"
-              id="expenseCategoryId"
-              {...register("expenseCategoryId")}
-            >
-              <option value="" disabled>
-                Select Category
-              </option>
-              {ExpenseLoading ? (
-                <option disabled>Loading...</option>
-              ) : (
-                expenseCategories?.map((expense) => (
-                  <option key={expense.id} value={expense.id}>
-                    {expense.name}
-                  </option>
-                ))
+
+            <AppFormController
+              name="expenseCategoryId"
+              control={control}
+              rules={{ required: "Expense Category is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label is already above
+                  placeholder="Select Category"
+                  options={expenseCategories ?? []}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  isLoading={ExpenseLoading}
+                  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  */}
@@ -375,34 +379,45 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             <Label htmlFor="currencyId" className="form-label" required>
               Currency
             </Label>
-            <select
-              id="currencyId"
-              className="form-select"
-              {...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 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
@@ -415,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
-              id="frequency"
-              className="form-select mt-1"
-              {...register("frequency", { valueAsNumber: true })}
-            >
-              <option value="">Select Frequency</option>
-              {Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => (
-                <option key={key} value={key}>
-                  {label}
-                </option>
-              ))}
-            </select>
+            <AppFormController
+              name="frequency"
+              control={control}
+              rules={{ required: "Frequency is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label shown above
+                  placeholder="Select Frequency"
+                  options={Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => ({
+                    id: key,
+                    name: label,
+                  }))}
+                  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"
-              className="form-select"
-              {...register("statusId")}
-            >
-              <option value="">Select Status</option>
-              {statusLoading && <option>Loading...</option>}
-              {!statusLoading &&
-                !statusError &&
-                statusData?.map((status) => (
-                  <option key={status.id} value={status.id}>
-                    {status.name}
-                  </option>
-                ))}
-            </select>
+
+            <AppFormController
+              name="statusId"
+              control={control}
+              rules={{ required: "Status is required" }}
+              render={({ field }) => (
+                <SelectField
+                  label="" // Label already shown above
+                  placeholder="Select Status"
+                  options={statusData ?? []}
+                  value={field.value || ""}
+                  onChange={field.onChange}
+                  required
+                  isLoading={statusLoading}
+                  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 */}
@@ -564,7 +597,7 @@ 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

src/components/RecurringExpense/RecurringExpenseList.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   EXPENSE_DRAFT,
   EXPENSE_REJECTEDBY,
@@ -18,7 +18,7 @@ import { useRecurringExpenseList } from "../../hooks/useExpense";
 import Pagination from "../common/Pagination";
 import { SpinnerLoader } from "../common/Loader";
 
-const RecurringExpenseList = ({ search, filterStatuses }) => {
+const RecurringExpenseList = ({ search, filterStatuses, tableRef, onDataFiltered }) => {
   const { setManageRequest, setVieRequest, setViewRecurring } =
     useRecurringExpenseContext();
   const navigate = useNavigate();
@@ -70,9 +70,8 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
       align: "text-end",
       getValue: (e) =>
         e?.amount
-          ? `${
-              e?.currency?.symbol ? e.currency.symbol + " " : ""
-            }${e.amount.toLocaleString()}`
+          ? `${e?.currency?.symbol ? e.currency.symbol + " " : ""
+          }${e.amount.toLocaleString()}`
           : "N/A",
     },
     {
@@ -112,6 +111,17 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
       debouncedSearch
     );
 
+  const filteredData = useMemo(
+    () =>
+      data?.data?.filter((item) => filterStatuses.includes(item?.status?.id)) ||
+      [],
+    [data?.data, filterStatuses]
+  );
+
+  useEffect(() => {
+    onDataFiltered(filteredData);
+  }, [filteredData, onDataFiltered]);
+
   const paginate = (page) => {
     if (page >= 1 && page <= (data?.totalPages ?? 1)) {
       setCurrentPage(page);
@@ -150,10 +160,6 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
     );
   };
 
-  const filteredData = data?.data?.filter((item) =>
-    filterStatuses.includes(item?.status?.id)
-  );
-
   const handleDelete = (id) => {
     setDeletingId(id);
     DeleteExpense(
@@ -180,111 +186,111 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
         />
       )}
 
-      <div className="card page-min-h table-responsive px-sm-4">
+      <div className="card page-min-h table-responsive px-sm-4" ref={tableRef}>
         <div className="card-datatable" id="payment-request-table">
-         <div className="mx-2">
-           {Array.isArray(filteredData) && filteredData.length > 0 && (
-            <table className="table border-top dataTable text-nowrap  align-middle">
-              <thead>
-                <tr>
-                  {recurringExpenseColumns.map((col) => (
-                    <th key={col.key} className={`sorting ${col.align}`}>
-                      {col.label}
-                    </th>
-                  ))}
-                  <th className="text-center">Action</th>
-                </tr>
-              </thead>
-
-              <tbody>
-                {filteredData?.length > 0 ? (
-                  filteredData?.map((recurringExpense) => (
-                    <tr
-                      key={recurringExpense.id}
-                      className="align-middle"
-                      style={{ height: "40px" }}
-                    >
-                      {recurringExpenseColumns.map((col) => (
-                        <td
-                          key={col.key}
-                          className={`d-table-cell ${col.align ?? ""} py-3`}
-                        >
-                          {col?.customRender
-                            ? col?.customRender(recurringExpense)
-                            : col?.getValue(recurringExpense)}
-                        </td>
-                      ))}
-                      <td className="sticky-action-column bg-white">
-                        <div className="d-flex flex-row gap-2 gap-0">
-                          <i
-                            className="bx bx-show text-primary cursor-pointer"
-                            onClick={() =>
-                              setViewRecurring({
-                                recurringId: recurringExpense?.id,
-                                view: true,
-                              })
-                            }
-                          ></i>
-
-                          <div className="dropdown z-2">
-                            <button
-                              type="button"
-                              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
-                              data-bs-toggle="dropdown"
-                            >
-                              <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
-                            </button>
-                            <ul className="dropdown-menu dropdown-menu-end w-auto">
-                              <li
-                                onClick={() =>
-                                  setManageRequest({
-                                    IsOpen: true,
-                                    RecurringId: recurringExpense?.id,
-                                  })
-                                }
-                              >
-                                <a className="dropdown-item px-2 cursor-pointer py-1">
-                                  <i className="bx bx-edit text-primary bx-xs me-2"></i>
-                                  Modify
-                                </a>
-                              </li>
-
-                              <li
-                                onClick={() => {
-                                  setIsDeleteModalOpen(true);
-                                  setDeletingId(recurringExpense.id);
-                                }}
-                              >
-                                <a className="dropdown-item px-2 cursor-pointer py-1">
-                                  <i className="bx bx-trash text-danger bx-xs me-2"></i>
-                                  Delete
-                                </a>
-                              </li>
-                            </ul>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  ))
-                ) : (
+          <div className="mx-2">
+            {Array.isArray(filteredData) && filteredData.length > 0 && (
+              <table className="table border-top dataTable text-nowrap align-middle">
+                <thead>
                   <tr>
-                    <td
-                      colSpan={recurringExpenseColumns?.length + 1}
-                      className="text-center border-0 py-8"
-                    ></td>
+                    {recurringExpenseColumns.map((col) => (
+                      <th key={col.key} className={`sorting ${col.align}`}>
+                        {col.label}
+                      </th>
+                    ))}
+                    <th className="text-end">Action</th>
                   </tr>
-                )}
-              </tbody>
-            </table>
-          )}
-          {!filteredData ||
-            filteredData.length === 0
-           && (
-              <div className="d-flex justify-content-center align-items-center h-64">
-                {isError ? (<p>{error.message}</p>):(<p>No Recurring Expense Found</p>)}
-              </div>
+                </thead>
+
+                <tbody>
+                  {filteredData?.length > 0 ? (
+                    filteredData?.map((recurringExpense) => (
+                      <tr
+                        key={recurringExpense.id}
+                        className="align-middle"
+                        style={{ height: "40px" }}
+                      >
+                        {recurringExpenseColumns.map((col) => (
+                          <td
+                            key={col.key}
+                            className={`d-table-cell ${col.align ?? ""} py-3`}
+                          >
+                            {col?.customRender
+                              ? col?.customRender(recurringExpense)
+                              : col?.getValue(recurringExpense)}
+                          </td>
+                        ))}
+                        <td className="sticky-action-column bg-white text-end">
+                          <div className="d-flex justify-content-end flex-row gap-2 gap-0">
+                            <i
+                              className="bx bx-show text-primary cursor-pointer"
+                              onClick={() =>
+                                setViewRecurring({
+                                  recurringId: recurringExpense?.id,
+                                  view: true,
+                                })
+                              }
+                            ></i>
+
+                            <div className="dropdown z-2">
+                              <button
+                                type="button"
+                                className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
+                                data-bs-toggle="dropdown"
+                              >
+                                <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
+                              </button>
+                              <ul className="dropdown-menu dropdown-menu-end w-auto">
+                                <li
+                                  onClick={() =>
+                                    setManageRequest({
+                                      IsOpen: true,
+                                      RecurringId: recurringExpense?.id,
+                                    })
+                                  }
+                                >
+                                  <a className="dropdown-item px-2 cursor-pointer py-1">
+                                    <i className="bx bx-edit text-primary bx-xs me-2"></i>
+                                    Modify
+                                  </a>
+                                </li>
+
+                                <li
+                                  onClick={() => {
+                                    setIsDeleteModalOpen(true);
+                                    setDeletingId(recurringExpense.id);
+                                  }}
+                                >
+                                  <a className="dropdown-item px-2 cursor-pointer py-1">
+                                    <i className="bx bx-trash text-danger bx-xs me-2"></i>
+                                    Delete
+                                  </a>
+                                </li>
+                              </ul>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td
+                        colSpan={recurringExpenseColumns?.length + 1}
+                        className="text-center border-0 py-8"
+                      ></td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
             )}
-         </div>
+            {!filteredData ||
+              filteredData.length === 0
+              && (
+                <div className="d-flex justify-content-center align-items-center h-64">
+                  {isError ? (<p>{error.message}</p>) : (<p>No Recurring Expense Found</p>)}
+                </div>
+              )}
+          </div>
         </div>
 
         {/* Pagination */}

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;

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
-                className="select2 form-select form-select-sm flex-grow-1"
-                aria-label="Default select example"
-                {...register("clientId", {
-                  required: "Client is required",
-                  valueAsNumber: false,
-                })}
-              >
-                {isLoading ? (
-                  <option>Loading...</option>
-                ) : (
-                  <>
-                    <option value="">Select Client</option>
-                    {organization?.data?.map((org) => (
-                      <option key={org.id} value={org.id}>
-                        {org.name}
-                      </option>
-                    ))}
-                  </>
-                )}
-              </select>
+
+            <div className="d-flex align-items-center gap-2 w-100">
+              <div className="flex-grow-1" style={{ minWidth: "250px" }}>
+                <AppFormController
+                  name="clientId"
+                  control={control}
+                  rules={{ required: "Client is required" }}
+                  render={({ field }) => (
+                    <SelectField
+                      label=""
+                      options={organization?.data ?? []}
+                      placeholder="Select Client"
+                      required
+                      labelKey="name"
+                      valueKeyKey="id"
+                      value={field.value}
+                      onChange={field.onChange}
+                      isLoading={isLoading}
+                      className="m-0 w-100"
+                    />
+                  )}
+                />
+              </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">
-            <Label htmlFor="name" required>
+          <div className="col-12 col-md-6">
+            <Label htmlFor="statusId" required>
               Select Status
             </Label>
-            <select
-              className="form-select form-select-sm"
-              {...register("statusId")}
-            >
-              <option>Select Service</option>
-              {PROJECT_STATUS?.map((status) => (
-                <option key={status.id} value={status.id}>{status.label}</option>
-              ))}
-            </select>
+
+            <AppFormController
+              name="statusId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="" // label already above
+                  options={PROJECT_STATUS?.map((status) => ({
+                    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,15 +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.."              
+              placeholder="Enter Employee name.."
             />
             {errors?.contactName && (
               <span className="danger-text">{errors.contactName.message}</span>
@@ -234,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.."
             />
@@ -242,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) => {
@@ -268,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">
@@ -297,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}

src/components/ServiceProject/ServiceProjectBranch/ManageBranch.jsx

@@ -113,7 +113,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
             <input
               type="text"
               id="branchName"
-              className="form-control form-control-sm"
+              className="form-control form-control-md"
               {...register("branchName")}
               placeholder="Enter Branch"
             />
@@ -147,7 +147,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
             <input
               type="text"
               id="googleMapUrl"
-              className="form-control form-control-sm"
+              className="form-control form-control-md"
               {...register("googleMapUrl")}
             />
             {errors.googleMapUrl && (
@@ -183,7 +183,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
                     <input
                       type="text"
                       placeholder="Contact Name"
-                      className="form-control form-control-sm"
+                      className="form-control form-control-md"
                       value={item.contactPerson}
                       onChange={(e) => {
                         const list = [...contacts];
@@ -198,7 +198,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
                     <input
                       type="text"
                       placeholder="Designation"
-                      className="form-control form-control-sm"
+                      className="form-control form-control-md"
                       value={item.designation}
                       onChange={(e) => {
                         const list = [...contacts];
@@ -220,7 +220,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
                     <input
                       type="text"
                       placeholder="Number"
-                      className="form-control form-control-sm"
+                      className="form-control form-control-md"
                       maxLength={10}
                       value={num}
                       onChange={(e) => {
@@ -267,7 +267,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
                     <input
                       type="email"
                       placeholder="Email"
-                      className="form-control form-control-sm"
+                      className="form-control form-control-md"
                       value={email}
                       onChange={(e) => {
                         const list = [...contacts];
@@ -328,7 +328,7 @@ const ManageBranch = ({ closeModal, BranchToEdit = null }) => {
             </Label>
             <textarea
               id="address"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("address")}
             />
             {errors.address && (

src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx

@@ -8,6 +8,7 @@ import { useParams } from "react-router-dom";
 import Pagination from "../../common/Pagination";
 import ConfirmModal from "../../common/ConfirmModal";
 import { SpinnerLoader } from "../../common/Loader";
+import ViewBranchDetails from "./ViewBranchDetails";
 
 const ServiceBranch = () => {
   const { projectId } = useParams();
@@ -19,6 +20,7 @@ const ServiceBranch = () => {
   });
   const { mutate: DeleteBranch, isPending } = useDeleteBranch();
   const [deletingId, setDeletingId] = useState(null);
+  const [ViewRequest, setViewRequest] = useState({ requestId: null, view: false });
 
   const [search, setSearch] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
@@ -84,7 +86,7 @@ const ServiceBranch = () => {
             <div className="col-md-4 col-sm-12 ms-n3 text-start ">
               <h5 className="mb-0">
                 <i className="bx bx-buildings text-primary"></i>
-                <span className="ms-2 fw-bold">Branchs</span>
+                <span className="ms-2 fw-bold">Branches</span>
               </h5>
             </div>
 
@@ -171,37 +173,78 @@ const ServiceBranch = () => {
                   !isError &&
                   data?.data?.length > 0 &&
                   data.data.map((branch) => (
-                    <tr key={branch.id} style={{ height: "35px" }}>
+                    <tr
+                      key={branch.id}
+                      style={{ height: "35px", cursor: showInactive ? "default" : "pointer" }}
+                      onClick={(e) => {
+                        if (!showInactive && !e.target.closest(".dropdown") && !e.target.closest(".bx-show")) {
+                          setViewRequest({ branchId: branch.id, view: true });
+                        }
+                      }}
+                    >
+
                       {columns.map((col) => (
                         <td key={col.key} className={`${col.align} py-3`}>
                           {col.getValue(branch)}
                         </td>
                       ))}
                       <td className="text-center">
-                        <div className="dropdown z-2">
-                          <button
-                            type="button"
-                            className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
-                            data-bs-toggle="dropdown"
-                          >
-                            <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
-                          </button>
-                          <ul className="dropdown-menu dropdown-menu-end w-auto">
-                            {!showInactive ? (
-                              <>
-                                <li
-                                  onClick={() =>
-                                    setManageState({
-                                      IsOpen: true,
-                                      branchId: branch.id,
-                                    })
-                                  }
-                                >
-                                  <a className="dropdown-item px-2 cursor-pointer py-1">
-                                    <i className="bx bx-edit text-primary bx-xs me-2"></i>
-                                    Modify
-                                  </a>
-                                </li>
+                        <div className="d-flex justify-content-center align-items-center gap-2">
+                          {/* View Icon */}
+                          {/* <i
+                            className="bx bx-show text-primary cursor-pointer"
+                            onClick={() =>
+                              setViewRequest({ branchId: branch.id, view: true })
+                            }
+                          ></i> */}
+
+                          <div className="dropdown z-2">
+                            <button
+                              type="button"
+                              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
+                              data-bs-toggle="dropdown"
+                            >
+                              <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
+                            </button>
+                            <ul className="dropdown-menu dropdown-menu-end w-auto">
+                              {!showInactive ? (
+                                <>
+                                  <li
+                                    onClick={() =>
+                                      setManageState({
+                                        IsOpen: true,
+                                        branchId: branch.id,
+                                      })
+                                    }
+                                  >
+                                    <a className="dropdown-item px-2 cursor-pointer py-1">
+                                      <i className="bx bx-edit text-primary bx-xs me-2"></i>
+                                      Modify
+                                    </a>
+                                  </li>
+                                  <li
+                                    onClick={() => {
+                                      setIsDeleteModalOpen(true);
+                                      setDeletingId(branch.id);
+                                    }}
+                                  >
+                                    <a className="dropdown-item px-2 cursor-pointer py-1">
+                                      <i className="bx bx-trash text-danger bx-xs me-2"></i>
+                                      Delete
+                                    </a>
+                                  </li>
+                                  <li
+                                    onClick={() =>
+                                      setViewRequest({ branchId: branch.id, view: true })
+                                    }
+                                  >
+                                    <a className="dropdown-item px-2 cursor-pointer py-1">
+                                      <i className="bx bx-show text-primary cursor-pointer me-2"></i>
+                                      View
+                                    </a>
+                                  </li>
+                                </>
+                              ) : (
                                 <li
                                   onClick={() => {
                                     setIsDeleteModalOpen(true);
@@ -209,25 +252,13 @@ const ServiceBranch = () => {
                                   }}
                                 >
                                   <a className="dropdown-item px-2 cursor-pointer py-1">
-                                    <i className="bx bx-trash text-danger bx-xs me-2"></i>
-                                    Delete
+                                    <i className="bx bx-undo text-danger me-2"></i>
+                                    Restore
                                   </a>
                                 </li>
-                              </>
-                            ) : (
-                              <li
-                                onClick={() => {
-                                  setIsDeleteModalOpen(true);
-                                  setDeletingId(branch.id);
-                                }}
-                              >
-                                <a className="dropdown-item px-2 cursor-pointer py-1">
-                                  <i className="bx bx-undo text-danger  me-2"></i>
-                                  Restore
-                                </a>
-                              </li>
-                            )}
-                          </ul>
+                              )}
+                            </ul>
+                          </div>
                         </div>
                       </td>
                     </tr>
@@ -277,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>
     </>

src/components/ServiceProject/ServiceProjectBranch/ViewBranchDetails.jsx

@@ -0,0 +1,140 @@
+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);
+
+    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="text-secondary 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">Number:</label> {contact.contactNumbers?.join(", ") || "N/A"}
+                                    </div>
+                                </div>
+                            ))
+                        ) : (
+                            "N/A"
+                        )}
+                    </div>
+                </div>
+            </div>
+        </form>
+    );
+};
+
+export default ViewBranchDetails;

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}

src/components/ServiceProject/ServiceProjectJob/JobStatusLog.jsx

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

src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx

@@ -89,7 +89,7 @@ const ManageJob = ({ Job }) => {
         }));
 
       const updatedEmployees = [...oldEmployees, ...newEmployees];
-
+      
       const payload = [
         {
           op: "replace",
@@ -128,6 +128,11 @@ const ManageJob = ({ Job }) => {
           value: formData.statusId,
         },
       ];
+     if(payload.length === 0){
+       showToast("Please change any field value", "warning");
+       return;
+     }
+
       UpdateJob({ id: Job, payload });
     } else {
       formData.assignees = formData.assignees.map((emp) => ({
@@ -140,6 +145,7 @@ const ManageJob = ({ Job }) => {
       formData.projectId = projectId;
 
       CreateJob(formData);
+      setManageJob({ isOpen: false, jobId: null });
     }
   };
 
@@ -235,8 +241,8 @@ const ManageJob = ({ Job }) => {
                     options={data ?? []}
                     placeholder="Choose a Status"
                     required
-                    labelKeyKey="name"
-                    valueKeyKey="id"
+                    labelKey="name"
+                    valueKey="id"
                     value={field.value}
                     onChange={field.onChange}
                     isLoading={isLoading}

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} />}
             >

src/components/ServiceProject/ServiceProjectProfile.jsx

@@ -7,6 +7,7 @@ import GlobalModel from "../common/GlobalModel";
 import { SpinnerLoader } from "../common/Loader";
 import ServiceBranch from "./ServiceProjectBranch/ServiceBranch";
 import ServiceProfile from "./ServiceProfile";
+import ServiceJobs from "../Dashboard/ServiceJobs";
 
 const ServiceProjectProfile = () => {
   const { projectId } = useParams();
@@ -40,6 +41,9 @@ const ServiceProjectProfile = () => {
         <div className="col-md-6 col-lg-7 order-2 mb-6">
           <ServiceBranch />
         </div>
+        <div className="col-md-6 col-lg-5 order-2 mb-6">
+          <ServiceJobs/>
+        </div>
       </div>
     </>
   );

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>
                 ))}

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"

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>
-            Organization Size
-          </Label>
+          <AppFormController
+            name="industryId"
+            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
-            className="form-select form-select-sm"
-            {...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>
+          {errors.industryId && (
+            <small className="danger-text">{errors.industryId.message}</small>
           )}
         </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>}

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();
@@ -58,16 +61,16 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
   };
 
   useEffect(() => {
-  const logoImage = getValues("logoImage"); 
-  if (logoImage) {
-    setLogoPreview(logoImage); 
-    setLogoName("Uploaded Logo"); 
-  }
-}, [getValues]);
+    const logoImage = getValues("logoImage");
+    if (logoImage) {
+      setLogoPreview(logoImage);
+      setLogoName("Uploaded Logo");
+    }
+  }, [getValues]);
 
 
   return (
-    <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 +78,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
 
         <input
           id="organizationName"
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
           {...register("organizationName")}
         />
         {errors.organizationName && (
@@ -89,7 +92,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 +106,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 +120,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 +134,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,74 +147,80 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         )}
       </div>
 
-      <div className="col-sm-6">
-        <Label htmlFor="organizationSize" required>
-          Organization Size
-        </Label>
-
-        <select
-          id="organizationSize"
-          className="form-select shadow-none border py-1 px-2"
-          style={{ fontSize: "0.875rem" }} // Bootstrap's small text size
-          {...register("organizationSize", { required: "Organization size is required" })}
-        >
-          {orgSize.map((org) => (
-            <option key={org.val} value={org.val}>
-              {org.name}
-            </option>
-          ))}
-        </select>
-
+      <div className="col-sm-6 mb-2 mb-md-4">
+        <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 && (
-          <div className="danger-text">{errors.organizationSize.message}</div>
+          <small className="danger-text">{errors.organizationSize.message}</small>
         )}
       </div>
 
-
-      <div className="col-sm-6">
-        <Label htmlFor="industryId" required>
-          Industry
-        </Label>
-        <select
-          id="industryId"
-          className="form-select shadow-none border py-1 px-2 small"
-          {...register("industryId")}
-        >
-          {industryLoading ? (
-            <option value="">Loading...</option>
-          ) : (
-            data?.map((indu) => (
-              <option key={indu.id} value={indu.id}>
-                {indu.name}
-              </option>
-            ))
+      <div className="col-sm-6 mt-n3">
+        <AppFormController
+          name="industryId"
+          control={control} // make sure `control` comes from useForm
+          render={({ field }) => (
+            <SelectField
+              label="Industry"
+              placeholder={industryLoading ? "Loading..." : "Select Industry"}
+              options={data ?? []}
+              labelKey="name"
+              valueKeyKey="id"
+              value={field.value}
+              onChange={field.onChange}
+              isLoading={industryLoading}
+              className="shadow-none border py-1 px-2 small"
+              required
+            />
           )}
-        </select>
+        />
+
         {errors.industryId && (
           <div className="danger-text">{errors.industryId.message}</div>
         )}
       </div>
 
-      <div className="col-sm-6">
-        <Label htmlFor="reference" required>Reference</Label>
-        <select
-          id="reference"
-          className="form-select shadow-none border py-1 px-2 small"
-          {...register("reference")}
-        >
-          {reference.map((org) => (
-            <option key={org.val} value={org.val}>
-              {org.name}
-            </option>
-          ))}
-        </select>
+      <div className="col-sm-6 mb-2 mb-md-4 mt-n3">
+        <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"
+              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">
-        <SelectMultiple          
+
+      <div className="col-sm-6 mt-n3">
+        <SelectMultiple
           name="serviceIds"
           label="Services"
           options={services?.data}
@@ -229,7 +239,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         <textarea
           id="description"
           rows={3}
-          className={`form-control form-control-sm `}
+          className={`form-control  `}
           {...register("description")}
         />
         {errors.description && (

src/components/Tenant/TenantFilterChips.jsx

@@ -0,0 +1,100 @@
+import React, { useMemo } from "react";
+import { TENANT_STATUS, reference } from "../../utils/constants";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+
+const TenantFilterChips = ({ filter, filterData, removeFilterChip, clearFilter }) => {
+  const data = filterData || {};
+
+  const filterChips = useMemo(() => {
+    const chips = [];
+
+    const addGroup = (ids, list, label, key, valueKey = "id") => {
+      if (!ids || ids.length === 0) return;
+
+      const items = ids.map((id) => {
+        const found = list?.find((i) => i[valueKey] === id);
+        return {
+          id,
+          name: found?.name || id,
+        };
+      });
+
+      chips.push({ key, label, items });
+    };
+
+    // Industries
+    addGroup(filter?.industryIds, data, "Industries", "industryIds");
+
+    // References
+    addGroup(filter?.references, reference, "References", "references", "val");
+
+    // Tenant Status
+    addGroup(filter?.tenantStatusIds, TENANT_STATUS, "Status", "tenantStatusIds");
+
+    // Date Range Chip
+    if (filter?.startDate || filter?.endDate) {
+      chips.push({
+        key: "date",
+        label: "Date Range",
+        items: [
+          {
+            id: "date-range",
+            name: `${filter?.startDate ? formatUTCToLocalTime(filter.startDate) : ""}${
+              filter?.endDate ? " to " + formatUTCToLocalTime(filter.endDate) : ""
+            }`,
+          },
+        ],
+      });
+    }
+
+    return chips;
+  }, [filter, filterData]);
+
+  if (!filterChips.length) return null;
+
+  return (
+    <div className="d-flex flex-wrap align-items-center gap-2 mt-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>
+
+              {/* Remove Date Range → remove full filter */}
+              {chipGroup.key === "date" ? (
+                <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={clearFilter}
+                />
+              ) : (
+                <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 TenantFilterChips;

src/components/Tenant/TenantFilterPanel.jsx

@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, useImperativeHandle, forwardRef, useMemo } from "react";
 import { FormProvider, useForm, useFormContext } from "react-hook-form";
 import { defaultFilterValues, filterSchema } from "./TenantSchema";
 import Label from "../common/Label";
@@ -10,16 +10,44 @@ import { DateRangePicker1 } from "../common/DateRangePicker";
 import moment from "moment";
 import { useLocation } from "react-router-dom";
 
-const TenantFilterPanel = ({ onApply }) => {
+const TenantFilterPanel = forwardRef(({ onApply, setFilterdata, clearFilter }, ref) => {
   const [resetKey, setResetKey] = useState(0);
 
   const methods = useForm({
     resolver: zodResolver(filterSchema),
     defaultValues: defaultFilterValues,
   });
+  const { handleSubmit, reset, setValue } = methods;
+  const { data: industries, isLoading } = useIndustries();
+
+  const dynamicDefaultFilter = useMemo(() => {
+    return {
+      ...defaultFilterValues,
+      industryIds: defaultFilterValues.industryIds || [],
+      tenantStatusIds: defaultFilterValues.tenantStatusIds || [],
+      references: defaultFilterValues.references || [],
+      startDate: defaultFilterValues.startDate,
+      endDate: defaultFilterValues.endDate,
+    };
+  }, [defaultFilterValues]);
+
+useImperativeHandle(ref, () => ({
+  resetFieldValue: (name, value) => {
+    setValue(name, value);
+  },
+  resetFields: () => {
+    reset(defaultFilterValues);
+    setResetKey(prev => prev + 1); // reset date picker
+  }
+}));
+
+
+  useEffect(() => {
+    if (industries && setFilterdata) {
+      setFilterdata(industries);
+    }
+  }, [industries, setFilterdata]);
 
-  const { handleSubmit, reset } = methods;
-  const { data: industries = [], isLoading } = useIndustries();
 
   const handleClosePanel = useCallback(() => {
     document.querySelector(".offcanvas.show .btn-close")?.click();
@@ -32,9 +60,8 @@ const TenantFilterPanel = ({ onApply }) => {
         startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
         endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
       });
-      handleClosePanel();
     },
-    [onApply, handleClosePanel]
+    [onApply]
   );
 
 
@@ -65,6 +92,7 @@ const TenantFilterPanel = ({ onApply }) => {
               endField="endDate"
               resetSignal={resetKey}
               defaultRange={false}
+              className="w-100"
             />
           </div>
           <div className="text-strat mb-2">
@@ -119,6 +147,6 @@ const TenantFilterPanel = ({ onApply }) => {
       </form>
     </FormProvider>
   );
-};
+});
 
 export default TenantFilterPanel;

src/components/Tenant/TenantForm.jsx

@@ -43,6 +43,7 @@ const TenantForm = () => {
   const tenantForm = useForm({
     resolver: zodResolver(newTenantSchema),
     defaultValues: tenantDefaultValues,
+    mode: "onChange",
   });
 
   const subscriptionForm = useForm({