src/components/Expenses/ViewExpense.jsx

@@ -1,9 +1,5 @@
-import React, { useState, useMemo } from "react";
+import React, { useState } from "react";
-import {
+import { useActionOnExpense, useExpense } from "../../hooks/useExpense";
-  useActionOnExpense,
-  useExpense,
-  useHasAnyPermission,
-} from "../../hooks/useExpense";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -11,18 +7,11 @@ import { ActionSchema } from "./ExpenseSchema";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
 import { getColorNameFromHex } from "../../utils/appUtils";
 import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { REVIEW_EXPENSE } from "../../utils/constants";
-import { useProfile } from "../../hooks/useProfile";
-import { useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
 
 const ViewExpense = ({ ExpenseId }) => {
   const { data, isLoading, isError, error } = useExpense(ExpenseId);
-  const IsReview = useHasUserPermission(REVIEW_EXPENSE);
   const [imageLoaded, setImageLoaded] = useState({});
   const { setDocumentView } = useExpenseContext();
-  const navigate = useNavigate();
   const {
     register,
     handleSubmit,
@@ -37,24 +26,6 @@ const ViewExpense = ({ ExpenseId }) => {
     },
   });
 
-  const userPermissions = useSelector(
-    (state) => state?.globalVariables?.loginUser?.featurePermissions || []
-  );
-
-  const nextStatusWithPermission = useMemo(() => {
-    if (!Array.isArray(data?.nextStatus)) return [];
-
-    return data.nextStatus.filter((status) => {
-      const permissionIds = Array.isArray(status?.permissionIds)
-        ? status.permissionIds
-        : [];
-
-      if (permissionIds.length === 0) return true;
-
-      return permissionIds.some((id) => userPermissions.includes(id));
-    });
-  }, [data, userPermissions]);
-
   const { mutate: MakeAction } = useActionOnExpense(() => reset());
 
   const onSubmit = (formData) => {
@@ -192,27 +163,12 @@ const ViewExpense = ({ ExpenseId }) => {
         <label className="form-label me-2 mb-0 fw-semibold">Description:</label>
         <div className="text-muted">{data?.description}</div>
       </div>
-      <div className="col-12 my-2 text-start">
+      <div className="col-12 my-2 text-start ">
-        <label className="form-label me-2 mb-0 fw-semibold">Attachment:</label>
+        <label className="form-label me-2 mb-0 fw-semibold">
-
+          Attachement :
-        {data?.documents?.map((doc) => {
+        </label>
-          const getIconByType = (type) => {
+        {data?.documents &&
-            if (!type) return "bx bx-file";
+          data?.documents?.map((doc) => (
-
-            if (type.includes("pdf")) return "bxs-file-pdf";
-            if (type.includes("word")) return "bxs-file-doc";
-            if (type.includes("excel") || type.includes("spreadsheet"))
-              return "bxs-file-xls";
-            if (type.includes("image")) return "bxs-file-image";
-            if (type.includes("zip") || type.includes("rar"))
-              return "bxs-file-archive";
-
-            return "bx bx-file"; // Default
-          };
-
-          const isImage = doc.contentType?.includes("image");
-
-          return (
             <div
               className="list-group-item list-group-item-action d-flex align-items-center"
               key={doc.id}
@@ -220,45 +176,59 @@ const ViewExpense = ({ ExpenseId }) => {
               <div
                 className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
                 style={{ height: "50px", width: "80px", position: "relative" }}
-                onClick={() => {
-                  if (isImage) {
-                    setDocumentView({
-                      IsOpen: true,
-                      Image: doc.preSignedUrl,
-                    });
-                  }
-                }}
               >
-                <i
+                {doc.contentType === "application/pdf" ? (
-                  className={`bx ${getIconByType(
+                  <div>
-                    doc.contentType
+                    <i
-                  )} text-primary`}
+                      className="bx bxs-file-pdf"
-                  style={{ fontSize: "45px" }}
+                      style={{ fontSize: "45px" }}
-                ></i>
+                    ></i>
+                  </div>
+                ) : (
+                  <>
+                    {!imageLoaded[doc.id] && (
+                      <div className="position-absolute text-secondary">
+                        Loading...
+                      </div>
+                    )}
+                    <img
+                      src={doc.thumbPreSignedUrl}
+                      alt={doc.fileName}
+                      className="img-fluid rounded"
+                      style={{
+                        maxHeight: "100%",
+                        maxWidth: "100%",
+                        objectFit: "cover",
+                        opacity: imageLoaded[doc.id] ? 1 : 0,
+                        transition: "opacity 0.3s ease-in-out",
+                      }}
+                      onLoad={() => handleImageLoad(doc.id)}
+                      onClick={() =>
+                        setDocumentView({
+                          IsOpen: true,
+                          Image: doc.preSignedUrl,
+                        })
+                      }
+                    />
+                  </>
+                )}
               </div>
 
               <div className="w-100">
                 <small className="mb-0 small">{doc.fileName}</small>
                 <div className="d">
-                  <a
+                  <i className="bx bx-cloud-download cursor-pointer"></i>
-                    href={doc.preSignedUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="bx bx-cloud-download cursor-pointer"
-                  />
                 </div>
               </div>
             </div>
-          );
+          ))}
-        })}
       </div>
 
       <hr className="divider my-1" />
 
-      {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
+      {Array.isArray(data.nextStatus) && data.nextStatus.length > 0 && (
         <div className="col-12 mb-3 text-start">
           <label className="form-label me-2 mb-0 fw-semibold">Comment:</label>
-
           <textarea
             className="form-control form-control-sm"
             {...register("comment")}
@@ -270,23 +240,21 @@ const ViewExpense = ({ ExpenseId }) => {
 
           <input type="hidden" {...register("selectedStatus")} />
 
-          {nextStatusWithPermission?.length > 0 && (
+          <div className="text-center flex-wrap gap-2 my-2">
-            <div className="text-center flex-wrap gap-2 my-2">
+            {data.nextStatus.map((status, index) => (
-              {nextStatusWithPermission?.map((status, index) => (
+              <button
-                <button
+                key={index}
-                  key={status.id || index}
+                type="button"
-                  type="button"
+                onClick={() => {
-                  onClick={() => {
+                  setValue("selectedStatus", status.id);
-                    setValue("selectedStatus", status.id);
+                  handleSubmit(onSubmit)();
-                    handleSubmit(onSubmit)();
+                }}
-                  }}
+                className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
-                  className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
+              >
-                >
+                {status.displayName || status.name}
-                  {status.displayName || status.name}
+              </button>
-                </button>
+            ))}
-              ))}
+          </div>
-            </div>
-          )}
         </div>
       )}
     </form>

src/hooks/useExpense.js

@@ -2,7 +2,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import ExpenseRepository from "../repositories/ExpsenseRepository";
 import showToast from "../services/toastService";
 import { queryClient } from "../layouts/AuthLayout";
-import { useSelector } from "react-redux";
 
 // -------------------Query------------------------------------------------------
 export const useExpenseList = (pageSize, pageNumber, filter) => {
@@ -197,21 +196,3 @@ export const useDeleteExpense = () => {
     },
   });
 }
-
-
-
-
-export const useHasAnyPermission = (permissionIdsInput) => {
-  const permissions = useSelector(
-    (state) => state?.profile?.permissions || []
-  );
-
-  const permissionIds = Array.isArray(permissionIdsInput)
-    ? permissionIdsInput
-    : [];
-
-  // No permission needed
-  if (permissionIds.length === 0) return true;
-
-  return permissionIds.some((id) => permissions.includes(id));
-};

src/pages/Expense/ExpensePage.jsx

@@ -32,8 +32,6 @@ import {
   defaultFilter,
   SearchSchema,
 } from "../../components/Expenses/ExpenseSchema";
-import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import { CREATE_EXEPENSE } from "../../utils/constants";
 
 const SelectDropdown = ({
   label,
@@ -99,7 +97,6 @@ export const useExpenseContext = () => useContext(ExpenseContext);
 const ExpensePage = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [filters,setFilter] = useState()
-  const IsCreatedAble = useHasUserPermission(CREATE_EXEPENSE)
   const dropdownRef = useRef(null);
   const shouldCloseOnOutsideClick = useRef(false);
   const selectedProjectId = useSelector(
@@ -351,8 +348,7 @@ const setDateRange = ({ startDate, endDate }) => {
                 </div>
               </div>
               <div className="col-7 col-sm-8 text-end gap-2">
-                {IsCreatedAble && (
+                <button
-                  <button
                   type="button"
                   data-bs-toggle="tooltip"
                   data-bs-offset="0,8"
@@ -369,8 +365,6 @@ const setDateRange = ({ startDate, endDate }) => {
                 >
                   <i className="bx bx-plus fs-4 text-white"></i>
                 </button>
-                )}
-               
               </div>
             </div>
           </div>