added zoom in-out

src/components/Expenses/PreviewDocument.jsx

@@ -1,54 +1,80 @@
 import { useState } from "react";
 
+
 const PreviewDocument = ({ imageUrl }) => {
   const [loading, setLoading] = useState(true);
   const [rotation, setRotation] = useState(0);
+  const [scale, setScale] = useState(1);
+
+  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);
+  };
 
   return (
-   <>
-    <div className="d-flex justify-content-start">
+    <>
+      <div className="d-flex justify-content-start gap-3 mb-2">
         <i
-          className="bx bx-rotate-right cursor-pointer"
+          className="bx bx-rotate-right cursor-pointer fs-4"
+          title="Rotate"
           onClick={() => setRotation((prev) => prev + 90)}
         ></i>
-      </div>
-    <div
-      className="position-relative d-flex flex-column justify-content-center align-items-center"
-      style={{ minHeight: "80vh" }}
-    >
 
-      {loading && (
-        <div className="text-secondary text-center mb-2">Loading...</div>
-      )}
+        <i
+          className="bx bx-zoom-in cursor-pointer fs-4"
+          title="Zoom In"
+          onClick={zoomIn}
+        ></i>
 
-      <div className="mb-3 d-flex justify-content-center align-items-center">
-        <img
-          src={imageUrl}
-          alt="Full View"
-          className="img-fluid"
-          style={{
-            maxHeight: "80vh",
-            objectFit: "contain",
-            display: loading ? "none" : "block",
-            transform: `rotate(${rotation}deg)`,
-            transition: "transform 0.3s ease",
-          }}
-          onLoad={() => setLoading(false)}
-        />
+        <i
+          className="bx bx-zoom-out cursor-pointer fs-4"
+          title="Zoom Out"
+          onClick={zoomOut}
+        ></i>
       </div>
 
-      <div className="position-absolute bottom-0 start-0 justify-content-center gap-2">
-        <button
-          className="btn btn-outline-secondary"
-          onClick={() => setRotation(0)}
-          title="Reset Rotation"
-        >
-          <i className="bx bx-reset"></i> Reset
-        </button>
+      <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"
+            style={{
+              maxHeight: "80vh",
+              objectFit: "contain",
+              display: loading ? "none" : "block",
+              transform: `rotate(${rotation}deg) scale(${scale})`,
+              transition: "transform 0.3s ease",
+              cursor: "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>
       </div>
-    </div>
-   </>
+    </>
   );
 };
 
+
+
 export default PreviewDocument;

src/components/ServiceProject/Jobs.jsx

@@ -66,19 +66,10 @@ const Jobs = () => {
             <div className="col-12 col-md-6 text-start">
               <button
                 type="button"
-                className={`btn btn-sm ${showArchive ? "btn-primary" : "btn-outline-secondary"}`}
+                className={`btn btn-sm ${showArchive ? "btn-secondary" : "btn-outline-secondary"}`}
                 onClick={() => setShowArchive(!showArchive)}
-                style={{ fontSize: "13px" }}
               >
-                {showArchive ? (
-                  <>
-                    <i className="bx bx-list-ul me-1 mt-1"></i> Show Active
-                  </>
-                ) : (
-                  <>
-                    <i className="bx bx-archive me-1 mt-1"></i> Show Archived
-                  </>
-                )}
+               <i className="bx bx-archive bx-sm me-1 mt-1"></i>  Archived
               </button>
             </div>
 

src/hooks/useServiceProject.jsx

@@ -60,8 +60,8 @@ export const useCreateServiceProject = (onSuccessCallback) => {
     onError: (error) => {
       showToast(
         error?.response?.data?.message ||
-        error.message ||
-        "Failed to delete task",
+          error.message ||
+          "Failed to delete task",
         "error"
       );
     },
@@ -85,8 +85,8 @@ export const useUpdateServiceProject = (onSuccessCallback) => {
     onError: (error) => {
       showToast(
         error?.response?.data?.message ||
-        error.message ||
-        "Failed to update project",
+          error.message ||
+          "Failed to update project",
         "error"
       );
     },
@@ -111,8 +111,8 @@ export const useActiveInActiveServiceProject = (onSuccessCallback) => {
     onError: (error) => {
       showToast(
         error?.response?.data?.message ||
-        error.message ||
-        "Failed to update project",
+          error.message ||
+          "Failed to update project",
         "error"
       );
     },
@@ -139,8 +139,8 @@ export const useAllocationServiceProjectTeam = (onSuccessCallback) => {
     onError: (error) => {
       showToast(
         error?.response?.data?.message ||
-        error.message ||
-        "Failed to update project",
+          error.message ||
+          "Failed to update project",
         "error"
       );
     },
@@ -149,11 +149,6 @@ export const useAllocationServiceProjectTeam = (onSuccessCallback) => {
 
 //#endregion
 
-
-
-
-
-
 //#region Service Jobs
 
 export const useServiceProjectJobs = (
@@ -164,7 +159,14 @@ export const useServiceProjectJobs = (
   isArchive
 ) => {
   return useQuery({
-    queryKey: ["serviceProjectJobs", pageSize, pageNumber, isActive, project, isArchive],
+    queryKey: [
+      "serviceProjectJobs",
+      pageSize,
+      pageNumber,
+      isActive,
+      project,
+      isArchive,
+    ],
     queryFn: async () => {
       const resp = await ServiceProjectRepository.GetJobList(
         pageSize,
@@ -231,8 +233,8 @@ export const useAddCommentJob = (onSuccessCallback) => {
     onError: (error) => {
       showToast(
         error?.response?.data?.message ||
-        error.message ||
-        "Failed to update project",
+          error.message ||
+          "Failed to update project",
         "error"
       );
     },
@@ -255,8 +257,8 @@ export const useCreateServiceProjectJob = (onSuccessCallback) => {
     onError: (error) => {
       showToast(
         error?.response?.data?.message ||
-        error.message ||
-        "Failed to update project",
+          error.message ||
+          "Failed to update project",
         "error"
       );
     },
@@ -285,27 +287,19 @@ export const useUpdateServiceProjectJob = (onSuccessCallback) => {
       }
     },
 
-
     onError: (error) => {
       showToast(
         error?.response?.data?.message ||
-        error.message ||
-        "Failed to update project",
+          error.message ||
+          "Failed to update project",
         "error"
       );
     },
   });
 };
 
-
 //#endregion
 
-
-
-
-
-
-
 //#region Branch
 export const useBranches = (
   projectId,
@@ -344,8 +338,8 @@ export const useBranchTypes = () => {
       const resp = await ServiceProjectRepository.GetBranchTypeList();
       return resp.data;
     },
-  })
-}
+  });
+};
 
 export const useBranchDetails = (id) => {
   return useQuery({
@@ -354,9 +348,9 @@ export const useBranchDetails = (id) => {
       const resp = await ServiceProjectRepository.GetBranchDetail(id);
       return resp.data;
     },
-    enabled: !!id
-  })
-}
+    enabled: !!id,
+  });
+};
 
 export const useCreateBranch = (onSuccessCallBack) => {
   const queryClient = useQueryClient();
@@ -402,7 +396,6 @@ export const useUpdateBranch = (onSuccessCallBack) => {
   });
 };
 
-
 export const useDeleteBranch = () => {
   const queryClient = useQueryClient();
 
@@ -412,14 +405,17 @@ export const useDeleteBranch = () => {
 
     onSuccess: (_, variable) => {
       queryClient.invalidateQueries({ queryKey: ["branches"] });
-      showToast(`Branch ${variable.isActive ? "restored" : "deleted"} successfully`, "success");
+      showToast(
+        `Branch ${variable.isActive ? "restored" : "deleted"} successfully`,
+        "success"
+      );
     },
 
     onError: (error) => {
       showToast(
         error?.response?.data?.message ||
-        error.message ||
-        "Failed to delete branch",
+          error.message ||
+          "Failed to delete branch",
         "error"
       );
     },

src/services/signalRService.js

@@ -150,6 +150,9 @@ export function startSignalR(loggedUser) {
       queryClient.invalidateQueries(["serviceProjects"]);
       queryClient.invalidateQueries(["serviceProject"]);
     }
+    if (keyword === "Project_Branch") {
+      queryClient.invalidateQueries(["branches"]);
+    }
 
     if (keyword === "Service_Project_Allocation") {
       queryClient.invalidateQueries(["serviceProjectTeam"]);