src/components/Expenses/ExpenseList.jsx

@@ -5,6 +5,7 @@ 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();
@@ -21,7 +22,7 @@ const ExpenseList = () => {
   };
   
 
-  const { data, isLoading, isError,isInitialLoading } = useExpenseList(2, currentPage, filter);
+  const { data, isLoading, isError,isInitialLoading } = useExpenseList(10, currentPage, filter);
   if (isInitialLoading) return <div>Loading...</div>;
   const items = data.data ?? [];
   const totalPages = data?.totalPages ?? 1;
@@ -173,16 +174,10 @@ 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
-                        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?.name   || "Unknown"}
                       </span>
                     </td>
                     <td >

src/components/Expenses/ViewExpense.jsx

@@ -4,6 +4,7 @@ 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 {
@@ -40,42 +41,42 @@ 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 :</label>
             <div className="text-muted">{formatUTCToLocalTime(ExpenseId.transactionDate)}</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">Expense Type :</label>
             <div className="text-muted">{ExpenseId.expensesType.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">Supplier :</label>
             <div className="text-muted">{ExpenseId.supplerName}</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">Amount :</label>
             <div className="text-muted">₹ {ExpenseId.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 :</label>
             <div className="text-muted">{ExpenseId.paymentMode.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">Paid By :</label>
             <div className="text-muted">
@@ -84,30 +85,30 @@ 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 align-items-center">
             <label className="form-label me-2 mb-0 fw-semibold">Status :</label>
-            <span className="badge" style={{ backgroundColor: ExpenseId.status.color }}>
+            <span  className={`badge bg-label-${getColorNameFromHex(ExpenseId.status.color) || 'secondary'}`}>
               {ExpenseId.status.displayName}
             </span>
           </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">Pre-Approved :</label>
             <div className="text-muted">{ExpenseId.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">{ExpenseId.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">
@@ -116,7 +117,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">Created At :</label>
             <div className="text-muted">{formatUTCToLocalTime(ExpenseId.createdAt, true)}</div>
@@ -125,7 +126,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/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; //
 };