Feature#804_ExpnseFilter : Added server side filter #293
@ -10,26 +10,18 @@ import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
|
||||
import ConfirmModal from "../common/ConfirmModal";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
|
||||
const ExpenseList = () => {
|
||||
const ExpenseList = ({filters}) => {
|
||||
const [deletingId, setDeletingId] = useState(null);
|
||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const { setViewExpense, setManageExpenseModal } = useExpenseContext();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const pageSize = 10;
|
||||
const {profile} = useProfile()
|
||||
console.log(profile)
|
||||
const filter = {
|
||||
projectIds: [],
|
||||
statusIds: [],
|
||||
createdByIds: [],
|
||||
paidById: [],
|
||||
startDate: null,
|
||||
endDate: null,
|
||||
};
|
||||
const { profile } = useProfile();
|
||||
|
||||
|
||||
const { mutate: DeleteExpense, isPending } = useDeleteExpense();
|
||||
const { data, isLoading, isError, isInitialLoading, error, isFetching } =
|
||||
useExpenseList(10, currentPage, filter);
|
||||
useExpenseList(10, currentPage, filters);
|
||||
|
||||
const handleDelete = (id) => {
|
||||
setDeletingId(id);
|
||||
@ -37,8 +29,8 @@ console.log(profile)
|
||||
{ id },
|
||||
{
|
||||
onSettled: () => {
|
||||
setDeletingId(null);
|
||||
setIsDeleteModalOpen(false)
|
||||
setDeletingId(null);
|
||||
setIsDeleteModalOpen(false);
|
||||
},
|
||||
}
|
||||
);
|
||||
@ -55,9 +47,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 +96,6 @@ console.log(profile)
|
||||
}}
|
||||
aria-hidden="false"
|
||||
>
|
||||
|
||||
<ConfirmModal
|
||||
type={"delete"}
|
||||
header={"Delete Expense"}
|
||||
@ -79,24 +103,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 px-3"
|
||||
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 +130,189 @@ 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-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 ">Payment Mode</div>
|
||||
</th>
|
||||
<th
|
||||
className="sorting sorting_desc d-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-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>
|
||||
)}
|
||||
|
||||
{!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...
|
||||
</thead>
|
||||
<tbody >
|
||||
{!isInitialLoading &&
|
||||
groupExpensesByDateAndStatus(items).map(
|
||||
({ date, expenses }) => (
|
||||
<>
|
||||
<tr key={`date-${date}`} className="tr-group text-dark">
|
||||
<td colSpan={7} className="text-start">
|
||||
<strong>{formatUTCToLocalTime(date)}</strong>
|
||||
</td>
|
||||
</tr> {expenses.map((expense) => (
|
||||
<tr key={expense.id} >
|
||||
<td className="text-start d-table-cell ms-5">
|
||||
{expense.expensesType?.name || "N/A"}
|
||||
</td>
|
||||
<td className="text-start d-table-cell ms-5">
|
||||
{expense.paymentMode?.name || "N/A"}
|
||||
</td>
|
||||
<td className="text-start d-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-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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -88,4 +88,24 @@ export const defaultExpense = {
|
||||
export const ActionSchema = z.object({
|
||||
comment : z.string().min(1,{message:"Please leave comment"}),
|
||||
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:""
|
||||
}
|
||||
@ -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 = 3 }) => {
|
||||
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>
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
const DateRangePicker = ({
|
||||
md,
|
||||
sm,
|
||||
onRangeChange,
|
||||
DateDifference = 7,
|
||||
endDateMode = "yesterday",
|
||||
@ -25,11 +27,12 @@ const DateRangePicker = ({
|
||||
altInput: true,
|
||||
altFormat: "d-m-Y",
|
||||
defaultDate: [startDate, endDate],
|
||||
static: true,
|
||||
static: false,
|
||||
appendTo: document.body,
|
||||
clickOpens: true,
|
||||
maxDate: endDate, // ✅ Disable future dates
|
||||
onChange: (selectedDates, dateStr) => {
|
||||
const [startDateString, endDateString] = dateStr.split(" to ");
|
||||
const [startDateString, endDateString] = dateStr.split(" To ");
|
||||
onRangeChange?.({ startDate: startDateString, endDate: endDateString });
|
||||
},
|
||||
});
|
||||
@ -45,13 +48,29 @@ const DateRangePicker = ({
|
||||
}, [onRangeChange, DateDifference, endDateMode]);
|
||||
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm ms-1"
|
||||
placeholder="From to End"
|
||||
id="flatpickr-range"
|
||||
ref={inputRef}
|
||||
/>
|
||||
<div className={`col-${sm} col-sm-${md} px-1 position-relative`}>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm ps-2 pe-5 "
|
||||
placeholder="From to End"
|
||||
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>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { useFormContext } from "react-hook-form";
|
||||
import { createPortal } from "react-dom";
|
||||
import "./MultiSelectDropdown.css";
|
||||
|
||||
const SelectMultiple = ({
|
||||
name,
|
||||
options = [],
|
||||
label = "Select options",
|
||||
labelKey = "name",
|
||||
labelKey = "name", // Can now be a function or a string
|
||||
valueKey = "id",
|
||||
placeholder = "Please select...",
|
||||
IsLoading = false,
|
||||
@ -16,11 +17,18 @@ const SelectMultiple = ({
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const containerRef = useRef(null);
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
const [dropdownStyles, setDropdownStyles] = useState({ top: 0, left: 0, width: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
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);
|
||||
}
|
||||
};
|
||||
@ -28,6 +36,21 @@ const SelectMultiple = ({
|
||||
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 updated = selectedValues.includes(value)
|
||||
? selectedValues.filter((v) => v !== value)
|
||||
@ -36,96 +59,113 @@ const SelectMultiple = ({
|
||||
setValue(name, updated, { shouldValidate: true });
|
||||
};
|
||||
|
||||
const filteredOptions = options.filter((item) =>
|
||||
item[labelKey]?.toLowerCase().includes(searchText.toLowerCase())
|
||||
);
|
||||
const filteredOptions = options.filter((item) => {
|
||||
const label = getLabel(item);
|
||||
return label?.toLowerCase().includes(searchText.toLowerCase());
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={dropdownRef} className="multi-select-dropdown-container">
|
||||
<label className="form-label mb-1">{label}</label>
|
||||
|
||||
<div
|
||||
className="multi-select-dropdown-header"
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
>
|
||||
<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);
|
||||
return (
|
||||
<span
|
||||
key={val}
|
||||
className="badge badge-selected-item mx-1 mb-1"
|
||||
>
|
||||
{found ? found[labelKey] : ""}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<span className="placeholder-text">{placeholder}</span>
|
||||
)}
|
||||
</div>
|
||||
</span>
|
||||
<i className="bx bx-chevron-down"></i>
|
||||
const dropdownElement = (
|
||||
<div
|
||||
ref={dropdownRef}
|
||||
className="multi-select-dropdown-options"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: dropdownStyles.top,
|
||||
left: dropdownStyles.left,
|
||||
width: dropdownStyles.width,
|
||||
zIndex: 9999,
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
|
||||
borderRadius: 4,
|
||||
maxHeight: 300,
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<div className="multi-select-dropdown-search" style={{ padding: 8 }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="multi-select-dropdown-search-input"
|
||||
style={{ width: "100%", padding: 4 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isOpen && (
|
||||
<div className="multi-select-dropdown-options">
|
||||
<div className="multi-select-dropdown-search">
|
||||
{filteredOptions.map((item) => {
|
||||
const labelVal = getLabel(item);
|
||||
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
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
className="multi-select-dropdown-search-input"
|
||||
type="checkbox"
|
||||
className="custom-checkbox form-check-input"
|
||||
checked={isChecked}
|
||||
onChange={() => handleCheckboxChange(valueVal)}
|
||||
style={{ marginRight: 8 }}
|
||||
/>
|
||||
<label className="text-secondary">{labelVal}</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{filteredOptions.map((item) => {
|
||||
const labelVal = item[labelKey];
|
||||
const valueVal = item[valueKey];
|
||||
const isChecked = selectedValues.includes(valueVal);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={valueVal}
|
||||
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>
|
||||
)}
|
||||
{!IsLoading && filteredOptions.length === 0 && (
|
||||
<div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
|
||||
<label className="text-muted">Not Found {`'${searchText}'`}</label>
|
||||
</div>
|
||||
)}
|
||||
{IsLoading && filteredOptions.length === 0 && (
|
||||
<div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
|
||||
<label className="text-muted">Loading...</label>
|
||||
</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;
|
||||
|
||||
@ -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 ViewExpense from "../../components/Expenses/ViewExpense";
|
||||
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";
|
||||
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 useExpenseContext = () => useContext(ExpenseContext);
|
||||
|
||||
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({
|
||||
IsOpen: null,
|
||||
expenseId: null,
|
||||
@ -30,6 +121,81 @@ const ExpensePage = () => {
|
||||
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 (
|
||||
<ExpenseContext.Provider value={contextValue}>
|
||||
<div className="container-fluid">
|
||||
@ -42,16 +208,136 @@ const ExpensePage = () => {
|
||||
<div className="card my-1 text-start px-0">
|
||||
<div className="card-body py-1 px-1">
|
||||
<div className="row">
|
||||
<div className="col-5 col-sm-4">
|
||||
<label className="mb-0">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Search Expense..."
|
||||
aria-controls="DataTables_Table_0"
|
||||
/>
|
||||
</label>
|
||||
<i className="bx bx-slider-alt ms-2"></i>
|
||||
<div className="col-5 col-sm-4 d-flex aligin-items-center">
|
||||
<div
|
||||
className="dropdown d-inline-block mt-2 align-items-center"
|
||||
ref={dropdownRef}
|
||||
>
|
||||
<i
|
||||
className="bx bx-slider-alt ms-2"
|
||||
role="button"
|
||||
aria-expanded={isOpen}
|
||||
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 className="col-7 col-sm-8 text-end gap-2">
|
||||
<button
|
||||
@ -76,7 +362,7 @@ const ExpensePage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ExpenseList />
|
||||
<ExpenseList filters={filters} />
|
||||
{ManageExpenseModal.IsOpen && (
|
||||
<GlobalModel
|
||||
isOpen={ManageExpenseModal.IsOpen}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user