group wise row of expenses list
This commit is contained in:
parent
7b39ee59f4
commit
ee6c8069d0
@ -16,8 +16,7 @@ const ExpenseList = () => {
|
||||
const { setViewExpense, setManageExpenseModal } = useExpenseContext();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const pageSize = 10;
|
||||
const {profile} = useProfile()
|
||||
console.log(profile)
|
||||
const { profile } = useProfile();
|
||||
const filter = {
|
||||
projectIds: [],
|
||||
statusIds: [],
|
||||
@ -37,8 +36,8 @@ console.log(profile)
|
||||
{ id },
|
||||
{
|
||||
onSettled: () => {
|
||||
setDeletingId(null);
|
||||
setIsDeleteModalOpen(false)
|
||||
setDeletingId(null);
|
||||
setIsDeleteModalOpen(false);
|
||||
},
|
||||
}
|
||||
);
|
||||
@ -55,9 +54,42 @@ console.log(profile)
|
||||
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 (
|
||||
<>
|
||||
|
||||
{IsDeleteModalOpen && (
|
||||
<div
|
||||
className={`modal fade ${IsDeleteModalOpen ? "show" : ""}`}
|
||||
@ -71,7 +103,6 @@ console.log(profile)
|
||||
}}
|
||||
aria-hidden="false"
|
||||
>
|
||||
|
||||
<ConfirmModal
|
||||
type={"delete"}
|
||||
header={"Delete Expense"}
|
||||
@ -79,24 +110,24 @@ console.log(profile)
|
||||
onSubmit={handleDelete}
|
||||
onClose={() => setIsDeleteModalOpen(false)}
|
||||
loading={isPending}
|
||||
paramData={deletingId}
|
||||
paramData={deletingId}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="card ">
|
||||
<div className="card-datatable table-responsive">
|
||||
<div
|
||||
id="DataTables_Table_0_wrapper"
|
||||
className="dataTables_wrapper no-footer"
|
||||
>
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
id="horizontal-example"
|
||||
<div className="card ">
|
||||
<div className="card-datatable table-responsive">
|
||||
<div
|
||||
id="DataTables_Table_0_wrapper"
|
||||
className="dataTables_wrapper no-footer px-2"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
<table
|
||||
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
|
||||
aria-describedby="DataTables_Table_0_info"
|
||||
id="horizontal-example"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{/* <th
|
||||
className="sorting sorting_desc"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
@ -106,198 +137,191 @@ console.log(profile)
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-6">Date Time</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Expense Type: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Expense Type</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Payment Mode: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Payment Mode</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Paid By: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Paid By</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting d-none d-md-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Amount: activate to sort column ascending"
|
||||
>
|
||||
Amount
|
||||
</th>
|
||||
<th
|
||||
className="sorting"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Status: activate to sort column ascending"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
className="sorting"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Status: activate to sort column ascending"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* {isLoading && (
|
||||
<tr>
|
||||
<td colSpan={7} className="text-center py-3">
|
||||
Loading...
|
||||
</td>
|
||||
</th> */}
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Expense Type: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Expense Type</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Payment Mode: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Payment Mode</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Paid By: activate to sort column ascending"
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className="text-start ms-5">Paid By</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting d-none d-md-table-cell"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Amount: activate to sort column ascending"
|
||||
>
|
||||
Amount
|
||||
</th>
|
||||
<th
|
||||
className="sorting"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Status: activate to sort column ascending"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
className="sorting"
|
||||
tabIndex="0"
|
||||
aria-controls="DataTables_Table_0"
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
aria-label="Status: activate to sort column ascending"
|
||||
>
|
||||
Action
|
||||
</th>
|
||||
</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 && (
|
||||
<tr>
|
||||
<td colSpan={7} className="text-center py-3">
|
||||
No expenses found.
|
||||
</td>
|
||||
</tr>
|
||||
)} */}
|
||||
|
||||
{!isInitialLoading &&
|
||||
items.map((expense) => (
|
||||
<tr key={expense.id} className="odd">
|
||||
<td className="sorting_1" colSpan={2}>
|
||||
<div className="d-flex justify-content-start align-items-center user-name ms-6">
|
||||
<span>
|
||||
{formatUTCToLocalTime(expense.transactionDate)}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||
{expense.expensesType?.name || "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...
|
||||
{expenses.map((expense) => (
|
||||
<tr key={expense.id}>
|
||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||
{expense.expensesType?.name || "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>
|
||||
) : ( */}
|
||||
<i className="bx bx-trash bx-sm text-danger"></i>
|
||||
{/* )} */}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</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-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>
|
||||
{!isInitialLoading && items.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -123,17 +123,19 @@ export const ExpenseDetailsSkeleton = () => {
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const SkeletonCell = ({ width = "100%", height = 20, className = "" }) => (
|
||||
const SkeletonCell = ({ width = "100%", height = 20, className = "", style = {} }) => (
|
||||
<div
|
||||
className={`skeleton ${className}`}
|
||||
style={{
|
||||
width,
|
||||
height,
|
||||
borderRadius: 4,
|
||||
...style,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
export const ExpenseTableSkeleton = ({ rows = 5 }) => {
|
||||
|
||||
export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 6 }) => {
|
||||
return (
|
||||
<table
|
||||
className="card-body table border-top dataTable no-footer dtr-column text-nowrap"
|
||||
@ -159,60 +161,72 @@ export const ExpenseTableSkeleton = ({ rows = 5 }) => {
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{[...Array(rows)].map((_, idx) => (
|
||||
<tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
|
||||
{/* 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>
|
||||
{[...Array(groups)].map((_, groupIdx) => (
|
||||
<React.Fragment key={`group-${groupIdx}`}>
|
||||
{/* Fake Date Group Header Row */}
|
||||
<tr className="bg-light">
|
||||
<td colSpan={8}>
|
||||
<SkeletonCell width="150px" height={20} />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
{/* Expense Type */}
|
||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||
<SkeletonCell width="90px" height={16} />
|
||||
</td>
|
||||
{/* Rows under this group */}
|
||||
{[...Array(rowsPerGroup)].map((__, rowIdx) => (
|
||||
<tr key={`row-${groupIdx}-${rowIdx}`} className={rowIdx % 2 === 0 ? "odd" : "even"}>
|
||||
{/* 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 */}
|
||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||
<SkeletonCell width="90px" height={16} />
|
||||
</td>
|
||||
{/* Expense Type */}
|
||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||
<SkeletonCell width="90px" height={16} />
|
||||
</td>
|
||||
|
||||
{/* Paid By (Avatar + name) */}
|
||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<SkeletonCell width="30px" height={30} className="rounded-circle" />
|
||||
<SkeletonCell width="80px" height={16} />
|
||||
</div>
|
||||
</td>
|
||||
{/* Payment Mode */}
|
||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||
<SkeletonCell width="90px" height={16} />
|
||||
</td>
|
||||
|
||||
{/* Amount */}
|
||||
<td className="d-none d-md-table-cell text-end">
|
||||
<SkeletonCell width="60px" height={16} />
|
||||
</td>
|
||||
{/* Paid By (Avatar + name) */}
|
||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<SkeletonCell width="30px" height={30} className="rounded-circle" />
|
||||
<SkeletonCell width="80px" height={16} />
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Status */}
|
||||
<td>
|
||||
<SkeletonCell width="80px" height={22} className="rounded" />
|
||||
</td>
|
||||
{/* Amount */}
|
||||
<td className="d-none d-md-table-cell text-end">
|
||||
<SkeletonCell width="60px" height={16} />
|
||||
</td>
|
||||
|
||||
{/* Action (icons) */}
|
||||
<td>
|
||||
<div className="d-flex justify-content-center align-items-center gap-2">
|
||||
{[...Array(3)].map((__, i) => (
|
||||
<SkeletonCell
|
||||
key={i}
|
||||
width={20}
|
||||
height={20}
|
||||
className="rounded"
|
||||
style={{ display: "inline-block" }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/* Status */}
|
||||
<td>
|
||||
<SkeletonCell width="80px" height={22} className="rounded" />
|
||||
</td>
|
||||
|
||||
{/* Action */}
|
||||
<td>
|
||||
<div className="d-flex justify-content-center align-items-center gap-2">
|
||||
{[...Array(3)].map((__, i) => (
|
||||
<SkeletonCell
|
||||
key={i}
|
||||
width={20}
|
||||
height={20}
|
||||
className="rounded"
|
||||
style={{ display: "inline-block" }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@ -133,7 +133,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (expenseToEdit && data) {
|
||||
if (expenseToEdit && data && employees) {
|
||||
reset({
|
||||
projectId: data.project.id || "",
|
||||
expensesTypeId: data.expensesType.id || "",
|
||||
@ -170,6 +170,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
}
|
||||
);
|
||||
const onSubmit = (payload) => {
|
||||
debugger
|
||||
if (expenseToEdit) {
|
||||
const editPayload = { ...payload, id: data.id };
|
||||
ExpenseUpdate({ id: data.id, payload: editPayload });
|
||||
@ -194,7 +195,6 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
isLoading
|
||||
)
|
||||
return <ExpenseSkeleton />;
|
||||
|
||||
return (
|
||||
<div className="container p-3">
|
||||
<h5 className="m-0">
|
||||
@ -520,7 +520,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
(fileError?.fileSize?.message ||
|
||||
fileError?.contentType?.message ||
|
||||
fileError?.base64Data?.message,
|
||||
fileError?.documentId.message)
|
||||
fileError?.documentId?.message)
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
@ -532,7 +532,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-sm mt-3"
|
||||
disabled={isPending}
|
||||
disabled={isPending || createPending}
|
||||
>
|
||||
{isPending || createPending ? "Please Wait..." : expenseToEdit ? "Update" : "Submit"}
|
||||
</button>
|
||||
|
||||
@ -26,7 +26,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: MakeAction } = useActionOnExpense(()=>reset());
|
||||
const { mutate: MakeAction } = useActionOnExpense(() => reset());
|
||||
|
||||
const onSubmit = (formData) => {
|
||||
const Payload = {
|
||||
@ -38,7 +38,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
MakeAction(Payload);
|
||||
};
|
||||
|
||||
if (isLoading) return <ExpenseDetailsSkeleton/>
|
||||
if (isLoading) return <ExpenseDetailsSkeleton />;
|
||||
const handleImageLoad = (id) => {
|
||||
setImageLoaded((prev) => ({ ...prev, [id]: true }));
|
||||
};
|
||||
@ -52,7 +52,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Transaction Date :
|
||||
@ -63,7 +63,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-4 mb-3">
|
||||
<div className="col-12 col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Expense Type :
|
||||
@ -108,20 +108,24 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start col-md-4 mb-3">
|
||||
<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 col-md-4 mb-3">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">Status :</label>
|
||||
|
||||
<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>
|
||||
<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">
|
||||
<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="d-flex">
|
||||
@ -153,7 +157,7 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-start">
|
||||
<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">
|
||||
Attachement :
|
||||
</label>
|
||||
{data?.documents && data?.documents?.map((doc) => (
|
||||
<div
|
||||
className="list-group-item list-group-item-action d-flex align-items-center"
|
||||
key={doc.id}
|
||||
>
|
||||
{data?.documents &&
|
||||
data?.documents?.map((doc) => (
|
||||
<div
|
||||
className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
|
||||
style={{ height: "50px", width: "80px", position: "relative" }}
|
||||
className="list-group-item list-group-item-action d-flex align-items-center"
|
||||
key={doc.id}
|
||||
>
|
||||
{doc.contentType === "application/pdf" ? (
|
||||
<div><i className="bx bxs-file-pdf" style={{fontSize:"45px"}}></i></div>
|
||||
) : (
|
||||
<>
|
||||
{!imageLoaded[doc.id] && (
|
||||
<div className="position-absolute text-secondary">
|
||||
Loading...
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
src={doc.thumbPreSignedUrl}
|
||||
alt={doc.fileName}
|
||||
className="img-fluid rounded"
|
||||
style={{
|
||||
maxHeight: "100%",
|
||||
maxWidth: "100%",
|
||||
objectFit: "cover",
|
||||
opacity: imageLoaded[doc.id] ? 1 : 0,
|
||||
transition: "opacity 0.3s ease-in-out",
|
||||
}}
|
||||
onLoad={() => handleImageLoad(doc.id)}
|
||||
onClick={() =>
|
||||
setDocumentView({ IsOpen: true, Image: doc.preSignedUrl })
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
|
||||
style={{ height: "50px", width: "80px", position: "relative" }}
|
||||
>
|
||||
{doc.contentType === "application/pdf" ? (
|
||||
<div>
|
||||
<i
|
||||
className="bx bxs-file-pdf"
|
||||
style={{ fontSize: "45px" }}
|
||||
></i>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{!imageLoaded[doc.id] && (
|
||||
<div className="position-absolute text-secondary">
|
||||
Loading...
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
src={doc.thumbPreSignedUrl}
|
||||
alt={doc.fileName}
|
||||
className="img-fluid rounded"
|
||||
style={{
|
||||
maxHeight: "100%",
|
||||
maxWidth: "100%",
|
||||
objectFit: "cover",
|
||||
opacity: imageLoaded[doc.id] ? 1 : 0,
|
||||
transition: "opacity 0.3s ease-in-out",
|
||||
}}
|
||||
onLoad={() => handleImageLoad(doc.id)}
|
||||
onClick={() =>
|
||||
setDocumentView({
|
||||
IsOpen: true,
|
||||
Image: doc.preSignedUrl,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-100">
|
||||
<small className="mb-0 small">{doc.fileName}</small>
|
||||
<div className="d">
|
||||
<i className="bx bx-cloud-download cursor-pointer"></i>
|
||||
<div className="w-100">
|
||||
<small className="mb-0 small">{doc.fileName}</small>
|
||||
<div className="d">
|
||||
<i className="bx bx-cloud-download cursor-pointer"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
|
||||
<hr className="divider my-1" />
|
||||
@ -237,9 +250,8 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
handleSubmit(onSubmit)();
|
||||
}}
|
||||
className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
|
||||
|
||||
>
|
||||
{status.displayName || status.name}
|
||||
{status.displayName || status.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -6,6 +6,8 @@ import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import PreviewDocument from "../../components/Expenses/PreviewDocument";
|
||||
import ManageExpense from "../../components/Expenses/ManageExpense";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
import { useExpenseStatus } from "../../hooks/masterHook/useMaster";
|
||||
|
||||
export const ExpenseContext = createContext();
|
||||
export const useExpenseContext = () => useContext(ExpenseContext);
|
||||
@ -30,6 +32,8 @@ const ExpensePage = () => {
|
||||
setDocumentView,
|
||||
};
|
||||
|
||||
const { projectNames } = useProjectName();
|
||||
const {} = useExpenseStatus();
|
||||
return (
|
||||
<ExpenseContext.Provider value={contextValue}>
|
||||
<div className="container-fluid">
|
||||
@ -51,7 +55,42 @@ const ExpensePage = () => {
|
||||
aria-controls="DataTables_Table_0"
|
||||
/>
|
||||
</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 className="col-7 col-sm-8 text-end gap-2">
|
||||
<button
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user