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

Merge pull request 'Adding_Chips_Expense' (#451) from Adding_Chips_Expense into OnFieldWork_V1

Browse Source 
Reviewed-on: #451
Merged
This commit is contained in:
pramod.mahajan 2025-10-06 13:47:36 +00:00
commit 9df813698d
4 changed files with 187 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/Expenses/ExpenseFilterChips.jsx Normal file
View File

@ -0,0 +1,89 @@
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="col-12">
<div className="d-flex flex-wrap align-items-start gap-1 text-start">
{filterChips.map((chip) => (
<div
key={chip.key}
className="d-flex align-items-center flex-wrap px-2 py-1 "
style={{ fontSize: "0.9rem", maxWidth: "100%" }}
>
{/* Chip Label */}
<span className="fw-semibold me-2">{chip.label}:</span>
{/* Chip Items */}
<div className="d-flex flex-wrap align-items-center gap-1">
{chip.items.map((item) => (
<span
key={item.id}
className="d-flex align-items-center bg-light rounded px-2 py-1 text-xs"
>
<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>
</div>
))}
</div>
</div>
</div>
);
};
export default ExpenseFilterChips;

37
src/components/Expenses/ExpenseFilterPanel.jsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState, useMemo } from "react";
import React, {forwardRef, useEffect,useImperativeHandle, useState, useMemo } from "react";
import { FormProvider, useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { defaultFilter, SearchSchema } from "./ExpenseSchema";
@ -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 = forwardRef(({ onApply, handleGroupBy, setFilterdata }, ref) => {
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,11 +65,30 @@ 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);
};
useImperativeHandle(ref, () => ({
resetFieldValue: (name, value) => {
// Reset specific field
if (value !== undefined) {
setValue(name, value);
} else {
reset({ ...methods.getValues(), [name]: defaultFilter[name] });
}
},
getValues: methods.getValues, // optional, to read current filter state
}));
const onSubmit = (formData) => {
onApply({
...formData,
@ -100,7 +119,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 +141,6 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
}
}, [
status,
project,
data,
dynamicDefaultFilter,
onApply,
@ -134,6 +152,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}>
@ -271,6 +292,6 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
</FormProvider>
</>
);
};
});
export default ExpenseFilterPanel;
export default ExpenseFilterPanel;

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

@ -19,16 +19,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,
@ -135,9 +138,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
@ -147,9 +149,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>
),
@ -173,9 +174,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,7 +183,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
},
];
if (isInitialLoading) return <ExpenseTableSkeleton />;
if (isInitialLoading && !data) return <ExpenseTableSkeleton />;
if (isError) return <div>{error?.message}</div>;
const grouped = groupBy
@ -208,6 +208,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
);
};
return (
<>
{IsDeleteModalOpen && (
@ -224,10 +225,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>

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

@ -1,17 +1,16 @@
import React, { createContext, useContext, useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import React, { createContext, useContext, useState, useEffect, useRef } from "react";
import { useForm, useFormContext } 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,10 +36,10 @@ const ExpensePage = () => {
(store) => store.localVariables.projectId
);
const [filters, setFilter] = useState();
const [filters, setFilters] = useState(defaultFilter);
const [groupBy, setGroupBy] = useState("transactionDate");
const [searchText, setSearchText] = useState("");
const filterPanelRef = useRef();
const [ManageExpenseModal, setManageExpenseModal] = useState({
IsOpen: null,
expenseId: null,
@ -64,18 +59,31 @@ const ExpensePage = () => {
const IsViewAll = useHasUserPermission(VIEW_ALL_EXPNESE);
const IsViewSelf = useHasUserPermission(VIEW_SELF_EXPENSE);
const { setOffcanvasContent, setShowTrigger } = useFab();
const methods = useForm({
resolver: zodResolver(SearchSchema),
defaultValues: defaultFilter,
});
const { reset } = methods;
const clearFilter = () => {
setFilter(defaultFilter);
reset();
const [filterData, setFilterdata] = useState(defaultFilter);
const removeFilterChip = (key, id) => {
setFilters((prev) => {
const updated = { ...prev };
if (Array.isArray(updated[key])) {
updated[key] = updated[key].filter((v) => v !== id);
filterPanelRef.current?.resetFieldValue(key, updated[key]);
} else if (key === "dateRange") {
updated.startDate = null;
updated.endDate = null;
filterPanelRef.current?.resetFieldValue("startDate", null);
filterPanelRef.current?.resetFieldValue("endDate", null);
}
return updated;
});
};
useEffect(() => {
@ -84,9 +92,10 @@ const ExpensePage = () => {
setOffcanvasContent(
"Expense Filters",
<ExpenseFilterPanel
onApply={setFilter}
ref={filterPanelRef}
onApply={setFilters}
handleGroupBy={setGroupBy}
clearFilter={clearFilter}
setFilterdata={setFilterdata}
/>
);
}
@ -101,6 +110,8 @@ const ExpensePage = () => {
setViewExpense,
setManageExpenseModal,
setDocumentView,
filterData,
removeFilterChip
};
return (
@ -115,21 +126,18 @@ 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">
{IsCreatedAble && (
<button
className="btn btn-sm btn-primary"
@ -152,6 +160,8 @@ const ExpensePage = () => {
</div>
</div>
<ExpenseList
filters={filters}
groupBy={groupBy}
@ -162,7 +172,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>
)}