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";
@@ -18,7 +18,7 @@ import {
 import Avatar from "../common/Avatar";
 import { useCreateExpnse } from "../../hooks/useExpense";
 
-const CreateExpense = ({closeModal,expenseToEdit,}) => {
+const CreateExpense = ({closeModal}) => {
   const [ExpenseType, setExpenseType] = useState();
   const dispatch = useDispatch();
   const {
@@ -36,30 +36,21 @@ const CreateExpense = ({closeModal,expenseToEdit,}) => {
     formState: { errors },
   } = useForm({
     resolver: zodResolver(schema),
-    defaultValues: defaultExpense,
+    defaultValues: {
+      projectId: "",
+      expensesTypeId: "",
+      paymentModeId: "",
+      paidById: "",
+      transactionDate: "",
+      transactionId: "",
+      description: "",
+      location: "",
+      supplerName: "",
+      amount: "",
+      noOfPersons: "",
+      billAttachments: [],
+    },
   });
-  console.log(expenseToEdit)
-
-  useEffect(() => {
-  if (expenseToEdit) {
-    reset({
-      projectId: expenseToEdit.project.id || "",
-      expensesTypeId: expenseToEdit.expensesType.id
- || "",
-      paymentModeId: expenseToEdit.paymentMode.id || "",
-      paidById: expenseToEdit.paidBy.id || "",
-      transactionDate: expenseToEdit.transactionDate?.slice(0, 10) || "",
-      transactionId: expenseToEdit.transactionId || "",
-      description: expenseToEdit.description || "",
-      location: expenseToEdit.location || "",
-      supplerName: expenseToEdit.supplerName || "",
-      amount: expenseToEdit.amount || "",
-      noOfPersons: expenseToEdit.noOfPersons || "",
-      billAttachments: expenseToEdit.billAttachments || [],
-    });
-  }
-}, [expenseToEdit, reset]);
-
 
   const selectedproject = watch("projectId");
   const selectedProject = useSelector(

src/components/Expenses/ExpenseList.jsx

@@ -5,10 +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";
 
 const ExpenseList = () => {
-  const { setViewExpense,setExpenseModal } = useExpenseContext();
+  const { setViewExpense } = useExpenseContext();
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;
 
@@ -22,7 +21,7 @@ const ExpenseList = () => {
   };
   
 
-  const { data, isLoading, isError,isInitialLoading } = useExpenseList(10, currentPage, filter);
+  const { data, isLoading, isError,isInitialLoading } = useExpenseList(2, currentPage, filter);
   if (isInitialLoading) return <div>Loading...</div>;
   const items = data.data ?? [];
   const totalPages = data?.totalPages ?? 1;
@@ -174,10 +173,16 @@ const ExpenseList = () => {
                     <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 >
@@ -192,12 +197,14 @@ const ExpenseList = () => {
                       </span>
                       <span
                         className="cursor-pointer"
-                       onClick={()=>setExpenseModal({isOpen:true,ExpEdit:expense})}
+                       
                       >
                        <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

@@ -68,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/ViewExpense.jsx

@@ -4,7 +4,6 @@ import { formatUTCToLocalTime } from "../../utils/dateUtils";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ActionSchema } from "./ExpenseSchema";
-import { getColorNameFromHex } from "../../utils/appUtils";
 
 const ViewExpense = ({ ExpenseId }) => {
   const {
@@ -41,42 +40,42 @@ 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 :</label>
             <div className="text-muted">{formatUTCToLocalTime(ExpenseId.transactionDate)}</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">Expense Type :</label>
             <div className="text-muted">{ExpenseId.expensesType.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">Supplier :</label>
             <div className="text-muted">{ExpenseId.supplerName}</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">Amount :</label>
             <div className="text-muted">₹ {ExpenseId.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 :</label>
             <div className="text-muted">{ExpenseId.paymentMode.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">Paid By :</label>
             <div className="text-muted">
@@ -85,30 +84,30 @@ 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 align-items-center">
             <label className="form-label me-2 mb-0 fw-semibold">Status :</label>
-            <span  className={`badge bg-label-${getColorNameFromHex(ExpenseId.status.color) || 'secondary'}`}>
+            <span className="badge" style={{ backgroundColor: ExpenseId.status.color }}>
               {ExpenseId.status.displayName}
             </span>
           </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">Pre-Approved :</label>
             <div className="text-muted">{ExpenseId.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">{ExpenseId.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">
@@ -117,7 +116,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">Created At :</label>
             <div className="text-muted">{formatUTCToLocalTime(ExpenseId.createdAt, true)}</div>
@@ -126,7 +125,7 @@ const ViewExpense = ({ ExpenseId }) => {
       </div>
 
       <div className="text-start">
-        <label className="form-label me-2 mb-0 fw-semibold">Description :</label>
+        <label className="form-label me-2 mb-0 fw-semibold">Description:</label>
         <div className="text-muted">
           Local travel reimbursement for delivery of materials to client site via City Taxi Service
         </div>

src/hooks/useExpense.js

@@ -44,19 +44,6 @@ export const useCreateExpnse = (onSuccessCallBack) => {
   });
 };
 
-export const useUpdateExepse =()=>{
-const queryClient = useQueryClient();
-
-return useMutation({
-  mutationFn:async (id,payload)=>{
-    const response = await ExpenseRepository.UpdateExpense(id,payload)
-  },
-  onSuccess:(updatedExpense,variables)=>{
-    // updation list and details
-  }
-})
-}
-
 export const useActionOnExpense = (onSuccessCallBack) => {
   const queryClient = useQueryClient();
 

src/pages/Expense/ExpensePage.jsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useState } from "react";
 
 import ExpenseList from "../../components/Expenses/ExpenseList";
-import CreateExpense from "../../components/Expenses/ManageExpense";
+import CreateExpense from "../../components/Expenses/CreateExpense";
 import ViewExpense from "../../components/Expenses/ViewExpense";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import GlobalModel from "../../components/common/GlobalModel";
@@ -10,10 +10,7 @@ export const ExpenseContext = createContext();
 export const useExpenseContext = () => useContext(ExpenseContext);
 
 const ExpensePage = () => {
-  const [expenseModal, setExpenseModal] = useState({
+  const [isNewExpense, setNewExpense] = useState(false);
-    isOpen: false,
-    ExpEdit: false,
-  });
   const [viewExpense, setViewExpense] = useState({
     expenseId: null,
     view: false,
@@ -21,7 +18,6 @@ const ExpensePage = () => {
 
   const contextValue = {
     setViewExpense,
-    setExpenseModal,
   };
 
   return (
@@ -51,12 +47,7 @@ const ExpensePage = () => {
                 <button
                   type="button"
                   className="btn btn-sm btn-primary me-2"
-                  onClick={() =>
+                  onClick={() => setNewExpense(true)}
-                    setExpenseModal({
-                      isOpen: true,
-                     ExpEdit:null
-                    })
-                  }
                 >
                   <span className="icon-base bx bx-plus-circle me-1"></span>
                   Add New
@@ -68,31 +59,19 @@ const ExpensePage = () => {
 
         <ExpenseList />
 
-        {expenseModal.isOpen && (
+         {isNewExpense && (
              <GlobalModel
-            isOpen={expenseModal.isOpen}
+          isOpen={isNewExpense}
           size="lg"
-            closeModal={() =>
+          closeModal={() => setNewExpense(false)}
-              setExpenseModal({
-                isOpen: false,
-                ExpEdit:null
-              })
-            }
         >
-            <CreateExpense
+          <CreateExpense closeModal={() => setNewExpense(false)} />
-              expenseToEdit={expenseModal.ExpEdit}
-              closeModal={() =>
-                setExpenseModal({
-                  isOpen: false,
-                 ExpEdit:null
-                })
-              }
-            />
         </GlobalModel>
          )}
       
-        {viewExpense.view && (
+
-          <GlobalModel
+
+        {viewExpense.view && (<GlobalModel
           isOpen={viewExpense.view}
           size="lg"
           closeModal={() =>
@@ -102,9 +81,8 @@ const ExpensePage = () => {
             })
           }
         >
-            <ViewExpense ExpenseId={viewExpense.expenseId} />
+          <ViewExpense ExpenseId={viewExpense.expenseId}/>
-          </GlobalModel>
+        </GlobalModel>) }
-        )}
       </div>
     </ExpenseContext.Provider>
   );

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; //
 };