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

Refactor_Expenses #321

Merged
pramod.mahajan merged 249 commits from Refactor_Expenses into hotfix/MasterActivity 2025-08-01 13:14:59 +00:00
Conversation 0 Commits 249 Files Changed 74 +841 -435
8 changed files with 841 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4123a5ca1e - Show all commits

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

@ -10,26 +10,18 @@ import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
import ConfirmModal from "../common/ConfirmModal"; import ConfirmModal from "../common/ConfirmModal";
import { useProfile } from "../../hooks/useProfile"; import { useProfile } from "../../hooks/useProfile";
const ExpenseList = () => { const ExpenseList = ({filters}) => {
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();
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 = {
projectIds: [],
statusIds: [],
createdByIds: [],
paidById: [],
startDate: null,
endDate: null,
};
const { mutate: DeleteExpense, isPending } = useDeleteExpense(); const { mutate: DeleteExpense, isPending } = useDeleteExpense();
const { data, isLoading, isError, isInitialLoading, error, isFetching } = const { data, isLoading, isError, isInitialLoading, error, isFetching } =
useExpenseList(10, currentPage, filter); useExpenseList(10, currentPage, filters);
const handleDelete = (id) => { const handleDelete = (id) => {
setDeletingId(id); setDeletingId(id);
@ -38,7 +30,7 @@ console.log(profile)
{ {
onSettled: () => { onSettled: () => {
setDeletingId(null); setDeletingId(null);
setIsDeleteModalOpen(false) setIsDeleteModalOpen(false);
}, },
} }
); );
@ -55,9 +47,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 +96,6 @@ console.log(profile)
}} }}
aria-hidden="false" aria-hidden="false"
> >
<ConfirmModal <ConfirmModal
type={"delete"} type={"delete"}
header={"Delete Expense"} header={"Delete Expense"}
@ -79,24 +103,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 px-3"
<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 +130,189 @@ 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-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 ">Payment Mode</div>
</th> </th>
<th <th
className="sorting sorting_desc d-none d-sm-table-cell" className="sorting sorting_desc d-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-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 && items.length === 0 && ( {!isInitialLoading &&
<tr> groupExpensesByDateAndStatus(items).map(
<td colSpan={7} className="text-center py-3"> ({ date, expenses }) => (
No expenses found. <>
</td> <tr key={`date-${date}`} className="tr-group text-dark">
</tr> <td colSpan={7} className="text-start">
)} */} <strong>{formatUTCToLocalTime(date)}</strong>
</td>
{!isInitialLoading && </tr> {expenses.map((expense) => (
items.map((expense) => ( <tr key={expense.id} >
<tr key={expense.id} className="odd"> <td className="text-start d-table-cell ms-5">
<td className="sorting_1" colSpan={2}> {expense.expensesType?.name || "N/A"}
<div className="d-flex justify-content-start align-items-center user-name ms-6"> </td>
<span> <td className="text-start d-table-cell ms-5">
{formatUTCToLocalTime(expense.transactionDate)} {expense.paymentMode?.name || "N/A"}
</span> </td>
</div> <td className="text-start d-table-cell ms-5">
</td> <div className="d-flex align-items-center">
<td className="text-start d-none d-sm-table-cell ms-5"> <Avatar
{expense.expensesType?.name || "N/A"} size="xs"
</td> classAvatar="m-0"
<td className="text-start d-none d-sm-table-cell ms-5"> firstName={expense.paidBy?.firstName}
{expense.paymentMode?.name || "N/A"} lastName={expense.paidBy?.lastName}
</td> />
<td className="text-start d-none d-sm-table-cell ms-5"> <span>
<div className="d-flex align-items-center"> {`${expense.paidBy?.firstName ?? ""} ${
<Avatar expense.paidBy?.lastName ?? ""
size="xs" }`.trim() || "N/A"}
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-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>
</> </>
); );
}; };

20
src/components/Expenses/ExpenseSchema.js
View File

@ -89,3 +89,23 @@ export const ActionSchema = z.object({
comment : z.string().min(1,{message:"Please leave comment"}), comment : z.string().min(1,{message:"Please leave comment"}),
selectedStatus: z.string().min(1, { message: "Please select a status" }), selectedStatus: z.string().min(1, { message: "Please select a status" }),
}) })
export const SearchSchema = z.object({
projectIds: z.array(z.string()).optional(),
statusIds: z.array(z.string()).optional(),
createdByIds: z.array(z.string()).optional(),
paidById: z.array(z.string()).optional(),
startDate: z.string().optional(),
endDate: z.string().optional(),
});
export const defaultFilter = {
projectIds:[],
statusIds:[],
createdByIds:[],
paidById:[],
startDate:"",
endDate:""
}

110
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 = 3 }) => {
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,58 +161,70 @@ 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>

130
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'}`}> <span
{data?.status?.displayName} className={`badge bg-label-${
</span> getColorNameFromHex(data?.status?.color) || "secondary"
</div> }`}
>
{data?.status?.displayName}
</span>
</div>
<div className="col-12 text-start d-flex col-md-4 mb-3"> <div className="col-12 text-start d-flex col-md-4 mb-3">
<label className="form-label me-2 mb-0 fw-semibold"> <label className="form-label me-2 mb-0 fw-semibold">
Pre-Approved : Pre-Approved :
</label> </label>
<div className="text-muted">{data.preApproved ? "Yes" : "No"}</div> <div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
</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,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>

37
src/components/common/DateRangePicker.jsx
View File

@ -1,6 +1,8 @@
import React, { useEffect, useRef } from "react"; import React, { useEffect, useRef } from "react";
const DateRangePicker = ({ const DateRangePicker = ({
md,
sm,
onRangeChange, onRangeChange,
DateDifference = 7, DateDifference = 7,
endDateMode = "yesterday", endDateMode = "yesterday",
@ -25,11 +27,12 @@ const DateRangePicker = ({
altInput: true, altInput: true,
altFormat: "d-m-Y", altFormat: "d-m-Y",
defaultDate: [startDate, endDate], defaultDate: [startDate, endDate],
static: true, static: false,
appendTo: document.body,
clickOpens: true, clickOpens: true,
maxDate: endDate, // ✅ Disable future dates maxDate: endDate, // ✅ Disable future dates
onChange: (selectedDates, dateStr) => { onChange: (selectedDates, dateStr) => {
const [startDateString, endDateString] = dateStr.split(" to "); const [startDateString, endDateString] = dateStr.split(" To ");
onRangeChange?.({ startDate: startDateString, endDate: endDateString }); onRangeChange?.({ startDate: startDateString, endDate: endDateString });
}, },
}); });
@ -45,13 +48,29 @@ const DateRangePicker = ({
}, [onRangeChange, DateDifference, endDateMode]); }, [onRangeChange, DateDifference, endDateMode]);
return ( return (
<input <div className={`col-${sm} col-sm-${md} px-1 position-relative`}>
type="text" <input
className="form-control form-control-sm ms-1" type="text"
placeholder="From to End" className="form-control form-control-sm ps-2 pe-5 "
id="flatpickr-range" placeholder="From to End"
ref={inputRef} id="flatpickr-range"
/> ref={inputRef}
/>
<i
className="bx bx-calendar calendar-icon cursor-pointer"
style={{
position: "absolute",
top: "50%",
right: "12px",
transform: "translateY(-50%)",
color: "#6c757d",
fontSize: "1.1rem",
}}
></i>
</div>
); );
}; };

202
src/components/common/SelectMultiple.jsx
View File

@ -1,12 +1,13 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { useFormContext } from "react-hook-form"; import { useFormContext } from "react-hook-form";
import { createPortal } from "react-dom";
import "./MultiSelectDropdown.css"; import "./MultiSelectDropdown.css";
const SelectMultiple = ({ const SelectMultiple = ({
name, name,
options = [], options = [],
label = "Select options", label = "Select options",
labelKey = "name", labelKey = "name", // Can now be a function or a string
valueKey = "id", valueKey = "id",
placeholder = "Please select...", placeholder = "Please select...",
IsLoading = false, IsLoading = false,
@ -16,11 +17,18 @@ const SelectMultiple = ({
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
const containerRef = useRef(null);
const dropdownRef = useRef(null); const dropdownRef = useRef(null);
const [dropdownStyles, setDropdownStyles] = useState({ top: 0, left: 0, width: 0 });
useEffect(() => { useEffect(() => {
const handleClickOutside = (e) => { const handleClickOutside = (e) => {
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) { if (
containerRef.current &&
!containerRef.current.contains(e.target) &&
(!dropdownRef.current || !dropdownRef.current.contains(e.target))
) {
setIsOpen(false); setIsOpen(false);
} }
}; };
@ -28,6 +36,21 @@ const SelectMultiple = ({
return () => document.removeEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside);
}, []); }, []);
useEffect(() => {
if (isOpen && containerRef.current) {
const rect = containerRef.current.getBoundingClientRect();
setDropdownStyles({
top: rect.bottom + window.scrollY,
left: rect.left + window.scrollX,
width: rect.width,
});
}
}, [isOpen]);
const getLabel = (item) => {
return typeof labelKey === "function" ? labelKey(item) : item[labelKey];
};
const handleCheckboxChange = (value) => { const handleCheckboxChange = (value) => {
const updated = selectedValues.includes(value) const updated = selectedValues.includes(value)
? selectedValues.filter((v) => v !== value) ? selectedValues.filter((v) => v !== value)
@ -36,96 +59,113 @@ const SelectMultiple = ({
setValue(name, updated, { shouldValidate: true }); setValue(name, updated, { shouldValidate: true });
}; };
const filteredOptions = options.filter((item) => const filteredOptions = options.filter((item) => {
item[labelKey]?.toLowerCase().includes(searchText.toLowerCase()) const label = getLabel(item);
); return label?.toLowerCase().includes(searchText.toLowerCase());
});
return ( const dropdownElement = (
<div ref={dropdownRef} className="multi-select-dropdown-container"> <div
<label className="form-label mb-1">{label}</label> ref={dropdownRef}
className="multi-select-dropdown-options"
<div style={{
className="multi-select-dropdown-header" position: "absolute",
onClick={() => setIsOpen((prev) => !prev)} top: dropdownStyles.top,
> left: dropdownStyles.left,
<span width: dropdownStyles.width,
className={ zIndex: 9999,
selectedValues.length > 0 backgroundColor: "white",
? "placeholder-style-selected" boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
: "placeholder-style" borderRadius: 4,
} maxHeight: 300,
> overflowY: "auto",
<div className="selected-badges-container"> }}
{selectedValues.length > 0 ? ( >
selectedValues.map((val) => { <div className="multi-select-dropdown-search" style={{ padding: 8 }}>
const found = options.find((opt) => opt[valueKey] === val); <input
return ( type="text"
<span placeholder="Search..."
key={val} value={searchText}
className="badge badge-selected-item mx-1 mb-1" onChange={(e) => setSearchText(e.target.value)}
> className="multi-select-dropdown-search-input"
{found ? found[labelKey] : ""} style={{ width: "100%", padding: 4 }}
</span> />
);
})
) : (
<span className="placeholder-text">{placeholder}</span>
)}
</div>
</span>
<i className="bx bx-chevron-down"></i>
</div> </div>
{isOpen && ( {filteredOptions.map((item) => {
<div className="multi-select-dropdown-options"> const labelVal = getLabel(item);
<div className="multi-select-dropdown-search"> const valueVal = item[valueKey];
const isChecked = selectedValues.includes(valueVal);
return (
<div
key={valueVal}
className={`multi-select-dropdown-option ${isChecked ? "selected" : ""}`}
style={{ display: "flex", alignItems: "center", padding: "4px 8px" }}
>
<input <input
type="text" type="checkbox"
placeholder="Search..." className="custom-checkbox form-check-input"
value={searchText} checked={isChecked}
onChange={(e) => setSearchText(e.target.value)} onChange={() => handleCheckboxChange(valueVal)}
className="multi-select-dropdown-search-input" style={{ marginRight: 8 }}
/> />
<label className="text-secondary">{labelVal}</label>
</div> </div>
);
})}
{filteredOptions.map((item) => { {!IsLoading && filteredOptions.length === 0 && (
const labelVal = item[labelKey]; <div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
const valueVal = item[valueKey]; <label className="text-muted">Not Found {`'${searchText}'`}</label>
const isChecked = selectedValues.includes(valueVal); </div>
)}
return ( {IsLoading && filteredOptions.length === 0 && (
<div <div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
key={valueVal} <label className="text-muted">Loading...</label>
className={`multi-select-dropdown-option ${
isChecked ? "selected" : ""
}`}
>
<input
type="checkbox"
className="custom-checkbox form-check-input"
checked={isChecked}
onChange={() => handleCheckboxChange(valueVal)}
/>
<label className="text-secondary">{labelVal}</label>
</div>
);
})}
{!IsLoading && filteredOptions.length === 0 && (
<div className="multi-select-dropdown-Not-found">
<label className="text-muted">
Not Found {`'${searchText}'`}
</label>
</div>
)}
{IsLoading && filteredOptions.length === 0 && (
<div className="multi-select-dropdown-Not-found">
<label className="text-muted">Loading...</label>
</div>
)}
</div> </div>
)} )}
</div> </div>
); );
return (
<>
<div ref={containerRef} className="multi-select-dropdown-container" style={{ position: "relative" }}>
<label className="form-label mb-1">{label}</label>
<div
className="multi-select-dropdown-header"
onClick={() => setIsOpen((prev) => !prev)}
style={{ cursor: "pointer" }}
>
<span
className={
selectedValues.length > 0 ? "placeholder-style-selected" : "placeholder-style"
}
>
<div className="selected-badges-container">
{selectedValues.length > 0 ? (
selectedValues.map((val) => {
const found = options.find((opt) => opt[valueKey] === val);
const label = found ? getLabel(found) : "";
return (
<span key={val} className="badge badge-selected-item mx-1 mb-1">
{label}
</span>
);
})
) : (
<span className="placeholder-text">{placeholder}</span>
)}
</div>
</span>
<i className="bx bx-chevron-down"></i>
</div>
</div>
{isOpen && createPortal(dropdownElement, document.body)}
</>
);
}; };
export default SelectMultiple; export default SelectMultiple;

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

@ -1,16 +1,107 @@
import React, { createContext, useContext, useState } from "react"; import React, {
createContext,
useContext,
useState,
useRef,
useEffect,
} from "react";
import {
useForm,
useFieldArray,
FormProvider,
useFormContext,
Controller,
} from "react-hook-form";
import ExpenseList from "../../components/Expenses/ExpenseList"; import ExpenseList from "../../components/Expenses/ExpenseList";
import ViewExpense from "../../components/Expenses/ViewExpense"; import ViewExpense from "../../components/Expenses/ViewExpense";
import Breadcrumb from "../../components/common/Breadcrumb"; 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";
import {
useEmployees,
useEmployeesAllOrByProjectId,
} from "../../hooks/useEmployees";
import { useSelector } from "react-redux";
import DateRangePicker from "../../components/common/DateRangePicker";
import SelectMultiple from "../../components/common/SelectMultiple";
import { zodResolver } from "@hookform/resolvers/zod";
import {
defaultFilter,
SearchSchema,
} from "../../components/Expenses/ExpenseSchema";
const SelectDropdown = ({
label,
options = [],
loading = false,
placeholder = "Select...",
valueKey = "id",
labelKey = "name",
selectedValues = [],
onChange,
isMulti = false,
}) => {
const handleChange = (e) => {
const selected = Array.from(
e.target.selectedOptions,
(option) => option.value
);
onChange && onChange(selected);
};
return (
<div className="select-dropdown">
<label>{label}</label>
<div className="dropdown-menu show">
{options.map((option) => {
const checked = selectedValues.includes(option[valueKey]);
return (
<div key={option[valueKey]} className="form-check">
<input
type="checkbox"
className="form-check-input"
id={`checkbox-${option[valueKey]}`}
checked={checked}
onChange={() => {
let newSelected;
if (checked) {
newSelected = selectedValues.filter(
(val) => val !== option[valueKey]
);
} else {
newSelected = [...selectedValues, option[valueKey]];
}
onChange(newSelected);
}}
/>
<label
className="form-check-label"
htmlFor={`checkbox-${option[valueKey]}`}
>
{option[labelKey] || option[valueKey]}
</label>
</div>
);
})}
</div>
</div>
);
};
export const ExpenseContext = createContext(); export const ExpenseContext = createContext();
export const useExpenseContext = () => useContext(ExpenseContext); export const useExpenseContext = () => useContext(ExpenseContext);
const ExpensePage = () => { const ExpensePage = () => {
const [isOpen, setIsOpen] = useState(false);
const [filters,setFilter] = useState()
const dropdownRef = useRef(null);
const shouldCloseOnOutsideClick = useRef(false);
const selectedProjectId = useSelector(
(store) => store.localVariables.projectId
);
const [ManageExpenseModal, setManageExpenseModal] = useState({ const [ManageExpenseModal, setManageExpenseModal] = useState({
IsOpen: null, IsOpen: null,
expenseId: null, expenseId: null,
@ -30,6 +121,81 @@ const ExpensePage = () => {
setDocumentView, setDocumentView,
}; };
const methods = useForm({
resolver: zodResolver(SearchSchema),
defaultValues: defaultFilter,
});
const {
register,
handleSubmit,
control,
getValues,
trigger,
setValue,
watch,
reset,
formState: { errors },
} = methods;
const { projectNames, loading: projectLoading } = useProjectName();
const { ExpenseStatus, loading: statusLoading, error } = useExpenseStatus();
const { employees, loading: empLoading } = useEmployeesAllOrByProjectId(
true,
selectedProjectId,
true
);
const onSubmit = (data) => {
setFilter(data)
};
const setDateRange = ({ startDate, endDate }) => {
setValue(
"startDate",
startDate ? new Date(startDate).toISOString().split("T")[0] : null
);
setValue(
"endDate",
endDate ? new Date(endDate).toISOString().split("T")[0] : null
);
};
const toggleDropdown = () => {
setIsOpen((prev) => {
shouldCloseOnOutsideClick.current = !prev;
return !prev;
});
};
useEffect(() => {
function handleClickOutside(event) {
if (
shouldCloseOnOutsideClick.current &&
dropdownRef.current &&
dropdownRef.current.contains(event.target)
) {
setIsOpen(false);
}
}
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
const clearFilter =()=>{
setFilter(
{
projectIds: [],
statusIds: [],
createdByIds: [],
paidById: [],
startDate: null,
endDate: null,
})
reset()
}
return ( return (
<ExpenseContext.Provider value={contextValue}> <ExpenseContext.Provider value={contextValue}>
<div className="container-fluid"> <div className="container-fluid">
@ -42,16 +208,136 @@ const ExpensePage = () => {
<div className="card my-1 text-start px-0"> <div className="card my-1 text-start px-0">
<div className="card-body py-1 px-1"> <div className="card-body py-1 px-1">
<div className="row"> <div className="row">
<div className="col-5 col-sm-4"> <div className="col-5 col-sm-4 d-flex aligin-items-center">
<label className="mb-0"> <div
<input className="dropdown d-inline-block mt-2 align-items-center"
type="search" ref={dropdownRef}
className="form-control form-control-sm" >
placeholder="Search Expense..." <i
aria-controls="DataTables_Table_0" className="bx bx-slider-alt ms-2"
/> role="button"
</label> aria-expanded={isOpen}
<i className="bx bx-slider-alt ms-2"></i> style={{ cursor: "pointer" }}
onClick={() => setIsOpen((v) => !v)}
></i>
{isOpen && (
<div
className="dropdown-menu p-3 overflow-hidden show d-flex align-items-center"
style={{ minWidth: "500px" }}
>
<FormProvider {...methods}>
<form
className="p-2 p-sm-0"
onSubmit={handleSubmit((data) => {
onSubmit(data);
setIsOpen(false);
})}
>
<div className="w-100">
<DateRangePicker
onRangeChange={setDateRange}
endDateMode="today"
DateDifference="6"
dateFormat="DD-MM-YYYY"
/>
</div>
<div className="row g-2">
<div className="col-12 ">
<label className="form-label d-block text-secondary">
Select Status
</label>
<div className="d-flex flex-wrap">
{ExpenseStatus.map((status) => (
<Controller
key={status.id}
control={control}
name="statusIds"
render={({
field: { value = [], onChange },
}) => (
<div className="d-flex align-items-center me-4 mb-2">
<input
type="checkbox"
className="form-check-input form-check-input-sm"
value={status.id}
checked={value.includes(status.id)}
onChange={(e) => {
if (e.target.checked) {
onChange([...value, status.id]);
} else {
onChange(
value.filter(
(v) => v !== status.id
)
);
}
}}
/>
<label className="ms-2 mb-0">
{status.displayName}
</label>
</div>
)}
/>
))}
</div>
</div>
</div>
<div className="row g-2">
<SelectMultiple
name="projectIds"
label="Select Projects"
options={projectNames}
labelKey="name"
valueKey="id"
IsLoading={projectLoading}
/>
<SelectMultiple
name="createdByIds"
label="Select creator"
options={employees}
labelKey={(item) =>
`${item.firstName} ${item.lastName}`
}
valueKey="id"
IsLoading={empLoading}
/>
<SelectMultiple
name="paidById"
label="Select Paid by"
options={employees}
labelKey={(item) =>
`${item.firstName} ${item.lastName}`
}
valueKey="id"
IsLoading={empLoading}
/>
</div>
<div className="d-flex justify-content-end py-1 gap-2">
<button
type="button"
className="btn btn-secondary btn-xs"
onClick={() => {
clearFilter()
setIsOpen(false);
}}
>
Clear
</button>
<button
type="submit"
className="btn btn-primary btn-xs"
>
Apply
</button>
</div>
</form>
</FormProvider>
</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
@ -76,7 +362,7 @@ const ExpensePage = () => {
</div> </div>
</div> </div>
<ExpenseList /> <ExpenseList filters={filters} />
{ManageExpenseModal.IsOpen && ( {ManageExpenseModal.IsOpen && (
<GlobalModel <GlobalModel
isOpen={ManageExpenseModal.IsOpen} isOpen={ManageExpenseModal.IsOpen}