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

Adding Filter Get api and delete modal open.

Browse Source
This commit is contained in:
Kartik Sharma 2025-11-03 17:12:24 +05:30
parent 859eaa747f
commit 1c4384a62e
6 changed files with 429 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
src/components/PaymentRequest/PaymentRequestFilterPanel.jsx Normal file
View File

@ -0,0 +1,203 @@
import React, { useEffect, useState, useMemo } from "react";
import { FormProvider, useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "./PaymentRequestSchema";
import DateRangePicker, { DateRangePicker1 } from "../common/DateRangePicker";
import SelectMultiple from "../common/SelectMultiple";
import { useProjectName } from "../../hooks/useProjects";
import { useExpenseStatus } from "../../hooks/masterHook/useMaster";
import { useEmployeesAllOrByProjectId } from "../../hooks/useEmployees";
import { useSelector } from "react-redux";
import moment from "moment";
import { usePaymentRequestFilter } from "../../hooks/useExpense";
import { useLocation, useNavigate, useParams } from "react-router-dom";
const PaymentRequestFilterPanel = ({ onApply, handleGroupBy }) => {
const { status } = useParams();
const navigate = useNavigate();
const selectedProjectId = useSelector(
(store) => store.localVariables.projectId
);
const { data, isLoading, isError, error, isFetching, isFetched } =
usePaymentRequestFilter();
const groupByList = useMemo(() => {
return [
{ id: "projects", name: "Project" },
{ id: "status", name: "Status" },
{ id: "createdBy", name: "Submitted By" },
{ id: "currency", name: "Currency" },
{ id: "expensesCategory", name: "Expense Category" },
{ id: "payees", name: "Payee" },
{ id: "date", name: "Due Date" },
].sort((a, b) => a.name.localeCompare(b.name));
}, []);
const [selectedGroup, setSelectedGroup] = useState(groupByList[6]);
const [resetKey, setResetKey] = useState(0);
console.log("Kartik",data)
const methods = useForm({
resolver: zodResolver(SearchPaymentRequestSchema),
defaultValues: defaultPaymentRequestFilter,
});
const { control, handleSubmit, reset, setValue, watch } = methods;
const isTransactionDate = watch("isTransactionDate");
const closePanel = () => {
document.querySelector(".offcanvas.show .btn-close")?.click();
};
const handleGroupChange = (e) => {
const group = groupByList.find((g) => g.id === e.target.value);
if (group) setSelectedGroup(group);
};
const onSubmit = (formData) => {
onApply({
...formData,
startDate: moment.utc(formData.startDate, "DD-MM-YYYY").toISOString(),
endDate: moment.utc(formData.endDate, "DD-MM-YYYY").toISOString(),
});
handleGroupBy(selectedGroup.id);
// closePanel();
};
const onClear = () => {
reset(defaultPaymentRequestFilter);
setResetKey((prev) => prev + 1);
onApply(defaultPaymentRequestFilter);
if (status) {
navigate("/expenses", { replace: true });
}
};
const location = useLocation();
useEffect(() => {
closePanel();
}, [location]);
const [appliedStatusId, setAppliedStatusId] = useState(null);
if (isError && isFetched)
return <div>Something went wrong Here- {error.message} </div>;
return (
<>
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)} className="p-2 text-start">
<div className="mb-3 w-100">
<div className="d-flex align-items-center mb-2">
<label className="form-label me-2">Filter By:</label>
</div>
<label className="fw-semibold">Choose Date Range:</label>
<DateRangePicker1
placeholder="DD-MM-YYYY To DD-MM-YYYY"
startField="startDate"
endField="endDate"
resetSignal={resetKey}
defaultRange={false}
maxDate={new Date()}
/>
</div>
<div className="row g-2">
<SelectMultiple
name="projectIds"
label="Projects :"
options={data?.projects}
labelKey="name"
valueKey="id"
/>
<SelectMultiple
name="createdByIds"
label="Submitted By :"
options={data?.createdBy}
labelKey={(item) => item.name}
valueKey="id"
/>
<SelectMultiple
name="payees"
label="Payee :"
options={data?.payees}
labelKey={(item) => item.name}
valueKey="id"
/>
<SelectMultiple
name="expensesCategory"
label="Category :"
options={data?.expensesCategory}
labelKey={(item) => item.name}
valueKey="id"
/>
<SelectMultiple
name="currencyIds"
label="Currency :"
options={data?.currency}
labelKey={(item) => item.name}
valueKey="id"
/>
<div className="mb-3">
<label className="form-label">Status :</label>
<div className="row flex-wrap">
{data?.status
?.slice()
.sort((a, b) => a.name.localeCompare(b.name))
.map((status) => (
<div className="col-6" key={status.id}>
<Controller
control={control}
name="statusIds"
render={({ field: { value = [], onChange } }) => (
<div className="d-flex align-items-center me-3 mb-2">
<input
type="checkbox"
className="form-check-input"
value={status.id}
checked={value.includes(status.id)}
onChange={(e) => {
const checked = e.target.checked;
onChange(
checked
? [...value, status.id]
: value.filter((v) => v !== status.id)
);
}}
/>
<label className="ms-2 mb-0">{status.name}</label>
</div>
)}
/>
</div>
))}
</div>
</div>
</div>
<div className="d-flex justify-content-end py-3 gap-2">
<button
type="button"
className="btn btn-label-secondary btn-sm"
onClick={onClear}
>
Clear
</button>
<button type="submit" className="btn btn-primary btn-sm">
Apply
</button>
</div>
</form>
</FormProvider>
</>
);
};
export default PaymentRequestFilterPanel;

51
src/components/PaymentRequest/PaymentRequestList.jsx
View File

@ -10,9 +10,14 @@ import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
import Avatar from "../../components/common/Avatar";
import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
import ConfirmModal from "../common/ConfirmModal";
import { useNavigate } from "react-router-dom";
const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
const PaymentRequestList = ({filters, groupBy = "submittedBy", search }) => {
const { setManageRequest } = usePaymentRequestContext();
const navigate = useNavigate();
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [deletingId, setDeletingId] = useState(null);
const groupByField = (items, field) => {
return items.reduce((acc, item) => {
let key;
@ -28,8 +33,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
displayField = "Status";
break;
case "submittedBy":
key = `${item?.createdBy?.firstName ?? ""} ${
item.createdBy?.lastName ?? ""
key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
}`.trim();
displayField = "Submitted By";
break;
@ -83,8 +87,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
label: "Submitted By",
align: "text-start",
getValue: (e) =>
`${e.createdBy?.firstName ?? ""} ${
e.createdBy?.lastName ?? ""
`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
}`.trim() || "N/A",
customRender: (e) => (
<div
@ -98,8 +101,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
lastName={e.createdBy?.lastName}
/>
<span className="text-truncate">
{`${e.createdBy?.firstName ?? ""} ${
e.createdBy?.lastName ?? ""
{`${e.createdBy?.firstName ?? ""} ${e.createdBy?.lastName ?? ""
}`.trim() || "N/A"}
</span>
</div>
@ -126,8 +128,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
align: "text-center",
getValue: (e) => (
<span
className={`badge bg-label-${
getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
className={`badge bg-label-${getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
}`}
>
{e?.expenseStatus?.name || "Unknown"}
@ -142,7 +143,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
const { data, isLoading, isError, error, isFetching } = usePaymentRequestList(
ITEMS_PER_PAGE,
currentPage,
{},
filters,
true,
debouncedSearch
);
@ -190,7 +191,33 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
);
};
const handleDelete = (id) => {
setDeletingId(id);
DeleteExpense(
{ id },
{
onSettled: () => {
setDeletingId(null);
setIsDeleteModalOpen(false);
},
}
);
};
return (
<>
{IsDeleteModalOpen && (
<ConfirmModal
isOpen={IsDeleteModalOpen}
type="delete"
header="Delete Expense"
message="Are you sure you want delete?"
onSubmit={handleDelete}
onClose={() => setIsDeleteModalOpen(false)}
// loading={isPending}
paramData={deletingId}
/>
)}
<div className="card page-min-h table-responsive px-sm-4">
<div className="card-datatable" id="payment-request-table">
<table className="table border-top dataTable text-nowrap align-middle">
@ -320,8 +347,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
{[...Array(totalPages)].map((_, index) => (
<li
key={index}
className={`page-item ${
currentPage === index + 1 ? "active" : ""
className={`page-item ${currentPage === index + 1 ? "active" : ""
}`}
>
<button
@ -337,6 +363,7 @@ const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
</div>
)}
</div>
</>
);
};

22
src/components/PaymentRequest/PaymentRequestSchema.js
View File

@ -64,3 +64,25 @@ export const defaultPaymentRequest = {
billAttachments: [],
};
export const SearchPaymentRequestSchema = z.object({
projectIds: z.array(z.string()).optional(),
statusIds: z.array(z.string()).optional(),
createdByIds: z.array(z.string()).optional(),
currencyIds: z.array(z.string()).optional(),
expenseCategoryIds: z.array(z.string()).optional(),
payees: z.array(z.string()).optional(),
startDate: z.string().optional(),
endDate: z.string().optional(),
});
export const defaultPaymentRequestFilter = {
projectIds: [],
statusIds: [],
createdByIds: [],
currencyIds: [],
expenseCategoryIds: [],
payees: [],
startDate: null,
endDate: null,
};

8
src/hooks/useExpense.js
View File

@ -334,6 +334,14 @@ export const useUpdatePaymentRequest = (onSuccessCallBack) => {
};
//#endregion
export const usePaymentRequestFilter = () => {
return useQuery({
queryKey: ["PaymentRequestFilter"],
queryFn: async () =>
await ExpenseRepository.GetPaymentRequestFilter().then((res) => res.data),
});
};
//#region Advance Payment
export const useExpenseTransactions = (employeeId)=>{
return useQuery({

14
src/pages/PaymentRequest/PaymentRequestPage.jsx
View File

@ -5,6 +5,8 @@ import ManagePaymentRequest from "../../components/PaymentRequest/ManagePaymentR
import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel";
import { useFab } from "../../Context/FabContext";
import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestList";
import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRequestFilterPanel";
import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
export const PaymentRequestContext = createContext();
export const usePaymentRequestContext = () => {
@ -20,25 +22,20 @@ const PaymentRequestPage = () => {
RequestId: null,
});
const { setOffcanvasContent, setShowTrigger } = useFab();
const [filters, setFilters] = useState(defaultPaymentRequestFilter);
const [search, setSearch] = useState("");
const contextValue = {
// setViewExpense,
setManageRequest,
// setDocumentView,
// filterData,
// removeFilterChip
};
useEffect(() => {
setShowTrigger(true);
setOffcanvasContent(
"Expense Filters",
<ExpenseFilterPanel
/>
"Payment Request Filters",
<PaymentRequestFilterPanel onApply={setFilters} />
);
return () => {
@ -95,6 +92,7 @@ const PaymentRequestPage = () => {
</div>
<PaymentRequestList
search={search}
filters={filters}
/>
{/* Add/Edit Modal */}

1
src/repositories/ExpsenseRepository.jsx
View File

@ -24,6 +24,7 @@ const ExpenseRepository = {
CreatePaymentRequest: (data) => api.post("/api/expense/payment-request/create", data),
UpdatePaymentRequest: (id, data) => api.put(`/api/Expense/payment-request/edit/${id}`, data),
GetPaymentRequest: (id) => api.get(`/api/Expense/get/payment-request/details/${id}`),
GetPaymentRequestFilter: () => api.get('/api/Expense/payment-request/filter'),
//#endregion