Compare commits
No commits in common. "bca476ba901a372d06ddbf7822ce6e513bf3ea83" and "92f5566fce7c8dd0094fa52ea125e3b5cf93eef8" have entirely different histories.
bca476ba90
...
92f5566fce
@ -10,18 +10,26 @@ 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 = ({filters}) => {
|
const ExpenseList = () => {
|
||||||
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, filters);
|
useExpenseList(10, currentPage, filter);
|
||||||
|
|
||||||
const handleDelete = (id) => {
|
const handleDelete = (id) => {
|
||||||
setDeletingId(id);
|
setDeletingId(id);
|
||||||
@ -30,7 +38,7 @@ const ExpenseList = ({filters}) => {
|
|||||||
{
|
{
|
||||||
onSettled: () => {
|
onSettled: () => {
|
||||||
setDeletingId(null);
|
setDeletingId(null);
|
||||||
setIsDeleteModalOpen(false);
|
setIsDeleteModalOpen(false)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -47,42 +55,9 @@ const ExpenseList = ({filters}) => {
|
|||||||
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" : ""}`}
|
||||||
@ -96,6 +71,7 @@ const ExpenseList = ({filters}) => {
|
|||||||
}}
|
}}
|
||||||
aria-hidden="false"
|
aria-hidden="false"
|
||||||
>
|
>
|
||||||
|
|
||||||
<ConfirmModal
|
<ConfirmModal
|
||||||
type={"delete"}
|
type={"delete"}
|
||||||
header={"Delete Expense"}
|
header={"Delete Expense"}
|
||||||
@ -103,24 +79,24 @@ const ExpenseList = ({filters}) => {
|
|||||||
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 px-2"
|
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"
|
||||||
>
|
>
|
||||||
<table
|
<thead>
|
||||||
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap px-3"
|
<tr>
|
||||||
aria-describedby="DataTables_Table_0_info"
|
<th
|
||||||
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"
|
||||||
@ -130,189 +106,198 @@ const ExpenseList = ({filters}) => {
|
|||||||
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-table-cell"
|
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
aria-controls="DataTables_Table_0"
|
aria-controls="DataTables_Table_0"
|
||||||
rowSpan="1"
|
rowSpan="1"
|
||||||
colSpan="1"
|
colSpan="1"
|
||||||
aria-label="Payment Mode: activate to sort column ascending"
|
aria-label="Payment Mode: activate to sort column ascending"
|
||||||
aria-sort="descending"
|
aria-sort="descending"
|
||||||
>
|
>
|
||||||
<div className="text-start ">Payment Mode</div>
|
<div className="text-start ms-5">Payment Mode</div>
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
className="sorting sorting_desc d-table-cell"
|
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
aria-controls="DataTables_Table_0"
|
aria-controls="DataTables_Table_0"
|
||||||
rowSpan="1"
|
rowSpan="1"
|
||||||
colSpan="1"
|
colSpan="1"
|
||||||
aria-label="Paid By: activate to sort column ascending"
|
aria-label="Paid By: activate to sort column ascending"
|
||||||
aria-sort="descending"
|
aria-sort="descending"
|
||||||
>
|
>
|
||||||
<div className="text-start ms-5">Paid By</div>
|
<div className="text-start ms-5">Paid By</div>
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
className="sorting d-table-cell"
|
className="sorting d-none d-md-table-cell"
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
aria-controls="DataTables_Table_0"
|
aria-controls="DataTables_Table_0"
|
||||||
rowSpan="1"
|
rowSpan="1"
|
||||||
colSpan="1"
|
colSpan="1"
|
||||||
aria-label="Amount: activate to sort column ascending"
|
aria-label="Amount: activate to sort column ascending"
|
||||||
>
|
>
|
||||||
Amount
|
Amount
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
className="sorting"
|
className="sorting"
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
aria-controls="DataTables_Table_0"
|
aria-controls="DataTables_Table_0"
|
||||||
rowSpan="1"
|
rowSpan="1"
|
||||||
colSpan="1"
|
colSpan="1"
|
||||||
aria-label="Status: activate to sort column ascending"
|
aria-label="Status: activate to sort column ascending"
|
||||||
>
|
>
|
||||||
Status
|
Status
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
className="sorting"
|
className="sorting"
|
||||||
tabIndex="0"
|
tabIndex="0"
|
||||||
aria-controls="DataTables_Table_0"
|
aria-controls="DataTables_Table_0"
|
||||||
rowSpan="1"
|
rowSpan="1"
|
||||||
colSpan="1"
|
colSpan="1"
|
||||||
aria-label="Status: activate to sort column ascending"
|
aria-label="Status: activate to sort column ascending"
|
||||||
>
|
>
|
||||||
Action
|
Action
|
||||||
</th>
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{/* {isLoading && (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={7} className="text-center py-3">
|
||||||
|
Loading...
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
)}
|
||||||
<tbody >
|
|
||||||
{!isInitialLoading &&
|
{!isInitialLoading && items.length === 0 && (
|
||||||
groupExpensesByDateAndStatus(items).map(
|
<tr>
|
||||||
({ date, expenses }) => (
|
<td colSpan={7} className="text-center py-3">
|
||||||
<>
|
No expenses found.
|
||||||
<tr key={`date-${date}`} className="tr-group text-dark">
|
</td>
|
||||||
<td colSpan={7} className="text-start">
|
</tr>
|
||||||
<strong>{formatUTCToLocalTime(date)}</strong>
|
)} */}
|
||||||
</td>
|
|
||||||
</tr> {expenses.map((expense) => (
|
{!isInitialLoading &&
|
||||||
<tr key={expense.id} >
|
items.map((expense) => (
|
||||||
<td className="text-start d-table-cell ms-5">
|
<tr key={expense.id} className="odd">
|
||||||
{expense.expensesType?.name || "N/A"}
|
<td className="sorting_1" colSpan={2}>
|
||||||
</td>
|
<div className="d-flex justify-content-start align-items-center user-name ms-6">
|
||||||
<td className="text-start d-table-cell ms-5">
|
<span>
|
||||||
{expense.paymentMode?.name || "N/A"}
|
{formatUTCToLocalTime(expense.transactionDate)}
|
||||||
</td>
|
</span>
|
||||||
<td className="text-start d-table-cell ms-5">
|
</div>
|
||||||
<div className="d-flex align-items-center">
|
</td>
|
||||||
<Avatar
|
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||||
size="xs"
|
{expense.expensesType?.name || "N/A"}
|
||||||
classAvatar="m-0"
|
</td>
|
||||||
firstName={expense.paidBy?.firstName}
|
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||||
lastName={expense.paidBy?.lastName}
|
{expense.paymentMode?.name || "N/A"}
|
||||||
/>
|
</td>
|
||||||
<span>
|
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||||
{`${expense.paidBy?.firstName ?? ""} ${
|
<div className="d-flex align-items-center">
|
||||||
expense.paidBy?.lastName ?? ""
|
<Avatar
|
||||||
}`.trim() || "N/A"}
|
size="xs"
|
||||||
</span>
|
classAvatar="m-0 "
|
||||||
</div>
|
firstName={expense.paidBy?.firstName}
|
||||||
</td>
|
lastName={expense.paidBy?.lastName}
|
||||||
<td className="d-table-cell text-end">
|
/>
|
||||||
<i className="bx bx-rupee b-xs"></i>
|
<span>
|
||||||
{expense?.amount}
|
{`${expense.paidBy?.firstName ?? ""} ${
|
||||||
</td>
|
expense.paidBy?.lastName ?? ""
|
||||||
<td>
|
}`.trim() || "N/A"}
|
||||||
<span
|
</span>
|
||||||
className={`badge bg-label-${
|
</div>
|
||||||
getColorNameFromHex(expense?.status?.color) ||
|
</td>
|
||||||
"secondary"
|
<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"
|
||||||
>
|
>
|
||||||
{expense.status?.displayName || "Unknown"}
|
<span className="visually-hidden">
|
||||||
</span>
|
Loading...
|
||||||
</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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
) : ( */}
|
||||||
</tr>
|
<i className="bx bx-trash bx-sm text-danger"></i>
|
||||||
))}
|
{/* )} */}
|
||||||
</>
|
</span>
|
||||||
)
|
)}
|
||||||
)}
|
</div>
|
||||||
</tbody>
|
</td>
|
||||||
</table>
|
</tr>
|
||||||
</div>
|
))}
|
||||||
{!isInitialLoading && items.length > 0 && (
|
</tbody>
|
||||||
<Pagination
|
</table>
|
||||||
currentPage={currentPage}
|
|
||||||
totalPages={totalPages}
|
|
||||||
onPageChange={paginate}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
{!isInitialLoading && items.length > 0 && (
|
||||||
|
<Pagination
|
||||||
|
currentPage={currentPage}
|
||||||
|
totalPages={totalPages}
|
||||||
|
onPageChange={paginate}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -89,23 +89,3 @@ 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:""
|
|
||||||
}
|
|
||||||
@ -123,19 +123,17 @@ export const ExpenseDetailsSkeleton = () => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
const SkeletonCell = ({ width = "100%", height = 20, className = "", style = {} }) => (
|
const SkeletonCell = ({ width = "100%", height = 20, className = "" }) => (
|
||||||
<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"
|
||||||
@ -161,70 +159,58 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
|
|||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
<tbody>
|
<tbody>
|
||||||
{[...Array(groups)].map((_, groupIdx) => (
|
{[...Array(rows)].map((_, idx) => (
|
||||||
<React.Fragment key={`group-${groupIdx}`}>
|
<tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
|
||||||
{/* Fake Date Group Header Row */}
|
{/* Date Time colSpan=2 */}
|
||||||
<tr className="bg-light">
|
<td colSpan={2} className="sorting_1">
|
||||||
<td colSpan={8}>
|
<div className="d-flex justify-content-start align-items-center user-name ms-6">
|
||||||
<SkeletonCell width="150px" height={20} />
|
<SkeletonCell width="120px" height={18} />
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</td>
|
||||||
|
|
||||||
{/* Rows under this group */}
|
{/* Expense Type */}
|
||||||
{[...Array(rowsPerGroup)].map((__, rowIdx) => (
|
<td className="text-start d-none d-sm-table-cell ms-5">
|
||||||
<tr key={`row-${groupIdx}-${rowIdx}`} className={rowIdx % 2 === 0 ? "odd" : "even"}>
|
<SkeletonCell width="90px" height={16} />
|
||||||
{/* Date Time colSpan=2 */}
|
</td>
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Expense Type */}
|
{/* 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">
|
||||||
<SkeletonCell width="90px" height={16} />
|
<SkeletonCell width="90px" height={16} />
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
{/* Payment Mode */}
|
{/* Paid By (Avatar + name) */}
|
||||||
<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} />
|
<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>
|
||||||
|
|
||||||
{/* Paid By (Avatar + name) */}
|
{/* Amount */}
|
||||||
<td className="text-start d-none d-sm-table-cell ms-5">
|
<td className="d-none d-md-table-cell text-end">
|
||||||
<div className="d-flex align-items-center gap-2">
|
<SkeletonCell width="60px" height={16} />
|
||||||
<SkeletonCell width="30px" height={30} className="rounded-circle" />
|
</td>
|
||||||
<SkeletonCell width="80px" height={16} />
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
{/* Amount */}
|
{/* Status */}
|
||||||
<td className="d-none d-md-table-cell text-end">
|
<td>
|
||||||
<SkeletonCell width="60px" height={16} />
|
<SkeletonCell width="80px" height={22} className="rounded" />
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
{/* Status */}
|
{/* Action (icons) */}
|
||||||
<td>
|
<td>
|
||||||
<SkeletonCell width="80px" height={22} className="rounded" />
|
<div className="d-flex justify-content-center align-items-center gap-2">
|
||||||
</td>
|
{[...Array(3)].map((__, i) => (
|
||||||
|
<SkeletonCell
|
||||||
{/* Action */}
|
key={i}
|
||||||
<td>
|
width={20}
|
||||||
<div className="d-flex justify-content-center align-items-center gap-2">
|
height={20}
|
||||||
{[...Array(3)].map((__, i) => (
|
className="rounded"
|
||||||
<SkeletonCell
|
style={{ display: "inline-block" }}
|
||||||
key={i}
|
/>
|
||||||
width={20}
|
))}
|
||||||
height={20}
|
</div>
|
||||||
className="rounded"
|
</td>
|
||||||
style={{ display: "inline-block" }}
|
</tr>
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
@ -133,7 +133,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (expenseToEdit && data && employees) {
|
if (expenseToEdit && data) {
|
||||||
reset({
|
reset({
|
||||||
projectId: data.project.id || "",
|
projectId: data.project.id || "",
|
||||||
expensesTypeId: data.expensesType.id || "",
|
expensesTypeId: data.expensesType.id || "",
|
||||||
@ -170,7 +170,6 @@ 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 });
|
||||||
@ -195,6 +194,7 @@ 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 || createPending}
|
disabled={isPending}
|
||||||
>
|
>
|
||||||
{isPending || createPending ? "Please Wait..." : expenseToEdit ? "Update" : "Submit"}
|
{isPending || createPending ? "Please Wait..." : expenseToEdit ? "Update" : "Submit"}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@ -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-6 mb-3">
|
<div className="col-12 col-md-4 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-6 mb-3">
|
<div className="col-12 col-md-4 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,24 +108,20 @@ 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
|
<span className={`badge bg-label-${getColorNameFromHex(data?.status?.color) || 'secondary'}`}>
|
||||||
className={`badge bg-label-${
|
{data?.status?.displayName}
|
||||||
getColorNameFromHex(data?.status?.color) || "secondary"
|
</span>
|
||||||
}`}
|
</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">
|
||||||
@ -157,7 +153,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>
|
||||||
@ -167,61 +163,52 @@ 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 && data?.documents?.map((doc) => (
|
||||||
data?.documents?.map((doc) => (
|
<div
|
||||||
|
className="list-group-item list-group-item-action d-flex align-items-center"
|
||||||
|
key={doc.id}
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
className="list-group-item list-group-item-action d-flex align-items-center"
|
className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
|
||||||
key={doc.id}
|
style={{ height: "50px", width: "80px", position: "relative" }}
|
||||||
>
|
>
|
||||||
<div
|
{doc.contentType === "application/pdf" ? (
|
||||||
className="rounded me-1 d-flex align-items-center justify-content-center cursor-pointer"
|
<div><i className="bx bxs-file-pdf" style={{fontSize:"45px"}}></i></div>
|
||||||
style={{ height: "50px", width: "80px", position: "relative" }}
|
) : (
|
||||||
>
|
<>
|
||||||
{doc.contentType === "application/pdf" ? (
|
{!imageLoaded[doc.id] && (
|
||||||
<div>
|
<div className="position-absolute text-secondary">
|
||||||
<i
|
Loading...
|
||||||
className="bx bxs-file-pdf"
|
</div>
|
||||||
style={{ fontSize: "45px" }}
|
)}
|
||||||
></i>
|
<img
|
||||||
</div>
|
src={doc.thumbPreSignedUrl}
|
||||||
) : (
|
alt={doc.fileName}
|
||||||
<>
|
className="img-fluid rounded"
|
||||||
{!imageLoaded[doc.id] && (
|
style={{
|
||||||
<div className="position-absolute text-secondary">
|
maxHeight: "100%",
|
||||||
Loading...
|
maxWidth: "100%",
|
||||||
</div>
|
objectFit: "cover",
|
||||||
)}
|
opacity: imageLoaded[doc.id] ? 1 : 0,
|
||||||
<img
|
transition: "opacity 0.3s ease-in-out",
|
||||||
src={doc.thumbPreSignedUrl}
|
}}
|
||||||
alt={doc.fileName}
|
onLoad={() => handleImageLoad(doc.id)}
|
||||||
className="img-fluid rounded"
|
onClick={() =>
|
||||||
style={{
|
setDocumentView({ IsOpen: true, Image: doc.preSignedUrl })
|
||||||
maxHeight: "100%",
|
}
|
||||||
maxWidth: "100%",
|
/>
|
||||||
objectFit: "cover",
|
</>
|
||||||
opacity: imageLoaded[doc.id] ? 1 : 0,
|
)}
|
||||||
transition: "opacity 0.3s ease-in-out",
|
</div>
|
||||||
}}
|
|
||||||
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" />
|
||||||
@ -250,6 +237,7 @@ 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>
|
||||||
|
|||||||
@ -1,8 +1,6 @@
|
|||||||
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",
|
||||||
@ -27,12 +25,11 @@ const DateRangePicker = ({
|
|||||||
altInput: true,
|
altInput: true,
|
||||||
altFormat: "d-m-Y",
|
altFormat: "d-m-Y",
|
||||||
defaultDate: [startDate, endDate],
|
defaultDate: [startDate, endDate],
|
||||||
static: false,
|
static: true,
|
||||||
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 });
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -48,29 +45,13 @@ const DateRangePicker = ({
|
|||||||
}, [onRangeChange, DateDifference, endDateMode]);
|
}, [onRangeChange, DateDifference, endDateMode]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`col-${sm} col-sm-${md} px-1 position-relative`}>
|
<input
|
||||||
<input
|
type="text"
|
||||||
type="text"
|
className="form-control form-control-sm ms-1"
|
||||||
className="form-control form-control-sm ps-2 pe-5 "
|
placeholder="From to End"
|
||||||
placeholder="From to End"
|
id="flatpickr-range"
|
||||||
id="flatpickr-range"
|
ref={inputRef}
|
||||||
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,13 +1,12 @@
|
|||||||
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", // Can now be a function or a string
|
labelKey = "name",
|
||||||
valueKey = "id",
|
valueKey = "id",
|
||||||
placeholder = "Please select...",
|
placeholder = "Please select...",
|
||||||
IsLoading = false,
|
IsLoading = false,
|
||||||
@ -17,18 +16,11 @@ 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 (
|
if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
|
||||||
containerRef.current &&
|
|
||||||
!containerRef.current.contains(e.target) &&
|
|
||||||
(!dropdownRef.current || !dropdownRef.current.contains(e.target))
|
|
||||||
) {
|
|
||||||
setIsOpen(false);
|
setIsOpen(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -36,21 +28,6 @@ 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)
|
||||||
@ -59,113 +36,96 @@ const SelectMultiple = ({
|
|||||||
setValue(name, updated, { shouldValidate: true });
|
setValue(name, updated, { shouldValidate: true });
|
||||||
};
|
};
|
||||||
|
|
||||||
const filteredOptions = options.filter((item) => {
|
const filteredOptions = options.filter((item) =>
|
||||||
const label = getLabel(item);
|
item[labelKey]?.toLowerCase().includes(searchText.toLowerCase())
|
||||||
return label?.toLowerCase().includes(searchText.toLowerCase());
|
);
|
||||||
});
|
|
||||||
|
|
||||||
const dropdownElement = (
|
return (
|
||||||
<div
|
<div ref={dropdownRef} className="multi-select-dropdown-container">
|
||||||
ref={dropdownRef}
|
<label className="form-label mb-1">{label}</label>
|
||||||
className="multi-select-dropdown-options"
|
|
||||||
style={{
|
<div
|
||||||
position: "absolute",
|
className="multi-select-dropdown-header"
|
||||||
top: dropdownStyles.top,
|
onClick={() => setIsOpen((prev) => !prev)}
|
||||||
left: dropdownStyles.left,
|
>
|
||||||
width: dropdownStyles.width,
|
<span
|
||||||
zIndex: 9999,
|
className={
|
||||||
backgroundColor: "white",
|
selectedValues.length > 0
|
||||||
boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
|
? "placeholder-style-selected"
|
||||||
borderRadius: 4,
|
: "placeholder-style"
|
||||||
maxHeight: 300,
|
}
|
||||||
overflowY: "auto",
|
>
|
||||||
}}
|
<div className="selected-badges-container">
|
||||||
>
|
{selectedValues.length > 0 ? (
|
||||||
<div className="multi-select-dropdown-search" style={{ padding: 8 }}>
|
selectedValues.map((val) => {
|
||||||
<input
|
const found = options.find((opt) => opt[valueKey] === val);
|
||||||
type="text"
|
return (
|
||||||
placeholder="Search..."
|
<span
|
||||||
value={searchText}
|
key={val}
|
||||||
onChange={(e) => setSearchText(e.target.value)}
|
className="badge badge-selected-item mx-1 mb-1"
|
||||||
className="multi-select-dropdown-search-input"
|
>
|
||||||
style={{ width: "100%", padding: 4 }}
|
{found ? found[labelKey] : ""}
|
||||||
/>
|
</span>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<span className="placeholder-text">{placeholder}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<i className="bx bx-chevron-down"></i>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{filteredOptions.map((item) => {
|
{isOpen && (
|
||||||
const labelVal = getLabel(item);
|
<div className="multi-select-dropdown-options">
|
||||||
const valueVal = item[valueKey];
|
<div className="multi-select-dropdown-search">
|
||||||
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="checkbox"
|
type="text"
|
||||||
className="custom-checkbox form-check-input"
|
placeholder="Search..."
|
||||||
checked={isChecked}
|
value={searchText}
|
||||||
onChange={() => handleCheckboxChange(valueVal)}
|
onChange={(e) => setSearchText(e.target.value)}
|
||||||
style={{ marginRight: 8 }}
|
className="multi-select-dropdown-search-input"
|
||||||
/>
|
/>
|
||||||
<label className="text-secondary">{labelVal}</label>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
|
||||||
})}
|
|
||||||
|
|
||||||
{!IsLoading && filteredOptions.length === 0 && (
|
{filteredOptions.map((item) => {
|
||||||
<div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
|
const labelVal = item[labelKey];
|
||||||
<label className="text-muted">Not Found {`'${searchText}'`}</label>
|
const valueVal = item[valueKey];
|
||||||
</div>
|
const isChecked = selectedValues.includes(valueVal);
|
||||||
)}
|
|
||||||
{IsLoading && filteredOptions.length === 0 && (
|
return (
|
||||||
<div className="multi-select-dropdown-Not-found" style={{ padding: 8 }}>
|
<div
|
||||||
<label className="text-muted">Loading...</label>
|
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>
|
||||||
|
)}
|
||||||
</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;
|
||||||
|
|||||||
@ -1,107 +1,16 @@
|
|||||||
import React, {
|
import React, { createContext, useContext, useState } from "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,
|
||||||
@ -121,81 +30,6 @@ 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">
|
||||||
@ -208,136 +42,16 @@ 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 d-flex aligin-items-center">
|
<div className="col-5 col-sm-4">
|
||||||
<div
|
<label className="mb-0">
|
||||||
className="dropdown d-inline-block mt-2 align-items-center"
|
<input
|
||||||
ref={dropdownRef}
|
type="search"
|
||||||
>
|
className="form-control form-control-sm"
|
||||||
<i
|
placeholder="Search Expense..."
|
||||||
className="bx bx-slider-alt ms-2"
|
aria-controls="DataTables_Table_0"
|
||||||
role="button"
|
/>
|
||||||
aria-expanded={isOpen}
|
</label>
|
||||||
style={{ cursor: "pointer" }}
|
<i className="bx bx-slider-alt ms-2"></i>
|
||||||
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
|
||||||
@ -362,7 +76,7 @@ const ExpensePage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ExpenseList filters={filters} />
|
<ExpenseList />
|
||||||
{ManageExpenseModal.IsOpen && (
|
{ManageExpenseModal.IsOpen && (
|
||||||
<GlobalModel
|
<GlobalModel
|
||||||
isOpen={ManageExpenseModal.IsOpen}
|
isOpen={ManageExpenseModal.IsOpen}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user