handle view documents inside expense

src/components/Expenses/ViewExpense.jsx

@@ -9,7 +9,11 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
-import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
+import {
+  getColorNameFromHex,
+  getIconByFileType,
+  localToUtc,
+} from "../../utils/appUtils";
 import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import {
@@ -301,15 +305,15 @@ const ViewExpense = ({ ExpenseId }) => {
 
         <div className="d-flex flex-wrap gap-2">
           {data?.documents?.map((doc) => {
-            const isImage = doc.contentType?.includes("image");
+            const isImage = doc.contentType?.startsWith("image");
 
             return (
               <div
                 key={doc.documentId}
-                className="border rounded  hover-scale p-2 d-flex flex-column align-items-center"
+                className="border rounded hover-scale p-2 d-flex flex-column align-items-center"
                 style={{
                   width: "80px",
-                  cursor: isImage ? "pointer" : "default",
+                  cursor: "pointer",
                 }}
                 onClick={() => {
                   if (isImage) {
@@ -317,6 +321,8 @@ const ViewExpense = ({ ExpenseId }) => {
                       IsOpen: true,
                       Image: doc.preSignedUrl,
                     });
+                  } else {
+                    window.open(doc.preSignedUrl, "_blank");
                   }
                 }}
               >
@@ -332,7 +338,7 @@ const ViewExpense = ({ ExpenseId }) => {
                 </small>
               </div>
             );
-          })}
+          }) ?? "No Attachment"}
         </div>
       </div>
 
@@ -418,7 +424,9 @@ const ViewExpense = ({ ExpenseId }) => {
             {((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
               (IsRejectedExpense && isCreatedBy)) && (
               <>
-                <Label className="form-label me-2 mb-0" required>Comment</Label>
+                <Label className="form-label me-2 mb-0" required>
+                  Comment
+                </Label>
                 <textarea
                   className="form-control form-control-sm"
                   {...register("comment")}
@@ -440,7 +448,7 @@ const ViewExpense = ({ ExpenseId }) => {
                       key={status.id || index}
                       type="button"
                       onClick={() => {
-                      setClickedStatusId(status.id);
+                        setClickedStatusId(status.id);
                         setValue("statusId", status.id);
                         handleSubmit(onSubmit)();
                       }}