Added Chips in Expense filter.
This commit is contained in:
parent
4a05e67ff0
commit
7c9d2ddeb1
222
src/components/Expenses/ExpenseFilterChips.jsx
Normal file
222
src/components/Expenses/ExpenseFilterChips.jsx
Normal file
@ -0,0 +1,222 @@
|
||||
import React, { useMemo } from "react";
|
||||
|
||||
const ExpenseFilterChips = ({ filters, filterData, removeFilterChip }) => {
|
||||
// Build chips from filters
|
||||
const filterChips = useMemo(() => {
|
||||
const chips = [];
|
||||
|
||||
const buildGroup = (ids, list, label, key) => {
|
||||
if (!ids?.length) return;
|
||||
const items = ids.map((id) => ({
|
||||
id,
|
||||
name: list.find((item) => item.id === id)?.name || id,
|
||||
}));
|
||||
chips.push({ key, label, items });
|
||||
};
|
||||
|
||||
buildGroup(filters.projectIds, filterData.projects, "Project", "projectIds");
|
||||
buildGroup(filters.createdByIds, filterData.createdBy, "Submitted By", "createdByIds");
|
||||
buildGroup(filters.paidById, filterData.paidBy, "Paid By", "paidById");
|
||||
buildGroup(filters.statusIds, filterData.status, "Status", "statusIds");
|
||||
buildGroup(filters.ExpenseTypeIds, filterData.expensesType, "Category", "ExpenseTypeIds");
|
||||
|
||||
if (filters.startDate || filters.endDate) {
|
||||
const start = filters.startDate
|
||||
? new Date(filters.startDate).toLocaleDateString()
|
||||
: "";
|
||||
const end = filters.endDate
|
||||
? new Date(filters.endDate).toLocaleDateString()
|
||||
: "";
|
||||
chips.push({
|
||||
key: "dateRange",
|
||||
label: "Date Range",
|
||||
items: [{ id: "dateRange", name: `${start} - ${end}` }],
|
||||
});
|
||||
}
|
||||
|
||||
return chips;
|
||||
}, [filters, filterData]);
|
||||
|
||||
if (!filterChips.length) return null;
|
||||
|
||||
return (
|
||||
|
||||
<div className="row">
|
||||
<div className="text-start mt-2">
|
||||
<strong className="fs-6 ms-2">Filter:</strong>
|
||||
</div>
|
||||
<div className="col-12 d-flex flex-column text-start text-wrap">
|
||||
{filterChips.map((chip) => (
|
||||
<span
|
||||
key={chip.key}
|
||||
className="d-flex align-items-center px-2 py-1 rounded flex-wrap"
|
||||
>
|
||||
<strong className="me-1">{chip.label}:</strong>
|
||||
<div className="d-flex flex-wrap align-items-center">
|
||||
{chip.items.map((item) => (
|
||||
<span
|
||||
key={item.id}
|
||||
className="d-flex align-items-center bg-light rounded px-2 py-1 me-2 mb-1"
|
||||
style={{ fontSize: "0.8rem" }}
|
||||
>
|
||||
<span>{item.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close btn-close-white btn-sm ms-2"
|
||||
style={{
|
||||
filter: "invert(1) grayscale(1)",
|
||||
opacity: 0.7,
|
||||
fontSize: "0.6rem",
|
||||
}}
|
||||
onClick={() => removeFilterChip(chip.key, item.id)}
|
||||
/>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpenseFilterChips;
|
||||
|
||||
|
||||
// import React, { useMemo } from "react";
|
||||
|
||||
// const ExpenseFilterChips = ({ filters, filterData, removeFilterChip, groupBy }) => {
|
||||
// // Build filter chips
|
||||
// const filterChips = useMemo(() => {
|
||||
// const chips = [];
|
||||
|
||||
// const buildGroup = (ids, list, label, key) => {
|
||||
// if (!ids?.length) return;
|
||||
// const items = ids.map((id) => ({
|
||||
// id,
|
||||
// name: list.find((item) => item.id === id)?.name || id,
|
||||
// }));
|
||||
// chips.push({ key, label, items });
|
||||
// };
|
||||
|
||||
// buildGroup(filters.projectIds, filterData.projects, "Project", "projectIds");
|
||||
// buildGroup(filters.createdByIds, filterData.createdBy, "Submitted By", "createdByIds");
|
||||
// buildGroup(filters.paidById, filterData.paidBy, "Paid By", "paidById");
|
||||
// buildGroup(filters.statusIds, filterData.status, "Status", "statusIds");
|
||||
// buildGroup(filters.ExpenseTypeIds, filterData.expensesType, "Category", "ExpenseTypeIds");
|
||||
|
||||
// if (filters.startDate || filters.endDate) {
|
||||
// const start = filters.startDate
|
||||
// ? new Date(filters.startDate).toLocaleDateString("en-GB", {
|
||||
// day: "2-digit",
|
||||
// month: "short",
|
||||
// year: "numeric",
|
||||
// })
|
||||
// : "";
|
||||
// const end = filters.endDate
|
||||
// ? new Date(filters.endDate).toLocaleDateString("en-GB", {
|
||||
// day: "2-digit",
|
||||
// month: "short",
|
||||
// year: "numeric",
|
||||
// })
|
||||
// : "";
|
||||
// chips.push({
|
||||
// key: "dateRange",
|
||||
// label: "Date Range",
|
||||
// items: [{ id: "dateRange", name: `${start} - ${end}` }],
|
||||
// });
|
||||
// }
|
||||
|
||||
// return chips;
|
||||
// }, [filters, filterData]);
|
||||
|
||||
// // Prepare groupBy chip
|
||||
// const groupByChip = useMemo(() => {
|
||||
// if (!groupBy) return null;
|
||||
|
||||
// const formattedGroup =
|
||||
// groupBy === "transactionDate"
|
||||
// ? "Transaction Date"
|
||||
// : groupBy === "status"
|
||||
// ? "Status"
|
||||
// : groupBy === "submittedBy"
|
||||
// ? "Submitted By"
|
||||
// : groupBy === "project"
|
||||
// ? "Project"
|
||||
// : groupBy === "paymentMode"
|
||||
// ? "Payment Mode"
|
||||
// : groupBy === "expensesType"
|
||||
// ? "Expense Type"
|
||||
// : groupBy === "createdAt"
|
||||
// ? "Submitted Date"
|
||||
// : "Others";
|
||||
|
||||
// return {
|
||||
// key: "groupBy",
|
||||
// label: "Group By",
|
||||
// items: [{ id: groupBy, name: formattedGroup }],
|
||||
// };
|
||||
// }, [groupBy]);
|
||||
|
||||
// if (!filterChips.length && !groupByChip) return null;
|
||||
|
||||
// return (
|
||||
// <div className="mb-3 d-flex flex-wrap gap-2 align-items-center">
|
||||
// {/* Filters */}
|
||||
// {filterChips.length > 0 && (
|
||||
// <>
|
||||
// <strong>Filters:</strong>
|
||||
// {filterChips.map((chip) => (
|
||||
// <span
|
||||
// key={chip.key}
|
||||
// className="d-flex align-items-center px-2 py-1 rounded flex-wrap"
|
||||
// >
|
||||
// <strong className="me-1">{chip.label}:</strong>
|
||||
// <div className="d-flex flex-wrap align-items-center">
|
||||
// {chip.items.map((item) => (
|
||||
// <span
|
||||
// key={item.id}
|
||||
// className="d-flex align-items-center bg-light rounded px-2 py-1 me-2 mb-1"
|
||||
// style={{ fontSize: "0.8rem" }}
|
||||
// >
|
||||
// <span>{item.name}</span>
|
||||
// <button
|
||||
// type="button"
|
||||
// className="btn-close btn-close-white btn-sm ms-2"
|
||||
// style={{
|
||||
// filter: "invert(1) grayscale(1)",
|
||||
// opacity: 0.7,
|
||||
// fontSize: "0.6rem",
|
||||
// }}
|
||||
// onClick={() => removeFilterChip(chip.key, item.id)}
|
||||
// />
|
||||
// </span>
|
||||
// ))}
|
||||
// </div>
|
||||
// </span>
|
||||
// ))}
|
||||
// </>
|
||||
// )}
|
||||
|
||||
// {/* Group By */}
|
||||
// {groupByChip && (
|
||||
// <>
|
||||
// <strong className="ms-2">Group By:</strong>
|
||||
// {groupByChip.items.map((item) => (
|
||||
// <span
|
||||
// key={item.id}
|
||||
// className="d-flex align-items-center bg-light rounded px-2 py-1 me-2 mb-1"
|
||||
// style={{ fontSize: "0.8rem" }}
|
||||
// >
|
||||
// <span>{item.name}</span>
|
||||
// </span>
|
||||
// ))}
|
||||
// </>
|
||||
// )}
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default ExpenseFilterChips;
|
||||
@ -15,8 +15,8 @@ import { useExpenseFilter } from "../../hooks/useExpense";
|
||||
import { ExpenseFilterSkeleton } from "./ExpenseSkeleton";
|
||||
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
const { status, project } = useParams();
|
||||
const ExpenseFilterPanel = ({ onApply, handleGroupBy, setFilterdata }) => {
|
||||
const { status } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const selectedProjectId = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
@ -43,7 +43,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
return {
|
||||
...defaultFilter,
|
||||
statusIds: status ? [status] : defaultFilter.statusIds || [],
|
||||
projectIds: project ? [project] : defaultFilter.projectIds || [],
|
||||
projectIds: defaultFilter.projectIds || [],
|
||||
createdByIds: defaultFilter.createdByIds || [],
|
||||
paidById: defaultFilter.paidById || [],
|
||||
ExpenseTypeIds: defaultFilter.ExpenseTypeIds || [],
|
||||
@ -65,6 +65,13 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
document.querySelector(".offcanvas.show .btn-close")?.click();
|
||||
};
|
||||
|
||||
// Change here
|
||||
useEffect(() => {
|
||||
if (data && setFilterdata) {
|
||||
setFilterdata(data);
|
||||
}
|
||||
}, [data, setFilterdata]);
|
||||
|
||||
const handleGroupChange = (e) => {
|
||||
const group = groupByList.find((g) => g.id === e.target.value);
|
||||
if (group) setSelectedGroup(group);
|
||||
@ -100,7 +107,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
const [appliedStatusId, setAppliedStatusId] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!status && !project) return;
|
||||
if (!status) return;
|
||||
|
||||
if (status !== appliedStatusId && data) {
|
||||
const filterWithStatus = {
|
||||
@ -122,7 +129,6 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
}
|
||||
}, [
|
||||
status,
|
||||
project,
|
||||
data,
|
||||
dynamicDefaultFilter,
|
||||
onApply,
|
||||
@ -134,6 +140,9 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
|
||||
if (isError && isFetched)
|
||||
return <div>Something went wrong Here- {error.message} </div>;
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormProvider {...methods}>
|
||||
@ -273,4 +282,4 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ExpenseFilterPanel;
|
||||
export default ExpenseFilterPanel;
|
||||
@ -15,16 +15,19 @@ import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
|
||||
import ConfirmModal from "../common/ConfirmModal";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import { useSelector } from "react-redux";
|
||||
import ExpenseFilterChips from "./ExpenseFilterChips";
|
||||
import { defaultFilter } from "./ExpenseSchema";
|
||||
|
||||
const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
const [deletingId, setDeletingId] = useState(null);
|
||||
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||
const { setViewExpense, setManageExpenseModal } = useExpenseContext();
|
||||
const { setViewExpense, setManageExpenseModal, filterData, removeFilterChip } = useExpenseContext();
|
||||
const IsExpenseEditable = useHasUserPermission();
|
||||
const IsExpesneApprpve = useHasUserPermission(APPROVE_EXPENSE);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const debouncedSearch = useDebounce(searchText, 500);
|
||||
|
||||
|
||||
const { mutate: DeleteExpense, isPending } = useDeleteExpense();
|
||||
const { data, isLoading, isError, isInitialLoading, error } = useExpenseList(
|
||||
ITEMS_PER_PAGE,
|
||||
@ -67,9 +70,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
key = item?.status?.displayName || "Unknown";
|
||||
break;
|
||||
case "submittedBy":
|
||||
key = `${item?.createdBy?.firstName ?? ""} ${
|
||||
item.createdBy?.lastName ?? ""
|
||||
}`.trim();
|
||||
key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
|
||||
}`.trim();
|
||||
break;
|
||||
case "project":
|
||||
key = item?.project?.name || "Unknown Project";
|
||||
@ -110,9 +112,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
label: "Submitted By",
|
||||
align: "text-start",
|
||||
getValue: (e) =>
|
||||
`${e.createdBy?.firstName ?? ""} ${
|
||||
e.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A",
|
||||
`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A",
|
||||
customRender: (e) => (
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
@ -122,9 +123,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
lastName={e.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-truncate">
|
||||
{`${e.createdBy?.firstName ?? ""} ${
|
||||
e.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
{`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
@ -140,7 +140,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
label: "Amount",
|
||||
getValue: (e) => (
|
||||
<>
|
||||
{formatCurrency(e?.amount)}
|
||||
{formatCurrency(e?.amount)}
|
||||
</>
|
||||
),
|
||||
isAlwaysVisible: true,
|
||||
@ -152,9 +152,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
align: "text-center",
|
||||
getValue: (e) => (
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(e?.status?.color) || "secondary"
|
||||
}`}
|
||||
className={`badge bg-label-${getColorNameFromHex(e?.status?.color) || "secondary"
|
||||
}`}
|
||||
>
|
||||
{e.status?.name || "Unknown"}
|
||||
</span>
|
||||
@ -183,6 +182,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{IsDeleteModalOpen && (
|
||||
@ -199,10 +199,20 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
)}
|
||||
|
||||
<div className="card page-min-h px-sm-4">
|
||||
{/* Filter Chips */}
|
||||
<ExpenseFilterChips
|
||||
filters={filters}
|
||||
filterData={filterData}
|
||||
removeFilterChip={removeFilterChip}
|
||||
groupBy={groupBy}
|
||||
/>
|
||||
<div
|
||||
className="card-datatable table-responsive "
|
||||
id="horizontal-example"
|
||||
>
|
||||
|
||||
|
||||
|
||||
<div className="dataTables_wrapper no-footer px-2 ">
|
||||
<table className="table border-top dataTable text-nowrap">
|
||||
<thead>
|
||||
@ -293,9 +303,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={8} className="text-center border-0 ">
|
||||
<div className="py-8">
|
||||
<div className="py-8">
|
||||
<p>No Expense Found</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
@ -3,15 +3,14 @@ import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
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 ExpenseList from "../../components/Expenses/ExpenseList";
|
||||
import ViewExpense from "../../components/Expenses/ViewExpense";
|
||||
import ManageExpense from "../../components/Expenses/ManageExpense";
|
||||
import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel";
|
||||
import ExpenseFilterChips from "../../components/Expenses/ExpenseFilterChips";
|
||||
|
||||
// Context & Hooks
|
||||
import { useFab } from "../../Context/FabContext";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import {
|
||||
@ -20,11 +19,7 @@ import {
|
||||
VIEW_SELF_EXPENSE,
|
||||
} from "../../utils/constants";
|
||||
|
||||
// Schema & Defaults
|
||||
import {
|
||||
defaultFilter,
|
||||
SearchSchema,
|
||||
} from "../../components/Expenses/ExpenseSchema";
|
||||
import { defaultFilter, SearchSchema } from "../../components/Expenses/ExpenseSchema";
|
||||
|
||||
// Context
|
||||
export const ExpenseContext = createContext();
|
||||
@ -41,7 +36,7 @@ const ExpensePage = () => {
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
|
||||
const [filters, setFilter] = useState();
|
||||
const [filters, setFilters] = useState(defaultFilter);
|
||||
const [groupBy, setGroupBy] = useState("transactionDate");
|
||||
const [searchText, setSearchText] = useState("");
|
||||
|
||||
@ -70,23 +65,38 @@ const ExpensePage = () => {
|
||||
resolver: zodResolver(SearchSchema),
|
||||
defaultValues: defaultFilter,
|
||||
});
|
||||
|
||||
const { reset } = methods;
|
||||
|
||||
const [filterData, setFilterdata] = useState(defaultFilter);
|
||||
|
||||
const clearFilter = () => {
|
||||
setFilter(defaultFilter);
|
||||
setFilters(defaultFilter);
|
||||
reset();
|
||||
};
|
||||
|
||||
|
||||
const removeFilterChip = (key, id) => {
|
||||
setFilters((prev) => {
|
||||
const updated = { ...prev };
|
||||
if (Array.isArray(updated[key])) {
|
||||
updated[key] = updated[key].filter((v) => v !== id);
|
||||
} else if (key === "dateRange") {
|
||||
updated.startDate = null;
|
||||
updated.endDate = null;
|
||||
}
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (IsViewAll || IsViewSelf || IsCreatedAble) {
|
||||
setShowTrigger(true);
|
||||
setOffcanvasContent(
|
||||
"Expense Filters",
|
||||
<ExpenseFilterPanel
|
||||
onApply={setFilter}
|
||||
onApply={setFilters}
|
||||
handleGroupBy={setGroupBy}
|
||||
clearFilter={clearFilter}
|
||||
setFilterdata={setFilterdata}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -101,6 +111,8 @@ const ExpensePage = () => {
|
||||
setViewExpense,
|
||||
setManageExpenseModal,
|
||||
setDocumentView,
|
||||
filterData,
|
||||
removeFilterChip
|
||||
};
|
||||
|
||||
return (
|
||||
@ -115,21 +127,20 @@ const ExpensePage = () => {
|
||||
<div className="card my-3 px-sm-4 px-0">
|
||||
<div className="card-body py-2 px-3">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-6 ">
|
||||
<div className="d-flex align-items-center">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder="Search Expense"
|
||||
aria-describedby="search-label"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder="Search Expense"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-6 text-end mt-2 mt-sm-0">
|
||||
|
||||
<div className="col-6 text-end mt-2 mt-sm-0">
|
||||
<button className="btn btn-sm" onClick={clearFilter}>
|
||||
Clear
|
||||
</button>
|
||||
{IsCreatedAble && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
@ -152,6 +163,8 @@ const ExpensePage = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<ExpenseList
|
||||
filters={filters}
|
||||
groupBy={groupBy}
|
||||
@ -162,7 +175,7 @@ const ExpensePage = () => {
|
||||
<div className="card text-center py-1">
|
||||
<i className="fa-solid fa-triangle-exclamation fs-5" />
|
||||
<p>
|
||||
Access Denied: You don't have permission to perform this action !
|
||||
Access Denied: You don't have permission to perform this action!
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user