added utils fun that has code convert into bootstrap color like priamery.
This commit is contained in:
parent
5f6a00f9f2
commit
6c276a3c8d
@ -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={{
|
||||
backgroundColor: expense.status?.color || "#e2e3e5",
|
||||
color: "#ffff",
|
||||
padding: "2px 8px",
|
||||
borderRadius: "0.375rem",
|
||||
fontSize: "0.75rem",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
className={`badge bg-label-${getColorNameFromHex(expense.status.color) || 'secondary'}`}
|
||||
>
|
||||
{expense.status?.name || "Unknown"}
|
||||
|
||||
{expense.status?.name || "Unknown"}
|
||||
</span>
|
||||
</td>
|
||||
<td >
|
||||
|
||||
@ -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>
|
||||
@ -163,7 +164,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
>
|
||||
{status.displayName || status.name}
|
||||
{status.displayName || status.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -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) => {
|
||||
switch (type.toLowerCase()) {
|
||||
case 'vendor/supplier payments':
|
||||
return 'bx-briefcase'; // Business-related
|
||||
case 'transport':
|
||||
return 'bx-car'; // Vehicle or logistics
|
||||
case 'compliance & safety':
|
||||
return 'bx-shield-quarter'; // Security/safety
|
||||
case 'mobilization':
|
||||
return 'bx-building-house'; // Setup / site infra
|
||||
case 'procurement':
|
||||
return 'bx-package'; // Box/package/supplies
|
||||
case 'maintenance & utilities':
|
||||
return 'bx-wrench'; // Repair/maintenance
|
||||
case 'travelling':
|
||||
return 'bx-plane'; // Personnel delivery
|
||||
case 'employee welfare':
|
||||
return 'bx-user-heart'; // Welfare / people
|
||||
default:
|
||||
return 'bx-folder'; // Fallback icon
|
||||
export const AppColorconfig = {
|
||||
colors: {
|
||||
primary: '#696cff',
|
||||
secondary: '#8592a3',
|
||||
success: '#71dd37',
|
||||
info: '#03c3ec',
|
||||
warning: '#ffab00',
|
||||
danger: '#ff3e1d',
|
||||
dark: '#233446',
|
||||
black: '#000',
|
||||
white: '#fff',
|
||||
cardColor: '#fff',
|
||||
bodyBg: '#f5f5f9',
|
||||
bodyColor: '#697a8d',
|
||||
headingColor: '#566a7f',
|
||||
textMuted: '#a1acb8',
|
||||
borderColor: '#eceef1'
|
||||
}
|
||||
};
|
||||
export const getPaymentModeIcon = (mode) => {
|
||||
switch (mode.toLowerCase()) {
|
||||
case 'cash':
|
||||
return 'bx-money'; // Cash/coins
|
||||
case 'upi':
|
||||
return 'bx-mobile-alt'; // Mobile payment
|
||||
case 'cheque':
|
||||
return 'bx-receipt'; // Paper receipt
|
||||
case 'netbanking':
|
||||
return 'bx-globe'; // Online/internet
|
||||
default:
|
||||
return 'bx-credit-card'; // Generic fallback
|
||||
export const getColorNameFromHex = (hex) => {
|
||||
const normalizedHex = hex?.replace(/'/g, '').toLowerCase();
|
||||
const colors = AppColorconfig.colors;
|
||||
|
||||
for (const [name, value] of Object.entries(colors)) {
|
||||
if (value.toLowerCase() === normalizedHex) {
|
||||
return name;
|
||||
}
|
||||
}
|
||||
|
||||
return null; //
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user