admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

group wise row of expenses list

Browse Source
This commit is contained in:
pramod mahajan 2025-07-24 19:49:38 +05:30
parent 92f5566fce
commit 909031edb8
5 changed files with 410 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/Expenses/ExpenseList.jsx
View File

@ -16,8 +16,7 @@ const ExpenseList = () => {
const { setViewExpense, setManageExpenseModal } = useExpenseContext(); const { setViewExpense, setManageExpenseModal } = useExpenseContext();
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const pageSize = 10; const pageSize = 10;
const {profile} = useProfile() const { profile } = useProfile();
console.log(profile)
const filter = { const filter = {
projectIds: [], projectIds: [],
statusIds: [], statusIds: [],
@ -38,7 +37,7 @@ console.log(profile)
{ {
onSettled: () => { onSettled: () => {
setDeletingId(null); setDeletingId(null);
setIsDeleteModalOpen(false) setIsDeleteModalOpen(false);
}, },
} }
); );
@ -55,9 +54,42 @@ console.log(profile)
setCurrentPage(page); setCurrentPage(page);
} }
}; };
const STATUS_ORDER = [
"Draft",
"Review Pending",
"Approval Pending",
"Process Pending",
"Processed",
"Paid",
"Rejected",
];
const groupExpensesByDateAndStatus = (expenses) => {
const grouped = {};
expenses.forEach((expense) => {
const dateKey = expense.transactionDate.split("T")[0];
if (!grouped[dateKey]) grouped[dateKey] = [];
grouped[dateKey].push(expense);
});
const sortedDates = Object.keys(grouped).sort(
(a, b) => new Date(b) - new Date(a)
);
return sortedDates.map((date) => ({
date,
expenses: grouped[date].sort((a, b) => {
return (
STATUS_ORDER.indexOf(a.status.name) -
STATUS_ORDER.indexOf(b.status.name)
);
}),
}));
};
return ( return (
<> <>
{IsDeleteModalOpen && ( {IsDeleteModalOpen && (
<div <div
className={`modal fade ${IsDeleteModalOpen ? "show" : ""}`} className={`modal fade ${IsDeleteModalOpen ? "show" : ""}`}
@ -71,7 +103,6 @@ console.log(profile)
}} }}
aria-hidden="false" aria-hidden="false"
> >
<ConfirmModal <ConfirmModal
type={"delete"} type={"delete"}
header={"Delete Expense"} header={"Delete Expense"}
@ -87,7 +118,7 @@ console.log(profile)
<div className="card-datatable table-responsive"> <div className="card-datatable table-responsive">
<div <div
id="DataTables_Table_0_wrapper" id="DataTables_Table_0_wrapper"
className="dataTables_wrapper no-footer" className="dataTables_wrapper no-footer px-2"
> >
<table <table
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap" className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
@ -96,7 +127,7 @@ console.log(profile)
> >
<thead> <thead>
<tr> <tr>
<th {/* <th
className="sorting sorting_desc" className="sorting sorting_desc"
tabIndex="0" tabIndex="0"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
@ -106,7 +137,7 @@ console.log(profile)
aria-sort="descending" aria-sort="descending"
> >
<div className="text-start ms-6">Date Time</div> <div className="text-start ms-6">Date Time</div>
</th> </th> */}
<th <th
className="sorting sorting_desc d-none d-sm-table-cell" className="sorting sorting_desc d-none d-sm-table-cell"
tabIndex="0" tabIndex="0"
@ -173,32 +204,18 @@ console.log(profile)
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{/* {isLoading && (
<tr>
<td colSpan={7} className="text-center py-3">
Loading...
</td>
</tr>
)}
{!isInitialLoading && items.length === 0 && (
<tr>
<td colSpan={7} className="text-center py-3">
No expenses found.
</td>
</tr>
)} */}
{!isInitialLoading && {!isInitialLoading &&
items.map((expense) => ( groupExpensesByDateAndStatus(items).map(
<tr key={expense.id} className="odd"> ({ date, expenses }) => (
<td className="sorting_1" colSpan={2}> <>
<div className="d-flex justify-content-start align-items-center user-name ms-6"> <tr key={`date-${date}`} className="bg-light text-dark">
<span> <td colSpan={7} className="text-start">
{formatUTCToLocalTime(expense.transactionDate)} <strong>{formatUTCToLocalTime(date)}</strong>
</span>
</div>
</td> </td>
</tr>
{expenses.map((expense) => (
<tr key={expense.id}>
<td className="text-start d-none d-sm-table-cell ms-5"> <td className="text-start d-none d-sm-table-cell ms-5">
{expense.expensesType?.name || "N/A"} {expense.expensesType?.name || "N/A"}
</td> </td>
@ -235,57 +252,64 @@ console.log(profile)
</span> </span>
</td> </td>
<td> <td>
<div className="d-flex justify-content-strat align-items-center gap-2"> <div className="d-flex justify-content-center align-items-center gap-2">
<span <span className="cursor-pointer">
className="cursor-pointer" <i
className="bx bx-show text-primary"
onClick={() => onClick={() =>
setViewExpense({ setViewExpense({
expenseId: expense.id, expenseId: expense.id,
view: true, view: true,
}) })
} }
> ></i>
<i className="bx bx-show text-primary "></i>
</span> </span>
{(expense.status.name === 'Draft' || expense.status.name === 'Rejected') && (expense.createdBy.id === profile.employeeInfo.id ) &&(
<span <span className="cursor-pointer">
className="cursor-pointer" {(expense.status.name === "Draft" ||
expense.status.name === "Rejected") &&
expense.createdBy.id ===
profile?.employeeInfo.id ? (
<i
className="bx bx-edit bx-sm text-secondary"
onClick={() => onClick={() =>
setManageExpenseModal({ setManageExpenseModal({
IsOpen: true, IsOpen: true,
expenseId: expense.id, expenseId: expense.id,
}) })
} }
> ></i>
<i className="bx bx-edit bx-sm text-secondary"></i> ) : (
</span> <i
className="bx bx-edit bx-sm"
style={{ visibility: "hidden" }}
></i>
)} )}
{expense.status.name == "Draft" && ( </span>
<span
className="cursor-pointer" <span className="cursor-pointer">
{expense.status.name === "Draft" ? (
<i
className="bx bx-trash bx-sm text-danger"
onClick={() => { onClick={() => {
setIsDeleteModalOpen(true) setIsDeleteModalOpen(true);
setDeletingId(expense.id) setDeletingId(expense.id);
}} }}
> ></i>
{/* {deletingId === expense.id ? ( ) : (
<div <i
className="spinner-border spinner-border-sm text-secondary" className="bx bx-trash bx-sm"
role="status" style={{ visibility: "hidden" }}
> ></i>
<span className="visually-hidden">
Loading...
</span>
</div>
) : ( */}
<i className="bx bx-trash bx-sm text-danger"></i>
{/* )} */}
</span>
)} )}
</span>
</div> </div>
</td> </td>
</tr> </tr>
))} ))}
</>
)
)}
</tbody> </tbody>
</table> </table>
</div> </div>

24
src/components/Expenses/ExpenseSkeleton.jsx
View File

@ -123,17 +123,19 @@ export const ExpenseDetailsSkeleton = () => {
</div> </div>
); );
}; };
const SkeletonCell = ({ width = "100%", height = 20, className = "" }) => ( const SkeletonCell = ({ width = "100%", height = 20, className = "", style = {} }) => (
<div <div
className={`skeleton ${className}`} className={`skeleton ${className}`}
style={{ style={{
width, width,
height, height,
borderRadius: 4, borderRadius: 4,
...style,
}} }}
/> />
); );
export const ExpenseTableSkeleton = ({ rows = 5 }) => {
export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 6 }) => {
return ( return (
<table <table
className="card-body table border-top dataTable no-footer dtr-column text-nowrap" className="card-body table border-top dataTable no-footer dtr-column text-nowrap"
@ -159,8 +161,18 @@ export const ExpenseTableSkeleton = ({ rows = 5 }) => {
</thead> </thead>
<tbody> <tbody>
{[...Array(rows)].map((_, idx) => ( {[...Array(groups)].map((_, groupIdx) => (
<tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}> <React.Fragment key={`group-${groupIdx}`}>
{/* Fake Date Group Header Row */}
<tr className="bg-light">
<td colSpan={8}>
<SkeletonCell width="150px" height={20} />
</td>
</tr>
{/* Rows under this group */}
{[...Array(rowsPerGroup)].map((__, rowIdx) => (
<tr key={`row-${groupIdx}-${rowIdx}`} className={rowIdx % 2 === 0 ? "odd" : "even"}>
{/* Date Time colSpan=2 */} {/* Date Time colSpan=2 */}
<td colSpan={2} className="sorting_1"> <td colSpan={2} className="sorting_1">
<div className="d-flex justify-content-start align-items-center user-name ms-6"> <div className="d-flex justify-content-start align-items-center user-name ms-6">
@ -196,7 +208,7 @@ export const ExpenseTableSkeleton = ({ rows = 5 }) => {
<SkeletonCell width="80px" height={22} className="rounded" /> <SkeletonCell width="80px" height={22} className="rounded" />
</td> </td>
{/* Action (icons) */} {/* Action */}
<td> <td>
<div className="d-flex justify-content-center align-items-center gap-2"> <div className="d-flex justify-content-center align-items-center gap-2">
{[...Array(3)].map((__, i) => ( {[...Array(3)].map((__, i) => (
@ -212,6 +224,8 @@ export const ExpenseTableSkeleton = ({ rows = 5 }) => {
</td> </td>
</tr> </tr>
))} ))}
</React.Fragment>
))}
</tbody> </tbody>
</table> </table>
); );

8
src/components/Expenses/ManageExpense.jsx
View File

@ -133,7 +133,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
}; };
useEffect(() => { useEffect(() => {
if (expenseToEdit && data) { if (expenseToEdit && data && employees) {
reset({ reset({
projectId: data.project.id || "", projectId: data.project.id || "",
expensesTypeId: data.expensesType.id || "", expensesTypeId: data.expensesType.id || "",
@ -170,6 +170,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
} }
); );
const onSubmit = (payload) => { const onSubmit = (payload) => {
debugger
if (expenseToEdit) { if (expenseToEdit) {
const editPayload = { ...payload, id: data.id }; const editPayload = { ...payload, id: data.id };
ExpenseUpdate({ id: data.id, payload: editPayload }); ExpenseUpdate({ id: data.id, payload: editPayload });
@ -194,7 +195,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
isLoading isLoading
) )
return <ExpenseSkeleton />; return <ExpenseSkeleton />;
return ( return (
<div className="container p-3"> <div className="container p-3">
<h5 className="m-0"> <h5 className="m-0">
@ -520,7 +520,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
(fileError?.fileSize?.message || (fileError?.fileSize?.message ||
fileError?.contentType?.message || fileError?.contentType?.message ||
fileError?.base64Data?.message, fileError?.base64Data?.message,
fileError?.documentId.message) fileError?.documentId?.message)
} }
</div> </div>
))} ))}
@ -532,7 +532,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
<button <button
type="submit" type="submit"
className="btn btn-primary btn-sm mt-3" className="btn btn-primary btn-sm mt-3"
disabled={isPending} disabled={isPending || createPending}
> >
{isPending || createPending ? "Please Wait..." : expenseToEdit ? "Update" : "Submit"} {isPending || createPending ? "Please Wait..." : expenseToEdit ? "Update" : "Submit"}
</button> </button>

28
src/components/Expenses/ViewExpense.jsx
View File

@ -38,7 +38,7 @@ const ViewExpense = ({ ExpenseId }) => {
MakeAction(Payload); MakeAction(Payload);
}; };
if (isLoading) return <ExpenseDetailsSkeleton/> if (isLoading) return <ExpenseDetailsSkeleton />;
const handleImageLoad = (id) => { const handleImageLoad = (id) => {
setImageLoaded((prev) => ({ ...prev, [id]: true })); setImageLoaded((prev) => ({ ...prev, [id]: true }));
}; };
@ -52,7 +52,7 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
{/* Expense Info Rows */} {/* Expense Info Rows */}
<div className="col-12 col-md-4 mb-3"> <div className="col-12 col-md-6 mb-3">
<div className="d-flex"> <div className="d-flex">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Transaction Date : Transaction Date :
@ -63,7 +63,7 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
</div> </div>
<div className="col-12 col-md-4 mb-3"> <div className="col-12 col-md-6 mb-3">
<div className="d-flex"> <div className="d-flex">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Expense Type : Expense Type :
@ -111,7 +111,11 @@ const ViewExpense = ({ ExpenseId }) => {
<div className="col-12 text-start col-md-4 mb-3"> <div className="col-12 text-start col-md-4 mb-3">
<label className="form-label me-2 mb-0 fw-semibold">Status :</label> <label className="form-label me-2 mb-0 fw-semibold">Status :</label>
<span className={`badge bg-label-${getColorNameFromHex(data?.status?.color) || 'secondary'}`}> <span
className={`badge bg-label-${
getColorNameFromHex(data?.status?.color) || "secondary"
}`}
>
{data?.status?.displayName} {data?.status?.displayName}
</span> </span>
</div> </div>
@ -163,7 +167,8 @@ const ViewExpense = ({ ExpenseId }) => {
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Attachement : Attachement :
</label> </label>
{data?.documents && data?.documents?.map((doc) => ( {data?.documents &&
data?.documents?.map((doc) => (
<div <div
className="list-group-item list-group-item-action d-flex align-items-center" className="list-group-item list-group-item-action d-flex align-items-center"
key={doc.id} key={doc.id}
@ -173,7 +178,12 @@ const ViewExpense = ({ ExpenseId }) => {
style={{ height: "50px", width: "80px", position: "relative" }} style={{ height: "50px", width: "80px", position: "relative" }}
> >
{doc.contentType === "application/pdf" ? ( {doc.contentType === "application/pdf" ? (
<div><i className="bx bxs-file-pdf" style={{fontSize:"45px"}}></i></div> <div>
<i
className="bx bxs-file-pdf"
style={{ fontSize: "45px" }}
></i>
</div>
) : ( ) : (
<> <>
{!imageLoaded[doc.id] && ( {!imageLoaded[doc.id] && (
@ -194,7 +204,10 @@ const ViewExpense = ({ ExpenseId }) => {
}} }}
onLoad={() => handleImageLoad(doc.id)} onLoad={() => handleImageLoad(doc.id)}
onClick={() => onClick={() =>
setDocumentView({ IsOpen: true, Image: doc.preSignedUrl }) setDocumentView({
IsOpen: true,
Image: doc.preSignedUrl,
})
} }
/> />
</> </>
@ -237,7 +250,6 @@ const ViewExpense = ({ ExpenseId }) => {
handleSubmit(onSubmit)(); handleSubmit(onSubmit)();
}} }}
className="btn btn-primary btn-sm cursor-pointer mx-2 border-0" className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
> >
{status.displayName || status.name} {status.displayName || status.name}
</button> </button>

41
src/pages/Expense/ExpensePage.jsx
View File

@ -6,6 +6,8 @@ import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel"; import GlobalModel from "../../components/common/GlobalModel";
import PreviewDocument from "../../components/Expenses/PreviewDocument"; import PreviewDocument from "../../components/Expenses/PreviewDocument";
import ManageExpense from "../../components/Expenses/ManageExpense"; import ManageExpense from "../../components/Expenses/ManageExpense";
import { useProjectName } from "../../hooks/useProjects";
import { useExpenseStatus } from "../../hooks/masterHook/useMaster";
export const ExpenseContext = createContext(); export const ExpenseContext = createContext();
export const useExpenseContext = () => useContext(ExpenseContext); export const useExpenseContext = () => useContext(ExpenseContext);
@ -30,6 +32,8 @@ const ExpensePage = () => {
setDocumentView, setDocumentView,
}; };
const { projectNames } = useProjectName();
const {} = useExpenseStatus();
return ( return (
<ExpenseContext.Provider value={contextValue}> <ExpenseContext.Provider value={contextValue}>
<div className="container-fluid"> <div className="container-fluid">
@ -51,7 +55,42 @@ const ExpensePage = () => {
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
/> />
</label> </label>
<i className="bx bx-slider-alt ms-2"></i> <div className="dropdown d-inline-block" >
<i
className="bx bx-slider-alt ms-2"
id="filterDropdown"
data-bs-toggle="dropdown"
role="button"
aria-expanded="false"
style={{ cursor: "pointer" }}
></i>
<div
className="dropdown-menu p-3"
aria-labelledby="filterDropdown"
style={{ minWidth: "500px",}}
>
<div className="row g-2">
<div className="col-md-6">
<label className="form-label">Project</label>
<select className="form-select form-select-sm">
<option value="1">Project A</option>
<option value="2">Project B</option>
<option value="3">Project C</option>
</select>
</div>
<div className="col-md-6">
<label className="form-label">Select Project</label>
<select className="form-select form-select-sm">
{projectNames?.map((project)=>(
<option key={project.id} value={project.id}>{project.name}</option>
))}
</select>
</div>
</div>
</div>
</div>
</div> </div>
<div className="col-7 col-sm-8 text-end gap-2"> <div className="col-7 col-sm-8 text-end gap-2">
<button <button