admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 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 committed by pramod.mahajan
parent 7b39ee59f4
commit ee6c8069d0
5 changed files with 410 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

436
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: [],
@ -37,8 +36,8 @@ console.log(profile)
{ id }, { id },
{ {
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"}
@ -79,24 +110,24 @@ console.log(profile)
onSubmit={handleDelete} onSubmit={handleDelete}
onClose={() => setIsDeleteModalOpen(false)} onClose={() => setIsDeleteModalOpen(false)}
loading={isPending} loading={isPending}
paramData={deletingId} paramData={deletingId}
/> />
</div> </div>
)} )}
<div className="card "> <div className="card ">
<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
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
aria-describedby="DataTables_Table_0_info"
id="horizontal-example"
> >
<thead> <table
<tr> className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
<th aria-describedby="DataTables_Table_0_info"
id="horizontal-example"
>
<thead>
<tr>
{/* <th
className="sorting sorting_desc" className="sorting sorting_desc"
tabIndex="0" tabIndex="0"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
@ -106,198 +137,191 @@ 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"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
rowSpan="1" rowSpan="1"
colSpan="1" colSpan="1"
aria-label="Expense Type: activate to sort column ascending" aria-label="Expense Type: activate to sort column ascending"
aria-sort="descending" aria-sort="descending"
> >
<div className="text-start ms-5">Expense Type</div> <div className="text-start ms-5">Expense Type</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"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
rowSpan="1" rowSpan="1"
colSpan="1" colSpan="1"
aria-label="Payment Mode: activate to sort column ascending" aria-label="Payment Mode: activate to sort column ascending"
aria-sort="descending" aria-sort="descending"
> >
<div className="text-start ms-5">Payment Mode</div> <div className="text-start ms-5">Payment Mode</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"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
rowSpan="1" rowSpan="1"
colSpan="1" colSpan="1"
aria-label="Paid By: activate to sort column ascending" aria-label="Paid By: activate to sort column ascending"
aria-sort="descending" aria-sort="descending"
> >
<div className="text-start ms-5">Paid By</div> <div className="text-start ms-5">Paid By</div>
</th> </th>
<th <th
className="sorting d-none d-md-table-cell" className="sorting d-none d-md-table-cell"
tabIndex="0" tabIndex="0"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
rowSpan="1" rowSpan="1"
colSpan="1" colSpan="1"
aria-label="Amount: activate to sort column ascending" aria-label="Amount: activate to sort column ascending"
> >
Amount Amount
</th> </th>
<th <th
className="sorting" className="sorting"
tabIndex="0" tabIndex="0"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
rowSpan="1" rowSpan="1"
colSpan="1" colSpan="1"
aria-label="Status: activate to sort column ascending" aria-label="Status: activate to sort column ascending"
> >
Status Status
</th> </th>
<th <th
className="sorting" className="sorting"
tabIndex="0" tabIndex="0"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
rowSpan="1" rowSpan="1"
colSpan="1" colSpan="1"
aria-label="Status: activate to sort column ascending" aria-label="Status: activate to sort column ascending"
> >
Action Action
</th> </th>
</tr>
</thead>
<tbody>
{/* {isLoading && (
<tr>
<td colSpan={7} className="text-center py-3">
Loading...
</td>
</tr> </tr>
)} </thead>
<tbody>
{!isInitialLoading &&
groupExpensesByDateAndStatus(items).map(
({ date, expenses }) => (
<>
<tr key={`date-${date}`} className="bg-light text-dark">
<td colSpan={7} className="text-start">
<strong>{formatUTCToLocalTime(date)}</strong>
</td>
</tr>
{!isInitialLoading && items.length === 0 && ( {expenses.map((expense) => (
<tr> <tr key={expense.id}>
<td colSpan={7} className="text-center py-3"> <td className="text-start d-none d-sm-table-cell ms-5">
No expenses found. {expense.expensesType?.name || "N/A"}
</td> </td>
</tr> <td className="text-start d-none d-sm-table-cell ms-5">
)} */} {expense.paymentMode?.name || "N/A"}
</td>
{!isInitialLoading && <td className="text-start d-none d-sm-table-cell ms-5">
items.map((expense) => ( <div className="d-flex align-items-center">
<tr key={expense.id} className="odd"> <Avatar
<td className="sorting_1" colSpan={2}> size="xs"
<div className="d-flex justify-content-start align-items-center user-name ms-6"> classAvatar="m-0"
<span> firstName={expense.paidBy?.firstName}
{formatUTCToLocalTime(expense.transactionDate)} lastName={expense.paidBy?.lastName}
</span> />
</div> <span>
</td> {`${expense.paidBy?.firstName ?? ""} ${
<td className="text-start d-none d-sm-table-cell ms-5"> expense.paidBy?.lastName ?? ""
{expense.expensesType?.name || "N/A"} }`.trim() || "N/A"}
</td>
<td className="text-start d-none d-sm-table-cell ms-5">
{expense.paymentMode?.name || "N/A"}
</td>
<td className="text-start d-none d-sm-table-cell ms-5">
<div className="d-flex align-items-center">
<Avatar
size="xs"
classAvatar="m-0 "
firstName={expense.paidBy?.firstName}
lastName={expense.paidBy?.lastName}
/>
<span>
{`${expense.paidBy?.firstName ?? ""} ${
expense.paidBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
</td>
<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"
}`}
>
{expense.status?.displayName || "Unknown"}
</span>
</td>
<td>
<div className="d-flex justify-content-strat align-items-center gap-2">
<span
className="cursor-pointer"
onClick={() =>
setViewExpense({
expenseId: expense.id,
view: true,
})
}
>
<i className="bx bx-show text-primary "></i>
</span>
{(expense.status.name === 'Draft' || expense.status.name === 'Rejected') && (expense.createdBy.id === profile.employeeInfo.id ) &&(
<span
className="cursor-pointer"
onClick={() =>
setManageExpenseModal({
IsOpen: true,
expenseId: expense.id,
})
}
>
<i className="bx bx-edit bx-sm text-secondary"></i>
</span>
)}
{expense.status.name == "Draft" && (
<span
className="cursor-pointer"
onClick={() => {
setIsDeleteModalOpen(true)
setDeletingId(expense.id)
}}
>
{/* {deletingId === expense.id ? (
<div
className="spinner-border spinner-border-sm text-secondary"
role="status"
>
<span className="visually-hidden">
Loading...
</span> </span>
</div> </div>
) : ( */} </td>
<i className="bx bx-trash bx-sm text-danger"></i> <td className="d-none d-md-table-cell text-end">
{/* )} */} <i className="bx bx-rupee b-xs"></i>
</span> {expense?.amount}
)} </td>
</div> <td>
</td> <span
</tr> className={`badge bg-label-${
))} getColorNameFromHex(expense?.status?.color) ||
</tbody> "secondary"
</table> }`}
>
{expense.status?.displayName || "Unknown"}
</span>
</td>
<td>
<div className="d-flex justify-content-center align-items-center gap-2">
<span className="cursor-pointer">
<i
className="bx bx-show text-primary"
onClick={() =>
setViewExpense({
expenseId: expense.id,
view: true,
})
}
></i>
</span>
<span 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={() =>
setManageExpenseModal({
IsOpen: true,
expenseId: expense.id,
})
}
></i>
) : (
<i
className="bx bx-edit bx-sm"
style={{ visibility: "hidden" }}
></i>
)}
</span>
<span className="cursor-pointer">
{expense.status.name === "Draft" ? (
<i
className="bx bx-trash bx-sm text-danger"
onClick={() => {
setIsDeleteModalOpen(true);
setDeletingId(expense.id);
}}
></i>
) : (
<i
className="bx bx-trash bx-sm"
style={{ visibility: "hidden" }}
></i>
)}
</span>
</div>
</td>
</tr>
))}
</>
)
)}
</tbody>
</table>
</div>
{!isInitialLoading && items.length > 0 && (
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={paginate}
/>
)}
</div> </div>
{!isInitialLoading && items.length > 0 && (
<Pagination
currentPage={currentPage}
totalPages={totalPages}
onPageChange={paginate}
/>
)}
</div> </div>
</div>
</> </>
); );
}; };

112
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,60 +161,72 @@ 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}`}>
{/* Date Time colSpan=2 */} {/* Fake Date Group Header Row */}
<td colSpan={2} className="sorting_1"> <tr className="bg-light">
<div className="d-flex justify-content-start align-items-center user-name ms-6"> <td colSpan={8}>
<SkeletonCell width="120px" height={18} /> <SkeletonCell width="150px" height={20} />
</div> </td>
</td> </tr>
{/* Expense Type */} {/* Rows under this group */}
<td className="text-start d-none d-sm-table-cell ms-5"> {[...Array(rowsPerGroup)].map((__, rowIdx) => (
<SkeletonCell width="90px" height={16} /> <tr key={`row-${groupIdx}-${rowIdx}`} className={rowIdx % 2 === 0 ? "odd" : "even"}>
</td> {/* Date Time colSpan=2 */}
<td colSpan={2} className="sorting_1">
<div className="d-flex justify-content-start align-items-center user-name ms-6">
<SkeletonCell width="120px" height={18} />
</div>
</td>
{/* Payment Mode */} {/* Expense Type */}
<td className="text-start d-none d-sm-table-cell ms-5"> <td className="text-start d-none d-sm-table-cell ms-5">
<SkeletonCell width="90px" height={16} /> <SkeletonCell width="90px" height={16} />
</td> </td>
{/* Paid By (Avatar + name) */} {/* Payment Mode */}
<td className="text-start d-none d-sm-table-cell ms-5"> <td className="text-start d-none d-sm-table-cell ms-5">
<div className="d-flex align-items-center gap-2"> <SkeletonCell width="90px" height={16} />
<SkeletonCell width="30px" height={30} className="rounded-circle" /> </td>
<SkeletonCell width="80px" height={16} />
</div>
</td>
{/* Amount */} {/* Paid By (Avatar + name) */}
<td className="d-none d-md-table-cell text-end"> <td className="text-start d-none d-sm-table-cell ms-5">
<SkeletonCell width="60px" height={16} /> <div className="d-flex align-items-center gap-2">
</td> <SkeletonCell width="30px" height={30} className="rounded-circle" />
<SkeletonCell width="80px" height={16} />
</div>
</td>
{/* Status */} {/* Amount */}
<td> <td className="d-none d-md-table-cell text-end">
<SkeletonCell width="80px" height={22} className="rounded" /> <SkeletonCell width="60px" height={16} />
</td> </td>
{/* Action (icons) */} {/* Status */}
<td> <td>
<div className="d-flex justify-content-center align-items-center gap-2"> <SkeletonCell width="80px" height={22} className="rounded" />
{[...Array(3)].map((__, i) => ( </td>
<SkeletonCell
key={i} {/* Action */}
width={20} <td>
height={20} <div className="d-flex justify-content-center align-items-center gap-2">
className="rounded" {[...Array(3)].map((__, i) => (
style={{ display: "inline-block" }} <SkeletonCell
/> key={i}
))} width={20}
</div> height={20}
</td> className="rounded"
</tr> style={{ display: "inline-block" }}
/>
))}
</div>
</td>
</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>

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

@ -26,7 +26,7 @@ const ViewExpense = ({ ExpenseId }) => {
}, },
}); });
const { mutate: MakeAction } = useActionOnExpense(()=>reset()); const { mutate: MakeAction } = useActionOnExpense(() => reset());
const onSubmit = (formData) => { const onSubmit = (formData) => {
const Payload = { const Payload = {
@ -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 :
@ -108,20 +108,24 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
</div> </div>
<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'}`}>
{data?.status?.displayName}
</span>
</div>
<div className="col-12 text-start d-flex col-md-4 mb-3"> <span
<label className="form-label me-2 mb-0 fw-semibold"> className={`badge bg-label-${
Pre-Approved : getColorNameFromHex(data?.status?.color) || "secondary"
</label> }`}
<div className="text-muted">{data.preApproved ? "Yes" : "No"}</div> >
</div> {data?.status?.displayName}
</span>
</div>
<div className="col-12 text-start d-flex col-md-4 mb-3">
<label className="form-label me-2 mb-0 fw-semibold">
Pre-Approved :
</label>
<div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
</div>
<div className="col-12 col-md-4 mb-3"> <div className="col-12 col-md-4 mb-3">
<div className="d-flex"> <div className="d-flex">
@ -153,7 +157,7 @@ const ViewExpense = ({ ExpenseId }) => {
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="text-start"> <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>
@ -163,52 +167,61 @@ 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 &&
<div data?.documents?.map((doc) => (
className="list-group-item list-group-item-action d-flex align-items-center"
key={doc.id}
>
<div <div
className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer" className="list-group-item list-group-item-action d-flex align-items-center"
style={{ height: "50px", width: "80px", position: "relative" }} key={doc.id}
> >
{doc.contentType === "application/pdf" ? ( <div
<div><i className="bx bxs-file-pdf" style={{fontSize:"45px"}}></i></div> className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
) : ( style={{ height: "50px", width: "80px", position: "relative" }}
<> >
{!imageLoaded[doc.id] && ( {doc.contentType === "application/pdf" ? (
<div className="position-absolute text-secondary"> <div>
Loading... <i
</div> className="bx bxs-file-pdf"
)} style={{ fontSize: "45px" }}
<img ></i>
src={doc.thumbPreSignedUrl} </div>
alt={doc.fileName} ) : (
className="img-fluid rounded" <>
style={{ {!imageLoaded[doc.id] && (
maxHeight: "100%", <div className="position-absolute text-secondary">
maxWidth: "100%", Loading...
objectFit: "cover", </div>
opacity: imageLoaded[doc.id] ? 1 : 0, )}
transition: "opacity 0.3s ease-in-out", <img
}} src={doc.thumbPreSignedUrl}
onLoad={() => handleImageLoad(doc.id)} alt={doc.fileName}
onClick={() => className="img-fluid rounded"
setDocumentView({ IsOpen: true, Image: doc.preSignedUrl }) style={{
} maxHeight: "100%",
/> maxWidth: "100%",
</> objectFit: "cover",
)} opacity: imageLoaded[doc.id] ? 1 : 0,
</div> transition: "opacity 0.3s ease-in-out",
}}
onLoad={() => handleImageLoad(doc.id)}
onClick={() =>
setDocumentView({
IsOpen: true,
Image: doc.preSignedUrl,
})
}
/>
</>
)}
</div>
<div className="w-100"> <div className="w-100">
<small className="mb-0 small">{doc.fileName}</small> <small className="mb-0 small">{doc.fileName}</small>
<div className="d"> <div className="d">
<i className="bx bx-cloud-download cursor-pointer"></i> <i className="bx bx-cloud-download cursor-pointer"></i>
</div>
</div> </div>
</div> </div>
</div> ))}
))}
</div> </div>
<hr className="divider my-1" /> <hr className="divider my-1" />
@ -237,9 +250,8 @@ 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>
))} ))}
</div> </div>

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