fixed attachment remove and update operation

Adding activetab to 0
added attachement in invoice
2025-11-29 13:27:07 +05:30 · 2025-11-29 09:36:13 +05:30 · 2025-11-28 20:49:47 +05:30 · 2025-11-28 18:01:42 +05:30 · 2025-11-28 12:36:23 +05:30 · 2025-11-28 06:42:44 +00:00
53 changed files with 3169 additions and 611 deletions
--- a/index.html
+++ b/index.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
+<html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact layout-menu-collapsed " dir="ltr"
  data-theme="theme-default" data-assets-path="/assets/" data-template="vertical-menu-template" data-style="light">
-
+<!-- layout-menu-collapsed layout-menu-hover -->
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
--- a/public/assets/css/core-extend.css
+++ b/public/assets/css/core-extend.css
@ -11,6 +11,18 @@
  top: var(--sticky-top, 0px) !important;
  z-index: 1025;
 }
+.form-control-md {
+  min-height: calc(1.6em + 0.65rem + calc(var(--bs-border-width) * 2));
+  padding: 0.18rem 0.60rem;
+  font-size: 0.875rem;  /* ~14px */
+  border-radius: var(--bs-border-radius);
+}
+
+.form-control-md::file-selector-button {
+  padding: 0.32rem 0.75rem;
+  margin: -0.32rem -0.75rem;
+  margin-inline-end: 0.75rem;
+}


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

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



--- a/public/assets/css/default.css
+++ b/public/assets/css/default.css
@ -31,7 +31,7 @@
 }

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

  const onClear = () => {
    setResetKey((prev) => prev + 1);
    handleFilter(TaskReportDefaultValue);
    reset(TaskReportDefaultValue);
-    closePanel();
  };
  return (
    <FormProvider {...methods}>
--- a/src/components/DailyProgressRport/TaskReportList.jsx
+++ b/src/components/DailyProgressRport/TaskReportList.jsx
@ -204,24 +204,34 @@ const TaskReportList = () => {
                  <HoverPopup
                    id="total_pending_task"
                    title="Total Pending Task"
-                    content={<p>This shows the total pending tasks for each activity on that date.</p>}
+                    content={
+                      <div className="text-wrap" style={{ 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={<p>This shows the reported versus planned tasks for each activity on that date.</p>}
+                    content={
+                      <div className="text-wrap" style={{ maxWidth: "200px" }}>
+                        This shows the reported versus planned tasks for each activity on that date.
+                      </div>
+                    }
                  >
                    <i className="bx bx-xs ms-1 bx-info-circle cursor-pointer"></i>
                  </HoverPopup>
                </span>
              </th>
+
              <th>Assign Date</th>
              <th>Team</th>
              <th className="text-center">Actions</th>
--- a/src/components/Dashboard/AttendanceOverview.jsx
+++ b/src/components/Dashboard/AttendanceOverview.jsx
@ -100,7 +100,7 @@ const AttendanceOverview = () => {
  };

  return (
-    <div className="bg-white px-4 rounded shadow d-flex flex-column h-100">
+    <div className="bg-white px-4 rounded shadow d-flex flex-column h-100" style={{ minHeight: "450px" }}>
      {/* Header */}
      <div className="d-flex mt-2 justify-content-between align-items-center mb-3">
        <div className="card-title mb-0 text-start">
--- a/src/components/Dashboard/Dashboard.jsx
+++ b/src/components/Dashboard/Dashboard.jsx
@ -17,12 +17,19 @@ import ExpenseAnalysis from "./ExpenseAnalysis";
 import ExpenseStatus from "./ExpenseStatus";
 import ExpenseByProject from "./ExpenseByProject";
 import ProjectStatistics from "../Project/ProjectStatistics";
+import ServiceJobs from "./ServiceJobs";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { REGULARIZE_ATTENDANCE, SELF_ATTENDANCE, TEAM_ATTENDANCE } from "../../utils/constants";

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

    return (
        <div className="container-fluid mt-5">
@ -40,26 +47,6 @@ const Dashboard = () => {
                <div className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"}`}>
                    <TasksCard />
                </div>
-
-                {isAllProjectsSelected && (
-                    <div className="col-xxl-6 col-lg-6">
-                        <ProjectCompletionChart />
-                    </div>
-                )}
-                <div className="col-xxl-6 col-lg-6">
-                    <ProjectProgressChart />
-                </div>
-                {!isAllProjectsSelected && (
-                    <div className="col-12 col-md-6 mb-sm-0 mb-4">
-                        <AttendanceOverview />
-                    </div>
-                )}
-
-                {!isAllProjectsSelected && (
-                    <div className="col-xxl-4 col-lg-4">
-                        <ProjectStatistics />
-                    </div>
-                )}
                <div className="col-12 col-xl-4 col-md-6">
                    <div className="card ">
                        <ExpenseStatus />
@ -74,6 +61,32 @@ const Dashboard = () => {
                <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>
    );
--- a/src/components/Dashboard/ServiceJobs.jsx
+++ b/src/components/Dashboard/ServiceJobs.jsx
@ -0,0 +1,237 @@
+import React from "react";
+
+const ServiceJobs = () => {
+  return (
+    <div className="col-xxl-4 col-lg-6">
+      <div className="card h-100">
+        <div className="card-header d-flex justify-content-between">
+          <div className="card-title mb-0 text-start">
+            <h5 className="mb-1">Service Jobs</h5>
+            <p className="card-subtitle">All Projects</p>
+          </div>
+        </div>
+
+        <div className="card-body p-0">
+          <div className="nav-align-top">
+
+            {/* Tabs */}
+            <ul className="nav nav-tabs nav-fill rounded-0 timeline-indicator-advanced" role="tablist">
+              <li className="nav-item">
+                <button className="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-new">
+                  My Jobs
+                </button>
+              </li>
+              <li className="nav-item">
+                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-preparing">
+                  Assigned
+                </button>
+              </li>
+              <li className="nav-item">
+                <button className="nav-link" data-bs-toggle="tab" data-bs-target="#tab-shipping">
+                  In Progress
+                </button>
+              </li>
+            </ul>
+
+            {/* Tab Content */}
+            <div className="tab-content border-0 mx-1 text-start">
+
+              {/* ---------------------- NEW TAB ---------------------- */}
+              <div className="tab-pane fade show active" id="tab-new">
+                {/* Entry 1 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                      <i className="bx bx-check-circle"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-success text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Myrtle Ullrich</h6>
+                      <p className="text-body mb-0">101 Boulder, California(CA), 95959</p>
+                    </div>
+                  </li>
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Barry Schowalter</h6>
+                      <p className="text-body mb-0">939 Orange, California(CA), 92118</p>
+                    </div>
+                  </li>
+                </ul>
+
+                <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+                {/* Entry 2 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+                      <i className="bx bx-check-circle"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-success text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Veronica Herman</h6>
+                      <p className="text-body mb-0">162 Windsor, California(CA), 95492</p>
+                    </div>
+                  </li>
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Helen Jacobs</h6>
+                      <p className="text-body mb-0">487 Sunset, California(CA), 94043</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+              {/* ---------------------- PREPARING TAB ---------------------- */}
+              <div className="tab-pane fade" id="tab-preparing">
+
+                {/* Entry 1 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
+                      <i className="bx bx-time-five"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-warning text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Oliver Grant</h6>
+                      <p className="text-body mb-0">220 Pine St, California(CA), 95765</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Samantha Lee</h6>
+                      <p className="text-body mb-0">744 Bay Area, California(CA), 94016</p>
+                    </div>
+                  </li>
+                </ul>
+
+                <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+                {/* Entry 2 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-warning border-0 shadow-none">
+                      <i className="bx bx-time-five"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-warning text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Marcus Howard</h6>
+                      <p className="text-body mb-0">58 Avenue, California(CA), 95376</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Daniel Foster</h6>
+                      <p className="text-body mb-0">312 Marina, California(CA), 94109</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+              {/* ---------------------- SHIPPING TAB ---------------------- */}
+              <div className="tab-pane fade" id="tab-shipping">
+
+                {/* Entry 1 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
+                      <i className="bx bx-package"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-info text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">James Carter</h6>
+                      <p className="text-body mb-0">441 Market St, California(CA), 94111</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">Linda Moore</h6>
+                      <p className="text-body mb-0">990 Willow Road, California(CA), 94025</p>
+                    </div>
+                  </li>
+                </ul>
+
+                <div className="border-1 border-light border-top border-dashed my-4"></div>
+
+                {/* Entry 2 */}
+                <ul className="timeline mb-0">
+                  <li className="timeline-item ps-6 border-left-dashed">
+                    <span className="timeline-indicator-advanced timeline-indicator-info border-0 shadow-none">
+                      <i className="bx bx-package"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-info text-uppercase">Sender</small>
+                      </div>
+                      <h6 className="my-50">Sarah Bennett</h6>
+                      <p className="text-body mb-0">882 Canyon Rd, California(CA), 94704</p>
+                    </div>
+                  </li>
+
+                  <li className="timeline-item ps-6 border-transparent">
+                    <span className="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                      <i className="bx bx-map"></i>
+                    </span>
+                    <div className="timeline-event ps-1">
+                      <div className="timeline-header">
+                        <small className="text-primary text-uppercase">Receiver</small>
+                      </div>
+                      <h6 className="my-50">George Simmons</h6>
+                      <p className="text-body mb-0">19 Palm St, California(CA), 93001</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default ServiceJobs;
--- a/src/components/Expenses/Filelist.jsx
+++ b/src/components/Expenses/Filelist.jsx
@ -18,12 +18,11 @@ const Filelist = ({ files, removeFile, expenseToEdit,sm=6,md=4 }) => {
              {/* File icon and info */}
              <div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
                <i
-              className={`bx ${getIconByFileType(
-                file?.contentType
-              )} fs-3 `}
+                  className={`bx ${getIconByFileType(file?.contentType)} fs-3 `}
                  style={{ minWidth: "30px" }}
                ></i>

+                <Tooltip text={file.fileName}>
                  <div className="d-flex flex-column text-truncate">
                    <span className="fw-semibold small text-truncate">
                      {file.fileName}
@ -32,6 +31,7 @@ const Filelist = ({ files, removeFile, expenseToEdit,sm=6,md=4 }) => {
                      {file.fileSize ? formatFileSize(file.fileSize) : ""}
                    </span>
                  </div>
+                </Tooltip>
              </div>

              {/* Delete icon */}
@ -41,7 +41,7 @@ const Filelist = ({ files, removeFile, expenseToEdit,sm=6,md=4 }) => {
                  role="button"
                  onClick={(e) => {
                    e.preventDefault();
-                removeFile(expenseToEdit ? file.documentId : idx);
+                    removeFile(expenseToEdit ? file.documentId ?? file.tempId ?? idx : file.tempId ?? idx);
                  }}
                ></i>
              </Tooltip>
@ -49,7 +49,6 @@ const Filelist = ({ files, removeFile, expenseToEdit,sm=6,md=4 }) => {
          </div>
        ))}
    </div>
-
  );
 };

@ -62,9 +61,7 @@ export const FilelistView = ({ files, viewFile }) => {
          <div className="row align-items-center">
            {/* File icon and info */}
            <div className="col-12 d-flex align-items-center gap-2">
-              <i
-                className={`bx ${getIconByFileType(file?.fileName)} fs-3`}
-              ></i>
+              <i className={`bx ${getIconByFileType(file?.fileName)} fs-3`}></i>

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

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

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

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

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

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

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

-const PreviewDocument = ({ imageUrl }) => {
+  const [index, setIndex] = useState(0);
  const [loading, setLoading] = useState(true);
  const [rotation, setRotation] = useState(0);
  const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState(false);
+
+  const startPos = useRef({ x: 0, y: 0 });
+
+  const MIN_ZOOM = 0.4;
+  const MAX_ZOOM = 3;
+
+  const currentImage = images[index];
+
+  // Reset on image change
+  useEffect(() => {
+    setRotation(0);
+    setScale(1);
+    setPosition({ x: 0, y: 0 });
+    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 = () => setScale((prev) => Math.min(prev + 0.2, 3));
-  const zoomOut = () => setScale((prev) => Math.max(prev - 0.2, 0.4));
  const resetAll = () => {
    setRotation(0);
    setScale(1);
+    setPosition({ x: 0, y: 0 });
  };

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

      <div
-        className="position-relative d-flex flex-column justify-content-center align-items-center overflow-hidden"
-        style={{ minHeight: "80vh" }}
-      >
-        {loading && (
-          <div className="text-secondary text-center mb-2">
-            Loading...
-          </div>
-        )}
-
-        <div className="mb-3 d-flex justify-content-center align-items-center">
-          <img
-            src={imageUrl}
-            alt="Full View"
-            className="img-fluid"
+        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={{
-              maxHeight: "80vh",
-              objectFit: "contain",
+          minHeight: "70vh",
+          userSelect: "none",
+          borderRadius: "10px",
+        }}
+      >
+        {loading && <div className="text-secondary">Loading...</div>}
+
+        <img
+          src={currentImage?.preSignedUrl}
+          alt="Preview"
+          draggable="false"
+          style={{
+            maxHeight: "60vh",
            display: loading ? "none" : "block",
-              transform: `rotate(${rotation}deg) scale(${scale})`,
-              transition: "transform 0.3s ease",
-              cursor: "grab",
+            transform: `
+              translate(${position.x}px, ${position.y}px)
+              scale(${scale})
+              rotate(${rotation}deg)
+            `,
+            transition: dragging ? "none" : "transform 0.2s ease",
+            cursor: dragging ? "grabbing" : "grab",
          }}
          onLoad={() => setLoading(false)}
        />
      </div>

-        <div className="position-absolute bottom-0 start-0 m-2">
-          <button
-            className="btn btn-outline-secondary"
-            onClick={resetAll}
-          >
-            <i className="bx bx-reset"></i> Reset
-          </button>
+      <div className="d-flex justify-content-between">
+        <div className="text-center text-muted mt-2 small">
+          Scroll = change 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>
    </>
  );
 };

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

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

-       <small className="layout-menu-toggle menu-link text-large ms-auto">
-
+        <small className="layout-menu-toggle menu-link text-large ms-auto cursor-pointer">
          <i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
        </small>
      </div>
--- a/src/components/PaymentRequest/ManagePaymentRequest.jsx
+++ b/src/components/PaymentRequest/ManagePaymentRequest.jsx
@ -239,7 +239,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
              Select Project
            </Label> */}
            {/* <select
-              className="form-select form-select-sm"
+              className="form-select "
              {...register("projectId")}
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@ -282,7 +282,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
              Expense Category
            </Label>
            <select
-              className="form-select form-select-sm"
+              className="form-select "
              id="expenseCategoryId"
              {...register("expenseCategoryId")}
              disabled={
@ -311,7 +311,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
        </div>

        {/* Title and Advance Payment  */}
-        <div className="row my-2 text-start">
+        <div className="row mt-n2 text-start">
          <div className="col-md-6">
            <Label htmlFor="title" className="form-label" required>
              Title
@ -319,7 +319,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            <input
              type="text"
              id="title"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("title")}
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@ -343,7 +343,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
              }
              render={({ field }) => (
-                <div className="d-flex align-items-center gap-3">
+                <div className="d-flex align-items-center gap-3 mt-3">
                  <div className="form-check d-flex flex-row m-0 gap-2">
                    <input
                      type="radio"
@ -387,6 +387,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
              control={control}
              minDate={new Date()}
              className="w-100"
+              size="md"
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
              }
@ -404,7 +405,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            <input
              type="number"
              id="amount"
-              className="form-control form-control-sm"
+              className="form-control "
              min="1"
              step="0.01"
              inputMode="decimal"
@ -429,6 +430,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                setValue("payee", val, { shouldValidate: true })
              }
              error={errors.payee?.message}
+              size="md"
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
              }
@ -458,7 +460,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            </Label>
            <select
              id="currencyId"
-              className="form-select form-select-sm"
+              className="form-select "
              {...register("currencyId")}
              disabled={
                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@ -490,7 +492,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
            </Label>
            <textarea
              id="description"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("description")}
              rows="2"
              disabled={
--- a/src/components/Project/ProjectStatistics.jsx
+++ b/src/components/Project/ProjectStatistics.jsx
@ -165,7 +165,7 @@ const ProjectStatistics = ({ project }) => {
  }, [selectedProject]);

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

-    </div>
  );
 };

--- a/src/components/RecurringExpense/ManageRecurringExpense.jsx
+++ b/src/components/RecurringExpense/ManageRecurringExpense.jsx
@ -165,7 +165,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
        <div className="row my-2 text-start">
          <div className="col-md-6">
            {/* <select
-              className="form-select form-select-sm"
+              className="form-select"
              {...register("projectId")}
            >
              <option value="">Select Project</option>
@ -201,7 +201,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
              Expense Category
            </Label>
            <select
-              className="form-select form-select-sm"
+              className="form-select"
              id="expenseCategoryId"
              {...register("expenseCategoryId")}
            >
@ -227,7 +227,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
        </div>

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

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

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

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

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

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

            {errors.endDate && (
@ -568,7 +571,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
            </Label>
            <textarea
              id="description"
-              className="form-control form-control-sm"
+              className="form-control "
              {...register("description")}
              rows="2"
            ></textarea>
--- a/src/components/RecurringExpense/RecurringExpenseList.jsx
+++ b/src/components/RecurringExpense/RecurringExpenseList.jsx
@ -166,7 +166,6 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
      }
    );
  };
-console.log("Tanish",filteredData)
  return (
    <>
      {IsDeleteModalOpen && (
--- a/src/components/ServiceProject/JobList.jsx
+++ b/src/components/ServiceProject/JobList.jsx
@ -175,12 +175,9 @@ const JobList = ({ isArchive }) => {
                    <td
                      key={col.key}
                      className={col.className}
-                      // onClick={() =>
-                      //   setSelectedJob({ showCanvas: true, job: row?.id })
-                      // }
                      onClick={() => {
                        if (!isArchive) {
-                          setSelectedJob({ showCanvas: true, job: e?.id });
+                          setSelectedJob({ showCanvas: true, job: row?.id });
                        }
                      }}

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

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

            {/* RIGHT — New Job button */}
@ -82,6 +94,7 @@ const Jobs = () => {
                <i className="bx bx-plus-circle bx-md me-2"></i> New Job
              </button>
            </div>
+
          </div>

          {/* Job List */}
--- a/src/components/ServiceProject/ManageServiceProject.jsx
+++ b/src/components/ServiceProject/ManageServiceProject.jsx
@ -223,9 +223,6 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
              className="form-control form-control-sm"
              {...register("contactName")}
              placeholder="Enter Employee name.."              
-              onInput={(e) => {
-                e.target.value = e.target.value.replace(/[^A-Za-z ]/g, "");
-              }}
            />
            {errors?.contactName && (
              <span className="danger-text">{errors.contactName.message}</span>
--- a/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
+++ b/src/components/ServiceProject/ServiceProjectBranch/ServiceBranch.jsx
@ -237,14 +237,17 @@ const ServiceBranch = () => {
                  !isError &&
                  (!data?.data || data.data.length === 0) && (
                    <tr>
-                      <td
-                        colSpan={columns.length + 1}
-                        className="text-center py-12"
+                      <td colSpan={columns.length + 1}>
+                        <div
+                          className="d-flex justify-content-center align-items-center"
+                          style={{ height: "150px" }}
                        >
                          No Branch Found
+                        </div>
                      </td>
                    </tr>
                  )}
+
              </tbody>
            </table>

--- a/src/components/ServiceProject/ServiceProjectJob/JobComments.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/JobComments.jsx
@ -150,7 +150,7 @@ const JobComments = ({ data }) => {
              type="submit"
              disabled={!watch("comment")?.trim() || isPending}
            >
-              Send
+              Submit
            </button>
          </div>
        </form>
--- a/src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
+++ b/src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
@ -172,6 +172,20 @@ const ManageJob = ({ Job }) => {
    <div className="container">
      <AppFormProvider {...methods}>
        <form className="row text-start" onSubmit={handleSubmit(onSubmit)}>
+           <div className="col-12 col-md-12">
+            <SelectFieldSearch
+              label="Select Branch"
+              placeholder="Select Branch"
+              value={watch("projectBranchId")}
+              onChange={(val) => setValue("projectBranchId", val)}
+              valueKey="id"
+              labelKey="branchName"
+              hookParams={[projectId, true, 10, 1]}
+              useFetchHook={useBranches}
+              isMultiple={false}
+              disabled={Job}
+            />
+          </div>
          <div className="col-12 col-md-12 mb-2 ">
            <Label required>Title</Label>
            <input
@ -244,20 +258,7 @@ const ManageJob = ({ Job }) => {
              placeholder="Enter Tag"
            />
          </div>
-          <div className="col-12 col-md-6 mb-2 mb-md-4">
-            <SelectFieldSearch
-              label="Select Branch"
-              placeholder="Select Branch"
-              value={watch("projectBranchId")}
-              onChange={(val) => setValue("projectBranchId", val)}
-              valueKey="id"
-              labelKey="branchName"
-              hookParams={[projectId, true, 10, 1]}
-              useFetchHook={useBranches}
-              isMultiple={false}
-              disabled={Job}
-            />
-          </div>
+         
          <div className="col-12">
            <Label required>Description</Label>
            <textarea
@ -276,7 +277,7 @@ const ManageJob = ({ Job }) => {
                ? "Please wait..."
                : Job
                ? "Update"
-                : "Submit"}
+                : "Assign"}
            </button>
          </div>
        </form>
--- a/src/components/ServiceProject/ServiceProjectSchema.jsx
+++ b/src/components/ServiceProject/ServiceProjectSchema.jsx
@ -22,8 +22,7 @@ export const projectSchema = z.object({
  contactName: z
    .string()
    .trim()
-    .min(1, "Contact name is required")
-    .regex(/^[A-Za-z\s]+$/, "Contact name can contain only letters"),
+    .min(1, "Contact name is required"),

  contactPhone: z
    .string()
--- a/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamList.jsx
+++ b/src/components/ServiceProject/ServiceProjectTeam/ServiceProjectTeamList.jsx
@ -77,6 +77,7 @@ const ServiceProjectTeamList = () => {
              <td
                colSpan={servceProjectColmen.length}
                className="text-center py-4 border-0"
+                style={{ height: "200px" }}
              >
                {isLoading ? (
                  <SpinnerLoader />
@ -85,6 +86,7 @@ const ServiceProjectTeamList = () => {
                )}
              </td>
            </tr>
+
          )}
        </tbody>
      </table>
--- a/src/components/common/Forms/SelectFieldServerSide.jsx
+++ b/src/components/common/Forms/SelectFieldServerSide.jsx
@ -200,7 +200,9 @@ export const SelectProjectField = ({
  isFullObject = false,
  isMultiple = false,
  isAllProject = false,
-  disabled
+  disabled,
+  className,
+  errors,
 }) => {
  const [searchText, setSearchText] = useState("");
  const debounce = useDebounce(searchText, 300);
@ -303,7 +305,10 @@ export const SelectProjectField = ({
        </span>
      </button>

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

          {isLoading && (
            <li className="dropdown-item text-muted text-center">Loading...</li>
@ -358,6 +364,7 @@ export const SelectProjectField = ({
                </li>
              );
            })}
+            </div>
        </ul>
      )}
    </div>
@ -377,6 +384,7 @@ export const SelectFieldSearch = ({
  isMultiple = false,
  hookParams,
  useFetchHook,
+  errors = null,
 }) => {
  const [searchText, setSearchText] = useState("");
  const debounce = useDebounce(searchText, 300);
@ -386,108 +394,76 @@ export const SelectFieldSearch = ({
  const [open, setOpen] = useState(false);
  const dropdownRef = useRef(null);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

            {!isLoading &&
-            options.map((option) => {
+              mergedOptions.map((option) => {
                const isActive = isMultiple
                  ? selectedList.some((x) => x[valueKey] === option[valueKey])
                  : selectedSingle &&
@ -559,7 +535,9 @@ export const SelectFieldSearch = ({
                  <li key={option[valueKey]}>
                    <button
                      type="button"
-                    className={`dropdown-item ${isActive ? "active" : ""}`}
+                      className={`dropdown-item rounded ${
+                        isActive ? "active" : ""
+                      }`}
                      onClick={() => handleSelect(option)}
                    >
                      {getDisplayName(option)}
@ -567,6 +545,7 @@ export const SelectFieldSearch = ({
                  </li>
                );
              })}
+          </div>
        </ul>
      )}
    </div>
--- a/src/components/common/HoverPopup.jsx
+++ b/src/components/common/HoverPopup.jsx
@ -58,117 +58,43 @@ const HoverPopup = ({
    return () => document.removeEventListener("click", handler);
  }, [Mode, visible, dispatch, id]);

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

-    // run in next frame so DOM/layout settles
    requestAnimationFrame(() => {
      const popup = popupRef.current;
-
-      // choose boundary: provided boundaryRef or nearest positioned parent (popup.parentElement)
-      const boundaryEl =
-        (boundaryRef && boundaryRef.current) || popup.parentElement;
+      const boundaryEl = (boundaryRef && boundaryRef.current) || popup.parentElement;
      if (!boundaryEl) return;

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

      const popupRect = popup.getBoundingClientRect();
-      const parentRect = boundaryRect; // alias
+      const triggerCenterX = triggerRect.left + triggerRect.width / 2 - boundaryRect.left;
+      let left = triggerCenterX - popupRect.width / 2;

-      // Convert trigger center to parent coordinates
-      const triggerCenterX =
-        triggerRect.left + triggerRect.width / 2 - parentRect.left;
-
-      // preferred left so popup center aligns to trigger center:
-      const preferredLeft = triggerCenterX - popupRect.width / 2;
-
-      // Helpers to set styles in parent's coordinate system:
-      const setLeft = (leftPx) => {
-        popup.style.left = `${leftPx}px`;
-        popup.style.right = "auto";
-        popup.style.transform = "none";
-      };
-      const setRight = (rightPx) => {
-        popup.style.left = "auto";
-        popup.style.right = `${rightPx}px`;
-        popup.style.transform = "none";
-      };
-
-      // If user forced align:
-      if (align === "left") {
-        // align popup's left to parent's left (0)
-        setLeft(0);
-        return;
-      }
-      if (align === "right") {
-        // align popup's right to parent's right (0)
-        setRight(0);
-        return;
-      }
-      if (align === "center") {
-        popup.style.left = "50%";
-        popup.style.right = "auto";
-        popup.style.transform = "translateX(-50%)";
-        return;
-      }
-
-      // align === "auto": try preferred centered position, but flip fully if overflow
-      // clamp preferredLeft to boundaries so it doesn't render partially outside
-      const leftIfCentered = Math.max(
-        0,
-        Math.min(preferredLeft, parentRect.width - popupRect.width)
-      );
-
-      // if centered fits, use it
-      if (leftIfCentered === preferredLeft) {
-        setLeft(leftIfCentered);
-        return;
-      }
-
-      // if centering would overflow right -> stick popup fully to left (left=0)
-      if (preferredLeft > parentRect.width - popupRect.width) {
-        // place popup so its right aligns to parent's right
-        // i.e., left = parent width - popup width
-        setLeft(parentRect.width - popupRect.width);
-        return;
-      }
-
-      // if centering would overflow left -> stick popup fully to left=0
-      if (preferredLeft < 0) {
-        setLeft(0);
-        return;
-      }
-
-      // fallback center
-      setLeft(leftIfCentered);
+      // Clamp to boundaries
+      left = Math.max(0, Math.min(left, boundaryRect.width - popupRect.width));
+      popup.style.left = `${left}px`;
    });
  }, [visible, align, boundaryRef]);

  return (
    <div
      className="d-inline-block position-relative"   // <-- ADD THIS !!
-    style={{
-      maxWidth: "calc(700px - 100px)",
-      width: "100%",
-      wordWrap: "break-word",
-      overflow: "visible",   // also make sure popup isn't clipped
-    }}
+      style={{ overflow: "visible" }}
    >
      <div
-      className="d-inline-block"
+
        ref={triggerRef}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
        onClick={handleClick}
-      style={{ cursor: "pointer" }}
+        style={{ cursor: "pointer", display: "inline-block" }}
      >
        {children}
      </div>
@ -180,8 +106,9 @@ const HoverPopup = ({
         style={{
            zIndex: 2000,
            top: "100%",
-          width: "max-content",
-          minWidth: "120px",
+            minWidth: "200px",
+            maxWidth: "300px",
+            wordWrap: "break-word",
          }}
          onClick={(e) => e.stopPropagation()}
        >
--- a/src/components/common/InputSuggestion.jsx
+++ b/src/components/common/InputSuggestion.jsx
@ -4,6 +4,7 @@ const InputSuggestions = ({
  organizationList = [],
  value,
  onChange,
+  size = "sm",
  error,
  disabled = false,
 }) => {
@ -27,7 +28,7 @@ const InputSuggestions = ({
  return (
    <div className="mb-3 position-relative">
      <input
-        className="form-control form-control-sm"
+        className={`form-control form-control-${size}`}
        value={value}
        onChange={handleInputChange}
        onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
@ -50,7 +51,6 @@ const InputSuggestions = ({
          {filteredList.map((org) => (
            <li
              key={org}
-              className="ropdown-item"
              style={{
                cursor: "pointer",
                padding: "5px 12px",
@ -58,8 +58,7 @@ const InputSuggestions = ({
                transition: "background-color 0.2s",
              }}
              onMouseDown={() => handleSelectSuggestion(org)}
-                className={`dropdown-item ${
-                  org === value ? "active" : ""
+              className={`dropdown-item ${org === value ? "active" : ""
                }`}
            >
              {org}
--- a/src/components/common/SigleFileUploader.jsx
+++ b/src/components/common/SigleFileUploader.jsx
@ -0,0 +1,111 @@
+import { useRef } from "react";
+import Label from "./Label";
+import Tooltip from "./Tooltip";
+import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
+
+const SingleFileUploader = ({
+  label = "Upload Document",
+  required = false,
+  value,
+  onChange,
+  onRemove,
+  disabled,
+  error,
+  accept = ".pdf,.jpg,.jpeg,.png",
+  maxSizeMB = 25,
+  hint = "(PDF, JPG, PNG, max 5MB)",
+}) => {
+  const inputRef = useRef(null);
+
+  const handleFileSelect = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Validate size
+    if (file.size > maxSizeMB * 1024 * 1024) {
+      alert(`File size cannot exceed ${maxSizeMB}MB`);
+      e.target.value = "";
+      return;
+    }
+
+    // Convert to base64
+    const base64Data = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result.split(",")[1]);
+      reader.onerror = (err) => reject(err);
+    });
+
+    const attachmentObj = {
+      fileName: file.name,
+      base64Data,
+      invoiceAttachmentTypeId: "", // set dynamically if needed
+      contentType: file.type,
+      fileSize: file.size,
+      description: "",
+      isActive: true,
+    };
+
+    onChange(attachmentObj);
+    e.target.value = "";
+  };
+
+  return (
+    <div className="col-md-12">
+      <Label className="form-label" required={required}>
+        {label}
+      </Label>
+
+      <div
+        className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
+        style={{ cursor: "pointer" }}
+        onClick={() => inputRef.current.click()}
+      >
+        <i className="bx bx-cloud-upload d-block bx-lg"></i>
+        <span className="text-muted d-block">
+          Click to select or click here to browse
+        </span>
+        <small className="text-muted">{hint}</small>
+
+        <input
+          type="file"
+          ref={inputRef}
+          accept={accept}
+          style={{ display: "none" }}
+          onChange={handleFileSelect}
+          disabled={disabled}
+        />
+      </div>
+
+      {error && <small className="danger-text">{error}</small>}
+
+      {value && (
+        <div className="mt-3">
+          <div className="d-flex align-items-center justify-content-between bg-white border rounded p-2">
+            <div className="d-flex align-items-center gap-2">
+              <i
+                className={`bx ${getIconByFileType(value.contentType)} fs-3`}
+              ></i>
+
+              <div className="d-flex flex-column text-truncate">
+                <span className="fw-semibold small text-truncate">
+                  {value.fileName}
+                </span>
+                <small className="text-muted">
+                  {value.fileSize ? formatFileSize(value.fileSize) : ""}
+                </small>
+              </div>
+            </div>
+
+            <i
+              className="bx bx-trash text-danger fs-5 cursor-pointer"
+              onClick={onRemove}
+            ></i>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SingleFileUploader;
--- a/src/components/purchase/DeliverChallanList.jsx
+++ b/src/components/purchase/DeliverChallanList.jsx
@ -0,0 +1,68 @@
+import React from "react";
+import { useDeliverChallane } from "../../hooks/usePurchase";
+import { SpinnerLoader } from "../common/Loader";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { FileView } from "../Expenses/Filelist";
+
+const DeliverChallanList = ({ purchaseId }) => {
+  const { data, isLoading, isError, error } = useDeliverChallane(purchaseId);
+  if (isLoading) {
+    return (
+  <div className="d-flex justify-content-center align-items-center text-center vh-50">
+        <SpinnerLoader />
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="py-3">
+        <Error error={error} />
+      </div>
+    );
+  }
+  if (!isLoading && data.length === 0)
+    return (
+      <div className="d-flex justify-content-center align-items-center text-center vh-50">
+        <p className="mb-0">Not Yet</p>
+      </div>
+    );
+
+  return (
+    <div className="list-group list-group-flush text-start">
+      {data.map((item) => (
+        <div
+          key={item.id}
+          className="list-group-item d-flex justify-content-between align-items-start flex-wrap px-3 w-full"
+        >
+          {/* LEFT SIDE */}
+          <div className=" pe-3 text-break w-full">
+            <div className="d-flex justify-content-between">
+              <p className="mb-1 fw-semibold">{item.deliveryChallanNumber}</p>
+              <small className="text-muted text-end">
+                {formatUTCToLocalTime(item.deliveryChallanDate, true)}
+              </small>
+            </div>
+
+            <div className="mb-1 small text-muted text-break">
+              <span className="fw-semibold me-1">Invoice:</span>
+              {item.purchaseInvoice?.title} (
+              {item.purchaseInvoice?.purchaseInvoiceUId})
+            </div>
+
+            <p className="mb-1 text-break">
+              <span className="fw-semibold">Description:</span>{" "}
+              {item.description || "-"}
+            </p>
+
+            {item.attachment?.preSignedUrl && (
+              <FileView file={item.attachment} />
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DeliverChallanList;
--- a/src/components/purchase/DeliveryChallane.jsx
+++ b/src/components/purchase/DeliveryChallane.jsx
@ -0,0 +1,200 @@
+import React, { useState } from "react";
+import {
+  useAddDeliverChallan,
+  useDeliverChallane,
+} from "../../hooks/usePurchase";
+import { SpinnerLoader } from "../common/Loader";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import DeliverChallanList from "./DeliverChallanList";
+import { AppFormController, useAppForm } from "../../hooks/appHooks/useAppForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  DeliveryChallanDefaultValue,
+  DeliveryChallanSchema,
+} from "./PurchaseSchema";
+import Label from "../common/Label";
+import DatePicker from "../common/DatePicker";
+import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
+import SelectField from "../common/Forms/SelectField";
+import Filelist from "../Expenses/Filelist";
+import SingleFileUploader from "../common/SigleFileUploader";
+import { localToUtc } from "../../utils/appUtils";
+import WarningBlock from "../InfoBlock/WarningBlock";
+import { FILE_UPLOAD_INFO } from "../../utils/staticContent";
+
+const DeliveryChallane = ({ purchaseId }) => {
+  const [file, setFile] = useState(null);
+
+  const {
+    register,
+    control,
+    handleSubmit,
+    setValue,
+    trigger,
+    watch,
+    reset,
+    formState: { errors },
+  } = useAppForm({
+    resolver: zodResolver(DeliveryChallanSchema),
+    defaultValues: DeliveryChallanDefaultValue,
+  });
+
+  const { data, isLoading } = useInvoiceAttachmentTypes();
+  const { mutate: AddChallan, isPending } = useAddDeliverChallan(() => {
+    setFile(null);
+    setValue("attachment", null, { shouldValidate: false });
+    reset({
+      ...DeliveryChallanDefaultValue,
+      attachment: null,
+    });
+  });
+  const onSubmit = async (formData) => {
+    const valid = await trigger();
+    if (!valid) return;
+    const { invoiceAttachmentTypeId, ...rest } = formData;
+
+    const payload = {
+      ...rest,
+      attachment: formData.attachment
+        ? {
+            ...formData.attachment,
+            invoiceAttachmentTypeId,
+          }
+        : null,
+      purchaseInvoiceId: purchaseId,
+      deliveryChallanDate: formData.deliveryChallanDate
+        ? localToUtc(formData.deliveryChallanDate)
+        : null,
+    };
+
+    AddChallan(payload);
+  };
+  const isUploaded = watch("attachment");
+  const isDocumentType = watch("invoiceAttachmentTypeId");
+  return (
+    <div className="row px-3 px-sm-1">
+      <div className="fw-semibold mb-3 fs-5">Delivery Challans</div>
+
+      <div className="col-md-6">
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="row g-3 text-start"
+          noValidate
+        >
+          {/* Challan Number */}
+          <div className="col-md-6">
+            <Label required>Delivery Challan No</Label>
+
+            <input
+              type="text"
+              className="form-control"
+              {...register("deliveryChallanNumber")}
+            />
+
+            {errors?.deliveryChallanNumber && (
+              <small className="danger-text">
+                {errors.deliveryChallanNumber.message}
+              </small>
+            )}
+          </div>
+
+          <div className="col-md-6">
+            <Label required>Delivery Date</Label>
+
+            <DatePicker
+              name="deliveryChallanDate"
+              control={control}
+              className="w-100"
+              size="xs"
+            />
+
+            {errors?.deliveryChallanDate && (
+              <small className="danger-text">
+                {errors.deliveryChallanDate.message}
+              </small>
+            )}
+          </div>
+
+          <div className="col-12">
+            <Label required>Description</Label>
+
+            <textarea
+              className="form-control form-control-sm"
+              rows="3"
+              {...register("description")}
+            />
+
+            {errors?.description && (
+              <small className="danger-text">
+                {errors.description.message}
+              </small>
+            )}
+          </div>
+
+          <div className="col-12">
+            <AppFormController
+              name="invoiceAttachmentTypeId"
+              control={control}
+              render={({ field }) => (
+                <SelectField
+                  label="Select Document Type"
+                  options={data ?? []}
+                  placeholder="Choose  Type"
+                  labelKeyKey="name"
+                  valueKeyKey="id"
+                  value={field.value}
+                  onChange={field.onChange}
+                  isLoading={isLoading}
+                  className="m-0"
+                />
+              )}
+            />
+
+            {errors?.invoiceAttachmentTypeId && (
+              <small className="danger-text">
+                {errors.invoiceAttachmentTypeId.message}
+              </small>
+            )}
+          </div>
+
+          <SingleFileUploader
+            label="Upload Bill"
+            required
+            value={file}
+            onChange={(selectedFile) => {
+              setFile(selectedFile);
+              setValue("attachment", selectedFile, { shouldValidate: true });
+            }}
+            disabled={!isDocumentType}
+            onRemove={() => {
+              setFile(null);
+              setValue("attachment", null, { shouldValidate: true });
+            }}
+            error={errors?.attachment?.message}
+          />
+
+          <div className="col-12 text-end my-3">
+            <button type="submit" className="btn btn-sm btn-primary px-4">
+              {isPending ? "Please Wait..." : "Submit"}
+            </button>
+          </div>
+        </form>
+        {!isUploaded && (
+          <WarningBlock content={FILE_UPLOAD_INFO} />
+        )}
+      </div>
+
+      <div className="col-md-6 text-start">
+        <div className="d-flex justiffy-content-start align-items-center gap-1 ms-2">
+          <i className="bx bx-history bx-xs"></i>{" "}
+          <p className="fw-medium mb-0">History</p>
+        </div>
+        <div className="overflow-auto " style={{ maxHeight: "420px" }}>
+          <DeliverChallanList purchaseId={purchaseId} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeliveryChallane;
--- a/src/components/purchase/ManagePurchase.jsx
+++ b/src/components/purchase/ManagePurchase.jsx
@ -0,0 +1,234 @@
+import React, { useEffect, useMemo, useCallback, useState } from "react";
+import { AppFormProvider, useAppForm } from "../../hooks/appHooks/useAppForm";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import {
+  defaultPurchaseValue,
+  PurchaseSchema,
+  getStepFields,
+} from "./PurchaseSchema";
+
+import PurchasePartyDetails from "./PurchasePartyDetails";
+import PurchaseTransportDetails from "./PurchaseTransportDetails";
+import PurchasePaymentDetails from "./PurchasePaymentDetails";
+
+import {
+  useCreatePurchaseInvoice,
+  usePurchase,
+  useUpdatePurchaseInvoice,
+} from "../../hooks/usePurchase";
+import { error } from "pdf-lib";
+
+const ManagePurchase = ({ onClose, purchaseId }) => {
+  const { data } = usePurchase(purchaseId);
+
+  const [activeTab, setActiveTab] = useState(0);
+  const [completedTabs, setCompletedTabs] = useState([]);
+
+  const stepsConfig = useMemo(
+    () => [
+      {
+        name: "Party Details",
+        icon: "bx bx-user bx-md",
+        subtitle: "Supplier & project information",
+        component: <PurchasePartyDetails purchase={data} />,
+      },
+      {
+        name: "Invoice & Transport",
+        icon: "bx bx-receipt bx-md",
+        subtitle: "Invoice, eWay bill & transport info",
+        component: <PurchaseTransportDetails />,
+      },
+      {
+        name: "Payment Details",
+        icon: "bx bx-credit-card bx-md",
+        subtitle: "Amount, tax & due date",
+        component: <PurchasePaymentDetails purchaseId={purchaseId} />,
+      },
+    ],
+    [data, purchaseId]
+  );
+
+  const purchaseOrder = useAppForm({
+    resolver: zodResolver(PurchaseSchema),
+    defaultValues: defaultPurchaseValue,
+    mode: "onChange",
+    shouldUnregister: false,
+  });
+
+  const { reset, formState } = purchaseOrder;
+
+  useEffect(() => {
+    if (!purchaseId || !data) return;
+
+    reset({
+      ...data,
+      projectId: data?.project?.id,
+      organizationId: data?.organization?.id,
+      supplierId: data?.supplier?.id,
+      invoiceAttachmentTypeId: null,
+      attachments:
+        data?.attachments?.map((doc) => ({
+          fileName: doc.fileName,
+          base64Data: null,
+          contentType: doc.contentType,
+          documentId: doc.documentId,
+          invoiceAttachmentTypeId: doc.invoiceAttachmentType?.id ?? null,
+          fileSize: 0,
+          description: "",
+          preSignedUrl: doc.preSignedUrl,
+          isActive: doc.isActive ?? true,
+        })) || [],
+    });
+
+    setCompletedTabs([0, 1, 2]);
+  }, [purchaseId, data, reset]);
+
+  const handleNext = useCallback(async () => {
+    const fields = getStepFields(activeTab);
+    const valid = await purchaseOrder.trigger(fields);
+
+    if (!valid) return;
+
+    setCompletedTabs((prev) => [...new Set([...prev, activeTab])]);
+    setActiveTab((prev) => Math.min(prev + 1, stepsConfig.length - 1));
+  }, [activeTab, purchaseOrder, stepsConfig.length]);
+
+  const handlePrev = useCallback(() => {
+    setActiveTab((prev) => Math.max(prev - 1, 0));
+  }, []);
+
+  const generatePatchOps = useCallback(
+    (formData) => {
+      const { dirtyFields } = formState;
+
+      return Object.keys(dirtyFields)
+        .filter((key) => key !== "invoiceAttachmentTypeId")
+        .map((key) => ({
+          operationType: 0,
+          path: `/${key}`,
+          op: "replace",
+          value: formData[key],
+        }));
+    },
+    [formState]
+  );
+
+  const { mutate: CreateInvoice, isPending } = useCreatePurchaseInvoice(() => {
+    reset();
+    onClose();
+  });
+
+  const { mutate: updatePurchase, isPending: isUpdating } =
+    useUpdatePurchaseInvoice(() => {
+      reset();
+      onClose();
+    });
+
+  const onSubmit = useCallback(
+    (formData) => {
+      if (activeTab !== 2) return;
+
+      if (purchaseId) {
+        const payload = generatePatchOps(formData);
+        updatePurchase({ purchaseId, payload });
+      } else {
+        CreateInvoice(formData);
+      }
+    },
+    [activeTab, purchaseId, generatePatchOps, updatePurchase, CreateInvoice]
+  );
+  return (
+    <div className="bs-stepper horizontically mt-2 b-secondry shadow-none border-0">
+      {/* --- Steps Header --- */}
+      <div className="bs-stepper-header text-start px-0 py-1">
+        {stepsConfig.map((step, index) => {
+          const isActive = activeTab === index;
+          const isCompleted = completedTabs.includes(index);
+
+          return (
+            <React.Fragment key={step.name}>
+              <div
+                className={`step text-truncate ${isActive ? "active" : ""} ${
+                  isCompleted ? "crossed" : ""
+                }`}
+              >
+                <button
+                  type="button"
+                  className="step-trigger"
+                  onClick={() => purchaseId && setActiveTab(index)}
+                >
+                  <span className="bs-stepper-circle">
+                    {isCompleted ? (
+                      <i className="bx bx-check"></i>
+                    ) : (
+                      <i className={step.icon}></i>
+                    )}
+                  </span>
+
+                  <span className="bs-stepper-label">
+                    <span className="bs-stepper-title">{step.name}</span>
+                    <span className="bs-stepper-subtitle">{step.subtitle}</span>
+                  </span>
+                </button>
+              </div>
+
+              {index < stepsConfig.length - 1 && (
+                <div className="line text-primary"></div>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+
+      {/* --- Form Content --- */}
+      <div className="bs-stepper-content py-2 px-3">
+        <AppFormProvider {...purchaseOrder}>
+          <form
+            onKeyDown={(e) =>
+              e.key === "Enter" && activeTab !== 2 && e.preventDefault()
+            }
+            onSubmit={purchaseOrder.handleSubmit(onSubmit)}
+          >
+            {stepsConfig[activeTab].component}
+
+            {/* Buttons */}
+            <div className="d-flex justify-content-between mt-4">
+              <button
+                type="button"
+                className="btn btn-sm btn-outline-secondary"
+                onClick={handlePrev}
+                disabled={activeTab === 0}
+              >
+                Previous
+              </button>
+
+              <div>
+                {activeTab < stepsConfig.length - 1 ? (
+                  <button
+                    type="button"
+                    className="btn btn-sm btn-primary"
+                    onClick={handleNext}
+                    disabled={isPending || isUpdating}
+                  >
+                    Next
+                  </button>
+                ) : (
+                  <button
+                    type="submit"
+                    className="btn btn-sm btn-primary"
+                    disabled={isPending || isUpdating}
+                  >
+                    {isPending || isUpdating ? "Please Wait" : "Submit"}
+                  </button>
+                )}
+              </div>
+            </div>
+          </form>
+        </AppFormProvider>
+      </div>
+    </div>
+  );
+};
+
+export default ManagePurchase;
--- a/src/components/purchase/PurchaseList.jsx
+++ b/src/components/purchase/PurchaseList.jsx
@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import { usePurchasesList } from "../../hooks/usePurchase";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+import Pagination from "../common/Pagination";
+import { PurchaseColumn } from "./Purchasetable";
+import { SpinnerLoader } from "../common/Loader";
+import { useDebounce } from "../../utils/appUtils";
+import { usePurchaseContext } from "../../pages/purchase/PurchasePage";
+
+const PurchaseList = ({ searchString }) => {
+  const { setViewPurchase, setManagePurchase, setChallan } =
+    usePurchaseContext();
+  const [currentPage, setCurrentPage] = useState(1);
+  const debounceSearch = useDebounce(searchString, 300);
+  const { data, isLoading } = usePurchasesList(
+    ITEMS_PER_PAGE,
+    currentPage,
+    true,
+    {},
+    debounceSearch
+  );
+
+  const paginate = (page) => {
+    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
+      setCurrentPage(page);
+    }
+  };
+
+  const visibleColumns = PurchaseColumn.filter((col) => !col.hidden);
+
+  return (
+    <div className="card mt-2 page-min-h px-sm-4">
+      <div className="table-responsive px-2">
+        <table className="datatables-users table border-top text-nowrap">
+          <thead>
+            <tr>
+              {visibleColumns.map((col) => (
+                <th key={col.key} colSpan={col.colSpan || 1}>
+                  <div className={col.className || ""}>{col.label}</div>
+                </th>
+              ))}
+              <th>Action</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            {/* LOADING */}
+            {isLoading && (
+              <tr>
+                <td  colSpan={visibleColumns.length + 1} className="border-0">
+                  <div className="py-6 py-12">
+                    <SpinnerLoader />
+                  </div>
+                </td>
+              </tr>
+            )}
+            {!isLoading && data?.data?.length === 0 && (
+              <tr>
+                <td
+                  colSpan={visibleColumns.length}
+                  className="text-center py-4"
+                  colSpan={4}
+                >
+                  No Data Found
+                </td>
+              </tr>
+            )}
+
+            {!isLoading &&
+              data?.data?.map((item, index) => (
+                <tr key={item?.id || index}>
+                  {visibleColumns.map((col) => (
+                    <td key={col.key} className={col.className || ""}>
+                      {col.render ? col.render(item) : item[col.key] || "NA"}
+                    </td>
+                  ))}
+                  <td >
+                    <div className="dropdown z-2">
+                      <button
+                        type="button"
+                        className="btn btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                      >
+                        <i
+                          className="bx bx-dots-vertical-rounded bx-sm text-muted"
+                          data-bs-toggle="tooltip"
+                          data-bs-offset="0,8"
+                          data-bs-placement="top"
+                          data-bs-custom-class="tooltip-dark"
+                          title="More Action"
+                        ></i>
+                      </button>
+                      <ul className="dropdown-menu dropdown-menu-end">
+                        <li>
+                          <a
+                            className="dropdown-item cursor-pointer"
+                            onClick={() =>
+                              setViewPurchase({
+                                isOpen: true,
+                                purchaseId: item.id,
+                              })
+                            }
+                          >
+                            <i className="bx bx-show me-2"></i>
+                            <span className="align-left">view</span>
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            className="dropdown-item cursor-pointer"
+                            onClick={() =>
+                              setManagePurchase({
+                                isOpen: true,
+                                purchaseId: item.id,
+                              })
+                            }
+                          >
+                            <i className="bx bx-edit me-2"></i>
+                            <span className="align-left">Edit</span>
+                          </a>
+                        </li>
+                        <li>
+                          <a
+                            className="dropdown-item cursor-pointer"
+                            onClick={() =>
+                              setChallan({
+                                isOpen: true,
+                                purchaseId: item.id,
+                              })
+                            }
+                          >
+                            <i className="bx bx-file bx-plus me-2"></i>
+
+                            <span className="align-left">Add Delivery Challan</span>
+                          </a>
+                        </li>
+                      </ul>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </div>
+
+      {data?.data?.length > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={data.totalPages}
+          onPageChange={paginate}
+        />
+      )}
+    </div>
+  );
+};
+
+export default PurchaseList;
--- a/src/components/purchase/PurchasePartyDetails.jsx
+++ b/src/components/purchase/PurchasePartyDetails.jsx
@ -0,0 +1,232 @@
+import React from "react";
+import {
+  AppFormController,
+  useAppFormContext,
+} from "../../hooks/appHooks/useAppForm";
+import Label from "../common/Label";
+import DatePicker from "../common/DatePicker";
+import {
+  SelectFieldSearch,
+  SelectProjectField,
+} from "../common/Forms/SelectFieldServerSide";
+import {
+  useGlobaleOrganizations,
+  useOrganization,
+  useOrganizationsList,
+} from "../../hooks/useOrganization";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+
+const PurchasePartyDetails = () => {
+  const {
+    register,
+    control,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useAppFormContext();
+
+  return (
+    <div className="row g-3 text-start">
+      {/* Title */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="title" required>
+          Title
+        </Label>
+
+        <input
+          id="title"
+          type="text"
+          className={`form-control form-control-xs ${
+            errors?.title ? "is-invalid" : ""
+          }`}
+          {...register("title")}
+        />
+
+        {errors?.title && (
+          <div className="danger-text">{errors.title.message}</div>
+        )}
+      </div>
+
+      {/* Project ID */}
+      <div className="col-12 col-md-6">
+        <SelectProjectField
+          className={`form-control form-control-xs ${
+            errors?.projectId ? "is-invalid" : ""
+          }`}
+          label="Project"
+          required
+          placeholder="Select Project"
+          value={watch("projectId")}
+          onChange={(val) =>
+            setValue("projectId", val, {
+              shouldDirty: true,
+              shouldValidate: true,
+            })
+          }
+          errors={errors}
+        />
+      </div>
+
+      <div className="col-12 col-md-6 my-0">
+        <AppFormController
+          name="organizationId"
+          control={control}
+          render={({ field }) => (
+            <SelectFieldSearch
+              {...field}
+              label="Organization"
+              placeholder="Select Organization"
+              required
+              valueKey="id"
+              labelKey="name"
+              useFetchHook={useGlobaleOrganizations}
+              hookParams={[ITEMS_PER_PAGE, 1]}
+              error={errors?.organizationId?.message}
+            />
+          )}
+        />
+      </div>
+
+      <div className="col-12 col-md-6 my-0">
+        <AppFormController
+          name="supplierId"
+          control={control}
+          render={({ field }) => (
+            <SelectFieldSearch
+              label="Supplier"
+              placeholder="Select Organization"
+              required
+              value={field.value}
+              onChange={field.onChange}
+              valueKey="id"
+              labelKey="name"
+              useFetchHook={useGlobaleOrganizations}
+              hookParams={[ITEMS_PER_PAGE, 1]}
+              errors={errors.supplierId}
+            />
+          )}
+        />
+      </div>
+
+      <div className="col-12 col-md-6 my-0">
+        <Label htmlFor="billingAddress">Billing Address</Label>
+
+        <textarea
+          id="billingAddress"
+          rows="2"
+          className={`form-control form-control-xs `}
+          {...register("billingAddress")}
+        />
+
+        {errors?.billingAddress && (
+          <div className="danger-text">{errors.billingAddress.message}</div>
+        )}
+      </div>
+
+      <div className="col-12 col-md-6 my-0 mb-1">
+        <Label htmlFor="shippingAddress">Shipping Address</Label>
+
+        <textarea
+          id="shippingAddress"
+          rows="2"
+          className={`form-control form-control-xs `}
+          {...register("shippingAddress")}
+        />
+
+        {errors?.shippingAddress && (
+          <div className="danger-text">{errors.shippingAddress.message}</div>
+        )}
+      </div>
+
+      {/* Purchase Order Number */}
+      <div className="col-12 col-md-6 ">
+        <Label htmlFor="purchaseOrderNumber" required>
+          Purchase Order Number
+        </Label>
+
+        <input
+          id="purchaseOrderNumber"
+          type="text"
+          className={`form-control form-control-xs `}
+          {...register("purchaseOrderNumber")}
+        />
+
+        {errors?.purchaseOrderNumber && (
+          <div className="danger-text">
+            {errors.purchaseOrderNumber.message}
+          </div>
+        )}
+      </div>
+
+      {/* Purchase Order Date */}
+      <div className="col-12 col-md-6 mb-1">
+        <Label htmlFor="purchaseOrderDate" required>
+          Purchase Order Date
+        </Label>
+
+        <DatePicker
+          control={control}
+          name="purchaseOrderDate"
+          size="xs"
+          className={` w-full  ${
+            errors?.purchaseOrderDate ? "is-invalid" : ""
+          }`}
+        />
+
+        {errors?.purchaseOrderDate && (
+          <div className="danger-text">{errors.purchaseOrderDate.message}</div>
+        )}
+      </div>
+
+      {/* Proforma Invoice */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="proformaInvoiceNumber">Proforma Invoice Number</Label>
+        <input
+          id="proformaInvoiceNumber"
+          type="text"
+          className={`form-control `}
+          {...register("proformaInvoiceNumber")}
+        />
+
+        {errors?.proformaInvoiceNumber && (
+          <div className="danger-text">
+            {errors.proformaInvoiceNumber.message}
+          </div>
+        )}
+      </div>
+      <div className="col-12 col-md-6 mb-1">
+        <Label htmlFor="proformaInvoiceAmountt">Proforma Amount</Label>
+        <input
+          id="proformaInvoiceAmount"
+          type="text"
+          className={`form-control `}
+          {...register("proformaInvoiceAmount")}
+        />
+
+        {errors?.proformaInvoiceAmountt && (
+          <div className="danger-text">
+            {errors.proformaInvoiceAmount.message}
+          </div>
+        )}
+      </div>
+      <div className="col-12 col-md-6 mb-2">
+        <Label htmlFor="proformaInvoiceDate">Proforma Date</Label>
+
+        <DatePicker
+          control={control}
+          name="proformaInvoiceDate"
+          className="w-full"
+          size="xs"
+        />
+
+        {errors?.proformaInvoiceDate && (
+          <div className="danger-text">
+            {errors.proformaInvoiceDate.message}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PurchasePartyDetails;
--- a/src/components/purchase/PurchasePaymentDetails.jsx
+++ b/src/components/purchase/PurchasePaymentDetails.jsx
@ -0,0 +1,308 @@
+import React, { useEffect } from "react";
+import Label from "../common/Label";
+import {
+  AppFormController,
+  useAppFormContext,
+} from "../../hooks/appHooks/useAppForm";
+import DatePicker from "../common/DatePicker";
+import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
+import Filelist from "../Expenses/Filelist";
+import SelectField from "../common/Forms/SelectField";
+import { useWatch } from "react-hook-form";
+import WarningBlock from "../InfoBlock/WarningBlock";
+import { FILE_UPLOAD_INFO } from "../../utils/staticContent";
+
+const PurchasePaymentDetails = ({ purchaseId = null }) => {
+  const { data, isLoading, error, isError } = useInvoiceAttachmentTypes();
+  const { data: InvoiceDocTypes, isLoading: invoiceDocLoading } =
+    useInvoiceAttachmentTypes();
+  const {
+    register,
+    watch,
+    setValue,
+    control,
+    formState: { errors },
+  } = useAppFormContext();
+
+  const baseAmount = watch("baseAmount");
+  const taxAmount = watch("taxAmount");
+
+  useEffect(() => {
+    const base = parseFloat(baseAmount) || 0;
+    const tax = parseFloat(taxAmount) || 0;
+
+    if (base || tax) {
+      setValue("totalAmount", (base + tax).toFixed(2));
+    }
+  }, [baseAmount, taxAmount, setValue]);
+  const invoiceAttachmentType = watch("invoiceAttachmentTypeId");
+  const files = watch("attachments");
+  const toBase64 = (file) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result.split(",")[1]);
+      reader.onerror = (error) => reject(error);
+    });
+  const onFileChange = async (e) => {
+    const newFiles = Array.from(e.target.files);
+    if (newFiles.length === 0) return;
+
+    const existingFiles = watch("attachments") || [];
+
+    const parsedFiles = await Promise.all(
+      newFiles.map(async (file) => {
+        const base64Data = await toBase64(file);
+        return {
+          fileName: file.name,
+          base64Data,
+          contentType: file.type,
+          fileSize: file.size,
+          description: "",
+          isActive: true,
+          invoiceAttachmentTypeId: invoiceAttachmentType,
+          isNew: true, // <-- temp
+          tempId: crypto.randomUUID(), // temp - id
+        };
+      })
+    );
+
+    const combinedFiles = [
+      ...existingFiles,
+      ...parsedFiles.filter(
+        (newFile) =>
+          !existingFiles.some(
+            (f) =>
+              f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
+          )
+      ),
+    ];
+
+    setValue("attachments", combinedFiles, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  };
+
+  const removeFile = (index) => {
+    const updated = files.flatMap((file, i) => {
+      // NEW FILE → remove completely
+      if (file.isNew && file.tempId === index) {
+        return []; // remove from array
+      }
+
+      // EXISTING FILE → mark inactive
+      if (!file.isNew && file.documentId === index) {
+        return [{ ...file, isActive: false }];
+      }
+
+      return [file];
+    });
+
+    setValue("attachments", updated, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+  };
+
+  return (
+    <div className="row g-1 text-start">
+      <div className="col-12 col-md-4">
+        <Label htmlFor="baseAmount" required>
+          Base Amount
+        </Label>
+
+        <input
+          id="baseAmount"
+          type="number"
+          className="form-control form-control-xs"
+          {...register("baseAmount", { valueAsNumber: true })}
+        />
+
+        {errors?.baseAmount && (
+          <div className="small danger-text mt-1">
+            {errors.baseAmount.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-12 col-md-4">
+        <Label htmlFor="taxAmount" required>
+          Tax Amount
+        </Label>
+
+        <input
+          id="taxAmount"
+          type="number"
+          className="form-control form-control-xs"
+          {...register("taxAmount", { valueAsNumber: true })}
+        />
+
+        {errors?.taxAmount && (
+          <div className="small danger-text mt-1">
+            {errors.taxAmount.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-12 col-md-4">
+        <Label htmlFor="totalAmount" required>
+          Total Amount
+        </Label>
+
+        <input
+          id="totalAmount"
+          type="number"
+          className="form-control form-control-xs"
+          {...register("totalAmount", { valueAsNumber: true })}
+          readOnly
+        />
+
+        {errors?.totalAmount && (
+          <div className="small danger-text mt-1">
+            {errors.totalAmount.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-12 col-md-6">
+        <Label htmlFor="transportCharges">Transport Charges</Label>
+
+        <input
+          id="transportCharges"
+          type="number"
+          className="form-control form-control-xs"
+          {...register("transportCharges", { valueAsNumber: true })}
+        />
+
+        {errors?.transportCharges && (
+          <div className="small danger-text mt-1">
+            {errors.transportCharges.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-12 col-md-6">
+        <Label htmlFor="paymentDueDate">Payment Due Date</Label>
+
+        <DatePicker
+          name={"paymentDueDate"}
+          control={control}
+          className="w-full"
+          size="xs"
+        />
+
+        {errors?.paymentDueDate && (
+          <div className="small danger-text mt-1">
+            {errors.paymentDueDate.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-12 mb-2">
+        <Label htmlFor="description" required>
+          Description
+        </Label>
+
+        <textarea
+          id="description"
+          rows="3"
+          className="form-control form-control-xs"
+          {...register("description")}
+        />
+
+        {errors?.description && (
+          <div className="small danger-text mt-1">
+            {errors.description.message}
+          </div>
+        )}
+      </div>
+      <div className="col-12">
+        <AppFormController
+          name="invoiceAttachmentTypeId"
+          control={control}
+          render={({ field }) => (
+            <SelectField
+              label="Select Document Type"
+              options={InvoiceDocTypes ?? []}
+              placeholder="Choose  Type"
+              labelKeyKey="name"
+              valueKeyKey="id"
+              value={field.value}
+              onChange={field.onChange}
+              isLoading={invoiceDocLoading}
+              className="m-0"
+            />
+          )}
+        />
+
+        {errors?.invoiceAttachmentTypeId && (
+          <small className="danger-text">
+            {errors.invoiceAttachmentTypeId.message}
+          </small>
+        )}
+      </div>
+
+      <div className="text-start">
+        <div className="col-md-12">
+          <Label className="form-label" required>
+            Upload Bill{" "}
+          </Label>
+
+          <div
+            className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
+            style={{ cursor: "pointer" }}
+            onClick={() => document.getElementById("attachments").click()}
+          >
+            <i className="bx bx-cloud-upload d-block bx-lg"> </i>
+            <span className="text-muted d-block">
+              Click to select or click here to browse
+            </span>
+            <small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
+
+            <input
+              type="file"
+              id="attachments"
+              accept=".pdf,.jpg,.jpeg,.png"
+              multiple
+              disabled={!invoiceAttachmentType}
+              style={{ display: "none" }}
+              {...register("attachments")}
+              onChange={(e) => {
+                onFileChange(e);
+                e.target.value = "";
+              }}
+            />
+          </div>
+          {errors.attachments && (
+            <small className="danger-text">{errors.attachments.message}</small>
+          )}
+          {files.length > 0 && (
+            <Filelist
+              files={files}
+              removeFile={removeFile}
+              expenseToEdit={purchaseId}
+            />
+          )}
+
+          {Array.isArray(errors.attachments) &&
+            errors.attachments.map((fileError, index) => (
+              <div key={index} className="danger-text small mt-1">
+                {
+                  (fileError?.fileSize?.message ||
+                    fileError?.contentType?.message ||
+                    fileError?.base64Data?.message,
+                  fileError?.documentId?.message)
+                }
+              </div>
+            ))}
+          {!invoiceAttachmentType && (
+            <WarningBlock content={FILE_UPLOAD_INFO} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PurchasePaymentDetails;
--- a/src/components/purchase/PurchaseSchema.jsx
+++ b/src/components/purchase/PurchaseSchema.jsx
@ -0,0 +1,188 @@
+import { z } from "zod";
+import { normalizeAllowedContentTypes } from "../../utils/appUtils";
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ALLOWED_TYPES = [
+  "application/pdf",
+  "image/png",
+  "image/jpg",
+  "image/jpeg",
+];
+
+export const AttachmentSchema = z.object({
+  invoiceAttachmentTypeId: z.string().nullable(),
+  fileName: z.string().min(1, { message: "Filename is required" }),
+  base64Data: z.string().nullable(),
+  contentType: z
+    .string()
+    .refine((val) => ALLOWED_TYPES.includes(val), {
+      message: "Only PDF, PNG, JPG, or JPEG files are allowed",
+    }),
+  fileSize: z.number().max(MAX_FILE_SIZE, {
+    message: "File size must be less than or equal to 5MB",
+  }),
+  description: z.string().optional().default(""),
+  isActive: z.boolean().default(true),
+});
+
+
+export const PurchaseSchema = z.object({
+  title: z.string().min(1, { message: "Title is required" }),
+  projectId: z.string().min(1, { message: "Project is required" }),
+  organizationId: z.string().min(1, { message: "Organization is required" }),
+  billingAddress: z.string().min(1, { message: "Address is required" }),
+  shippingAddress: z.string().min(1, { message: "Address is required" }),
+
+  purchaseOrderNumber: z.string().nullable(),
+  purchaseOrderDate: z.coerce.date().nullable(),
+
+  supplierId: z.string().min(1, { message: "Supplier is required" }),
+
+  proformaInvoiceNumber: z.string().nullable(),
+  proformaInvoiceDate: z.coerce.date().nullable(),
+  proformaInvoiceAmount: z.coerce.number().optional(),
+
+  invoiceNumber: z.string().nullable(),
+  invoiceDate: z.coerce.date().nullable(),
+  eWayBillNumber: z.string().nullable(),
+  eWayBillDate: z.coerce.date().nullable(),
+  invoiceReferenceNumber: z.string().nullable(),
+  acknowledgmentDate: z.coerce.date().nullable(),
+  acknowledgmentNumber: z.string().nullable(),
+
+  baseAmount: z.number().min(1, { message: "Base amount is required" }),
+  taxAmount: z.number().min(1, { message: "Tax amount is required" }),
+  totalAmount: z.number().min(1, { message: "Total amount is required" }),
+  paymentDueDate: z.coerce.date().nullable(),
+  transportCharges: z.number().nullable(),
+  description: z.string().min(1, { message: "Description is required" }),
+  invoiceAttachmentTypeId:z.string().nullable(),
+  attachments: z
+    .array(AttachmentSchema)
+  
+
+});
+
+
+export const defaultPurchaseValue = {
+  title: "",
+  projectId: "",
+  organizationId: "",
+  billingAddress: "",
+  shippingAddress: "",
+  purchaseOrderNumber: null,
+  purchaseOrderDate: null,
+
+  supplierId: "",
+
+  proformaInvoiceNumber: null,
+  proformaInvoiceDate: null,
+  proformaInvoiceAmount: 0,
+
+  invoiceNumber: null,
+  invoiceDate: null,
+  eWayBillNumber: null,
+  eWayBillDate: null,
+  invoiceReferenceNumber: null,
+  acknowledgmentNumber: null,
+  acknowledgmentDate: null,
+
+  baseAmount: 0,
+  taxAmount: 0,
+  totalAmount: 0,
+  paymentDueDate: null,
+  transportCharges: null,
+  description: "",
+  invoiceAttachmentTypeId:null,
+  attachments: [],
+};
+
+export const getStepFields = (stepIndex) => {
+  const stepFieldMap = {
+    0: [
+      "title",
+      "projectId",
+      "organizationId",
+      "supplierId",
+      "billingAddress",
+      "shippingAddress",
+      "purchaseOrderNumber",
+      "purchaseOrderDate",
+      "proformaInvoiceNumber",
+      "proformaInvoiceDate",
+      "proformaInvoiceAmount",
+    ],
+    1: [
+      "invoiceNumber",
+      "invoiceDate",
+      "eWayBillNumber",
+      "eWayBillDate",
+      "invoiceReferenceNumber",
+      "acknowledgmentNumber",
+      "acknowledgmentDate",
+    ],
+    2: [
+      "baseAmount",
+      "taxAmount",
+      "totalAmount",
+      "transportCharges",
+      "paymentDueDate",
+      "invoiceAttachmentTypeId",
+      "description",
+      "attachments"
+    ],
+  };
+
+  return stepFieldMap[stepIndex] || [];
+};
+
+export const SingleAttachmentSchema = z.object({
+  fileName: z.string().min(1, { message: "File name is required" }),
+  base64Data: z.string().min(1, { message: "File data is required" }),
+  invoiceAttachmentTypeId: z.string().nullable(),
+
+  contentType: z
+    .string()
+    .min(1, { message: "MIME type is required" })
+    .refine(
+      (val) =>
+        ["application/pdf", "image/jpeg", "image/jpg", "image/png"].includes(
+          val
+        ),
+      {
+        message: "File type must be PDF, JPG, JPEG or PNG",
+      }
+    ),
+
+  fileSize: z
+    .number()
+    .int()
+    .nonnegative("fileSize must be ≥ 0")
+    .max(5 * 1024 * 1024, "File size must be ≤ 5MB"),
+
+  description: z.string().optional().default(""),
+  isActive: z.boolean(),
+});
+
+export const DeliveryChallanSchema = z.object({
+  deliveryChallanNumber: z
+    .string()
+    .min(1, { message: "Challan Number required" }),
+  invoiceAttachmentTypeId: z.string().nullable(),
+  deliveryChallanDate: z.string().min(1, { message: "Deliver date required" }),
+  description: z.string().min(1, { message: "Description required" }),
+  attachment: z.any().refine(
+    (val) => val && typeof val === "object" && !!val.base64Data,
+    {
+      message: "Please upload document",
+    }
+  ),
+});
+
+export const DeliveryChallanDefaultValue = {
+  deliveryChallanNumber: "",
+  deliveryChallanDate: "",
+  description: "",
+  attachment: null,
+  invoiceAttachmentTypeId: null,
+};
--- a/src/components/purchase/PurchaseTransportDetails.jsx
+++ b/src/components/purchase/PurchaseTransportDetails.jsx
@ -0,0 +1,131 @@
+import React from "react";
+import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
+import DatePicker from "../common/DatePicker";
+import Label from "../common/Label";
+
+const PurchaseTransportDetails = () => {
+  const {
+    register,control,
+    formState: { errors },
+  } = useAppFormContext();
+
+  return (
+    <div className="row g-3 text-start">
+      {/* Invoice Number */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="invoiceNumber" required>
+          Invoice Number
+        </Label>
+
+        <input
+          id="invoiceNumber"
+          type="text"
+          className="form-control form-control-xs"
+          {...register("invoiceNumber")}
+        />
+
+        {errors?.invoiceNumber && (
+          <div className="small text-danger mt-1">
+            {errors.invoiceNumber.message}
+          </div>
+        )}
+      </div>
+
+      {/* Invoice Date */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="invoiceDate">Invoice Date</Label>
+
+     
+          <DatePicker control={control} name="invoiceDate" className="w-full" size="xs"/>
+
+        {errors?.invoiceDate && (
+          <div className="small text-danger mt-1">
+            {errors.invoiceDate.message}
+          </div>
+        )}
+      </div>
+
+      {/* E-Way Bill Number */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="eWayBillNumber">E-Way Bill Number</Label>
+
+        <input
+          id="eWayBillNumber"
+          type="text"
+          className="form-control form-control-xs"
+          {...register("eWayBillNumber")}
+        />
+
+        {errors?.eWayBillNumber && (
+          <div className="small text-danger mt-1">
+            {errors.eWayBillNumber.message}
+          </div>
+        )}
+      </div>
+
+      {/* E-Way Bill Date */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="eWayBillDate">E-Way Bill Date</Label>
+
+    
+             <DatePicker control={control} name="eWayBillDate" className="w-full"/>
+
+        {errors?.eWayBillDate && (
+          <div className="small text-danger mt-1">
+            {errors.eWayBillDate.message}
+          </div>
+        )}
+      </div>
+
+      {/* Invoice Reference Number */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="invoiceReferenceNumber">Invoice Reference Number</Label>
+
+        <input
+          id="invoiceReferenceNumber"
+          type="text"
+          className="form-control form-control-xs"
+          {...register("invoiceReferenceNumber")}
+        />
+
+        {errors?.invoiceReferenceNumber && (
+          <div className="small text-danger mt-1">
+            {errors.invoiceReferenceNumber.message}
+          </div>
+        )}
+      </div>
+
+      {/* Acknowledgment Number */}
+      <div className="col-12 col-md-6">
+        <Label htmlFor="acknowledgmentNumber">Acknowledgment Number</Label>
+
+        <input
+          id="acknowledgmentNumber"
+          type="text"
+          className="form-control form-control-xs"
+          {...register("acknowledgmentNumber")}
+        />
+
+        {errors?.acknowledgmentNumber && (
+          <div className="small text-danger mt-1">
+            {errors.acknowledgmentNumber.message}
+          </div>
+        )}
+      </div>
+
+      <div className="col-12 col-md-6 mb-2">
+        <Label htmlFor="acknowledgmentDate">Acknowledgment Date</Label>
+
+        <DatePicker control={control} name="acknowledgmentDate" className="w-full" size="xs"/>
+
+        {errors?.acknowledgmentDate && (
+          <div className="small text-danger mt-1">
+            {errors.acknowledgmentDate.message}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PurchaseTransportDetails;
--- a/src/components/purchase/Purchasetable.jsx
+++ b/src/components/purchase/Purchasetable.jsx
@ -0,0 +1,60 @@
+import { formatFigure, getColorNameFromHex } from "../../utils/appUtils";
+
+export const PurchaseColumn = [
+  {
+    key: "purchaseInvoiceUId",
+    label: "Invoice Id",
+
+    className: "text-start",
+    render: (item) => (
+      <div className="d-flex justify-content-start align-items-center p-1">
+        <span className="fw-normal">{item?.purchaseInvoiceUId || "NA"}</span>
+      </div>
+    ),
+  },
+  {
+    key: "title",
+    label: "Title",
+
+    className: "text-start",
+    render: (item) => (
+      <div className="d-flex justify-content-start align-items-center">
+        <span className="fw-normal">{item?.title || "NA"}</span>
+      </div>
+    ),
+  },
+  {
+    key: "project",
+    label: "Project",
+    className: "text-start ",
+    render: (item) => <span>{item?.project?.name || "NA"}</span>,
+  },
+  {
+    key: "supplier",
+    label: "Supplier",
+    className: "text-start ",
+    render: (item) => <span>{item?.supplier?.name || "NA"}</span>,
+  },
+  {
+    key: "status",
+    label: "Status",
+    className: "text-start",
+    render: (item) => {
+      let color = getColorNameFromHex(item.status?.color);
+      return (
+        <span className={`badge rounded-pill bg-label-${color}`}>
+          <span className={`badge badge-dot bg-${color} me-1`}></span>
+          {item?.status.displayName || "NA"}
+        </span>
+      );
+    },
+  },
+  {
+    key: "totalAmount",
+    label: "Total Amount",
+    className: "text-end",
+    render: (item) => (
+      <span>{formatFigure(item?.totalAmount, { type: "currency" })}</span>
+    ),
+  },
+];
--- a/src/components/purchase/ViewPurchase.jsx
+++ b/src/components/purchase/ViewPurchase.jsx
@ -0,0 +1,243 @@
+import React from "react";
+import { usePurchase } from "../../hooks/usePurchase";
+import { SpinnerLoader } from "../common/Loader";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import { getColorNameFromHex } from "../../utils/appUtils";
+
+const ViewPurchase = ({ purchaseId }) => {
+  const { data, isLoading, isError, error } = usePurchase(purchaseId);
+
+  if (isLoading) return <SpinnerLoader />;
+  if (isError) return <Error error={error} />;
+
+  return (
+    <div className="row g-3 px-3">
+      <div className="col-12 mb-1">
+        <h5 className="fw-semibold m-0">Purchase Invoice Details</h5>
+      </div>
+
+      <div className="col-12 text-start">
+        <div className="row">
+          <div className="fs-6 col-md-10 d-flex align-items-center fw-semibold">
+            <p className="mb-0 me-1">Purchase No:</p>
+            <p className="mb-0">{data?.purchaseInvoiceUId}</p>
+          </div>
+
+          <div className="col-md-2 d-flex align-items-center">
+            <p className="fw-light me-2 mb-0"></p>
+            <span className={`badge rounded-pill bg-label-${getColorNameFromHex(data?.status?.color)}`}>
+              {data?.status?.displayName || "NA"}
+            </span>
+          </div>
+
+        </div>
+      </div>
+
+      <div className="col-12 text-start border-bottom">
+        <div className=" ">
+          <p className="fw-semibold mb-3">Purchase Details</p>
+          <div className="row mb-3">
+            <div className="col-md-6">
+              <p className="text-secondary mb-0"><i class='bx bx-captions bx-sm me-1'></i>Title:</p>
+              <p className="fw-light mb-1">{data?.title}</p>
+            </div>
+            <div className="col-md-6">
+              <p className="text-secondary mb-0"><i class='bx bx-comment-detail bx-sm me-1'></i>Description:</p>
+              <p className="fw-light mb-1 ">{data?.description}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="col-12 border-bottom">
+        <div className="text-start h-auto fw-semibold">
+          <p className="text-muted mb-2">Project</p>
+        </div>
+        <div className="row text-start h-auto">
+          {/* Project Name */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-captions bx-sm me-1'></i>Project Name:</p>
+            <p className="fw-light mb-0">{data?.project?.name}</p>
+          </div>
+
+          {/* Organization Name */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bxs-component bx-sm me-1'></i>Organization:</p>
+            <p className="fw-light mb-0">{data?.organization?.name}</p>
+          </div>
+
+          {/* Email */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-envelope me-1 bx-sm'></i>Email:</p>
+            <p className="fw-light mb-0">{data?.organization?.email}</p>
+          </div>
+
+          {/* Contact Number */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
+            <p className="fw-light mb-0">{data?.organization?.contactNumber}</p>
+          </div>
+
+          {/* Address */}
+          <div className="col-12 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
+            <p className="fw-light mb-0">{data?.organization?.address}</p>
+          </div>
+        </div>
+      </div>
+
+
+      <div className="col-12 border-bottom">
+        <div className="row text-start h-auto">
+          <p className="text-muted mb-2 fw-semibold">Supplier</p>
+
+          {/* Supplier Name */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-captions bx-sm me-1'></i>Name:</p>
+            <p className="fw-light mb-0">{data?.supplier?.name}</p>
+          </div>
+
+          {/* Contact Person */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-support bx-sm me-1'></i>Contact Person:</p>
+            <p className="fw-light mb-0">{data?.supplier?.contactPerson}</p>
+          </div>
+
+          {/* Email */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-envelope me-1 bx-sm'></i>Email:</p>
+            <p className="fw-light mb-0">{data?.supplier?.email}</p>
+          </div>
+
+          {/* Contact Number */}
+          <div className="col-12 col-md-4 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
+            <p className="fw-light mb-0">{data?.supplier?.contactNumber}</p>
+          </div>
+
+          {/* Address */}
+          <div className="col-12 mb-3">
+            <p className="text-secondary mb-0"><i class='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
+            <p className="fw-light mb-0">{data?.supplier?.address}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="col-md-6">
+        <div className="text-start h-auto">
+          <p className="text-muted mb-2 fw-semibold">Invoice Details</p>
+
+          <div className="row g-3">
+            {/* Left column */}
+            <div className="col-12 col-sm-6">
+              <div>
+                <p className="text-secondary mb-0">Invoice No:</p>
+                <p className="fw-light mb-1">{data?.invoiceNumber}</p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">Proforma No:</p>
+                <p className="fw-light mb-1">{data?.proformaInvoiceNumber}</p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">E-Way Bill:</p>
+                <p className="fw-light mb-1">{data?.eWayBillNumber}</p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">PO No:</p>
+                <p className="fw-light mb-1">{data?.purchaseOrderNumber}</p>
+              </div>
+            </div>
+
+            {/* Right column */}
+            <div className="col-12 col-sm-6">
+              <div>
+                <p className="text-secondary mb-0 ">Invoice Date:</p>
+                <p className="fw-light mb-1">
+                  {formatUTCToLocalTime(data?.invoiceDate)}
+                </p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">Proforma Date:</p>
+                <p className="fw-light mb-1">
+                  {formatUTCToLocalTime(data?.proformaInvoiceDate)}
+                </p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">E-Way Date:</p>
+                <p className="fw-light mb-1">
+                  {formatUTCToLocalTime(data?.eWayBillDate)}
+                </p>
+              </div>
+
+              <div>
+                <p className="text-secondary mb-0">PO Date:</p>
+                <p className="fw-light">
+                  {formatUTCToLocalTime(data?.purchaseOrderDate)}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="col-md-6">
+        <div className="text-start h-auto">
+          <p className="text-muted mb-2 fw-semibold">Amount Summary</p>
+
+          <div className="d-flex justify-content-between">
+            <p className="text-secondary mb-0">Base Amount</p>
+            <p className="fw-light mb-1">₹ {data?.baseAmount}</p>
+          </div>
+
+          <div className="d-flex justify-content-between">
+            <p className="text-secondary mb-0">Tax</p>
+            <p className="fw-light mb-1">₹ {data?.taxAmount}</p>
+          </div>
+
+          <div className="d-flex justify-content-between">
+            <p className="text-secondary mb-0">Transport</p>
+            <p className="fw-light mb-1">₹ {data?.transportCharges}</p>
+          </div>
+
+          <hr className="my-2" />
+
+          <div className="d-flex justify-content-between fs-6 fs-medium">
+            <span>Total</span>
+            <span>₹ {data?.totalAmount}</span>
+          </div>
+
+          <div className="mt-2">
+            <p className="text-secondary mb-0">Due Date:</p>
+            <p className="fw-light mb-0">
+              {formatUTCToLocalTime(data?.paymentDueDate)}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div className="row mt-3 text-start">
+        <div className="col-md-6 mb-3 ms-n2">
+          <div className="h-100">
+            <p className="text-secondary mb-0">Billing Address</p>
+
+            <p className="mb-0 fw-light">{data?.billingAddress || "-"}</p>
+          </div>
+        </div>
+
+        <div className="col-md-6 mb-3 text-start">
+          <div className="h-100">
+            <p className="text-secondary mb-0">Shipping Address</p>
+            <p className="mb-0 fw-light">{data?.shippingAddress || "-"}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ViewPurchase;
--- a/src/hooks/appHooks/useAppForm.js
+++ b/src/hooks/appHooks/useAppForm.js
@ -1,6 +1,6 @@
-import { useForm, Controller,FormProvider } from "react-hook-form";
+import { useForm, Controller, FormProvider, useFormContext } from "react-hook-form";

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

+export const useInvoiceAttachmentTypes = () => {
+  return useQuery({
+    queryKey: ["invoiceAttachmentType"],
+    queryFn: async () => {
+      const resp = await MasterRespository.getInvoiceAttachmentTypes();
+      return resp.data;
+    },
+  });
+};

 export const useRecurringStatus = () => {
  return useQuery({
    queryKey: ["RecurringStatus"],
    queryFn: async () => {
      const resp = await MasterRespository.getRecurringStatus();
-      return resp.data
-    }
-  })
-}
+      return resp.data;
+    },
+  });
+};
 export const useCurrencies = () => {
  return useQuery({
    queryKey: ["currencies"],
@ -33,8 +42,8 @@ export const useCurrencies = () => {
 export const usePaymentAjustmentHead = (isActive) => {
  return useQuery({
    queryKey: ["paymentType", isActive],
-    queryFn: async () =>  await MasterRespository.getPaymentAdjustmentHead(isActive),
-   
+    queryFn: async () =>
+      await MasterRespository.getPaymentAdjustmentHead(isActive),
  });
 };

@ -303,9 +312,9 @@ export const useJobStatus=(statusId,projectId)=>{
      const resp = await MasterRespository.getJobStatus(statusId, projectId);
      return resp.data;
    },
-    enabled:!!statusId && !!projectId
-  })
-}
+    enabled: !!statusId && !!projectId,
+  });
+};

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

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

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

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

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

-
-
-
-
-
 //#region Contact Category

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

 //#endregion

-
-
-
-
 //#region Contact Tag

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

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

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

 //#endregion

-
-
-
-
-
 //#region  Payment Mode

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

 //#endregion

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

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

 //#endregion

-
-
-
-
 //#region  Activity Grouph

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

 //#endregion

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

 //#endregion

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

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

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

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

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

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

 //#endregion

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

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

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

+export const useGlobaleOrganizations = (pageSize, pageNumber,id, searchString) => {
+  return useQuery({
+    queryKey: ["global_organization",pageSize, pageNumber,id, searchString],
+    queryFn: async () => {
+      const resp = await OrganizationRepository.getGlobalOrganization(
+        pageSize,
+        pageNumber,id,
+        searchString
+      );
+      return resp.data;
+    },
+  });
+};
+
 export const useOrganization = (id) => {
  return useQuery({
    queryKey: ["organization", id],
    queryFn: async () => {
      const resp = await await OrganizationRepository.getOrganizaion(id);
-    return resp.data
+      return resp.data;
    },
-  enabled:!!id
-})
-}
+    enabled: !!id,
+  });
+};
 export const useOrganizationBySPRID = (sprid) => {
  return useQuery({
    queryKey: ["organization by", sprid],
@ -185,7 +201,9 @@ export const useUpdateOrganization = (onSuccessCallback) => {
      await OrganizationRepository.updateOrganizaion(orgId, payload),
    onSuccess: (_, variables) => {
      useClient.invalidateQueries({ queryKey: ["organizationList"] });
-      useClient.invalidateQueries({ queryKey: ["projectAssignedOrganiztionsName"] });
+      useClient.invalidateQueries({
+        queryKey: ["projectAssignedOrganiztionsName"],
+      });

      showToast("Organization Updated successfully", "success");
      if (onSuccessCallback) onSuccessCallback();
--- a/src/hooks/usePurchase.jsx
+++ b/src/hooks/usePurchase.jsx
@ -0,0 +1,122 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { PurchaseRepository } from "../repositories/PurchaseRepository";
+import showToast from "../services/toastService";
+
+export const usePurchasesList = (
+  pageSize,
+  pageNumber,
+  isActive,
+  filter,
+  searchString
+) => {
+  return useQuery({
+    queryKey: [
+      "purchase_list",
+      pageSize,
+      pageNumber,
+      isActive,
+      filter,
+      searchString,
+    ],
+    queryFn: async () => {
+      const resp = await PurchaseRepository.GetPurchaseList(
+        pageSize,
+        pageNumber,
+        isActive,
+        filter,
+        searchString
+      );
+      return resp.data;
+    },
+  });
+};
+
+export const useDeliverChallane = (purchaseInvoiceId) => {
+  return useQuery({
+    queryKey: ["deliverliy_challane", purchaseInvoiceId],
+    queryFn: async () => {
+      const resp = await PurchaseRepository.GetDeliveryChallan(
+        purchaseInvoiceId
+      );
+      return resp.data;
+    },
+    enabled: !!purchaseInvoiceId,
+  });
+};
+
+export const usePurchase = (id) => {
+  return useQuery({
+    queryKey: ["purchase", id],
+    queryFn: async () => {
+      const resp = await PurchaseRepository.GetPurchase(id);
+      return resp.data;
+    },
+    enabled: !!id,
+  });
+};
+
+export const useCreatePurchaseInvoice = (onSuccessCallback) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (payload) =>
+      await PurchaseRepository.CreatePurchase(payload),
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
+      showToast("Purchase Invoice Created successfully", "success");
+      if (onSuccessCallback) onSuccessCallback();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to create invoice",
+        "error"
+      );
+    },
+  });
+};
+
+export const useUpdatePurchaseInvoice = (onSuccessCallback) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ purchaseId, payload }) =>
+      PurchaseRepository.UpdatePurchase(purchaseId, payload),
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["purchase_list"] });
+      queryClient.invalidateQueries({ queryKey: ["purchase"] });
+      showToast("Purchase Invoice Updated successfully", "success");
+      if (onSuccessCallback) onSuccessCallback();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to create invoice",
+        "error"
+      );
+    },
+  });
+};
+export const useAddDeliverChallan = (onSuccessCallback) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (payload) =>
+      PurchaseRepository.addDelievryChallan(payload),
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["deliverliy_challane"] });
+      showToast("Challan added successfully", "success");
+      if (onSuccessCallback) onSuccessCallback();
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to create invoice",
+        "error"
+      );
+    },
+  });
+};
--- a/src/pages/Expense/ExpensePage.jsx
+++ b/src/pages/Expense/ExpensePage.jsx
@ -62,7 +62,7 @@ const ExpensePage = () => {

  const [ViewDocument, setDocumentView] = useState({
    IsOpen: false,
-    Image: null,
+    Images: null,
  });

  const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE);
@ -208,10 +208,10 @@ const ExpensePage = () => {
          <GlobalModel
            isOpen
            size="md"
-            key={ViewDocument.Image ?? "doc"}
-            closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
+            key={ViewDocument.Images ?? "doc"}
+            closeModal={() => setDocumentView({ IsOpen: false, Images: null })}
          >
-            <PreviewDocument imageUrl={ViewDocument.Image} />
+            <PreviewDocument files={ViewDocument.Images} />
          </GlobalModel>
        )}
      </div>
--- a/src/pages/project/ProjectDetails.jsx
+++ b/src/pages/project/ProjectDetails.jsx
@ -24,6 +24,9 @@ import { useProjectAccess } from "../../hooks/useProjectAccess";

 import "./ProjectDetails.css";
 import ProjectOrganizations from "../../components/Project/ProjectOrganizations";
+import ProjectStatistics from "../../components/Project/ProjectStatistics";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { REGULARIZE_ATTENDANCE, SELF_ATTENDANCE, TEAM_ATTENDANCE } from "../../utils/constants";

 const ProjectDetails = () => {
  const projectId = useSelectedProject();
@ -34,6 +37,10 @@ const ProjectDetails = () => {
    useProjectDetails(projectId);

  const { canView, loading: permsLoading } = useProjectAccess(projectId);
+  const canRegularize = useHasUserPermission(REGULARIZE_ATTENDANCE);
+  const canTeamAttendance = useHasUserPermission(TEAM_ATTENDANCE);
+  const canSelfAttendance = useHasUserPermission(SELF_ATTENDANCE);
+

  useEffect(() => {
    if (!projectId && projectNames.length > 0) {
@ -82,13 +89,16 @@ const ProjectDetails = () => {
          <div className="row">
            <div className="col-lg-4 col-md-5 mt-2">
              <AboutProject />
-              <ProjectOverview project={projectId} />
+              <div className="card"><ProjectStatistics project={projectId} /></div>
            </div>
+
            <div className="col-lg-8 col-md-7 mt-2">
              <ProjectProgressChart ShowAllProject="false" DefaultRange="1M" />
+              {(canRegularize || canTeamAttendance || canSelfAttendance) && (
                <div className="mt-5">
                  <AttendanceOverview />
                </div>
+              )}
            </div>
          </div>
        );
--- a/src/pages/purchase/PurchasePage.jsx
+++ b/src/pages/purchase/PurchasePage.jsx
@ -0,0 +1,133 @@
+import React, { createContext, useContext, useState } from "react";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import showToast from "../../services/toastService";
+import GlobalModel from "../../components/common/GlobalModel";
+import ManagePurchase from "../../components/purchase/ManagePurchase";
+import PurchaseList from "../../components/purchase/PurchaseList";
+import ViewPurchase from "../../components/purchase/ViewPurchase";
+import DeliveryChallane from "../../components/purchase/DeliveryChallane";
+
+export const PurchaseContext = createContext();
+export const usePurchaseContext = () => {
+  let context = useContext(PurchaseContext);
+
+  if (!context) {
+    showToast("Please use Innne cntext", "warning");
+    window.location = "/dashboard";
+  }
+  return context;
+};
+const PurchasePage = () => {
+  const [searchText, setSearchText] = useState("");
+  const [addChallan, setChallan] = useState({
+    isOpen: false,
+    purchaseId: null,
+  });
+  const [managePurchase, setManagePurchase] = useState({
+    isOpen: false,
+    purchaseId: null,
+  });
+  const [viewPurchaseState, setViewPurchase] = useState({
+    isOpen: false,
+    purchaseId: null,
+  });
+
+  const contextValue = {
+    setViewPurchase,
+    setManagePurchase,
+    setChallan,
+  };
+  return (
+    <PurchaseContext.Provider value={contextValue}>
+      <div className="container-fluid">
+        <Breadcrumb
+          data={[
+            { label: "Home", link: "/dashboard" },
+            { label: "Procurement & Inventory", link: "/purchase-invoice" },
+            { label: "Purchase" },
+          ]}
+        />
+        <div className="card px-sm-4 my-3">
+          <div className="row p-2">
+            <div className="col-12 col-sm-6 text-start">
+              {" "}
+              <label className="mb-0">
+                <input
+                  type="search"
+                  value={searchText}
+                  onChange={(e) => setSearchText(e.target.value)}
+                  className="form-control form-control-sm"
+                  placeholder="Search Purchase"
+                  aria-controls="DataTables_Table_0"
+                />
+              </label>
+            </div>
+            <di className="col-sm-6 text-end">
+              <button
+                className="btn btn-sm btn-primary"
+                onClick={() =>
+                  setManagePurchase({
+                    isOpen: true,
+                    purchaseId: null,
+                  })
+                }
+              >
+                <i className="bx bx-plus-circle me-2"></i>Add
+              </button>
+            </di>
+          </div>
+        </div>
+
+        <PurchaseList searchString={searchText} />
+        {managePurchase.isOpen && (
+          <GlobalModel
+            isOpen={managePurchase.isOpen}
+            size="lg"
+            closeModal={() =>
+              setManagePurchase({
+                isOpen: false,
+                purchaseId: null,
+              })
+            }
+          >
+            <ManagePurchase
+              onClose={() =>
+                setManagePurchase({
+                  isOpen: false,
+                  purchaseId: null,
+                })
+              }
+              purchaseId={managePurchase.purchaseId}
+            />
+          </GlobalModel>
+        )}
+
+        {viewPurchaseState.isOpen && (
+          <GlobalModel
+            isOpen={viewPurchaseState.isOpen}
+            size="lg"
+            closeModal={() =>
+              setViewPurchase({ isOpen: false, purchaseId: null })
+            }
+          >
+            <ViewPurchase purchaseId={viewPurchaseState.purchaseId} />
+          </GlobalModel>
+        )}
+
+        {addChallan.isOpen && (
+          <GlobalModel size="xl"
+            isOpen={addChallan.isOpen}
+            closeModal={() => setChallan({ isOpen: false, purchaseId: null })}
+          >
+            <DeliveryChallane
+              purchaseId={addChallan.purchaseId}
+              onClose={() => setChallan({ isOpen: false, purchaseId: null })}
+            />
+          </GlobalModel>
+        )}
+      </div>
+    </PurchaseContext.Provider>
+  );
+};
+
+export default PurchasePage;
--- a/src/repositories/MastersRepository.jsx
+++ b/src/repositories/MastersRepository.jsx
@ -157,4 +157,7 @@ export const MasterRespository = {
    ),

  getTeamRole: () => api.get(`/api/Master/team-roles/list`),
+
+
+  getInvoiceAttachmentTypes:()=>api.get("/api/Master/invoice-attachment-type/list")
 };
--- a/src/repositories/OrganizationRespository.jsx
+++ b/src/repositories/OrganizationRespository.jsx
@ -2,7 +2,8 @@ import { api } from "../utils/axiosClient";

 const OrganizationRepository = {
  createOrganization: (data) => api.post("/api/Organization/create", data),
-  updateOrganizaion:(id,data)=>api.put(`/api/Organization/edit/${id}`,data),
+  updateOrganizaion: (id, data) =>
+    api.put(`/api/Organization/edit/${id}`, data),
  getOrganizaion: (id) => api.get(`/api/Organization/details/${id}`),
  getOrganizationList: (pageSize, pageNumber, active, sprid, searchString) => {
    return api.get(
@ -39,6 +40,13 @@ const OrganizationRepository = {

    return api.get(url);
  },
+
+  getGlobalOrganization: (pageSize, pageNumber, searchString, id) =>
+    api.get(
+      `/api/Organization/list/basic?pageSize=${pageSize}&pageNumber=${pageNumber}${
+        id ? `&id=${id}` : ""
+      }&searchString=${searchString}`
+    ),
 };

 export default OrganizationRepository;
--- a/src/repositories/PurchaseRepository.jsx
+++ b/src/repositories/PurchaseRepository.jsx
@ -0,0 +1,22 @@
+import { api } from "../utils/axiosClient";
+
+export const PurchaseRepository = {
+  CreatePurchase: (data) => api.post("/api/PurchaseInvoice/create", data),
+  GetPurchaseList: (pageSize, pageNumber, isActive, filter, searchString) =>
+    api.get(
+      `/api/PurchaseInvoice/list?pageSize=${pageSize}&pageNumber=${pageNumber}&isActive=${isActive}&filter=${filter}&searchString=${searchString}`
+    ),
+
+  GetPurchase: (id) => api.get(`/api/PurchaseInvoice/details/${id}`),
+  UpdatePurchase: (id, data) =>
+    api.patch(`/api/PurchaseInvoice/edit/${id}`, data),
+  GetDeliveryChallan: (purchaseInvoiceId) =>
+    api.get(`/api/PurchaseInvoice/delivery-challan/list/${purchaseInvoiceId}`),
+  addDelievryChallan: (data) =>
+    api.post(`/api/PurchaseInvoice/delivery-challan/create`, data),
+};
+
+//  const filterPayload = JSON.stringify({
+//       sortFilters,
+//       groupByColumn: groupBy || null,
+//     });
--- a/src/router/AppRoutes.jsx
+++ b/src/router/AppRoutes.jsx
@ -62,6 +62,7 @@ import AdvancePaymentPage from "../pages/AdvancePayment/AdvancePaymentPage";
 import ServiceProjectDetail from "../pages/ServiceProject/ServiceProjectDetail";
 import ManageJob from "../components/ServiceProject/ServiceProjectJob/ManageJob";
 import AdvancePaymentPage1 from "../pages/AdvancePayment/AdvancePaymentPage1";
+import PurchasePage from "../pages/purchase/PurchasePage";
 const router = createBrowserRouter(
  [
    {
@ -113,6 +114,8 @@ const router = createBrowserRouter(
            { path: "/activities/task", element: <TaskPlannng /> },
            { path: "/activities/reports", element: <Reports /> },
            { path: "/gallary", element: <ImageGalleryPage /> },
+
+            // Finance
            { path: "/expenses/:status?/:project?", element: <ExpensePage /> },
            { path: "/expenses", element: <ExpensePage /> },
            { path: "/payment-request", element: <PaymentRequestPage /> },
@ -120,6 +123,10 @@ const router = createBrowserRouter(
            { path: "/advance-payment", element: <AdvancePaymentPage1 /> },
            { path: "/advance-payment/:employeeId", element: <AdvancePaymentPage /> },
            { path: "/collection", element: <CollectionPage /> },
+
+            // Purchases and Inventory
+            { path: "/purchase-invoice", element: <PurchasePage /> },
+            // Administration
            { path: "/masters", element: <MasterPage /> },
            { path: "/tenants", element: <TenantPage /> },
            { path: "/tenants/new-tenant", element: <CreateTenant /> },
--- a/src/utils/staticContent.jsx
+++ b/src/utils/staticContent.jsx
@ -0,0 +1,4 @@
+export const FILE_UPLOAD_INFO = `
+If you want to upload a document, please select a document type
+before uploading the document.
+`;
Author	SHA1	Message	Date
pramod.mahajan	6fa2cc4ef0	fixed attachment remove and update operation	2025-11-29 13:27:07 +05:30
Kartik Sharma	cb9d263730	Adding activetab to 0	2025-11-29 09:36:13 +05:30
pramod.mahajan	f0d21b14a2	added attachement in invoice	2025-11-28 20:49:47 +05:30
Kartik Sharma	9ce47a9232	Adding Upload functionlaiy in ManagePurchase.	2025-11-28 18:01:42 +05:30
pramod.mahajan	5818b84760	chaange sequence of dashbord widgets	2025-11-28 12:36:23 +05:30
pramod.mahajan	f9a0098adb	Merge pull request 'Services_Bugs :- UI changes of Purchase Modal.' (#523 ) from Services_Bugs into Purchase_Invoice_Management Reviewed-on: #523 Merged	2025-11-28 06:42:44 +00:00
Kartik Sharma	00d5df5ebb	Merge branch 'Project_Branch_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Services_Bugs	2025-11-28 11:58:14 +05:30
Kartik Sharma	40b11d209c	UI updation at Purchase Invoice.	2025-11-28 11:49:26 +05:30
pramod.mahajan	cb00bd4f35	centered spinner inside purchase list	2025-11-28 11:37:53 +05:30
pramod.mahajan	aec6930e11	fixed challan attachmenet	2025-11-28 11:35:59 +05:30
pramod.mahajan	44e1e16d19	fixed challan list attchament icon	2025-11-28 11:24:41 +05:30
pramod.mahajan	76826f8cee	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Purchase_Invoice_Management	2025-11-28 11:20:49 +05:30
pramod.mahajan	09428b1ff1	change JobComment btn label - 'send' to 'Submit'	2025-11-28 11:20:45 +05:30
Kartik Sharma	e5bfc6be44	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Purchase_Invoice_Management	2025-11-28 11:10:16 +05:30
Kartik Sharma	d987bd2a51	Alignment in Add Chalan and adding Page-min-h at list.	2025-11-28 11:09:45 +05:30
pramod.mahajan	bd1a97716c	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Purchase_Invoice_Management	2025-11-28 11:02:38 +05:30
pramod.mahajan	e0789cda3a	fixed project, supplier and Organization filed fullfied whenevr open for update	2025-11-28 11:02:17 +05:30
Kartik Sharma	73f5b46a40	Adding Query key in useUpdatePurchaseInvoice.	2025-11-28 10:36:02 +05:30
pramod.mahajan	9234253c97	fixed perfoma amt and delivery charge validation	2025-11-28 10:26:26 +05:30
pramod.mahajan	2b4f086318	added add challan btn	2025-11-28 09:54:42 +05:30
pramod.mahajan	1c41c00d72	Merge branch 'Purchase_Invoice_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Purchase_Invoice_Management	2025-11-27 21:25:26 +05:30
pramod.mahajan	b8d3e58428	added challan	2025-11-27 21:25:23 +05:30
pramod.mahajan	1b3e090211	added updation invoice	2025-11-27 16:52:33 +05:30
Kartik Sharma	339a5ff257	UI alignment in Purchase Invoice popup and changes in Jobs Arcieve and Archieve button.	2025-11-27 15:56:19 +05:30
pramod.mahajan	528255c2bd	added view deatils of purchases	2025-11-27 12:42:40 +05:30
pramod.mahajan	909022b034	added purchase list	2025-11-26 20:25:59 +05:30
pramod.mahajan	271787812b	added get api for purchases	2025-11-26 19:15:50 +05:30
pramod.mahajan	0eb3cc61a3	removed unused code	2025-11-26 18:56:36 +05:30
pramod.mahajan	ea0e38f100	removed console	2025-11-26 18:41:23 +05:30
pramod.mahajan	d27546073f	Merge branch 'Project_Branch_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Project_Branch_Management	2025-11-26 18:37:08 +05:30
pramod.mahajan	a1a8dd4447	added zoom in and size bar collaspeing	2025-11-26 18:37:05 +05:30
Kartik Sharma	80717f0458	Showing message on the center of the page in Branches.	2025-11-26 18:02:26 +05:30
pramod.mahajan	4dbfe2bd48	Merge branch 'Project_Branch_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Project_Branch_Management	2025-11-26 17:53:21 +05:30
pramod.mahajan	c2c8dabdd4	Merge branch 'Project_Branch_Management' of https://git.marcoaiot.com/admin/marco.pms.web into Project_Branch_Management	2025-11-26 17:52:34 +05:30
pramod.mahajan	54ca807436	removed double class name	2025-11-26 17:52:22 +05:30
pramod.mahajan	6e57108f8e	Merge pull request 'UI alignment in Finance forms.' (#515 ) from Finance_Form_Layout into Project_Branch_Management Reviewed-on: #515 merged	2025-11-26 12:21:31 +00:00
Kartik Sharma	219161f15e	UI alignment in Finance forms.	2025-11-26 12:21:31 +00:00
pramod.mahajan	86039552c8	Merge pull request 'Weidget_Dashoard_Jobs :- Creating Weiget for Jobs.' (#521 ) from Weidget_Dashoard_Jobs into Project_Branch_Management Reviewed-on: #521 merged	2025-11-26 12:19:44 +00:00
Kartik Sharma	e8ebbe4d76	Hide the Weidget.	2025-11-26 12:19:44 +00:00
Kartik Sharma	3d7a404d1f	Changing Name of tabs.	2025-11-26 12:19:44 +00:00
Kartik Sharma	e041e0fe8a	Adding Permission in Attendance Weiget at dasboard and Project Profile.	2025-11-26 12:19:44 +00:00
Kartik Sharma	082df5fad3	Changes in Daily progress report filter panel and Daily task list view.	2025-11-26 12:19:44 +00:00
Kartik Sharma	cfcf80b6c2	Changes in ServiceJobs.	2025-11-26 12:19:44 +00:00
Kartik Sharma	7617146512	Adding Min Height in Attendance Weiget.	2025-11-26 12:19:44 +00:00
Kartik Sharma	711dfb8f00	Correction in Project Statistics.	2025-11-26 12:19:44 +00:00
Kartik Sharma	cf430881dc	Creating new weidget for dashboard for Service jobs.	2025-11-26 12:19:44 +00:00
Kartik Sharma	80f5dbd639	reset after invoice created	2025-11-26 15:50:46 +05:30
pramod.mahajan	998284f398	added organization api and successfuly created invoice	2025-11-26 15:16:58 +05:30
pramod.mahajan	82c1dc4b8e	created purchase form	2025-11-26 12:29:40 +05:30
pramod.mahajan	b8df8a2bde	initially setup purchaseform	2025-11-25 20:01:11 +05:30
pramod.mahajan	5d773b0680	Merge branch 'SideBarCollapsed' into Purchase_Invoice_Management	2025-11-25 15:24:19 +05:30
pramod.mahajan	f13005a031	fixed side issue collapsing	2025-11-24 19:48:03 +05:30