Compare commits
5 Commits
d6ead0fd4c
...
6fbc0411db
| Author | SHA1 | Date | |
|---|---|---|---|
| 6fbc0411db | |||
| 81712a0695 | |||
| 34373b6256 | |||
| 506e6ac381 | |||
| a40d0b7e58 |
@ -4,14 +4,16 @@ import Avatar from "../common/Avatar";
|
||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Pagination from "../common/Pagination";
|
||||
import { APPROVE_EXPENSE, ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import { AppColorconfig, getColorNameFromHex } from "../../utils/appUtils";
|
||||
import { APPROVE_EXPENSE } from "../../utils/constants";
|
||||
import { getColorNameFromHex } from "../../utils/appUtils";
|
||||
import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
|
||||
import ConfirmModal from "../common/ConfirmModal";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
const ExpenseList = ({ filters }) => {
|
||||
|
||||
|
||||
const ExpenseList = ({ filters, groupBy = "transactionDate" }) => {
|
||||
const [deletingId, setDeletingId] = useState(null);
|
||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const { setViewExpense, setManageExpenseModal } = useExpenseContext();
|
||||
@ -21,8 +23,12 @@ const ExpenseList = ({ filters }) => {
|
||||
const pageSize = 10;
|
||||
|
||||
const { mutate: DeleteExpense, isPending } = useDeleteExpense();
|
||||
const { data, isLoading, isError, isInitialLoading, error, isFetching } =
|
||||
useExpenseList(10, currentPage, filters);
|
||||
const { data, isLoading, isError, isInitialLoading, error } = useExpenseList(
|
||||
pageSize,
|
||||
currentPage,
|
||||
filters
|
||||
);
|
||||
|
||||
const SelfId = useSelector(
|
||||
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
||||
);
|
||||
@ -40,70 +46,128 @@ const ExpenseList = ({ filters }) => {
|
||||
);
|
||||
};
|
||||
|
||||
if (isInitialLoading) return <ExpenseTableSkeleton />;
|
||||
if (isError) return <div>{error}</div>;
|
||||
const items = data?.data ?? [];
|
||||
const totalPages = data?.totalPages ?? 1;
|
||||
const hasMore = currentPage < totalPages;
|
||||
|
||||
const paginate = (page) => {
|
||||
if (page >= 1 && page <= totalPages) {
|
||||
if (page >= 1 && page <= (data?.totalPages ?? 1)) {
|
||||
setCurrentPage(page);
|
||||
}
|
||||
};
|
||||
const STATUS_ORDER = [
|
||||
"Draft",
|
||||
"Review Pending",
|
||||
"Approval Pending",
|
||||
"Process Pending",
|
||||
"Processed",
|
||||
"Paid",
|
||||
"Rejected",
|
||||
|
||||
const groupByField = (items, field) => {
|
||||
return items.reduce((acc, item) => {
|
||||
let key;
|
||||
switch (field) {
|
||||
case "transactionDate":
|
||||
key = item.transactionDate?.split("T")[0];
|
||||
break;
|
||||
case "status":
|
||||
key = item.status?.displayName || "Unknown";
|
||||
break;
|
||||
case "paidBy":
|
||||
key = `${item.paidBy?.firstName ?? ""} ${item.paidBy?.lastName ?? ""}`.trim();
|
||||
break;
|
||||
case "project":
|
||||
key = item.project?.name || "Unknown Project";
|
||||
break;
|
||||
case "paymentMode":
|
||||
key = item.paymentMode?.name || "Unknown Mode";
|
||||
break;
|
||||
case "expensesType":
|
||||
key = item.expensesType?.name || "Unknown Type";
|
||||
break;
|
||||
default:
|
||||
key = "Others";
|
||||
}
|
||||
if (!acc[key]) acc[key] = [];
|
||||
acc[key].push(item);
|
||||
return acc;
|
||||
}, {});
|
||||
};
|
||||
|
||||
const expenseColumns = [
|
||||
{
|
||||
key: "expensesType",
|
||||
label: "Expense Type",
|
||||
getValue: (e) => e.expensesType?.name || "N/A",
|
||||
align:"text-start",
|
||||
},
|
||||
{
|
||||
key: "paymentMode",
|
||||
label: "Payment Mode",
|
||||
getValue: (e) => e.paymentMode?.name || "N/A",
|
||||
align:"text-start"
|
||||
},
|
||||
{
|
||||
key: "paidBy",
|
||||
label: "Paid By",
|
||||
align:"text-start",
|
||||
getValue: (e) =>
|
||||
`${e.paidBy?.firstName ?? ""} ${e.paidBy?.lastName ?? ""}`.trim() || "N/A",
|
||||
customRender: (e) => (
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={e.paidBy?.firstName}
|
||||
lastName={e.paidBy?.lastName}
|
||||
/>
|
||||
<span>
|
||||
{`${e.paidBy?.firstName ?? ""} ${e.paidBy?.lastName ?? ""}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "submitted",
|
||||
label: "Submitted",
|
||||
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
||||
isAlwaysVisible: true
|
||||
},
|
||||
{
|
||||
key: "amount",
|
||||
label: "Amount",
|
||||
getValue: (e) => (
|
||||
<>
|
||||
<i className="bx bx-rupee b-xs"></i> {e?.amount}
|
||||
</>
|
||||
),
|
||||
isAlwaysVisible: true,
|
||||
align: "text-end"
|
||||
},
|
||||
{
|
||||
key: "status",
|
||||
label: "Status",
|
||||
align:"text-center",
|
||||
getValue: (e) => (
|
||||
<span className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"}`}>
|
||||
{e.status?.name || "Unknown"}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
const groupExpensesByDateAndStatus = (expenses) => {
|
||||
const grouped = {};
|
||||
if (isInitialLoading) return <ExpenseTableSkeleton />;
|
||||
if (isError) return <div>{error}</div>;
|
||||
|
||||
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)
|
||||
);
|
||||
}),
|
||||
}));
|
||||
};
|
||||
const grouped = groupBy ? groupByField(data?.data ?? [], groupBy) : { All: data?.data ?? [] };
|
||||
const IsGroupedByDate = ["transactionDate", "createdAt"].includes(groupBy);
|
||||
|
||||
return (
|
||||
<>
|
||||
{IsDeleteModalOpen && (
|
||||
<div
|
||||
className={`modal fade ${IsDeleteModalOpen ? "show" : ""}`}
|
||||
className={`modal fade show`}
|
||||
tabIndex="-1"
|
||||
role="dialog"
|
||||
style={{
|
||||
display: IsDeleteModalOpen ? "block" : "none",
|
||||
backgroundColor: IsDeleteModalOpen
|
||||
? "rgba(0,0,0,0.5)"
|
||||
: "transparent",
|
||||
display: "block",
|
||||
backgroundColor: "rgba(0,0,0,0.5)"
|
||||
}}
|
||||
aria-hidden="false"
|
||||
>
|
||||
<ConfirmModal
|
||||
type={"delete"}
|
||||
header={"Delete Expense"}
|
||||
message={"Are you sure you want delete?"}
|
||||
type="delete"
|
||||
header="Delete Expense"
|
||||
message="Are you sure you want delete?"
|
||||
onSubmit={handleDelete}
|
||||
onClose={() => setIsDeleteModalOpen(false)}
|
||||
loading={isPending}
|
||||
@ -111,211 +175,102 @@ const ExpenseList = ({ filters }) => {
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="card ">
|
||||
|
||||
<div className="card">
|
||||
<div className="card-datatable table-responsive">
|
||||
<div
|
||||
id="DataTables_Table_0_wrapper"
|
||||
className="dataTables_wrapper no-footer px-2"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<div className="dataTables_wrapper no-footer px-2">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<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 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">Submitted</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>
|
||||
{expenseColumns.map(
|
||||
(col) =>
|
||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
||||
<th
|
||||
key={col.key}
|
||||
className={`sorting d-table-cell`}
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className={`${col.align}`}>{col.label}</div>
|
||||
</th>
|
||||
)
|
||||
)}
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</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>
|
||||
</td>
|
||||
<td className="d-table-cell text-center">
|
||||
{formatUTCToLocalTime(expense?.createdAt)}
|
||||
</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>
|
||||
|
||||
{(expense.status.name === "Draft" ||
|
||||
expense.status.name === "Rejected") &&
|
||||
expense.createdBy.id === SelfId && (
|
||||
<span className="cursor-pointer">
|
||||
<i
|
||||
className="bx bx-edit bx-sm text-secondary"
|
||||
onClick={() =>
|
||||
setManageExpenseModal({
|
||||
IsOpen: true,
|
||||
expenseId: expense.id,
|
||||
})
|
||||
}
|
||||
></i>
|
||||
</span>
|
||||
)}
|
||||
|
||||
{expense.status.name === "Draft" &&
|
||||
expense?.createdBy?.id === SelfId && (
|
||||
<span className="cursor-pointer">
|
||||
<i
|
||||
className="bx bx-trash bx-sm text-danger"
|
||||
onClick={() => {
|
||||
setIsDeleteModalOpen(true);
|
||||
setDeletingId(expense.id);
|
||||
}}
|
||||
></i>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
)}
|
||||
|
||||
{!isInitialLoading && items.length === 0 && (
|
||||
<tr rowSpan={8} style={{ height: "200px" }}>
|
||||
<td colSpan={8}>No Expnese Found</td>
|
||||
{Object.entries(grouped).map(([group, expenses]) => (
|
||||
<React.Fragment key={group}>
|
||||
<tr className="tr-group text-dark">
|
||||
<td colSpan={8} className="text-start">
|
||||
<strong>{IsGroupedByDate ? formatUTCToLocalTime(group) : group}</strong>
|
||||
</td>
|
||||
</tr>
|
||||
{expenses.map((expense) => (
|
||||
<tr key={expense.id}>
|
||||
{expenseColumns.map(
|
||||
(col) =>
|
||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
||||
<td key={col.key} className={`d-table-cell ${col.align ?? ""}`}>
|
||||
{col.customRender
|
||||
? col.customRender(expense)
|
||||
: col.getValue(expense)}
|
||||
</td>
|
||||
)
|
||||
)}
|
||||
<td>
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
<i
|
||||
className="bx bx-show text-primary cursor-pointer"
|
||||
onClick={() =>
|
||||
setViewExpense({ expenseId: expense.id, view: true })
|
||||
}
|
||||
></i>
|
||||
{(expense.status.name === "Draft" ||
|
||||
expense.status.name === "Rejected") &&
|
||||
expense.createdBy.id === SelfId && (
|
||||
<i
|
||||
className="bx bx-edit text-secondary cursor-pointer"
|
||||
onClick={() =>
|
||||
setManageExpenseModal({
|
||||
IsOpen: true,
|
||||
expenseId: expense.id
|
||||
})
|
||||
}
|
||||
></i>
|
||||
)}
|
||||
{expense.status.name === "Draft" &&
|
||||
expense?.createdBy?.id === SelfId && (
|
||||
<i
|
||||
className="bx bx-trash text-danger cursor-pointer"
|
||||
onClick={() => {
|
||||
setIsDeleteModalOpen(true);
|
||||
setDeletingId(expense.id);
|
||||
}}
|
||||
></i>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</React.Fragment>
|
||||
))}
|
||||
{data?.data?.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={8} className="text-center py-4">
|
||||
No Expense Found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
{data?.data?.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={data.totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{!isInitialLoading && items.length > 0 && (
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={paginate}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@ -323,3 +278,4 @@ const ExpenseList = ({ filters }) => {
|
||||
};
|
||||
|
||||
export default ExpenseList;
|
||||
|
||||
|
||||
@ -16,7 +16,19 @@ export const ExpenseSchema = (expenseTypes) => {
|
||||
expensesTypeId: z.string().min(1, { message: "Expense type is required" }),
|
||||
paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
|
||||
paidById: z.string().min(1, { message: "Employee name is required" }),
|
||||
transactionDate: z.string().min(1, { message: "Date is required" }),
|
||||
transactionDate: z
|
||||
.string()
|
||||
.min(1, { message: "Date is required" })
|
||||
.refine((val) => {
|
||||
const selected = new Date(val);
|
||||
const today = new Date();
|
||||
|
||||
// Set both to midnight to avoid time-related issues
|
||||
selected.setHours(0, 0, 0, 0);
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
return selected <= today;
|
||||
}, { message: "Future dates are not allowed" }),
|
||||
transactionId: z.string().optional(),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
location: z.string().min(1, { message: "Location is required" }),
|
||||
|
||||
@ -22,6 +22,7 @@ import {
|
||||
useUpdateExpense,
|
||||
} from "../../hooks/useExpense";
|
||||
import ExpenseSkeleton from "./ExpenseSkeleton";
|
||||
import moment from "moment";
|
||||
|
||||
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
const {
|
||||
@ -169,7 +170,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
handleClose();
|
||||
}
|
||||
);
|
||||
const onSubmit = (payload) => {
|
||||
const onSubmit = (fromdata) => {
|
||||
let payload = {...fromdata,transactionDate: moment.utc(fromdata.transactionDate, 'YYYY-MM-DD').toISOString()}
|
||||
if (expenseToEdit) {
|
||||
const editPayload = { ...payload, id: data.id };
|
||||
ExpenseUpdate({ id: data.id, payload: editPayload });
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user