added get icon for file by use uploaded

src/components/Expenses/Filelist.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { formatFileSize, getIconByFileType } from "../../utils/appUtils";
+
+const Filelist = ({ files, removeFile, expenseToEdit }) => {
+  return (
+    <div className="d-block">
+      {files
+        .filter((file) => {
+          if (expenseToEdit) {
+            return file.isActive;
+          }
+          return true;
+        })
+        .map((file, idx) => (
+          <div className="col-12 col-sm-6 col-md-4 col-lg-8 bg-white shadow-sm rounded p-2 m-2">
+            <div className="row align-items-center">
+              {/* File icon and info */}
+              <div className="col-10 d-flex align-items-center gap-2">
+                <i
+                  className={`bx ${getIconByFileType(
+                    file?.contentType
+                  )} fs-3`}
+                  style={{ minWidth: "30px" }}
+                ></i>
+
+                <div className="d-flex flex-column text-truncate">
+                  <span className="fw-medium small text-truncate">
+                    {file.fileName}
+                  </span>
+                  <span className="text-body-secondary small">
+                    {file.fileSize ? formatFileSize(file.fileSize) : ""}
+                  </span>
+                </div>
+              </div>
+
+              <div className="col-2 text-end">
+                <i
+                  className="bx bx-trash fs-4 cursor-pointer text-danger bx-sm  "
+                  role="button"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    removeFile(expenseToEdit ? file.documentId : idx);
+                  }}
+                ></i>
+              </div>
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+};
+
+export default Filelist;

src/components/Expenses/ManageExpense.jsx

@@ -29,6 +29,7 @@ import DatePicker from "../common/DatePicker";
 import ErrorPage from "../../pages/ErrorPage";
 import Label from "../common/Label";
 import EmployeeSearchInput from "../common/EmployeeSearchInput";
+import Filelist from "./Filelist";
 
 const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
   const {
@@ -330,7 +331,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               control={control}
               name="paidById"
               projectId={null}
-              forAll={expenseToEdit ? true :false}
+              forAll={expenseToEdit ? true : false}
             />
           </div>
         </div>
@@ -342,6 +343,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             </Label>
             <DatePicker
               name="transactionDate"
+              className="w-100"
               control={control}
               maxDate={new Date()}
             />
@@ -512,42 +514,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
                 {errors.billAttachments.message}
               </small>
             )}
-            {files.length > 0 && (
+            {files.length > 0 && <Filelist files={files} removeFile={removeFile} expenseToEdit={expenseToEdit}/>}
-              <div className="d-block">
-                {files
-                  .filter((file) => {
-                    if (expenseToEdit) {
-                      return file.isActive;
-                    }
-                    return true;
-                  })
-                  .map((file, idx) => (
-                    <a
-                      key={idx}
-                      className="d-flex justify-content-between text-start p-1"
-                      href={file.preSignedUrl || "#"}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <div>
-                        <span className="mb-0 text-secondary small d-block">
-                          {file.fileName}
-                        </span>
-                        <span className="text-body-secondary small d-block">
-                          {file.fileSize ? formatFileSize(file.fileSize) : ""}
-                        </span>
-                      </div>
-                      <i
-                        className="bx bx-trash bx-sm cursor-pointer text-danger"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          removeFile(expenseToEdit ? file.documentId : idx);
-                        }}
-                      ></i>
-                    </a>
-                  ))}
-              </div>
-            )}
 
             {Array.isArray(errors.billAttachments) &&
               errors.billAttachments.map((fileError, index) => (

src/utils/appUtils.js

@@ -51,17 +51,29 @@ export const useDebounce = (value, delay = 500) => {
 export const getIconByFileType = (type = "") => {
   const lower = type.toLowerCase();
 
-  if (lower === "application/pdf") return "bxs-file-pdf";
+  const map = [
-  if (lower.includes("word")) return "bxs-file-doc";
+    { match: "pdf", icon: "bxs-file-pdf", color: "text-danger" },
-  if (lower.includes("excel") || lower.includes("spreadsheet"))
+    { match: "word", icon: "bxs-file-doc", color: "text-primary" },
-    return "bxs-file-xls";
+    { match: "excel", icon: "bxs-file-xls", color: "text-success" },
-  if (lower === "image/png") return "bxs-file-png";
+    { match: "spreadsheet", icon: "bxs-file-xls", color: "text-success" },
-  if (lower === "image/jpeg" || lower === "image/jpg") return "bxs-file-jpg";
+    { match: "zip", icon: "bxs-file-archive", color: "text-warning" },
-  if (lower.includes("zip") || lower.includes("rar")) return "bxs-file-archive";
+    { match: "rar", icon: "bxs-file-archive", color: "text-warning" },
+    { match: "png", icon: "bxs-file-png", color: "text-info" },
+    { match: "jpg", icon: "bxs-file-jpg", color: "text-info" },
+    { match: "jpeg", icon: "bxs-file-jpg", color: "text-info" },
+    { match: "image", icon: "bxs-file-image", color: "text-info" },
+  ];
 
-  return "bx bx-file";
+  // Find first match
+  const found = map.find((m) => lower.includes(m.match));
+
+  // Default if nothing matched
+  return found
+    ? `bx ${found.icon} ${found.color}`
+    : "bx bx-file text-secondary";
 };
 
+
 export const normalizeAllowedContentTypes = (allowedContentType) => {
   if (!allowedContentType) return [];
   if (Array.isArray(allowedContentType)) return allowedContentType;