Correction in logic for ExpenseStatus to Expense.
This commit is contained in:
parent
8e38f52e72
commit
e1455c9ef8
@ -1,89 +1,90 @@
|
||||
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>
|
||||
|
||||
|
||||
const filterChips = useMemo(() => {
|
||||
if (!filterData?.projects?.length) return [];
|
||||
|
||||
const chips = [];
|
||||
const projectExists = filters.projectIds?.every((pid) =>
|
||||
filterData.projects.some((p) => p.id === pid)
|
||||
);
|
||||
|
||||
if (!projectExists) return [];
|
||||
|
||||
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%" }}
|
||||
>
|
||||
<span className="fw-semibold me-2">{chip.label}:</span>
|
||||
<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;
|
||||
|
||||
|
||||
|
||||
@ -119,34 +119,45 @@ const ExpenseFilterPanel = forwardRef(({ onApply, handleGroupBy, setFilterdata }
|
||||
const [appliedStatusId, setAppliedStatusId] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!status || !data) return;
|
||||
if (!status || !data) return;
|
||||
|
||||
const projectExists = selectedProjectId
|
||||
? data?.projects?.some((p) => p.id === selectedProjectId)
|
||||
: false;
|
||||
|
||||
if (!projectExists) {
|
||||
console.warn("Project not found, skipping ExpenseStatus filter.");
|
||||
return; // stop processing
|
||||
}
|
||||
|
||||
if (status !== appliedStatusId) {
|
||||
const filterWithStatus = {
|
||||
...dynamicDefaultFilter,
|
||||
projectIds: [selectedProjectId],
|
||||
startDate: dynamicDefaultFilter.startDate
|
||||
? moment.utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY").toISOString()
|
||||
: undefined,
|
||||
endDate: dynamicDefaultFilter.endDate
|
||||
? moment.utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY").toISOString()
|
||||
: undefined,
|
||||
};
|
||||
|
||||
onApply(filterWithStatus);
|
||||
handleGroupBy(selectedGroup.id);
|
||||
setAppliedStatusId(status);
|
||||
}
|
||||
}, [
|
||||
status,
|
||||
data,
|
||||
dynamicDefaultFilter,
|
||||
onApply,
|
||||
handleGroupBy,
|
||||
selectedGroup.id,
|
||||
appliedStatusId,
|
||||
selectedProjectId,
|
||||
]);
|
||||
|
||||
if (status !== appliedStatusId) {
|
||||
const filterWithStatus = {
|
||||
...dynamicDefaultFilter,
|
||||
projectIds: selectedProjectId ? [selectedProjectId] : dynamicDefaultFilter.projectIds || [],
|
||||
startDate: dynamicDefaultFilter.startDate
|
||||
? moment.utc(dynamicDefaultFilter.startDate, "DD-MM-YYYY").toISOString()
|
||||
: undefined,
|
||||
endDate: dynamicDefaultFilter.endDate
|
||||
? moment.utc(dynamicDefaultFilter.endDate, "DD-MM-YYYY").toISOString()
|
||||
: undefined,
|
||||
};
|
||||
|
||||
onApply(filterWithStatus);
|
||||
handleGroupBy(selectedGroup.id);
|
||||
setAppliedStatusId(status);
|
||||
}
|
||||
}, [
|
||||
status,
|
||||
data,
|
||||
dynamicDefaultFilter,
|
||||
onApply,
|
||||
handleGroupBy,
|
||||
selectedGroup.id,
|
||||
appliedStatusId,
|
||||
selectedProjectId,
|
||||
]);
|
||||
|
||||
if (isLoading || isFetching) return <ExpenseFilterSkeleton />;
|
||||
if (isError && isFetched)
|
||||
|
||||
@ -98,9 +98,9 @@ const router = createBrowserRouter(
|
||||
{ path: "/activities/task", element: <TaskPlannng /> },
|
||||
{ path: "/activities/reports", element: <Reports /> },
|
||||
{ path: "/gallary", element: <ComingSoonPage /> },
|
||||
{ path: "/expenses", element: <ExpensePage /> },
|
||||
{ path: "/expenses/:status?/:project?", element: <ExpensePage /> },
|
||||
{ path: "/collection", element: <CollectionPage /> },
|
||||
{ path: "/expenses", element: <ExpensePage /> },
|
||||
{ path: "/payment-request", element: <PaymentRequestPage /> },
|
||||
{ path: "/advance-payment", element: <AdvancePaymentPage /> },
|
||||
{ path: "/recurring-payment", element: <RecurringExpensePage /> },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user