index.html

@@ -27,6 +27,7 @@
   <link rel="stylesheet" href="/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
   <link rel="stylesheet" href="/assets/css/core-extend.css" />
   <link rel="stylesheet" href="/assets/css/default.css" />
+  <link rel="stylesheet" href="/assets/css/skeleton.css" />
 
   <link rel="stylesheet" href="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
 

public/assets/css/skeleton.css

@@ -0,0 +1,32 @@
+/* skeleton.css */
+.skeleton {
+  background-color: #e2e8f0;  /* Tailwind's gray-300 */
+  border-radius: 0.25rem;     /* Tailwind's rounded */
+  position: relative;
+  overflow: hidden;
+}
+
+.skeleton::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0; left: -150px;
+  height: 100%;
+  width: 150px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.4),
+    transparent
+  );
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    left: -150px;
+  }
+  100% {
+    left: 100%;
+  }
+}

src/components/Expenses/ExpenseList.jsx

@@ -5,9 +5,11 @@ import { useExpenseContext } from "../../pages/Expense/ExpensePage";
 import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
 import Pagination from "../common/Pagination";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
+import { AppColorconfig, getColorNameFromHex } from "../../utils/appUtils";
+import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
 
 const ExpenseList = () => {
-  const { setViewExpense } = useExpenseContext();
+  const { setViewExpense,setManageExpenseModal } = useExpenseContext();
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;
 
@@ -21,9 +23,10 @@ const ExpenseList = () => {
   };
   
 
-  const { data, isLoading, isError,isInitialLoading } = useExpenseList(2, currentPage, filter);
+  const { data, isLoading, isError,isInitialLoading,error,isFetching } = useExpenseList(10, currentPage, filter);
-  if (isInitialLoading) return <div>Loading...</div>;
+  if (isInitialLoading ) return <ExpenseTableSkeleton/>;
-  const items = data.data ?? [];
+  if (isError) return <div>{error}</div>;
+  const items = data?.data ?? [];
   const totalPages = data?.totalPages ?? 1;
   const hasMore = currentPage < totalPages;
 
@@ -125,7 +128,7 @@ const ExpenseList = () => {
               </tr>
             </thead>
             <tbody>
-              {isLoading && (
+              {/* {isLoading && (
                 <tr>
                   <td colSpan={7} className="text-center py-3">
                     Loading...
@@ -139,7 +142,7 @@ const ExpenseList = () => {
                     No expenses found.
                   </td>
                 </tr>
-              )}
+              )} */}
 
               {!isInitialLoading &&
                 items.map((expense) => (
@@ -170,19 +173,13 @@ const ExpenseList = () => {
                         </span>
                       </div>
                     </td>
-                    <td className="d-none d-md-table-cell text-end"><i className='bx bx-rupee b-xs'></i>{expense.amount}</td>
+                    <td className="d-none d-md-table-cell text-end"><i className='bx bx-rupee b-xs'></i>{expense?.amount}</td>
                     <td>
                       <span
-                        style={{
+                      className={`badge bg-label-${getColorNameFromHex(expense.status.color) || 'secondary'}`}
-                          backgroundColor: expense.status?.color || "#e2e3e5",
-                          color: "#ffff",
-                          padding: "2px 8px",
-                          borderRadius: "0.375rem",
-                          fontSize: "0.75rem",
-                          fontWeight: 500,
-                        }}
                       >
-                        {expense.status?.name || "Unknown"}
+                       
+                        {expense.status?.displayName   || "Unknown"}
                       </span>
                     </td>
                     <td >
@@ -197,14 +194,12 @@ const ExpenseList = () => {
                       </span>
                       <span
                         className="cursor-pointer"
-                       
+                       onClick={()=>setManageExpenseModal({IsOpen:true,expenseId:expense.id})}
                       >
                        <i className='bx bx-edit bx-sm text-secondary'></i>
                       </span> 
-                      
                        <span
                         className="cursor-pointer"
-                       
                       >
                        <i className='bx bx-trash bx-sm text-danger' ></i>
                       </span>

src/components/Expenses/ExpenseSchema.js

@@ -35,14 +35,16 @@ export const ExpenseSchema = (expenseTypes) => {
         .array(
           z.object({
             fileName: z.string().min(1, { message: "Filename is required" }),
-            base64Data: z.string().min(1, { message: "File data is required" }),
+            base64Data: z.string().nullable(),
             contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
               message: "Only PDF, PNG, JPG, or JPEG files are allowed",
             }),
+            documentId:z.string().optional(),
             fileSize: z.number().max(MAX_FILE_SIZE, {
               message: "File size must be less than or equal to 5MB",
             }),
             description: z.string().optional(),
+            isActive:z.boolean().default(true)
           })
         )
         .nonempty({ message: "At least one file attachment is required" }),
@@ -68,6 +70,21 @@ export const ExpenseSchema = (expenseTypes) => {
     });
 };
 
+export const defaultExpense = {
+      projectId: "",
+      expensesTypeId: "",
+      paymentModeId: "",
+      paidById: "",
+      transactionDate: "",
+      transactionId: "",
+      description: "",
+      location: "",
+      supplerName: "",
+      amount: "",
+      noOfPersons: "",
+      billAttachments: [],
+    }
+
 export const ActionSchema = z.object({
   comment : z.string().min(1,{message:"Please leave comment"}),
    selectedStatus: z.string().min(1, { message: "Please select a status" }),

src/components/Expenses/ExpenseSkeleton.jsx

@@ -0,0 +1,218 @@
+import React from "react";
+
+
+const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
+  <div
+    className={`skeleton mb-2 ${className}`}
+    style={{
+      height,
+      width,
+    }}
+  ></div>
+);
+
+
+const ExpenseSkeleton = () => {
+  return (
+    <div className="container p-3">
+<div className="d-flex justify-content-center">
+  <SkeletonLine height={20} width="200px" />
+</div>
+
+      {[...Array(5)].map((_, idx) => (
+        <div className="row my-2" key={idx}>
+          <div className="col-md-6">
+            <SkeletonLine />
+          </div>
+          <div className="col-md-6">
+            <SkeletonLine />
+          </div>
+        </div>
+      ))}
+
+      <div className="row my-2">
+        <div className="col-md-12">
+          <SkeletonLine height={60} />
+        </div>
+      </div>
+
+      <div className="row my-2">
+        <div className="col-md-12">
+          <SkeletonLine height={120} />
+        </div>
+      </div>
+
+      <div className="d-flex justify-content-center gap-2 mt-3">
+        <SkeletonLine height={35} width="100px" />
+        <SkeletonLine height={35} width="100px" />
+      </div>
+    </div>
+  );
+};
+
+export default ExpenseSkeleton;
+
+
+
+
+export const ExpenseDetailsSkeleton = () => {
+  return (
+      <div className="container px-3">
+      <div className="row mb-3">
+        <div className="d-flex justify-content-center mb-3">
+          <SkeletonLine height={20} width="180px" className="mb-2" />
+        </div>
+
+        {[...Array(3)].map((_, i) => (
+          <div className="col-12 col-md-4 mb-3" key={`row-1-${i}`}>
+            <SkeletonLine height={14}  className="mb-1" />
+            <SkeletonLine />
+          </div>
+        ))}
+
+        {[...Array(6)].map((_, i) => (
+          <div className="col-12 col-md-4 mb-3" key={`row-2-${i}`}>
+            <SkeletonLine height={14} className="mb-1" />
+            <SkeletonLine />
+          </div>
+        ))}
+
+     
+
+        <div className="col-12 my-2">
+          <SkeletonLine height={14} width="100px" className="mb-2" />
+          {[...Array(2)].map((_, i) => (
+            <div
+              className="list-group-item d-flex align-items-center mb-2"
+              key={i}
+            >
+              <div
+                className="rounded me-2"
+                style={{
+                  height: "50px",
+                  width: "80px",
+                  backgroundColor: "#dcdcdc",
+                  borderRadius: "4px",
+                }}
+              />
+              <div className="w-100">
+                <SkeletonLine height={14} width="60%" className="mb-1" />
+                <SkeletonLine height={14} width="20%" />
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <hr className="divider my-1" />
+
+        <div className="col-12 mb-3">
+          <SkeletonLine height={14} width="80px" className="mb-1" />
+          <SkeletonLine height={60} className="mb-2" />
+          <div className="d-flex gap-2 flex-wrap">
+            {[...Array(2)].map((_, i) => (
+              <SkeletonLine
+                key={i}
+                height={30}
+                width="100px"
+                className="rounded"
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+const SkeletonCell = ({ width = "100%", height = 20, className = "" }) => (
+  <div
+    className={`skeleton ${className}`}
+    style={{
+      width,
+      height,
+      borderRadius: 4,
+    }}
+  />
+);
+export const ExpenseTableSkeleton = ({ rows = 5 }) => {
+  return (
+    <table
+      className="card-body table border-top dataTable no-footer dtr-column text-nowrap"
+      aria-describedby="DataTables_Table_0_info"
+      id="horizontal-example"
+    >
+      <thead>
+        <tr>
+          <th colSpan={2}>
+            <div className="text-start ms-6">Date Time</div>
+          </th>
+          <th className="d-none d-sm-table-cell">
+            <div className="text-start ms-5">Expense Type</div>
+          </th>
+          <th className="d-none d-sm-table-cell">
+            <div className="text-start ms-5">Payment Mode</div>
+          </th>
+          <th className="d-none d-sm-table-cell">Paid By</th>
+          <th className="d-none d-md-table-cell">Amount</th>
+          <th>Status</th>
+          <th>Action</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {[...Array(rows)].map((_, idx) => (
+          <tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
+            {/* Date Time colSpan=2 */}
+            <td colSpan={2} className="sorting_1">
+              <div className="d-flex justify-content-start align-items-center user-name ms-6">
+                <SkeletonCell width="120px" height={18} />
+              </div>
+            </td>
+
+            {/* Expense Type */}
+            <td className="text-start d-none d-sm-table-cell ms-5">
+              <SkeletonCell width="90px" height={16} />
+            </td>
+
+            {/* Payment Mode */}
+            <td className="text-start d-none d-sm-table-cell ms-5">
+              <SkeletonCell width="90px" height={16} />
+            </td>
+
+            {/* Paid By (Avatar + name) */}
+            <td className="text-start d-none d-sm-table-cell ms-5">
+              <div className="d-flex align-items-center gap-2">
+                <SkeletonCell width="30px" height={30} className="rounded-circle" />
+                <SkeletonCell width="80px" height={16} />
+              </div>
+            </td>
+
+            {/* Amount */}
+            <td className="d-none d-md-table-cell text-end">
+              <SkeletonCell width="60px" height={16} />
+            </td>
+
+            {/* Status */}
+            <td>
+              <SkeletonCell width="80px" height={22} className="rounded" />
+            </td>
+
+            {/* Action (icons) */}
+            <td>
+              <div className="d-flex justify-content-center align-items-center gap-2">
+                {[...Array(3)].map((__, i) => (
+                  <SkeletonCell
+                    key={i}
+                    width={20}
+                    height={20}
+                    className="rounded"
+                    style={{ display: "inline-block" }}
+                  />
+                ))}
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

src/components/Expenses/ManageExpense.jsx

@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { ExpenseSchema } from "./ExpenseSchema";
+import { defaultExpense, ExpenseSchema } from "./ExpenseSchema";
 import { formatFileSize } from "../../utils/appUtils";
 import { useProjectName } from "../../hooks/useProjects";
 import { useDispatch, useSelector } from "react-redux";
@@ -16,9 +16,19 @@ import {
   useEmployeesByProject,
 } from "../../hooks/useEmployees";
 import Avatar from "../common/Avatar";
-import { useCreateExpnse } from "../../hooks/useExpense";
+import {
+  useCreateExpnse,
+  useExpense,
+  useUpdateExpense,
+} from "../../hooks/useExpense";
+import ExpenseSkeleton from "./ExpenseSkeleton";
 
-const CreateExpense = ({closeModal}) => {
+const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
+  const {
+    data,
+    isLoading,
+    error: ExpenseErrorLoad,
+  } = useExpense(expenseToEdit);
   const [ExpenseType, setExpenseType] = useState();
   const dispatch = useDispatch();
   const {
@@ -36,20 +46,7 @@ const CreateExpense = ({closeModal}) => {
     formState: { errors },
   } = useForm({
     resolver: zodResolver(schema),
-    defaultValues: {
+    defaultValues: defaultExpense,
-      projectId: "",
-      expensesTypeId: "",
-      paymentModeId: "",
-      paidById: "",
-      transactionDate: "",
-      transactionId: "",
-      description: "",
-      location: "",
-      supplerName: "",
-      amount: "",
-      noOfPersons: "",
-      billAttachments: [],
-    },
   });
 
   const selectedproject = watch("projectId");
@@ -90,6 +87,7 @@ const CreateExpense = ({closeModal}) => {
           contentType: file.type,
           fileSize: file.size,
           description: "",
+          isActive:true
         };
       })
     );
@@ -115,35 +113,95 @@ const CreateExpense = ({closeModal}) => {
     new Promise((resolve, reject) => {
       const reader = new FileReader();
       reader.readAsDataURL(file);
-      reader.onload = () => resolve(reader.result.split(",")[1]); // base64 only, no prefix
+      reader.onload = () => resolve(reader.result.split(",")[1]);
       reader.onerror = (error) => reject(error);
     });
   const removeFile = (index) => {
-    const newFiles = files.filter((_, i) => i !== index);
+    if (expenseToEdit) {
-    setValue("billAttachments", newFiles, { shouldValidate: true });
+      const newFiles = files.map((file, i) => {
+        if (file.documentId !== index) return file;
+        return {
+          ...file,
+          isActive: false,
+        };
+      });
+      setValue("billAttachments", newFiles, { shouldValidate: true });
+    } else {
+      const newFiles = files.filter((_, i) => i !== index);
+      setValue("billAttachments", newFiles, { shouldValidate: true });
+    }
   };
 
-  const {mutate:CreateExpense,isPending} = useCreateExpnse(()=>{
+  useEffect(() => {
+    if (expenseToEdit && data) {
+      reset({
+        projectId: data.project.id || "",
+        expensesTypeId: data.expensesType.id || "",
+        paymentModeId: data.paymentMode.id || "",
+        paidById: data.paidBy.id || "",
+        transactionDate: data.transactionDate?.slice(0, 10) || "",
+        transactionId: data.transactionId || "",
+        description: data.description || "",
+        location: data.location || "",
+        supplerName: data.supplerName || "",
+        amount: data.amount || "",
+        noOfPersons: data.noOfPersons || "",
+        billAttachments: data.documents
+          ? data.documents.map((doc) => ({
+              fileName: doc.fileName,
+              base64Data: null,
+              contentType: doc.contentType,
+              documentId: doc.documentId,
+              fileSize: 0,
+              description: "",
+              preSignedUrl: doc.preSignedUrl,
+              isActive: doc.isActive || true,
+            }))
+          : [],
+      });
+    }
+  }, [data, reset, employees]);
+  const { mutate: ExpenseUpdate, isPending } = useUpdateExpense(() =>
     handleClose()
-  })
+  );
+  const { mutate: CreateExpense, isPending: createPending } = useCreateExpnse(
+    () => {
+      handleClose();
+    }
+  );
   const onSubmit = (payload) => {
-    console.log("Form Data:", payload);
+    if (expenseToEdit) {
-
+      const editPayload = { ...payload, id: data.id };
-    CreateExpense(payload)
+      ExpenseUpdate({ id: data.id, payload: editPayload });
+    } else {
+      CreateExpense(payload);
+    }
   };
   const ExpenseTypeId = watch("expensesTypeId");
 
   useEffect(() => {
     setExpenseType(ExpenseTypes?.find((type) => type.id === ExpenseTypeId));
+    return () => reset(defaultExpense);
   }, [ExpenseTypeId]);
 
-  const handleClose =()=>{
+  const handleClose = () => {
-    reset()
+    reset();
-    closeModal()
+    closeModal();
-  }
+  };
+  if (
+    EmpLoading ||
+    StatusLoadding ||
+    projectLoading ||
+    ExpenseLoading ||
+    isLoading
+  )
+    return <ExpenseSkeleton />;
+
   return (
     <div className="container p-3">
-      <h5 className="m-0">Create New Expense</h5>
+      <h5 className="m-0">
+        {expenseToEdit ? "Update Expense " : "Create New Expense"}
+      </h5>
       <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
         <div className="row my-2">
           <div className="col-md-6">
@@ -248,16 +306,13 @@ const CreateExpense = ({closeModal}) => {
               ) : (
                 employees?.map((emp) => (
                   <option key={emp.id} value={emp.id}>
-                   
                     {`${emp.firstName} ${emp.lastName} `}
                   </option>
                 ))
               )}
             </select>
-                {errors.paidById && (
+            {errors.paidById && (
-              <small className="danger-text">
+              <small className="danger-text">{errors.paidById.message}</small>
-                {errors.paidById.message}
-              </small>
             )}
           </div>
         </div>
@@ -392,9 +447,7 @@ const CreateExpense = ({closeModal}) => {
 
         <div className="row my-2">
           <div className="col-md-12">
-            <label className="form-label ">
+            <label className="form-label ">Upload Bill </label>
-              Upload Bill{" "}
-            </label>
 
             <div
               className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
@@ -425,35 +478,52 @@ const CreateExpense = ({closeModal}) => {
                 {errors.billAttachments.message}
               </small>
             )}
-
             {files.length > 0 && (
               <div className="d-block">
-                {files.map((file, idx) => (
+                {files
-                  <a
+                  .filter((file) => {
-                    key={idx}
+                    if (expenseToEdit) {
-                    class="d-flex justify-content-between text-start p-1"
+                      return file.isActive; 
-                  >
+                    }
-                    <div>
+                    return true;
-                      <span className="mb-0 text-secondary small d-block">
+                  })
-                        {file.fileName}
+                  .map((file, idx) => (
-                      </span>
+                    <a
-                      <span className="text-body-secondary small d-block">
+                      key={idx}
-                        {formatFileSize(file.fileSize)}
+                      className="d-flex justify-content-between text-start p-1"
-                      </span>
+                      href={file.preSignedUrl || "#"}
-                    </div>
+                      target="_blank"
-                    <i
+                      rel="noopener noreferrer"
-                      className="bx bx-trash bx-sm cursor-pointer text-danger"
+                    >
-                      onClick={() => removeFile(idx)}
+                      <div>
-                    ></i>
+                        <span className="mb-0 text-secondary small d-block">
-                  </a>
+                          {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) => (
                 <div key={index} className="danger-text small mt-1">
-                  {fileError?.fileSize?.message ||
+                  {
-                    fileError?.contentType?.message}
+                    (fileError?.fileSize?.message ||
+                      fileError?.contentType?.message ||
+                      fileError?.base64Data?.message,
+                    fileError?.documentId.message)
+                  }
                 </div>
               ))}
           </div>
@@ -461,10 +531,19 @@ const CreateExpense = ({closeModal}) => {
 
         <div className="d-flex justify-content-center gap-2">
           {" "}
-          <button type="submit" className="btn btn-primary btn-sm mt-3" disabled={isPending}>
+          <button
-            {isPending ? "Please Wait...":"Submit"}
+            type="submit"
+            className="btn btn-primary btn-sm mt-3"
+            disabled={isPending}
+          >
+            {isPending ? "Please Wait..." : expenseToEdit ? "Update" : "Submit"}
           </button>
-          <button type="reset" onClick={handleClose} className="btn btn-secondary btn-sm mt-3">
+          <button
+            type="reset"
+            disabled={isPending || createPending}
+            onClick={handleClose}
+            className="btn btn-secondary btn-sm mt-3"
+          >
             Cancel
           </button>
         </div>
@@ -473,5 +552,4 @@ const CreateExpense = ({closeModal}) => {
   );
 };
 
-export default CreateExpense;
+export default ManageExpense;
-

src/components/Expenses/ViewExpense.jsx

@@ -5,12 +5,13 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ActionSchema } from "./ExpenseSchema";
 import { useExpenseContext } from "../../pages/Expense/ExpensePage";
+import { getColorNameFromHex } from "../../utils/appUtils";
+import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
 
 const ViewExpense = ({ ExpenseId }) => {
   const { data, isLoading, isError, error } = useExpense(ExpenseId);
   const [imageLoaded, setImageLoaded] = useState({});
   const { setDocumentView } = useExpenseContext();
-
   const {
     register,
     handleSubmit,
@@ -36,16 +37,7 @@ const ViewExpense = ({ ExpenseId }) => {
     MakeAction(Payload);
   };
 
-  if (isLoading) {
+  if (isLoading) return <ExpenseDetailsSkeleton/>
-    return (
-      <div
-        className="d-flex justify-content-center align-items-center"
-        style={{ minHeight: "300px" }}
-      >
-        <div className="fs-5 text-muted">Loading...</div>
-      </div>
-    );
-  }
   const handleImageLoad = (id) => {
     setImageLoaded((prev) => ({ ...prev, [id]: true }));
   };
@@ -59,7 +51,7 @@ const ViewExpense = ({ ExpenseId }) => {
         </div>
 
         {/* Expense Info Rows */}
-        <div className="col-12 col-sm-6 col-md-4 mb-3">
+        <div className="col-12  col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Transaction Date :
@@ -70,7 +62,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Expense Type :
@@ -79,7 +71,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Supplier :
@@ -88,14 +80,14 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">Amount :</label>
             <div className="text-muted">₹ {data.amount}</div>
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Payment Mode :
@@ -104,7 +96,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Paid By :
@@ -115,78 +107,72 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+          <div className="col-12 text-start col-md-4 mb-3">
-          <div className="d-flex align-items-center">
             <label className="form-label me-2 mb-0 fw-semibold">Status :</label>
-            <span
+                
-              className="badge"
+            <span  className={`badge bg-label-${getColorNameFromHex(data?.status?.color) || 'secondary'}`}>
-              style={{ backgroundColor: data.status.color }}
+              {data?.status?.displayName}
-            >
-              {data.status.displayName}
             </span>
           </div>
-        </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+          <div className="col-12 text-start d-flex  col-md-4 mb-3">
-          <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Pre-Approved :
             </label>
             <div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
           </div>
-        </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Project :
             </label>
-            <div className="text-muted text-start">{data.project.name}</div>
+            <div className="text-muted text-start">{data?.project?.name}</div>
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Created By :
             </label>
             <div className="text-muted">
-              {data.createdBy.firstName} {data.createdBy.lastName}
+              {data?.createdBy?.firstName} {data?.createdBy?.lastName}
             </div>
           </div>
         </div>
 
-        <div className="col-12  col-sm-6 col-md-4 mb-3">
+        <div className="col-12   col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Created At :
             </label>
             <div className="text-muted">
-              {formatUTCToLocalTime(data.createdAt, true)}
+              {formatUTCToLocalTime(data?.createdAt, true)}
             </div>
           </div>
         </div>
-      </div>
+        </div>
 
       <div className="text-start">
         <label className="form-label me-2 mb-0 fw-semibold">Description:</label>
-        <div className="text-muted">{data.description}</div>
+        <div className="text-muted">{data?.description}</div>
       </div>
       <div className="col-12 my-2 text-start ">
         <label className="form-label me-2 mb-0 fw-semibold">
           Attachement :
         </label>
-        {data.documents?.map((doc) => (
+        {data?.documents && data?.documents?.map((doc) => (
-          <a
+          <div
             className="list-group-item list-group-item-action d-flex align-items-center"
             key={doc.id}
           >
             <div
-              className="rounded me-3 d-flex align-items-center justify-content-center"
+              className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
               style={{ height: "50px", width: "80px", position: "relative" }}
             >
               {doc.contentType === "application/pdf" ? (
-                <i className="bx bxs-file-pdf"></i>
+                <div><i className="bx bxs-file-pdf" style={{fontSize:"45px"}}></i></div>
               ) : (
                 <>
                   {!imageLoaded[doc.id] && (
@@ -194,7 +180,6 @@ const ViewExpense = ({ ExpenseId }) => {
                       Loading...
                     </div>
                   )}
-
                   <img
                     src={doc.thumbPreSignedUrl}
                     alt={doc.fileName}
@@ -216,12 +201,12 @@ const ViewExpense = ({ ExpenseId }) => {
             </div>
 
             <div className="w-100">
-              <p className="mb-0">{doc.fileName}</p>
+              <small className="mb-0 small">{doc.fileName}</small>
               <div className="d">
                 <i className="bx bx-cloud-download cursor-pointer"></i>
               </div>
             </div>
-          </a>
+          </div>
         ))}
       </div>
 

src/hooks/useExpense.js

@@ -16,18 +16,16 @@ export const useExpenseList = (pageSize, pageNumber, filter) => {
 };
 
 export const useExpense = (ExpenseId) => {
-
-   console.log("ExpenseId:", ExpenseId, "Enabled:", ExpenseId !== undefined && ExpenseId !== null);
   return useQuery({
     queryKey: ["Expense", ExpenseId],
-    queryFn: async () => await ExpenseRepository.GetExpenseDetails(ExpenseId).then(
+    queryFn: async () =>
+      await ExpenseRepository.GetExpenseDetails(ExpenseId).then(
         (res) => res.data
       ),
     enabled: !!ExpenseId,
   });
 };
 
-
 // ---------------------------Mutation---------------------------------------------
 
 export const useCreateExpnse = (onSuccessCallBack) => {
@@ -37,8 +35,8 @@ export const useCreateExpnse = (onSuccessCallBack) => {
       await ExpenseRepository.CreateExpense(payload);
     },
     onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["Expenses"] });
       showToast("Expense Created Successfully", "success");
-      queryClient.invalidateQueries({ queryKey: ["expenses"] });
       if (onSuccessCallBack) onSuccessCallBack();
     },
     onError: (error) => {
@@ -50,6 +48,68 @@ export const useCreateExpnse = (onSuccessCallBack) => {
   });
 };
 
+export const useUpdateExpense = (onSuccessCallBack) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id, payload }) => {
+      const response = await ExpenseRepository.UpdateExpense(id, payload);
+      return response.data;
+    },
+    onSuccess: (updatedExpense, variables) => {
+      // queryClient.setQueriesData(
+      //   {queryKey:['expenses'],exact:true},
+      //   (oldData) => {
+      //     if (!oldData || !oldData.data) return oldData;
+
+      //     const updatedList = oldData.data.map((expense) => {
+      //       if (expense.id !== variables.id) return expense;
+
+      //       return {
+      //         ...expense,
+      //         project:
+      //           expense.project.id !== updatedExpense.project.id
+      //             ? updatedExpense.project
+      //             : expense.project,
+      //         expensesType:
+      //           expense.expensesType.id !== updatedExpense.expensesType.id
+      //             ? updatedExpense.expensesType
+      //             : expense.expensesType,
+      //         paymentMode:
+      //           expense.paymentMode.id !== updatedExpense.paymentMode.id
+      //             ? updatedExpense.paymentMode
+      //             : expense.paymentMode,
+      //         paidBy:
+      //           expense.paidBy.id !== updatedExpense.paidBy.id
+      //             ? updatedExpense.paidBy
+      //             : expense.paidBy,
+      //         createdBy:
+      //           expense.createdBy.id !== updatedExpense.createdBy.id
+      //             ? updatedExpense.createdBy
+      //             : expense.createdBy,
+      //         createdAt: updatedExpense.createdAt,
+      //         status: updatedExpense.status,
+      //         nextStatus: updatedExpense.nextStatus,
+      //         preApproved: updatedExpense.preApproved,
+      //         transactionDate: updatedExpense.transactionDate,
+      //         amount: updatedExpense.amount,
+      //       };
+      //     });
+
+      //     return {
+      //       ...oldData,
+      //       data: updatedList,
+      //     };
+      //   }
+      // );
+      queryClient.removeQueries({queryKey:['Expense', variables.id]});
+      queryClient.invalidateQueries({queryKey:['Expenses']})
+      showToast('Expense updated Successfully', 'success');
+
+      if (onSuccessCallBack) onSuccessCallBack();
+    },
+  });
+};
+
 export const useActionOnExpense = (onSuccessCallBack) => {
   const queryClient = useQueryClient();
 

src/pages/Expense/ExpensePage.jsx

@@ -1,17 +1,20 @@
 import React, { createContext, useContext, useState } from "react";
 
 import ExpenseList from "../../components/Expenses/ExpenseList";
-import CreateExpense from "../../components/Expenses/CreateExpense";
 import ViewExpense from "../../components/Expenses/ViewExpense";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import GlobalModel from "../../components/common/GlobalModel";
 import PreviewDocument from "../../components/Expenses/PreviewDocument";
+import ManageExpense from "../../components/Expenses/ManageExpense";
 
 export const ExpenseContext = createContext();
 export const useExpenseContext = () => useContext(ExpenseContext);
 
 const ExpensePage = () => {
-  const [isNewExpense, setNewExpense] = useState(false);
+  const [ManageExpenseModal, setManageExpenseModal] = useState({
+    IsOpen: null,
+    expenseId: null,
+  });
   const [viewExpense, setViewExpense] = useState({
     expenseId: null,
     view: false,
@@ -23,6 +26,7 @@ const ExpensePage = () => {
 
   const contextValue = {
     setViewExpense,
+    setManageExpenseModal,
     setDocumentView,
   };
 
@@ -58,7 +62,12 @@ const ExpensePage = () => {
                   data-bs-custom-class="tooltip"
                   title="Add New Expense"
                   className={`p-1 me-2 bg-primary rounded-circle `}
-                  onClick={() => setNewExpense(true)}
+                  onClick={() =>
+                    setManageExpenseModal({
+                      IsOpen: true,
+                      expenseId: null,
+                    })
+                  }
                 >
                   <i className="bx bx-plus fs-4 text-white"></i>
                 </button>
@@ -68,14 +77,24 @@ const ExpensePage = () => {
         </div>
 
         <ExpenseList />
-
+        {ManageExpenseModal.IsOpen && (
-        {isNewExpense && (
           <GlobalModel
-            isOpen={isNewExpense}
+            isOpen={ManageExpenseModal.IsOpen}
             size="lg"
-            closeModal={() => setNewExpense(false)}
+            closeModal={() =>
+              setManageExpenseModal({
+                IsOpen: null,
+                expenseId: null,
+              })
+            }
           >
-            <CreateExpense closeModal={() => setNewExpense(false)} />
+            <ManageExpense
+              key={ManageExpenseModal.expenseId ?? "new"}
+              expenseToEdit={ManageExpenseModal.expenseId}
+              closeModal={() =>
+                setManageExpenseModal({ IsOpen: null, expenseId: null })
+              }
+            />
           </GlobalModel>
         )}
 
@@ -98,7 +117,7 @@ const ExpensePage = () => {
         {ViewDocument.IsOpen && (
           <GlobalModel
             size="lg"
-            m
+            key={ViewDocument.IsOpen ?? "new"}
             isOpen={ViewDocument.IsOpen}
             closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
           >

src/repositories/ExpsenseRepository.jsx

@@ -12,10 +12,11 @@ const ExpenseRepository = {
   
   GetExpenseDetails:(id)=>api.get(`/api/Expense/details/${id}`),
   CreateExpense:(data)=>api.post("/api/Expense/create",data),
-  UpdateExpense:(id)=>api.put(`/api/Expense/edit/${id}`),
+  UpdateExpense:(id,data)=>api.put(`/api/Expense/edit/${id}`,data),
   DeleteExpense:(id)=>api.delete(`/api/Expense/edit/${id}`),
 
-  ActionOnExpense:(data)=>api.post('/api/expense/action',data)
+  ActionOnExpense:(data)=>api.post('/api/expense/action',data),
+
 
 }
 

src/utils/appUtils.js

@@ -3,39 +3,34 @@ export const formatFileSize=(bytes)=> {
   else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + " KB";
   else return (bytes / (1024 * 1024)).toFixed(2) + " MB";
 }
-export const getExpenseIcon = (type) => {
+export const AppColorconfig = {
-  switch (type.toLowerCase()) {
+  colors: {
-    case 'vendor/supplier payments':
+    primary: '#696cff',
-      return 'bx-briefcase'; // Business-related
+    secondary: '#8592a3',
-    case 'transport':
+    success: '#71dd37',
-      return 'bx-car'; // Vehicle or logistics
+    info: '#03c3ec',
-    case 'compliance & safety':
+    warning: '#ffab00',
-      return 'bx-shield-quarter'; // Security/safety
+    danger: '#ff3e1d',
-    case 'mobilization':
+    dark: '#233446',
-      return 'bx-building-house'; // Setup / site infra
+    black: '#000',
-    case 'procurement':
+    white: '#fff',
-      return 'bx-package'; // Box/package/supplies
+    cardColor: '#fff',
-    case 'maintenance & utilities':
+    bodyBg: '#f5f5f9',
-      return 'bx-wrench'; // Repair/maintenance
+    bodyColor: '#697a8d',
-    case 'travelling':
+    headingColor: '#566a7f',
-      return 'bx-plane'; // Personnel delivery
+    textMuted: '#a1acb8',
-    case 'employee welfare':
+    borderColor: '#eceef1'
-      return 'bx-user-heart'; // Welfare / people
-    default:
-      return 'bx-folder'; // Fallback icon
   }
 };
-export const getPaymentModeIcon = (mode) => {
+export const getColorNameFromHex = (hex) => {
-  switch (mode.toLowerCase()) {
+  const normalizedHex = hex?.replace(/'/g, '').toLowerCase(); 
-    case 'cash':
+  const colors = AppColorconfig.colors;
-      return 'bx-money'; // Cash/coins
+
-    case 'upi':
+  for (const [name, value] of Object.entries(colors)) {
-      return 'bx-mobile-alt'; // Mobile payment
+    if (value.toLowerCase() === normalizedHex) {
-    case 'cheque':
+      return name;
-      return 'bx-receipt'; // Paper receipt
+    }
-    case 'netbanking':
-      return 'bx-globe'; // Online/internet
-    default:
-      return 'bx-credit-card'; // Generic fallback
   }
+
+  return null; //
 };