changed column paidby to submitted by

This commit is contained in:
pramod mahajan 2025-08-06 01:16:13 +05:30
parent 1d2cb7b1f7
commit a87d3fb20a
3 changed files with 52 additions and 135 deletions

View File

@ -23,11 +23,11 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
const groupByList = useMemo(() => [ const groupByList = useMemo(() => [
{ id: "transactionDate", name: "Transaction Date" }, { id: "transactionDate", name: "Transaction Date" },
{ id: "status", name: "Status" }, { id: "status", name: "Status" },
{ id: "paidBy", name: "Paid By" }, { id: "submittedBy", name: "Submitted By" },
{ id: "project", name: "Project" }, { id: "project", name: "Project" },
{ id: "paymentMode", name: "Payment Mode" }, { id: "paymentMode", name: "Payment Mode" },
{ id: "expensesType", name: "Expense Type" }, { id: "expensesType", name: "Expense Type" },
{id: "createdAt",name:"Submitted"} {id: "createdAt",name:"Submitted Date"}
], []); ], []);
const [selectedGroup, setSelectedGroup] = useState(groupByList[0]); const [selectedGroup, setSelectedGroup] = useState(groupByList[0]);

View File

@ -4,14 +4,18 @@ import Avatar from "../common/Avatar";
import { useExpenseContext } from "../../pages/Expense/ExpensePage"; import { useExpenseContext } from "../../pages/Expense/ExpensePage";
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils"; import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
import Pagination from "../common/Pagination"; import Pagination from "../common/Pagination";
import { APPROVE_EXPENSE, EXPENSE_DRAFT, EXPENSE_REJECTEDBY } from "../../utils/constants"; import {
APPROVE_EXPENSE,
EXPENSE_DRAFT,
EXPENSE_REJECTEDBY,
} from "../../utils/constants";
import { getColorNameFromHex, useDebounce } from "../../utils/appUtils"; import { getColorNameFromHex, useDebounce } from "../../utils/appUtils";
import { ExpenseTableSkeleton } from "./ExpenseSkeleton"; import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
import ConfirmModal from "../common/ConfirmModal"; import ConfirmModal from "../common/ConfirmModal";
import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
const ExpenseList = ({ filters, groupBy = "transactionDate",searchText }) => { const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
const [deletingId, setDeletingId] = useState(null); const [deletingId, setDeletingId] = useState(null);
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const { setViewExpense, setManageExpenseModal } = useExpenseContext(); const { setViewExpense, setManageExpenseModal } = useExpenseContext();
@ -62,9 +66,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate",searchText }) => {
case "status": case "status":
key = item.status?.displayName || "Unknown"; key = item.status?.displayName || "Unknown";
break; break;
case "paidBy": case "submittedBy":
key = `${item.paidBy?.firstName ?? ""} ${ key = `${item.createdBy?.firstName ?? ""} ${
item.paidBy?.lastName ?? "" item.createdBy?.lastName ?? ""
}`.trim(); }`.trim();
break; break;
case "project": case "project":
@ -76,7 +80,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate",searchText }) => {
case "expensesType": case "expensesType":
key = item.expensesType?.name || "Unknown Type"; key = item.expensesType?.name || "Unknown Type";
break; break;
case "createdAt": case "createdAt":
key = item.createdAt?.split("T")[0] || "Unknown Type"; key = item.createdAt?.split("T")[0] || "Unknown Type";
break; break;
default: default:
@ -102,23 +106,23 @@ const ExpenseList = ({ filters, groupBy = "transactionDate",searchText }) => {
align: "text-start", align: "text-start",
}, },
{ {
key: "paidBy", key: "Submitted By",
label: "Paid By", label: "Submitted By",
align: "text-start", align: "text-start",
getValue: (e) => getValue: (e) =>
`${e.paidBy?.firstName ?? ""} ${e.paidBy?.lastName ?? ""}`.trim() || `${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""}`.trim() ||
"N/A", "N/A",
customRender: (e) => ( customRender: (e) => (
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<Avatar <Avatar
size="xs" size="xs"
classAvatar="m-0" classAvatar="m-0"
firstName={e.paidBy?.firstName} firstName={e.createdBy?.firstName}
lastName={e.paidBy?.lastName} lastName={e.createdBy?.lastName}
/> />
<span> <span>
{`${e.paidBy?.firstName ?? ""} ${ {`${e.createdBy?.firstName ?? ""} ${
e.paidBy?.lastName ?? "" e.createdBy?.lastName ?? ""
}`.trim() || "N/A"} }`.trim() || "N/A"}
</span> </span>
</div> </div>
@ -164,19 +168,20 @@ const ExpenseList = ({ filters, groupBy = "transactionDate",searchText }) => {
? groupByField(data?.data ?? [], groupBy) ? groupByField(data?.data ?? [], groupBy)
: { All: data?.data ?? [] }; : { All: data?.data ?? [] };
const IsGroupedByDate = ["transactionDate", "createdAt"].includes(groupBy); const IsGroupedByDate = ["transactionDate", "createdAt"].includes(groupBy);
const canEditExpense = (expense) => { const canEditExpense = (expense) => {
return ( return (
(expense.status.id === EXPENSE_DRAFT || (expense.status.id === EXPENSE_DRAFT ||
EXPENSE_REJECTEDBY.includes(expense.status.id)) && EXPENSE_REJECTEDBY.includes(expense.status.id)) &&
expense.createdBy?.id === SelfId expense.createdBy?.id === SelfId
); );
}; };
const canDetetExpense = (expense)=>{ const canDetetExpense = (expense) => {
return (expense.status.id === EXPENSE_DRAFT && expense.createdBy.id === SelfId ) return (
} expense.status.id === EXPENSE_DRAFT && expense.createdBy.id === SelfId
);
};
return ( return (
<> <>
{IsDeleteModalOpen && ( {IsDeleteModalOpen && (
@ -267,28 +272,27 @@ const canDetetExpense = (expense)=>{
}) })
} }
></i> ></i>
{canEditExpense(expense) && ( {canEditExpense(expense) && (
<i <i
className="bx bx-edit text-secondary cursor-pointer" className="bx bx-edit text-secondary cursor-pointer"
onClick={() => onClick={() =>
setManageExpenseModal({ setManageExpenseModal({
IsOpen: true, IsOpen: true,
expenseId: expense.id, expenseId: expense.id,
}) })
} }
></i> ></i>
)} )}
{canDetetExpense(expense) && (
<i
className="bx bx-trash text-danger cursor-pointer"
onClick={() => {
setIsDeleteModalOpen(true);
setDeletingId(expense.id);
}}
></i>
)}
{canDetetExpense(expense) && (
<i
className="bx bx-trash text-danger cursor-pointer"
onClick={() => {
setIsDeleteModalOpen(true);
setDeletingId(expense.id);
}}
></i>
)}
</div> </div>
</td> </td>
</tr> </tr>

View File

@ -113,9 +113,6 @@ const ViewExpense = ({ ExpenseId }) => {
<hr /> <hr />
</div> </div>
<div className="text-start mb-2"> <div className="text-start mb-2">
{/* <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>
{/* Row 1 */} {/* Row 1 */}
@ -274,93 +271,9 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
</div> </div>
</div> </div>
)} )}
{/* {data.reviewedBy && (
<div className="col-md-6 mb-3 text-start">
<div className="d-flex align-items-center">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
Reviewed By :
</label>
<div className="d-flex align-items-center">
<Avatar
size="xs"
classAvatar="m-0"
firstName={data.reviewedBy?.firstName}
lastName={data.reviewedBy?.lastName}
/>
<span className="text-muted">
{`${data.reviewedBy?.firstName ?? ""} ${
data.reviewedBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
</div>
</div>
)}
{data.approvedBy && (
<div className="col-md-6 mb-3 text-start">
<div className="d-flex align-items-center">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
Approved By :{" "}
</label>
<div className="d-flex align-items-center">
<Avatar
size="xs"
classAvatar="m-0"
firstName={data.approvedBy?.firstName}
lastName={data.approvedBy?.lastName}
/>
<span className="text-muted">
{`${data.approvedBy?.firstName ?? ""} ${
data.approvedBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
</div>
</div>
)}
{data.processedBy && (
<div className="col-md-6 mb-3 text-start">
<div className="d-flex align-items-center">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
Processed By :{" "}
</label>
<div className="d-flex align-items-center">
<Avatar
size="xs"
classAvatar="m-0"
firstName={data.processedBy?.firstName}
lastName={data.processedBy?.lastName}
/>
<span className="text-muted">
{`${data.processedBy?.firstName ?? ""} ${
data.processedBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</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> */}
<div className="col-12 text-start"> <div className="col-12 text-start">
<label className="form-label me-2 mb-0 fw-semibold">Attachment :</label> <label className="form-label me-2 mb-0 fw-semibold">Attachment :</label>