index.html

@@ -27,7 +27,6 @@
   <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

@@ -1,32 +0,0 @@
-/* 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/CreateExpense.jsx

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

src/components/Expenses/ExpenseList.jsx

@@ -5,11 +5,9 @@ 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,setManageExpenseModal } = useExpenseContext();
+  const { setViewExpense } = useExpenseContext();
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;
 
@@ -23,10 +21,9 @@ const ExpenseList = () => {
   };
   
 
-  const { data, isLoading, isError,isInitialLoading,error,isFetching } = useExpenseList(10, currentPage, filter);
+  const { data, isLoading, isError,isInitialLoading } = useExpenseList(2, currentPage, filter);
-  if (isInitialLoading ) return <ExpenseTableSkeleton/>;
+  if (isInitialLoading) return <div>Loading...</div>;
-  if (isError) return <div>{error}</div>;
+  const items = data.data ?? [];
-  const items = data?.data ?? [];
   const totalPages = data?.totalPages ?? 1;
   const hasMore = currentPage < totalPages;
 
@@ -128,7 +125,7 @@ const ExpenseList = () => {
               </tr>
             </thead>
             <tbody>
-              {/* {isLoading && (
+              {isLoading && (
                 <tr>
                   <td colSpan={7} className="text-center py-3">
                     Loading...
@@ -142,7 +139,7 @@ const ExpenseList = () => {
                     No expenses found.
                   </td>
                 </tr>
-              )} */}
+              )}
 
               {!isInitialLoading &&
                 items.map((expense) => (
@@ -173,13 +170,19 @@ 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
-                      className={`badge bg-label-${getColorNameFromHex(expense.status.color) || 'secondary'}`}
+                        style={{
+                          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 >
@@ -194,12 +197,14 @@ 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,16 +35,14 @@ export const ExpenseSchema = (expenseTypes) => {
         .array(
           z.object({
             fileName: z.string().min(1, { message: "Filename is required" }),
-            base64Data: z.string().nullable(),
+            base64Data: z.string().min(1, { message: "File data is required" }),
             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" }),
@@ -70,21 +68,6 @@ 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

@@ -1,218 +0,0 @@
-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/ViewExpense.jsx

@@ -5,13 +5,12 @@ 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,
@@ -37,7 +36,16 @@ const ViewExpense = ({ ExpenseId }) => {
     MakeAction(Payload);
   };
 
-  if (isLoading) return <ExpenseDetailsSkeleton/>
+  if (isLoading) {
+    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 }));
   };
@@ -51,7 +59,7 @@ const ViewExpense = ({ ExpenseId }) => {
         </div>
 
         {/* Expense Info Rows */}
-        <div className="col-12  col-md-4 mb-3">
+        <div className="col-12 col-sm-6 col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Transaction Date :
@@ -62,7 +70,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12   col-md-4 mb-3">
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Expense Type :
@@ -71,7 +79,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12   col-md-4 mb-3">
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Supplier :
@@ -80,14 +88,14 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12   col-md-4 mb-3">
+        <div className="col-12  col-sm-6 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-md-4 mb-3">
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Payment Mode :
@@ -96,7 +104,7 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-        <div className="col-12   col-md-4 mb-3">
+        <div className="col-12  col-sm-6 col-md-4 mb-3">
           <div className="d-flex">
             <label className="form-label me-2 mb-0 fw-semibold">
               Paid By :
@@ -107,48 +115,54 @@ const ViewExpense = ({ ExpenseId }) => {
           </div>
         </div>
 
-          <div className="col-12 text-start col-md-4 mb-3">
+        <div className="col-12  col-sm-6 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
-            <span  className={`badge bg-label-${getColorNameFromHex(data?.status?.color) || 'secondary'}`}>
+              className="badge"
-              {data?.status?.displayName}
+              style={{ backgroundColor: data.status.color }}
+            >
+              {data.status.displayName}
             </span>
           </div>
+        </div>
 
-          <div className="col-12 text-start d-flex  col-md-4 mb-3">
+        <div className="col-12  col-sm-6 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-md-4 mb-3">
+        <div className="col-12  col-sm-6 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-md-4 mb-3">
+        <div className="col-12  col-sm-6 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-md-4 mb-3">
+        <div className="col-12  col-sm-6 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>
@@ -156,23 +170,23 @@ const ViewExpense = ({ ExpenseId }) => {
 
       <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 && data?.documents?.map((doc) => (
+        {data.documents?.map((doc) => (
-          <div
+          <a
             className="list-group-item list-group-item-action d-flex align-items-center"
             key={doc.id}
           >
             <div
-              className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
+              className="rounded me-3 d-flex align-items-center justify-content-center"
               style={{ height: "50px", width: "80px", position: "relative" }}
             >
               {doc.contentType === "application/pdf" ? (
-                <div><i className="bx bxs-file-pdf" style={{fontSize:"45px"}}></i></div>
+                <i className="bx bxs-file-pdf"></i>
               ) : (
                 <>
                   {!imageLoaded[doc.id] && (
@@ -180,6 +194,7 @@ const ViewExpense = ({ ExpenseId }) => {
                       Loading...
                     </div>
                   )}
+
                   <img
                     src={doc.thumbPreSignedUrl}
                     alt={doc.fileName}
@@ -201,12 +216,12 @@ const ViewExpense = ({ ExpenseId }) => {
             </div>
 
             <div className="w-100">
-              <small className="mb-0 small">{doc.fileName}</small>
+              <p className="mb-0">{doc.fileName}</p>
               <div className="d">
                 <i className="bx bx-cloud-download cursor-pointer"></i>
               </div>
             </div>
-          </div>
+          </a>
         ))}
       </div>
 

src/hooks/useExpense.js

@@ -16,16 +16,18 @@ 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 () =>
+    queryFn: async () => await ExpenseRepository.GetExpenseDetails(ExpenseId).then(
-      await ExpenseRepository.GetExpenseDetails(ExpenseId).then(
         (res) => res.data
       ),
     enabled: !!ExpenseId, 
   });
 };
 
+
 // ---------------------------Mutation---------------------------------------------
 
 export const useCreateExpnse = (onSuccessCallBack) => {
@@ -35,8 +37,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) => {
@@ -48,68 +50,6 @@ 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,20 +1,17 @@
 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 [ManageExpenseModal, setManageExpenseModal] = useState({
+  const [isNewExpense, setNewExpense] = useState(false);
-    IsOpen: null,
-    expenseId: null,
-  });
   const [viewExpense, setViewExpense] = useState({
     expenseId: null,
     view: false,
@@ -26,7 +23,6 @@ const ExpensePage = () => {
 
   const contextValue = {
     setViewExpense,
-    setManageExpenseModal,
     setDocumentView,
   };
 
@@ -62,12 +58,7 @@ const ExpensePage = () => {
                   data-bs-custom-class="tooltip"
                   title="Add New Expense"
                   className={`p-1 me-2 bg-primary rounded-circle `}
-                  onClick={() =>
+                  onClick={() => setNewExpense(true)}
-                    setManageExpenseModal({
-                      IsOpen: true,
-                      expenseId: null,
-                    })
-                  }
                 >
                   <i className="bx bx-plus fs-4 text-white"></i>
                 </button>
@@ -77,24 +68,14 @@ const ExpensePage = () => {
         </div>
 
         <ExpenseList />
-        {ManageExpenseModal.IsOpen && (
+
+        {isNewExpense && (
           <GlobalModel
-            isOpen={ManageExpenseModal.IsOpen}
+            isOpen={isNewExpense}
             size="lg"
-            closeModal={() =>
+            closeModal={() => setNewExpense(false)}
-              setManageExpenseModal({
-                IsOpen: null,
-                expenseId: null,
-              })
-            }
           >
-            <ManageExpense
+            <CreateExpense closeModal={() => setNewExpense(false)} />
-              key={ManageExpenseModal.expenseId ?? "new"}
-              expenseToEdit={ManageExpenseModal.expenseId}
-              closeModal={() =>
-                setManageExpenseModal({ IsOpen: null, expenseId: null })
-              }
-            />
           </GlobalModel>
         )}
 
@@ -117,7 +98,7 @@ const ExpensePage = () => {
         {ViewDocument.IsOpen && (
           <GlobalModel
             size="lg"
-            key={ViewDocument.IsOpen ?? "new"}
+            m
             isOpen={ViewDocument.IsOpen}
             closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
           >

src/repositories/ExpsenseRepository.jsx

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