diff --git a/src/components/DailyProgressRport/TaskReportList.jsx b/src/components/DailyProgressRport/TaskReportList.jsx
index f812937c..5e9cf12d 100644
--- a/src/components/DailyProgressRport/TaskReportList.jsx
+++ b/src/components/DailyProgressRport/TaskReportList.jsx
@@ -147,13 +147,13 @@ const TaskReportList = () => {
       data-bs-placement="left"
       data-bs-html="true"
       data-bs-content={`
-        <div class="border border-secondary rounded custom-popover p-2 px-3">
+        <div className="border border-secondary rounded custom-popover p-2 px-3">
           ${task.teamMembers
           .map(
             (m) => `
-            <div class="d-flex align-items-center gap-2 mb-2">
-              <div class="avatar avatar-xs">
-                <span class="avatar-initial rounded-circle bg-label-primary">
+            <div className="d-flex align-items-center gap-2 mb-2">
+              <div className="avatar avatar-xs">
+                <span className="avatar-initial rounded-circle bg-label-primary">
                   ${m?.firstName?.charAt(0) || ""}${m?.lastName?.charAt(0) || ""
               }
                 </span>
diff --git a/src/components/Expenses/Filelist.jsx b/src/components/Expenses/Filelist.jsx
index 36a48565..eb606e7b 100644
--- a/src/components/Expenses/Filelist.jsx
+++ b/src/components/Expenses/Filelist.jsx
@@ -119,7 +119,7 @@ export const FileView = ({ file, viewFile }) => {
             <span className="text-muted small text-truncate mb-n4">
               {file.fileName}
             </span>
-            <span className="text-body-secondary small">
+            <span className="text-body-secondary small mt-2">
               <Tooltip text={"Click on file"}>
                 {" "}
                 {file.fileSize ? formatFileSize(file.fileSize) : ""}
diff --git a/src/components/Expenses/PreviewDocument.jsx b/src/components/Expenses/PreviewDocument.jsx
index 142ee65c..5d5b1b59 100644
--- a/src/components/Expenses/PreviewDocument.jsx
+++ b/src/components/Expenses/PreviewDocument.jsx
@@ -110,7 +110,7 @@ const PreviewDocument = ({ files = [] }) => {
       </div>
 
       <div
-        onWheel={handleWheel}
+        // onWheel={handleWheel}
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
diff --git a/src/components/Organization/OrgPickerfromTenant.jsx b/src/components/Organization/OrgPickerfromTenant.jsx
index 6bfb9394..ef01ad7f 100644
--- a/src/components/Organization/OrgPickerfromTenant.jsx
+++ b/src/components/Organization/OrgPickerfromTenant.jsx
@@ -43,7 +43,7 @@ const OrgPickerfromTenant = ({ title }) => {
       label: "Name",
       getValue: (org) => (
         <div className="d-flex gap-2 py-1 ">
-          <i class="bx bx-buildings"></i>
+          <i className="bx bx-buildings"></i>
           <span
             className="text-truncate d-inline-block "
             style={{ maxWidth: "150px" }}
@@ -126,7 +126,7 @@ const OrgPickerfromTenant = ({ title }) => {
                               onOpen({ startStep: 3, orgData: row })
                             }
                           >
-                            <i class='bx bx-right-arrow-circle text-primary'></i>
+                            <i className='bx bx-right-arrow-circle text-primary'></i>
                           </span>
                         </div>
                       </td>
diff --git a/src/components/PaymentRequest/ActionPaymentRequest.jsx b/src/components/PaymentRequest/ActionPaymentRequest.jsx
index 52222b55..3c380d0a 100644
--- a/src/components/PaymentRequest/ActionPaymentRequest.jsx
+++ b/src/components/PaymentRequest/ActionPaymentRequest.jsx
@@ -191,16 +191,16 @@ const ActionPaymentRequest = ({ requestId }) => {
       {IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
         <>
           {isProccesed ? (
-            <div class="accordion-item active shadow-none">
-              <h2 class="accordion-header d-flex align-items-center">
+            <div className="accordion-item active shadow-none">
+              <h2 className="accordion-header d-flex align-items-center">
                 <button
                   type="button"
-                  class="accordion-button"
+                  className="accordion-button"
                   data-bs-toggle="collapse"
                   data-bs-target="#accordionWithIcon-1"
                   aria-expanded="true"
                 >
-                  <i class="icon-base bx bx-receipt me-2"></i>
+                  <i className="icon-base bx bx-receipt me-2"></i>
                   Make Expense
                 </button>
               </h2>
diff --git a/src/components/PaymentRequest/PaymentRequestList.jsx b/src/components/PaymentRequest/PaymentRequestList.jsx
index 1cd1b3bb..e7def165 100644
--- a/src/components/PaymentRequest/PaymentRequestList.jsx
+++ b/src/components/PaymentRequest/PaymentRequestList.jsx
@@ -307,7 +307,7 @@ const PaymentRequestList = ({ filters, filterData, removeFilterChip, clearFilter
                                     data-bs-toggle="tooltip"
                                     data-bs-offset="0,8"
                                     data-bs-placement="top"
-                                    data-bs-custom-class="tooltip-dark"
+                                    data-bs-custom-className="tooltip-dark"
                                     title="More Action"
                                   ></i>
                                 </button>
diff --git a/src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx b/src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx
index e8281dfe..2c7b8859 100644
--- a/src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx
+++ b/src/components/Project/ProjectOrganization/ProjectAssignedOrgs.jsx
@@ -15,7 +15,7 @@ const ProjectAssignedOrgs = () => {
       label: "Organization Name",
       getValue: (org) => (
         <div className="d-flex gap-2 py-1 ">
-          <i class="bx bx-buildings"></i>
+          <i className="bx bx-buildings"></i>
           <span
             className="text-truncate d-inline-block "
             style={{ maxWidth: "150px" }}
diff --git a/src/components/master/EditRole.jsx b/src/components/master/EditRole.jsx
index 714a33b3..12bf2bc9 100644
--- a/src/components/master/EditRole.jsx
+++ b/src/components/master/EditRole.jsx
@@ -241,7 +241,7 @@ const EditMaster = ({ master, onClose }) => {
                           data-bs-trigger="focus"
                           data-bs-placement="right"
                           data-bs-html="true"
-                          data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
+                          data-bs-content={`<div className="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
                         >
                           &nbsp;
                           <svg
diff --git a/src/components/purchase/DeliverChallanList.jsx b/src/components/purchase/DeliverChallanList.jsx
index 45ecf033..a8bb4ab4 100644
--- a/src/components/purchase/DeliverChallanList.jsx
+++ b/src/components/purchase/DeliverChallanList.jsx
@@ -4,11 +4,11 @@ import { SpinnerLoader } from "../common/Loader";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { FileView } from "../Expenses/Filelist";
 
-const DeliverChallanList = ({ purchaseId }) => {
+const DeliverChallanList = ({ purchaseId, viewDocuments }) => {
   const { data, isLoading, isError, error } = useDeliverChallane(purchaseId);
   if (isLoading) {
     return (
-  <div className="d-flex justify-content-center align-items-center text-center vh-50">
+      <div className="d-flex justify-content-center align-items-center text-center vh-50">
         <SpinnerLoader />
       </div>
     );
@@ -56,7 +56,7 @@ const DeliverChallanList = ({ purchaseId }) => {
             </p>
 
             {item.attachment?.preSignedUrl && (
-              <FileView file={item.attachment} />
+              <FileView file={item.attachment} viewFile={viewDocuments} />
             )}
           </div>
         </div>
diff --git a/src/components/purchase/DeliveryChallane.jsx b/src/components/purchase/DeliveryChallane.jsx
index 834f049d..d3448977 100644
--- a/src/components/purchase/DeliveryChallane.jsx
+++ b/src/components/purchase/DeliveryChallane.jsx
@@ -21,9 +21,11 @@ import SingleFileUploader from "../common/SigleFileUploader";
 import { localToUtc } from "../../utils/appUtils";
 import WarningBlock from "../InfoBlock/WarningBlock";
 import { FILE_UPLOAD_INFO } from "../../utils/staticContent";
+import { usePurchaseContext } from "../../pages/purchase/PurchasePage";
 
 const DeliveryChallane = ({ purchaseId }) => {
   const [file, setFile] = useState(null);
+  const {setDocumentView} = usePurchaseContext()
 
   const {
     register,
@@ -174,14 +176,16 @@ const DeliveryChallane = ({ purchaseId }) => {
           />
 
           <div className="col-12 text-end my-3">
-            <button type="submit" className="btn btn-sm btn-primary px-4">
+            <button
+              type="submit"
+              className="btn btn-sm btn-primary px-4"
+              disabled={isPending}
+            >
               {isPending ? "Please Wait..." : "Submit"}
             </button>
           </div>
         </form>
-        {!isUploaded && (
-          <WarningBlock content={FILE_UPLOAD_INFO} />
-        )}
+        {!isUploaded && <WarningBlock content={FILE_UPLOAD_INFO} />}
       </div>
 
       <div className="col-md-6 text-start">
@@ -190,7 +194,7 @@ const DeliveryChallane = ({ purchaseId }) => {
           <p className="fw-medium mb-0">History</p>
         </div>
         <div className="overflow-auto " style={{ maxHeight: "420px" }}>
-          <DeliverChallanList purchaseId={purchaseId} />
+          <DeliverChallanList purchaseId={purchaseId} viewDocuments={setDocumentView} />
         </div>
       </div>
     </div>
diff --git a/src/components/purchase/PurchaseList.jsx b/src/components/purchase/PurchaseList.jsx
index 5d7715b1..efbaf910 100644
--- a/src/components/purchase/PurchaseList.jsx
+++ b/src/components/purchase/PurchaseList.jsx
@@ -123,7 +123,16 @@ const PurchaseList = ({ searchString, isActive }) => {
                 data?.data?.map((item, index) => (
                   <tr key={item?.id || index}>
                     {visibleColumns.map((col) => (
-                      <td key={col.key} className={col.className || ""}>
+                      <td
+                        key={col.key}
+                        className={`${col.className} cursor-pointer` || ""}
+                        onClick={() =>
+                          setViewPurchase({
+                            isOpen: true,
+                            purchaseId: item.id,
+                          })
+                        }
+                      >
                         {col.render ? col.render(item) : item[col.key] || "NA"}
                       </td>
                     ))}
diff --git a/src/components/purchase/PurchasePayment.jsx b/src/components/purchase/PurchasePayment.jsx
index 530110a0..121f77a5 100644
--- a/src/components/purchase/PurchasePayment.jsx
+++ b/src/components/purchase/PurchasePayment.jsx
@@ -20,7 +20,7 @@ import { SpinnerLoader } from "../common/Loader";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import Avatar from "../common/Avatar";
 
-const PurchasePayment = ({onClose, purchaseId }) => {
+const PurchasePayment = ({ onClose, purchaseId }) => {
   const {
     data: Purchase,
     isLoading: isPurchaseLoading,
@@ -93,16 +93,6 @@ const PurchasePayment = ({onClose, purchaseId }) => {
                     size="md"
                     name="paymentReceivedDate"
                     control={control}
-                    minDate={
-                      Purchase?.createdAt
-                        ? new Date(
-                            new Date(Purchase?.createdAt).setDate(
-                              new Date(Purchase?.createdAt).getDate() + 1
-                            )
-                          )
-                        : null
-                    }
-                    maxDate={new Date()}
                   />
                   {errors.paymentReceivedDate && (
                     <small className="danger-text">
@@ -283,9 +273,10 @@ const PurchasePayment = ({onClose, purchaseId }) => {
           {data?.length === 0 && (
             <div className="d-flex justify-content-center algin-items-center text-center">
               <div>
-               
-                <i className='bx bx-box'></i>
-                   <p className="text-secondary">You don't have any payment yet.</p>
+                <i className="bx bx-box"></i>
+                <p className="text-secondary">
+                  You don't have any payment yet.
+                </p>
               </div>
             </div>
           )}
diff --git a/src/components/purchase/ViewPurchase.jsx b/src/components/purchase/ViewPurchase.jsx
index 6cb07df8..3d5c7507 100644
--- a/src/components/purchase/ViewPurchase.jsx
+++ b/src/components/purchase/ViewPurchase.jsx
@@ -38,11 +38,11 @@ const ViewPurchase = ({ purchaseId }) => {
           <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="text-secondary mb-0"><i className='bx bx-captions bx-sm me-1'></i>Title:</p>
               <p className="fw-light mb-1">{data?.title}</p>
             </div>
             <div className="col-md-6">
-              <p className="text-secondary mb-0"><i class='bx bx-comment-detail bx-sm me-1'></i>Description:</p>
+              <p className="text-secondary mb-0"><i className='bx bx-comment-detail bx-sm me-1'></i>Description:</p>
               <p className="fw-light mb-1 ">{data?.description}</p>
             </div>
           </div>
@@ -56,31 +56,31 @@ const ViewPurchase = ({ purchaseId }) => {
         <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="text-secondary mb-0"><i className='bx bx-captions bx-sm me-1'></i>Project Name:</p>
             <p className="fw-light mb-0">{data?.project?.name}</p>
           </div>
 
           {/* Organization Name */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i class='bx bxs-component bx-sm me-1'></i>Organization:</p>
+            <p className="text-secondary mb-0"><i className='bx bxs-component bx-sm me-1'></i>Organization:</p>
             <p className="fw-light mb-0">{data?.organization?.name}</p>
           </div>
 
           {/* Email */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i class='bx bx-envelope me-1 bx-sm'></i>Email:</p>
+            <p className="text-secondary mb-0"><i className='bx bx-envelope me-1 bx-sm'></i>Email:</p>
             <p className="fw-light mb-0">{data?.organization?.email}</p>
           </div>
 
           {/* Contact Number */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i class='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
+            <p className="text-secondary mb-0"><i className='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
             <p className="fw-light mb-0">{data?.organization?.contactNumber}</p>
           </div>
 
           {/* Address */}
           <div className="col-12 mb-3">
-            <p className="text-secondary mb-0"><i class='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
+            <p className="text-secondary mb-0"><i className='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
             <p className="fw-light mb-0">{data?.organization?.address}</p>
           </div>
         </div>
@@ -93,31 +93,31 @@ const ViewPurchase = ({ purchaseId }) => {
 
           {/* 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="text-secondary mb-0"><i className='bx bx-captions bx-sm me-1'></i>Name:</p>
             <p className="fw-light mb-0">{data?.supplier?.name}</p>
           </div>
 
           {/* Contact Person */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i class='bx bx-support bx-sm me-1'></i>Contact Person:</p>
+            <p className="text-secondary mb-0"><i className='bx bx-support bx-sm me-1'></i>Contact Person:</p>
             <p className="fw-light mb-0">{data?.supplier?.contactPerson}</p>
           </div>
 
           {/* Email */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i class='bx bx-envelope me-1 bx-sm'></i>Email:</p>
+            <p className="text-secondary mb-0"><i className='bx bx-envelope me-1 bx-sm'></i>Email:</p>
             <p className="fw-light mb-0">{data?.supplier?.email}</p>
           </div>
 
           {/* Contact Number */}
           <div className="col-12 col-md-4 mb-3">
-            <p className="text-secondary mb-0"><i class='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
+            <p className="text-secondary mb-0"><i className='bx bxs-contact bx-sm me-1' ></i>Contact:</p>
             <p className="fw-light mb-0">{data?.supplier?.contactNumber}</p>
           </div>
 
           {/* Address */}
           <div className="col-12 mb-3">
-            <p className="text-secondary mb-0"><i class='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
+            <p className="text-secondary mb-0"><i className='bx bx-message-square-detail bx-sm me-1'></i>Address:</p>
             <p className="fw-light mb-0">{data?.supplier?.address}</p>
           </div>
         </div>
diff --git a/src/layouts/AuthLayout.jsx b/src/layouts/AuthLayout.jsx
index 346fdec6..04fb22c9 100644
--- a/src/layouts/AuthLayout.jsx
+++ b/src/layouts/AuthLayout.jsx
@@ -24,25 +24,25 @@ const AuthLayout = () => {
       >
         {" "}
         <nav
-          class="navbar navbar-light ms-10 w-auto justify-content-start"
+          className="navbar navbar-light ms-10 w-auto justify-content-start"
           style={{ opacity: "100%" }}
         >
-          <a class="navbar-brand" href="/">
+          <a className="navbar-brand" href="/">
             Home
           </a>
-          <a class="navbar-brand" href="/#landingFeatures">
+          <a className="navbar-brand" href="/#landingFeatures">
             Features
           </a>
-          <a class="navbar-brand" href="/#landingPricing">
+          <a className="navbar-brand" href="/#landingPricing">
             Pricing
           </a>
-          <a class="navbar-brand" href="/#landingFAQ">
+          <a className="navbar-brand" href="/#landingFAQ">
             FAQ
           </a>
-          <a class="navbar-brand" href="/#sectionBlog">
+          <a className="navbar-brand" href="/#sectionBlog">
             Blogs
           </a>
-          <a class="navbar-brand" href="/#landingCTA">
+          <a className="navbar-brand" href="/#landingCTA">
             Contact Us
           </a>
         </nav>{" "}
diff --git a/src/pages/Home/FeatureCard.jsx b/src/pages/Home/FeatureCard.jsx
index 340434b7..2f0bf5c4 100644
--- a/src/pages/Home/FeatureCard.jsx
+++ b/src/pages/Home/FeatureCard.jsx
@@ -10,7 +10,7 @@ const FeatureCard = ({ imagesrc, title, description }) => {
                 alt={title}
                 className="w-14 mb-4 feature-icon-image"
               />
-              <span class="ms-5">
+              <span className="ms-5">
                 <h5>{title}</h5>
               </span>
             </div>
diff --git a/src/pages/Home/LandingPageOld.jsx b/src/pages/Home/LandingPageOld.jsx
index df546e60..c4e3ae8f 100644
--- a/src/pages/Home/LandingPageOld.jsx
+++ b/src/pages/Home/LandingPageOld.jsx
@@ -67,14 +67,14 @@ const LandingPageOld = () => {
 
               <a
                 href="/"
-                class="app-brand-link fw-bold navbar-brand text-green fs-5"
+                className="app-brand-link fw-bold navbar-brand text-green fs-5"
               >
-                <span class="app-brand-logo demo">
+                <span className="app-brand-logo demo">
                   <img src="/img/brand/marco.png" width="50" />
                 </span>
-                <span class="text-blue">OnField</span>
+                <span className="text-blue">OnField</span>
                 <span>Work</span>
-                <span class="text-dark">.com</span>
+                <span className="text-dark">.com</span>
               </a>
             </div>
             {/*  Menu logo wrapper: End */}
@@ -404,11 +404,11 @@ const LandingPageOld = () => {
         {/* <!-- Real blog/ case studies: Start --> */}
         <section
           id="sectionBlog"
-          class="section-py bg-body landing-reviews pb-0"
+          className="section-py bg-body landing-reviews pb-0"
           hidden
         >
           {/* <!-- What people say slider: Start --> */}
-          <div class="container">
+          <div className="container">
             <div className="text-center mb-4">
               <span className="badge bg-label-primary heading">
                 Case Studies
@@ -430,8 +430,8 @@ const LandingPageOld = () => {
               See the transformations our clients have achieved with us
             </p>
 
-            <div class="row">
-              <div class="swiper-reviews-carousel">
+            <div className="row">
+              <div className="swiper-reviews-carousel">
                 <Swiper
                   onSwiper={setSwiperRef}
                   slidesPerView={4}
diff --git a/src/pages/Home/SwaperBlogContent.jsx b/src/pages/Home/SwaperBlogContent.jsx
index ed9c6836..9b1226db 100644
--- a/src/pages/Home/SwaperBlogContent.jsx
+++ b/src/pages/Home/SwaperBlogContent.jsx
@@ -5,37 +5,37 @@ const SwaperBlogContent = ({
   ContentAlign = "right",
 }) => {
   return (
-    <div class="swiper-slide">
-      <div class="card h-100">
-        <div class="card-body text-body d-flex flex-column justify-content-between h-100">
-          <div class="mb-4">
+    <div className="swiper-slide">
+      <div className="card h-100">
+        <div className="card-body text-body d-flex flex-column justify-content-between h-100">
+          <div className="mb-4">
             <img
               src={ImageUrl}
               alt="client logo"
-              class="client-logo img-fluid"
+              className="client-logo img-fluid"
               style={{ width: "580px", height: "100px" }}
             />
             <h5>{Title}</h5>
           </div>
           <p>{Body}</p>
-          <div class="text-warning mb-4">
-            <i class="bx bxs-star"></i>
-            <i class="bx bxs-star"></i>
-            <i class="bx bxs-star"></i>
-            <i class="bx bxs-star"></i>
-            <i class="bx bxs-star"></i>
+          <div className="text-warning mb-4">
+            <i className="bx bxs-star"></i>
+            <i className="bx bxs-star"></i>
+            <i className="bx bxs-star"></i>
+            <i className="bx bxs-star"></i>
+            <i className="bx bxs-star"></i>
           </div>
-          <div class="d-flex align-items-center">
-            <div class="avatar me-3 avatar-sm">
+          <div className="d-flex align-items-center">
+            <div className="avatar me-3 avatar-sm">
               <img
                 src="../../assets/img/avatars/1.png"
                 alt="Avatar"
-                class="rounded-circle"
+                className="rounded-circle"
               />
             </div>
             <div>
-              <h6 class="mb-0">Cecilia Payne</h6>
-              <p class="small text-muted mb-0">CEO of Airbnb</p>
+              <h6 className="mb-0">Cecilia Payne</h6>
+              <p className="small text-muted mb-0">CEO of Airbnb</p>
             </div>
           </div>
         </div>
diff --git a/src/pages/authentication/ForgotPasswordPage.jsx b/src/pages/authentication/ForgotPasswordPage.jsx
index 209ba714..41e6fcc8 100644
--- a/src/pages/authentication/ForgotPasswordPage.jsx
+++ b/src/pages/authentication/ForgotPasswordPage.jsx
@@ -59,10 +59,10 @@ const ForgotPasswordPage = () => {
         <div className="d-flex align-items-center justify-content-center ">
           <img src="/img/brand/marco.png" width="70" />
           <Link aria-label="Go to Home Page" to="/">
-            <span class="app-brand-logo ">
-              <span class="text-blue fs-4">OnField</span>
+            <span className="app-brand-logo ">
+              <span className="text-blue fs-4">OnField</span>
               <span className="text-green fs-4">Work</span>
-              <span class="text-dark fs-4">.com</span>
+              <span className="text-dark fs-4">.com</span>
             </span>
             <br />
           </Link>
diff --git a/src/pages/authentication/LoginPage.jsx b/src/pages/authentication/LoginPage.jsx
index 6934b2e7..3dafe80a 100644
--- a/src/pages/authentication/LoginPage.jsx
+++ b/src/pages/authentication/LoginPage.jsx
@@ -90,16 +90,16 @@ const LoginPage = () => {
     <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-top  p-4 p-sm-5 bg-gray-60">
       <div className="w-100 mt-10" style={{ maxWidth: 420, margin: "0 auto" }}>
         <Link aria-label="Go to Home Page" to="/">
-          <span class="app-brand-logo rounded-circle">
+          <span className="app-brand-logo rounded-circle">
             <img src="/img/brand/marco.png" width="70" />
           </span>
           <br />
-          <span class="text-dark fs-5">Welcome to</span> <br />
+          <span className="text-dark fs-5">Welcome to</span> <br />
           <h4 className="mb-2 ">
             {" "}
-            <span class="text-blue ms-1">OnField</span>
+            <span className="text-blue ms-1">OnField</span>
             <span className="text-green">Work</span>
-            <span class="text-dark">.com</span>
+            <span className="text-dark">.com</span>
           </h4>
         </Link>
         <p className="mb-4">
diff --git a/src/pages/authentication/MainLogin.jsx b/src/pages/authentication/MainLogin.jsx
index 1de9f1f2..bb441161 100644
--- a/src/pages/authentication/MainLogin.jsx
+++ b/src/pages/authentication/MainLogin.jsx
@@ -8,17 +8,17 @@ const MainLogin = () => {
         <div className=" d-lg-flex col-lg-7 col-xl-8 align-items-center p-5 justify-content-center">
           {/* <div className="w-75 text-start" style={{ marginTop: "75px" }}> */}
           <div
-            class="w-75 text-start swiper-container login-pg-swiper"
+            className="w-75 text-start swiper-container login-pg-swiper"
             style={{ marginTop: "75px" }}
           >
             <div
               id="textCarousel"
-              class="carousel slide"
+              className="carousel slide"
               data-bs-ride="carousel"
             >
-              <div class="carousel-inner">
-                <div class="carousel-item active">
-                  <div class="p-5 text-center">
+              <div className="carousel-inner">
+                <div className="carousel-item active">
+                  <div className="p-5 text-center">
                     <p>
                       <img
                         className="w-100 login-pg-img-swiper"
@@ -27,8 +27,8 @@ const MainLogin = () => {
                     </p>
                   </div>
                 </div>
-                <div class="carousel-item active">
-                  <div class="p-5 text-center">
+                <div className="carousel-item active">
+                  <div className="p-5 text-center">
                     <p>
                       <img
                         className="w-100 login-pg-img-swiper"
@@ -37,8 +37,8 @@ const MainLogin = () => {
                     </p>
                   </div>
                 </div>
-                <div class="carousel-item ">
-                  <div class="p-5  ">
+                <div className="carousel-item ">
+                  <div className="p-5  ">
                     <p>
                       <div className="text-start">
                         <h3 className="display-header text-black">
@@ -112,8 +112,8 @@ const MainLogin = () => {
                   </div>
                 </div>
 
-                <div class="carousel-item">
-                  <div class="p-5 text-center ">
+                <div className="carousel-item">
+                  <div className="p-5 text-center ">
                     <p className="text-start">
                       <div className="text-start">
                         <h1 className="display-header text-black">
@@ -196,8 +196,8 @@ const MainLogin = () => {
                   </div>
                 </div>
 
-                <div class="carousel-item">
-                  <div class="p-5 text-center ">
+                <div className="carousel-item">
+                  <div className="p-5 text-center ">
                     <p className="text-start">
                       <div className="text-start">
                         <h1 className="display-header text-black">
@@ -264,28 +264,28 @@ const MainLogin = () => {
               </div>
 
               <button
-                class="carousel-control-prev"
+                className="carousel-control-prev"
                 type="button"
                 data-bs-target="#textCarousel"
                 data-bs-slide="prev"
               >
                 <span
-                  class="carousel-control-prev-icon"
+                  className="carousel-control-prev-icon"
                   aria-hidden="true"
                 ></span>
-                <span class="visually-hidden">Previous</span>
+                <span className="visually-hidden">Previous</span>
               </button>
               <button
-                class="carousel-control-next"
+                className="carousel-control-next"
                 type="button"
                 data-bs-target="#textCarousel"
                 data-bs-slide="next"
               >
                 <span
-                  class="carousel-control-next-icon"
+                  className="carousel-control-next-icon"
                   aria-hidden="true"
                 ></span>
-                <span class="visually-hidden">Next</span>
+                <span className="visually-hidden">Next</span>
               </button>
             </div>
           </div>
diff --git a/src/pages/authentication/RegisterPage.jsx b/src/pages/authentication/RegisterPage.jsx
index 6e05cfdb..b0209149 100644
--- a/src/pages/authentication/RegisterPage.jsx
+++ b/src/pages/authentication/RegisterPage.jsx
@@ -84,10 +84,10 @@ const RegisterPage = () => {
           <div className="d-flex align-items-center justify-content-center ">
             <img src="/img/brand/marco.png" width="50" />
             <Link aria-label="Go to Home Page" to="/">
-              <span class="app-brand-logo ">
-                <span class="text-blue fs-4">OnField</span>
+              <span className="app-brand-logo ">
+                <span className="text-blue fs-4">OnField</span>
                 <span className="text-green fs-4">Work</span>
-                <span class="text-dark fs-4">.com</span>
+                <span className="text-dark fs-4">.com</span>
               </span>
               <br />
             </Link>
diff --git a/src/pages/purchase/PurchasePage.jsx b/src/pages/purchase/PurchasePage.jsx
index 570a5945..2b56c5a0 100644
--- a/src/pages/purchase/PurchasePage.jsx
+++ b/src/pages/purchase/PurchasePage.jsx
@@ -9,6 +9,7 @@ import DeliveryChallane from "../../components/purchase/DeliveryChallane";
 import PurchasePayment from "../../components/purchase/PurchasePayment";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGEPURCHASE_INVOICE } from "../../utils/constants";
+import PreviewDocument from "../../components/Expenses/PreviewDocument";
 
 export const PurchaseContext = createContext();
 export const usePurchaseContext = () => {
@@ -40,6 +41,7 @@ const PurchasePage = () => {
     isOpen: false,
     purchaseId: null,
   });
+  const [ViewDocument,setDocumentView] = useState({ IsOpen: false, Images: null })
 
   const canCreatePurchase = useHasUserPermission(MANAGEPURCHASE_INVOICE);
 
@@ -48,6 +50,7 @@ const PurchasePage = () => {
     setManagePurchase,
     setChallan,
     setAddPayment,
+    setDocumentView
   };
   return (
     <PurchaseContext.Provider value={contextValue}>
@@ -170,6 +173,17 @@ const PurchasePage = () => {
             />
           </GlobalModel>
         )}
+
+        {ViewDocument.IsOpen && (
+          <GlobalModel
+            isOpen
+            size="md"
+            key={ViewDocument.Images ?? "doc"}
+            closeModal={() => setDocumentView({ IsOpen: false, Images: null })}
+          >
+            <PreviewDocument files={ViewDocument.Images} />
+          </GlobalModel>
+        )}
       </div>
     </PurchaseContext.Provider>
   );
diff --git a/src/utils/blockUI.js b/src/utils/blockUI.js
index b516e059..37728300 100644
--- a/src/utils/blockUI.js
+++ b/src/utils/blockUI.js
@@ -2,15 +2,15 @@ export const blockUI = (message = 'Please wait...') => {
   if (window.$ && window.$.blockUI) {
     window.$.blockUI({
       message: `
-        <div class="d-flex flex-column align-items-center">
-          <div class="sk-wave mb-2">
-            <div class="sk-wave-rect"></div>
-            <div class="sk-wave-rect"></div>
-            <div class="sk-wave-rect"></div>
-            <div class="sk-wave-rect"></div>
-            <div class="sk-wave-rect"></div>
+        <div className="d-flex flex-column align-items-center">
+          <div className="sk-wave mb-2">
+            <div className="sk-wave-rect"></div>
+            <div className="sk-wave-rect"></div>
+            <div className="sk-wave-rect"></div>
+            <div className="sk-wave-rect"></div>
+            <div className="sk-wave-rect"></div>
           </div>
-          <p class="text-white">${message}</p>
+          <p className="text-white">${message}</p>
         </div>`,
       css: {
         backgroundColor: 'transparent',