Impleting Create API for Recurring Expense.
This commit is contained in:
parent
76fe342c1e
commit
7a749b14e9
@ -3,12 +3,11 @@ import Label from '../common/Label';
|
|||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import { useExpenseCategory } from '../../hooks/masterHook/useMaster';
|
import { useExpenseCategory } from '../../hooks/masterHook/useMaster';
|
||||||
import DatePicker from '../common/DatePicker';
|
import DatePicker from '../common/DatePicker';
|
||||||
// import { useCreatePaymentRequest, usePaymentRequestDetail, useUpdatePaymentRequest } from '../../hooks/useExpense';
|
|
||||||
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
import { defaultRecurringExpense, PaymentRecurringExpense } from './RecurringExpenseSchema';
|
import { defaultRecurringExpense, PaymentRecurringExpense } from './RecurringExpenseSchema';
|
||||||
import { INR_CURRENCY_CODE } from '../../utils/constants';
|
import { INR_CURRENCY_CODE } from '../../utils/constants';
|
||||||
import { useCurrencies, useProjectName } from '../../hooks/useProjects';
|
import { useCurrencies, useProjectName } from '../../hooks/useProjects';
|
||||||
|
import { useCreateRecurringExpense } from '../../hooks/useExpense';
|
||||||
|
|
||||||
function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
|
function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
|
||||||
|
|
||||||
@ -36,11 +35,11 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
|
|||||||
closeModal();
|
closeModal();
|
||||||
};
|
};
|
||||||
|
|
||||||
// const { mutate: CreatePaymentRequest, isPending: createPending } = useCreatePaymentRequest(
|
const { mutate: CreateRecurringExpense, isPending: createPending } = useCreateRecurringExpense(
|
||||||
// () => {
|
() => {
|
||||||
// handleClose();
|
handleClose();
|
||||||
// }
|
}
|
||||||
// );
|
);
|
||||||
// const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest(() =>
|
// const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest(() =>
|
||||||
// handleClose()
|
// handleClose()
|
||||||
// );
|
// );
|
||||||
@ -76,19 +75,19 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
|
|||||||
// strikeDate: localToUtc(fromdata.strikeDate),
|
// strikeDate: localToUtc(fromdata.strikeDate),
|
||||||
strikeDate: fromdata.strikeDate ? new Date(fromdata.strikeDate).toISOString() : null,
|
strikeDate: fromdata.strikeDate ? new Date(fromdata.strikeDate).toISOString() : null,
|
||||||
};
|
};
|
||||||
// if (requestToEdit) {
|
if (requestToEdit) {
|
||||||
// const editPayload = { ...payload, id: data.id};
|
const editPayload = { ...payload, id: data.id};
|
||||||
// PaymentRequestUpdate({ id: data.id, payload: editPayload });
|
PaymentRequestUpdate({ id: data.id, payload: editPayload });
|
||||||
// } else {
|
} else {
|
||||||
// CreatePaymentRequest(payload);
|
CreateRecurringExpense(payload);
|
||||||
// }
|
}
|
||||||
console.log("Kartik", payload)
|
console.log("Kartik", payload)
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container p-3">
|
<div className="container p-3">
|
||||||
<h5 className="m-0">
|
<h5 className="m-0">
|
||||||
{requestToEdit ? "Update Payment Request " : "Create Payment Request"}
|
{requestToEdit ? "Update Expense Recurring " : "Create Expense Recurring"}
|
||||||
</h5>
|
</h5>
|
||||||
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||||
{/* Project and Category */}
|
{/* Project and Category */}
|
||||||
|
|||||||
@ -0,0 +1,342 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import {
|
||||||
|
EXPENSE_DRAFT,
|
||||||
|
EXPENSE_REJECTEDBY,
|
||||||
|
ITEMS_PER_PAGE,
|
||||||
|
} from "../../utils/constants";
|
||||||
|
import {
|
||||||
|
formatCurrency,
|
||||||
|
getColorNameFromHex,
|
||||||
|
useDebounce,
|
||||||
|
} from "../../utils/appUtils";
|
||||||
|
import { usePaymentRequestList } from "../../hooks/useExpense";
|
||||||
|
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||||
|
import Avatar from "../../components/common/Avatar";
|
||||||
|
import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
|
||||||
|
import ConfirmModal from "../common/ConfirmModal";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import Error from "../common/Error";
|
||||||
|
import { useRecurringExpenseContext } from "../../pages/RecurringExpense/RecurringExpensePage";
|
||||||
|
|
||||||
|
const RecurringExpenseList = ({ filters, groupBy = "submittedBy", search }) => {
|
||||||
|
const { setManageRequest, setVieRequest } = useRecurringExpenseContext();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||||
|
const [deletingId, setDeletingId] = useState(null);
|
||||||
|
const SelfId = useSelector(
|
||||||
|
(store) => store?.globalVariables?.loginUser?.employeeInfo?.id
|
||||||
|
);
|
||||||
|
const groupByField = (items, field) => {
|
||||||
|
return items.reduce((acc, item) => {
|
||||||
|
let key;
|
||||||
|
let displayField;
|
||||||
|
|
||||||
|
switch (field) {
|
||||||
|
case "transactionDate":
|
||||||
|
key = item?.transactionDate?.split("T")[0];
|
||||||
|
displayField = "Transaction Date";
|
||||||
|
break;
|
||||||
|
case "status":
|
||||||
|
key = item?.status?.displayName || "Unknown";
|
||||||
|
displayField = "Status";
|
||||||
|
break;
|
||||||
|
case "submittedBy":
|
||||||
|
key = `${item?.createdBy?.firstName ?? ""} ${item.createdBy?.lastName ?? ""
|
||||||
|
}`.trim();
|
||||||
|
displayField = "Submitted By";
|
||||||
|
break;
|
||||||
|
case "project":
|
||||||
|
key = item?.project?.name || "Unknown Project";
|
||||||
|
displayField = "Project";
|
||||||
|
break;
|
||||||
|
case "paymentMode":
|
||||||
|
key = item?.paymentMode?.name || "Unknown Mode";
|
||||||
|
displayField = "Payment Mode";
|
||||||
|
break;
|
||||||
|
case "expensesType":
|
||||||
|
key = item?.expensesType?.name || "Unknown Type";
|
||||||
|
displayField = "Expense Category";
|
||||||
|
break;
|
||||||
|
case "createdAt":
|
||||||
|
key = item?.createdAt?.split("T")[0] || "Unknown Date";
|
||||||
|
displayField = "Created Date";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
key = "Others";
|
||||||
|
displayField = "Others";
|
||||||
|
}
|
||||||
|
|
||||||
|
const groupKey = `${field}_${key}`; // unique key for object property
|
||||||
|
if (!acc[groupKey]) {
|
||||||
|
acc[groupKey] = { key, displayField, items: [] };
|
||||||
|
}
|
||||||
|
|
||||||
|
acc[groupKey].items.push(item);
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
};
|
||||||
|
|
||||||
|
const paymentRequestColumns = [
|
||||||
|
{
|
||||||
|
key: "paymentRequestUID",
|
||||||
|
label: "Template Name",
|
||||||
|
align: "text-start mx-2",
|
||||||
|
getValue: (e) => e.paymentRequestUID || "N/A",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "title",
|
||||||
|
label: "Frequency",
|
||||||
|
align: "text-start",
|
||||||
|
getValue: (e) => e.title || "N/A",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "createdAt",
|
||||||
|
label: "Next Generation Date",
|
||||||
|
align: "text-start",
|
||||||
|
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "createdAt",
|
||||||
|
label: "Status",
|
||||||
|
align: "text-start",
|
||||||
|
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
||||||
|
},
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
|
const debouncedSearch = useDebounce(search, 500);
|
||||||
|
|
||||||
|
const { data, isLoading, isError, error, isRefetching, refetch } =
|
||||||
|
usePaymentRequestList(
|
||||||
|
ITEMS_PER_PAGE,
|
||||||
|
currentPage,
|
||||||
|
filters,
|
||||||
|
true,
|
||||||
|
debouncedSearch
|
||||||
|
);
|
||||||
|
|
||||||
|
const paymentRequestData = data?.data || [];
|
||||||
|
const totalPages = data?.data?.totalPages || 1;
|
||||||
|
|
||||||
|
if (isError) {
|
||||||
|
return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
|
||||||
|
}
|
||||||
|
const header = [
|
||||||
|
"Request ID",
|
||||||
|
"Request Title",
|
||||||
|
"Submitted By",
|
||||||
|
"Submitted On",
|
||||||
|
"Amount",
|
||||||
|
"Status",
|
||||||
|
"Action",
|
||||||
|
];
|
||||||
|
if (isLoading) return <ExpenseTableSkeleton headers={header} />;
|
||||||
|
|
||||||
|
const grouped = groupBy
|
||||||
|
? groupByField(data?.data ?? [], groupBy)
|
||||||
|
: { All: data?.data ?? [] };
|
||||||
|
const IsGroupedByDate = [
|
||||||
|
{ key: "transactionDate", displayField: "Transaction Date" },
|
||||||
|
{ key: "createdAt", displayField: "created Date" },
|
||||||
|
]?.includes(groupBy);
|
||||||
|
|
||||||
|
const canEditExpense = (paymentRequest) => {
|
||||||
|
return (
|
||||||
|
(paymentRequest?.expenseStatus?.id === EXPENSE_DRAFT ||
|
||||||
|
EXPENSE_REJECTEDBY.includes(paymentRequest?.expenseStatus.id)) &&
|
||||||
|
paymentRequest?.createdBy?.id === SelfId
|
||||||
|
);
|
||||||
|
};
|
||||||
|
const canDetetExpense = (request) => {
|
||||||
|
return (
|
||||||
|
request?.expenseStatus?.id === EXPENSE_DRAFT &&
|
||||||
|
request?.createdBy?.id === SelfId
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
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">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{paymentRequestColumns.map((col) => (
|
||||||
|
<th key={col.key} className={`sorting ${col.align}`}>
|
||||||
|
{col.label}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
<th className="text-center">Action</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
{Object.keys(grouped).length > 0 ? (
|
||||||
|
Object.values(grouped).map(({ key, displayField, items }) => (
|
||||||
|
<React.Fragment key={key}>
|
||||||
|
<tr className="tr-group text-dark">
|
||||||
|
<td colSpan={8} className="text-start">
|
||||||
|
<div className="d-flex align-items-center">
|
||||||
|
{" "}
|
||||||
|
<small className="fs-6 py-1">
|
||||||
|
{displayField} :{" "}
|
||||||
|
</small>{" "}
|
||||||
|
<small className="fs-6 ms-3">
|
||||||
|
{IsGroupedByDate ? formatUTCToLocalTime(key) : key}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{items?.map((paymentRequest) => (
|
||||||
|
<tr key={paymentRequest.id}>
|
||||||
|
{paymentRequestColumns.map(
|
||||||
|
(col) =>
|
||||||
|
(col.isAlwaysVisible || groupBy !== col.key) && (
|
||||||
|
<td
|
||||||
|
key={col.key}
|
||||||
|
className={`d-table-cell ${col.align ?? ""}`}
|
||||||
|
>
|
||||||
|
{col?.customRender
|
||||||
|
? col?.customRender(paymentRequest)
|
||||||
|
: col?.getValue(paymentRequest)}
|
||||||
|
</td>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
<td className="sticky-action-column bg-white">
|
||||||
|
<div className="d-flex justify-content-center gap-2">
|
||||||
|
<i
|
||||||
|
className="bx bx-show text-primary cursor-pointer"
|
||||||
|
onClick={() =>
|
||||||
|
setVieRequest({
|
||||||
|
requestId: paymentRequest.id,
|
||||||
|
view: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
></i>
|
||||||
|
{canEditExpense(paymentRequest) && (
|
||||||
|
<div className="dropdown z-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<i
|
||||||
|
className="bx bx-dots-vertical-rounded text-muted p-0"
|
||||||
|
data-bs-toggle="tooltip"
|
||||||
|
data-bs-offset="0,8"
|
||||||
|
data-bs-placement="top"
|
||||||
|
data-bs-custom-class="tooltip-dark"
|
||||||
|
title="More Action"
|
||||||
|
></i>
|
||||||
|
</button>
|
||||||
|
<ul className="dropdown-menu dropdown-menu-end w-auto">
|
||||||
|
<li
|
||||||
|
onClick={() =>
|
||||||
|
setManageRequest({
|
||||||
|
IsOpen: true,
|
||||||
|
RequestId: paymentRequest.id,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||||
|
<i className="bx bx-edit text-primary bx-xs me-2"></i>
|
||||||
|
<span className="align-left ">
|
||||||
|
Modify
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{canDetetExpense(paymentRequest) && (
|
||||||
|
<li
|
||||||
|
onClick={() => {
|
||||||
|
setIsDeleteModalOpen(true);
|
||||||
|
setDeletingId(paymentRequest.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<a className="dropdown-item px-2 cursor-pointer py-1">
|
||||||
|
<i className="bx bx-trash text-danger bx-xs me-2"></i>
|
||||||
|
<span className="align-left">
|
||||||
|
Delete
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</React.Fragment>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={8} className="text-center border-0 ">
|
||||||
|
<div className="py-8">
|
||||||
|
<p>No Request Found</p>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
{totalPages > 1 && (
|
||||||
|
<div className="d-flex justify-content-end py-3 pe-3">
|
||||||
|
<nav>
|
||||||
|
<ul className="pagination mb-0">
|
||||||
|
{[...Array(totalPages)].map((_, index) => (
|
||||||
|
<li
|
||||||
|
key={index}
|
||||||
|
className={`page-item ${currentPage === index + 1 ? "active" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="page-link"
|
||||||
|
onClick={() => setCurrentPage(index + 1)}
|
||||||
|
>
|
||||||
|
{index + 1}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RecurringExpenseList;
|
||||||
@ -385,3 +385,26 @@ export const useExpenseTransactions = (employeeId)=>{
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
// ---------------------------Put Post Recurring Expense---------------------------------------
|
||||||
|
|
||||||
|
export const useCreateRecurringExpense = (onSuccessCallBack) => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: async (payload) => {
|
||||||
|
return await ExpenseRepository.CreateRecurringExpense(payload);
|
||||||
|
},
|
||||||
|
|
||||||
|
onSuccess: (_, variables) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["recurringExpense"] });
|
||||||
|
showToast("Recurring Expense Created Successfully", "success");
|
||||||
|
if (onSuccessCallBack) onSuccessCallBack();
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
showToast(
|
||||||
|
error.message || "Something went wrong please try again !",
|
||||||
|
"error"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -4,116 +4,117 @@ import GlobalModel from "../../components/common/GlobalModel";
|
|||||||
import { useFab } from "../../Context/FabContext";
|
import { useFab } from "../../Context/FabContext";
|
||||||
// import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
|
// import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
|
||||||
import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
|
import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
|
||||||
|
import RecurringExpenseList from "../../components/RecurringExpense/RecurringRexpenseList";
|
||||||
|
|
||||||
export const RecurringExpenseContext = createContext();
|
export const RecurringExpenseContext = createContext();
|
||||||
export const useRecurringExpenseContext = () => {
|
export const useRecurringExpenseContext = () => {
|
||||||
const context = useContext(RecurringExpenseContext);
|
const context = useContext(RecurringExpenseContext);
|
||||||
if (!context) {
|
if (!context) {
|
||||||
throw new Error("useRecurringExpenseContext must be used within an ExpenseProvider");
|
throw new Error("useRecurringExpenseContext must be used within an ExpenseProvider");
|
||||||
}
|
}
|
||||||
return context;
|
return context;
|
||||||
};
|
};
|
||||||
const RecurringExpensePage = () => {
|
const RecurringExpensePage = () => {
|
||||||
const [ManageRequest, setManageRequest] = useState({
|
const [ManageRequest, setManageRequest] = useState({
|
||||||
IsOpen: null,
|
IsOpen: null,
|
||||||
RequestId: null,
|
RequestId: null,
|
||||||
});
|
});
|
||||||
const [ViewRequest,setVieRequest] = useState({view:false,requestId:null})
|
const [ViewRequest, setVieRequest] = useState({ view: false, requestId: null })
|
||||||
const { setOffcanvasContent, setShowTrigger } = useFab();
|
const { setOffcanvasContent, setShowTrigger } = useFab();
|
||||||
// const [filters, setFilters] = useState(defaultPaymentRequestFilter);
|
// const [filters, setFilters] = useState(defaultPaymentRequestFilter);
|
||||||
|
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
|
|
||||||
const contextValue = {
|
const contextValue = {
|
||||||
setManageRequest,
|
setManageRequest,
|
||||||
setVieRequest
|
setVieRequest
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
|
|
||||||
setShowTrigger(true);
|
|
||||||
setOffcanvasContent(
|
|
||||||
"Payment Request Filters",
|
|
||||||
// <PaymentRequestFilterPanel onApply={setFilters} />
|
|
||||||
);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
setShowTrigger(false);
|
|
||||||
setOffcanvasContent("", null);
|
|
||||||
};
|
};
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
useEffect(() => {
|
||||||
<RecurringExpenseContext.Provider value={contextValue}>
|
|
||||||
<div className="container-fluid">
|
|
||||||
{/* Breadcrumb */}
|
|
||||||
<Breadcrumb
|
|
||||||
data={[
|
|
||||||
{ label: "Home", link: "/" },
|
|
||||||
{ label: "Finance", link: "/Payment Request" },
|
|
||||||
{ label: "Payment Request" },
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Top Bar */}
|
setShowTrigger(true);
|
||||||
<div className="card my-3 px-sm-4 px-0">
|
setOffcanvasContent(
|
||||||
<div className="card-body py-2 px-3">
|
"Payment Request Filters",
|
||||||
<div className="row align-items-center">
|
// <PaymentRequestFilterPanel onApply={setFilters} />
|
||||||
<div className="col-6">
|
);
|
||||||
<input
|
|
||||||
type="search"
|
return () => {
|
||||||
className="form-control form-control-sm w-auto"
|
setShowTrigger(false);
|
||||||
placeholder="Search Payment Req.."
|
setOffcanvasContent("", null);
|
||||||
value={search}
|
};
|
||||||
// onChange={(e) => setSearch(e.target.value)}
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<RecurringExpenseContext.Provider value={contextValue}>
|
||||||
|
<div className="container-fluid">
|
||||||
|
{/* Breadcrumb */}
|
||||||
|
<Breadcrumb
|
||||||
|
data={[
|
||||||
|
{ label: "Home", link: "/dashboard" },
|
||||||
|
{ label: "Recurring Expense", link: null },
|
||||||
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-6 text-end mt-2 mt-sm-0">
|
{/* Top Bar */}
|
||||||
<button
|
<div className="card my-3 px-sm-4 px-0">
|
||||||
className="btn btn-sm btn-primary"
|
<div className="card-body py-2 px-3">
|
||||||
type="button"
|
<div className="row align-items-center">
|
||||||
onClick={() =>
|
<div className="col-6">
|
||||||
setManageRequest({
|
<input
|
||||||
IsOpen: true,
|
type="search"
|
||||||
expenseId: null,
|
className="form-control form-control-sm w-auto"
|
||||||
})
|
placeholder="Search Recurring Expense.."
|
||||||
}
|
value={search}
|
||||||
>
|
// onChange={(e) => setSearch(e.target.value)}
|
||||||
<i className="bx bx-plus-circle me-2"></i>
|
/>
|
||||||
<span className="d-none d-md-inline-block">
|
</div>
|
||||||
Add Payment Request
|
|
||||||
</span>
|
<div className="col-6 text-end mt-2 mt-sm-0">
|
||||||
</button>
|
<button
|
||||||
</div>
|
className="btn btn-sm btn-primary"
|
||||||
</div>
|
type="button"
|
||||||
</div>
|
onClick={() =>
|
||||||
</div>
|
setManageRequest({
|
||||||
{/* <PaymentRequestList
|
IsOpen: true,
|
||||||
|
expenseId: null,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<i className="bx bx-plus-circle me-2"></i>
|
||||||
|
<span className="d-none d-md-inline-block">
|
||||||
|
Add Payment Request
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* <PaymentRequestList
|
||||||
search={search}
|
search={search}
|
||||||
filters={filters}
|
filters={filters}
|
||||||
/> */}
|
/> */}
|
||||||
|
<RecurringExpenseList/>
|
||||||
|
|
||||||
{/* Add/Edit Modal */}
|
{/* Add/Edit Modal */}
|
||||||
{ManageRequest.IsOpen && (
|
{ManageRequest.IsOpen && (
|
||||||
<GlobalModel
|
<GlobalModel
|
||||||
isOpen
|
isOpen
|
||||||
size="lg"
|
size="lg"
|
||||||
closeModal={() =>
|
closeModal={() =>
|
||||||
setManageRequest({ IsOpen: null, expenseId: null })
|
setManageRequest({ IsOpen: null, expenseId: null })
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<ManageRecurringExpense
|
<ManageRecurringExpense
|
||||||
key={ManageRequest.RequestId ?? "new"}
|
key={ManageRequest.RequestId ?? "new"}
|
||||||
requestToEdit={ManageRequest.RequestId}
|
requestToEdit={ManageRequest.RequestId}
|
||||||
closeModal={() =>
|
closeModal={() =>
|
||||||
setManageRequest({ IsOpen: null, RequestId: null })
|
setManageRequest({ IsOpen: null, RequestId: null })
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</GlobalModel>
|
</GlobalModel>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* {ViewRequest.view && (
|
{/* {ViewRequest.view && (
|
||||||
<GlobalModel
|
<GlobalModel
|
||||||
isOpen
|
isOpen
|
||||||
size="xl"
|
size="xl"
|
||||||
@ -124,9 +125,9 @@ const RecurringExpensePage = () => {
|
|||||||
</GlobalModel>
|
</GlobalModel>
|
||||||
)} */}
|
)} */}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</RecurringExpenseContext.Provider>
|
</RecurringExpenseContext.Provider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default RecurringExpensePage;
|
export default RecurringExpensePage;
|
||||||
|
|||||||
@ -28,6 +28,12 @@ const ExpenseRepository = {
|
|||||||
ActionOnPaymentRequest: (data) => api.post('/api/Expense/payment-request/action', data),
|
ActionOnPaymentRequest: (data) => api.post('/api/Expense/payment-request/action', data),
|
||||||
//#endregion
|
//#endregion
|
||||||
|
|
||||||
|
//#region Recurring Expense
|
||||||
|
|
||||||
|
CreateRecurringExpense: (data) => api.post("/api/Expense/recurring-payment/create", data),
|
||||||
|
|
||||||
|
//#endregion
|
||||||
|
|
||||||
|
|
||||||
//#region Advance Payment
|
//#region Advance Payment
|
||||||
GetTranctionList: () => api.get(`/get/transactions/${employeeId}`)
|
GetTranctionList: () => api.get(`/get/transactions/${employeeId}`)
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user