src/components/Expenses/ViewExpense.jsx

@@ -163,12 +163,27 @@ 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">
+        <label className="form-label me-2 mb-0 fw-semibold">Attachment:</label>
-          Attachement :
+
-        </label>
+        {data?.documents?.map((doc) => {
-        {data?.documents &&
+          const getIconByType = (type) => {
-          data?.documents?.map((doc) => (
+            if (!type) return "bx bx-file";
+
+            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";
+          };
+
+          const isImage = doc.contentType?.includes("image");
+
+          return (
             <div
               className="list-group-item list-group-item-action d-flex align-items-center"
               key={doc.id}
@@ -176,52 +191,38 @@ 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={() => {
-                {doc.contentType === "application/pdf" ? (
+                  if (isImage) {
-                  <div>
-                    <i
-                      className="bx bxs-file-pdf"
-                      style={{ fontSize: "45px" }}
-                    ></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,
-                        })
+                    });
                   }
-                    />
+                }}
-                  </>
+              >
-                )}
+                <i
+                  className={`bx ${getIconByType(
+                    doc.contentType
+                  )} text-primary`}
+                  style={{ fontSize: "45px" }}
+                ></i>
               </div>
 
               <div className="w-100">
                 <small className="mb-0 small">{doc.fileName}</small>
                 <div className="d">
-                  <i className="bx bx-cloud-download cursor-pointer"></i>
+                  <a
+                    href={doc.preSignedUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="bx bx-cloud-download cursor-pointer"
+                    title="View PDF"
+                  />
                 </div>
               </div>
             </div>
-          ))}
+          );
+        })}
       </div>
 
       <hr className="divider my-1" />

src/pages/Expense/ExpensePage.jsx

@@ -92,7 +92,13 @@ const SelectDropdown = ({
 };
 
 export const ExpenseContext = createContext();
-export const useExpenseContext = () => useContext(ExpenseContext);
+export const useExpenseContext = () => {
+  const context = useContext(ExpenseContext);
+  if (!context) {
+    throw new Error("useExpenseContext must be used within an ExpenseProvider");
+  }
+  return context;
+}
 
 const ExpensePage = () => {
   const [isOpen, setIsOpen] = useState(false);