Merge branch 'upgrade_Expense' of https://git.marcoaiot.com/admin/marco.pms.web into upgrade_Expense
This commit is contained in:
commit
859eaa747f
@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Chart from "react-apexcharts";
|
||||
import { useExpenseType } from "../../hooks/masterHook/useMaster";
|
||||
import { useExpenseCategory } from "../../hooks/masterHook/useMaster";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useExpenseDataByProject } from "../../hooks/useDashboard_Data";
|
||||
import { formatCurrency } from "../../utils/appUtils";
|
||||
@ -13,7 +13,7 @@ const ExpenseByProject = () => {
|
||||
const [viewMode, setViewMode] = useState("Category");
|
||||
const [chartData, setChartData] = useState({ categories: [], data: [] });
|
||||
|
||||
const { ExpenseTypes, loading: typeLoading } = useExpenseType();
|
||||
const { ExpenseTypes, loading: typeLoading } = useExpenseCategory();
|
||||
|
||||
const { data: expenseApiData, isLoading } = useExpenseDataByProject(
|
||||
projectId,
|
||||
|
||||
@ -92,8 +92,8 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
key = item?.paymentMode?.name || "Unknown Mode";
|
||||
displayField = "Payment Mode";
|
||||
break;
|
||||
case "expensesType":
|
||||
key = item?.expensesType?.name || "Unknown Type";
|
||||
case "expenseCategory":
|
||||
key = item?.expenseCategory?.name || "Unknown Type";
|
||||
displayField = "Expense Category";
|
||||
break;
|
||||
case "createdAt":
|
||||
@ -184,7 +184,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
),
|
||||
},
|
||||
];
|
||||
const headers = ["Expense Type","Payment Mode","Submitted By","Submitted","Amount","Status","Action"]
|
||||
const headers = ["Expense Category","Payment Mode","Submitted By","Submitted","Amount","Status","Action"]
|
||||
if (isInitialLoading && !data) return <ExpenseTableSkeleton headers={headers} />;
|
||||
if (isError) return <div>{error?.message}</div>;
|
||||
|
||||
|
||||
@ -143,7 +143,11 @@ const SkeletonCell = ({
|
||||
/>
|
||||
);
|
||||
|
||||
export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3, headers }) => {
|
||||
export const ExpenseTableSkeleton = ({
|
||||
groups = 3,
|
||||
rowsPerGroup = 3,
|
||||
headers,
|
||||
}) => {
|
||||
return (
|
||||
<div className="card px-2">
|
||||
<table
|
||||
@ -153,12 +157,11 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3, headers })
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
{headers.map((header)=>(
|
||||
<th className="d-none d-sm-table-cell">
|
||||
<div className="text-start ms-5">{header}</div>
|
||||
</th>
|
||||
{headers.map((header) => (
|
||||
<th key={header} className="d-none d-sm-table-cell">
|
||||
<div className="text-start ms-5">{header}</div>
|
||||
</th>
|
||||
))}
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
@ -199,7 +202,7 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3, headers })
|
||||
<SkeletonCell width="80px" height={16} />
|
||||
</div>
|
||||
</td>
|
||||
{/* Submitted */}
|
||||
{/* Submitted */}
|
||||
<td className="d-none d-md-table-cell text-end">
|
||||
<SkeletonCell width="70px" height={16} />
|
||||
</td>
|
||||
|
||||
@ -7,8 +7,8 @@ import { useProjectName } from "../../hooks/useProjects";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import useMaster, {
|
||||
useExpenseCategory,
|
||||
useExpenseStatus,
|
||||
useExpenseType,
|
||||
usePaymentMode,
|
||||
} from "../../hooks/masterHook/useMaster";
|
||||
import {
|
||||
@ -42,7 +42,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
ExpenseTypes,
|
||||
loading: ExpenseLoading,
|
||||
error: ExpenseError,
|
||||
} = useExpenseType();
|
||||
} = useExpenseCategory;
|
||||
const schema = ExpenseSchema(ExpenseTypes);
|
||||
const {
|
||||
register,
|
||||
|
||||
@ -2,16 +2,17 @@ import React, { useEffect } from 'react'
|
||||
import { useCurrencies, useProjectName } from '../../hooks/useProjects';
|
||||
import Label from '../common/Label';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useExpenseType } from '../../hooks/masterHook/useMaster';
|
||||
import { useExpenseCategory } from '../../hooks/masterHook/useMaster';
|
||||
import DatePicker from '../common/DatePicker';
|
||||
import { useCreatePaymentRequest, useUpdatePaymentRequest } from '../../hooks/useExpense';
|
||||
import { defaultPaymentRequest, PaymentRequestSchema } from './PaymentRequestSchema';
|
||||
import { useCreatePaymentRequest, usePaymentRequestDetail, useUpdatePaymentRequest } from '../../hooks/useExpense';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { formatFileSize, localToUtc } from '../../utils/appUtils';
|
||||
import { defaultPaymentRequest, PaymentRequestSchema } from './PaymentRequestSchema';
|
||||
|
||||
function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
|
||||
|
||||
const { data } = {}
|
||||
function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
const {data,isLoading,isError,error:requestError}= usePaymentRequestDetail(requestToEdit)
|
||||
// const data = {}
|
||||
|
||||
const { projectNames, loading: projectLoading, error, isError: isProjectError,
|
||||
} = useProjectName();
|
||||
@ -23,7 +24,8 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
|
||||
ExpenseTypes,
|
||||
loading: ExpenseLoading,
|
||||
error: ExpenseError,
|
||||
} = useExpenseType();
|
||||
} = useExpenseCategory();
|
||||
|
||||
const schema = PaymentRequestSchema(ExpenseTypes);
|
||||
const { register, control, watch, handleSubmit, setValue, reset, formState: { errors }, } = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
@ -78,7 +80,7 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
const removeFile = (index) => {
|
||||
if (expenseToEdit) {
|
||||
if (requestToEdit) {
|
||||
const newFiles = files.map((file, i) => {
|
||||
if (file.documentId !== index) return file;
|
||||
return {
|
||||
@ -108,16 +110,16 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (expenseToEdit && data) {
|
||||
if (requestToEdit && data) {
|
||||
reset({
|
||||
title: data.title || "",
|
||||
description: data.description || "",
|
||||
payee: data.payee || "",
|
||||
currencyId: data.currencyId.id || "",
|
||||
currencyId: data.currency.id || "",
|
||||
amount: data.amount || "",
|
||||
dueDate: data.dueDate?.slice(0, 10) || "",
|
||||
projectId: data.project.id || "",
|
||||
expenseCategoryId: data.expenseCategoryId.id || "",
|
||||
expenseCategoryId: data.expenseCategory.id || "",
|
||||
isAdvancePayment: data.isAdvancePayment || false,
|
||||
billAttachments: data.documents
|
||||
? data.documents.map((doc) => ({
|
||||
@ -141,7 +143,7 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
|
||||
...fromdata,
|
||||
dueDate: localToUtc(fromdata.dueDate),
|
||||
};
|
||||
if (expenseToEdit) {
|
||||
if (requestToEdit) {
|
||||
const editPayload = { ...payload, id: data.id };
|
||||
PaymentRequestUpdate({ id: data.id, payload: editPayload });
|
||||
} else {
|
||||
@ -153,7 +155,7 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
|
||||
return (
|
||||
<div className="container p-3">
|
||||
<h5 className="m-0">
|
||||
{expenseToEdit ? "Update Payment Request " : "Create Payment Request"}
|
||||
{requestToEdit ? "Update Payment Request " : "Create Payment Request"}
|
||||
</h5>
|
||||
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row my-2 text-start">
|
||||
@ -395,7 +397,7 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
|
||||
<div className="d-block">
|
||||
{files
|
||||
.filter((file) => {
|
||||
if (expenseToEdit) {
|
||||
if (requestToEdit) {
|
||||
return file.isActive;
|
||||
}
|
||||
return true;
|
||||
@ -420,7 +422,7 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
|
||||
className="bx bx-trash bx-sm cursor-pointer text-danger"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
removeFile(expenseToEdit ? file.documentId : idx);
|
||||
removeFile(requestToEdit ? file.documentId : idx);
|
||||
}}
|
||||
></i>
|
||||
</a>
|
||||
@ -458,7 +460,7 @@ function ManagePaymentRequest({ closeModal, expenseToEdit = null }) {
|
||||
>
|
||||
{createPending
|
||||
? "Please Wait..."
|
||||
: expenseToEdit
|
||||
: requestToEdit
|
||||
? "Update"
|
||||
: "Submit"}
|
||||
</button>
|
||||
|
||||
@ -1,20 +1,139 @@
|
||||
import React, { useState } from "react";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import { useDebounce } from "../../utils/appUtils";
|
||||
import { formatDate } from "../../utils/dateUtils";
|
||||
import { EXPENSE_DRAFT, ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import {
|
||||
formatCurrency,
|
||||
getColorNameFromHex,
|
||||
useDebounce,
|
||||
} from "../../utils/appUtils";
|
||||
import { usePaymentRequestList } from "../../hooks/useExpense";
|
||||
import ExpenseSkeleton, {
|
||||
ExpenseTableSkeleton,
|
||||
} from "../Expenses/ExpenseSkeleton";
|
||||
import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Avatar from "../../components/common/Avatar";
|
||||
import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
|
||||
import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
|
||||
|
||||
const PaymentRequestList = ({ groupBy = "submittedBy", search }) => {
|
||||
const { setManageRequest } = usePaymentRequestContext();
|
||||
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 PaymentRequestList = ({ setManagePaymentRequestModal, search }) => {
|
||||
const paymentRequestColumns = [
|
||||
{ key: "paymentRequestUID", label: "Request ID", align: "text-start mx-2" },
|
||||
{ key: "title", label: "Request Title", align: "text-start" },
|
||||
{ key: "payee", label: "Payee", align: "text-start" },
|
||||
{ key: "createdAt", label: "Submitted On", align: "text-start" },
|
||||
{ key: "amount", label: "Amount", align: "text-start" },
|
||||
{ key: "expenseStatus", label: "Status", align: "text-start" },
|
||||
{
|
||||
key: "paymentRequestUID",
|
||||
label: "Request ID",
|
||||
align: "text-start mx-2",
|
||||
getValue: (e) => e.paymentRequestUID || "N/A",
|
||||
},
|
||||
{
|
||||
key: "title",
|
||||
label: "Request Title",
|
||||
align: "text-start",
|
||||
getValue: (e) => e.title || "N/A",
|
||||
},
|
||||
// { key: "payee", label: "Payee", align: "text-start" },
|
||||
{
|
||||
key: "SubmittedBy",
|
||||
label: "Submitted By",
|
||||
align: "text-start",
|
||||
getValue: (e) =>
|
||||
`${e.createdBy?.firstName ?? ""} ${
|
||||
e.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A",
|
||||
customRender: (e) => (
|
||||
<div
|
||||
className="d-flex align-items-center cursor-pointer"
|
||||
onClick={() => navigate(`/employee/${e.createdBy?.id}`)}
|
||||
>
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={e.createdBy?.firstName}
|
||||
lastName={e.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-truncate">
|
||||
{`${e.createdBy?.firstName ?? ""} ${
|
||||
e.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "createdAt",
|
||||
label: "Submitted On",
|
||||
align: "text-start",
|
||||
getValue: (e) => formatUTCToLocalTime(e?.createdAt),
|
||||
},
|
||||
{
|
||||
key: "amount",
|
||||
label: " Amount",
|
||||
align: "text-start",
|
||||
getValue: (e) => (
|
||||
<>{formatCurrency(e?.amount, e.currency.currencyCode)}</>
|
||||
),
|
||||
align: "text-end px-3",
|
||||
},
|
||||
{
|
||||
key: "expenseStatus",
|
||||
label: "Status",
|
||||
align: "text-center",
|
||||
getValue: (e) => (
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(e?.expenseStatus?.color) || "secondary"
|
||||
}`}
|
||||
>
|
||||
{e?.expenseStatus?.name || "Unknown"}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
@ -40,16 +159,37 @@ const PaymentRequestList = ({ setManagePaymentRequestModal, search }) => {
|
||||
);
|
||||
}
|
||||
const header = [
|
||||
"Expense ID",
|
||||
"Expense Category",
|
||||
"Payment Mode",
|
||||
"Sumitted By",
|
||||
"Submitted",
|
||||
"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?.status?.id === EXPENSE_DRAFT ||
|
||||
EXPENSE_REJECTEDBY.includes(paymentRequest?.status?.id)) &&
|
||||
paymentRequest?.createdBy?.id === SelfId
|
||||
);
|
||||
};
|
||||
const canDetetExpense = (expense) => {
|
||||
return (
|
||||
expense?.status?.id === EXPENSE_DRAFT && expense?.createdBy?.id === SelfId
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card page-min-h table-responsive px-sm-4">
|
||||
<div className="card-datatable" id="payment-request-table">
|
||||
@ -66,70 +206,105 @@ const PaymentRequestList = ({ setManagePaymentRequestModal, search }) => {
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{isLoading || isFetching ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={paymentRequestColumns.length + 1}
|
||||
className="text-center py-4"
|
||||
>
|
||||
Loading Payment Requests...
|
||||
</td>
|
||||
</tr>
|
||||
) : paymentRequestData.length > 0 ? (
|
||||
paymentRequestData.map((row) => (
|
||||
<tr key={row.id}>
|
||||
<td>{row.paymentRequestUID}</td>
|
||||
<td>{row.title}</td>
|
||||
<td>{row.payee}</td>
|
||||
<td>{formatDate(row.createdAt)}</td>
|
||||
<td>
|
||||
{row.currency?.symbol}
|
||||
{row.amount}
|
||||
</td>
|
||||
<td>
|
||||
<span
|
||||
className="badge"
|
||||
style={{
|
||||
backgroundColor: row.expenseStatus?.color || "#6c757d",
|
||||
}}
|
||||
>
|
||||
{row.expenseStatus?.displayName || "Unknown"}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-center">
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
<i
|
||||
className="bx bx-show text-primary cursor-pointer"
|
||||
title="View"
|
||||
onClick={() =>
|
||||
console.log(
|
||||
"View clicked for:",
|
||||
row.paymentRequestUID
|
||||
{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>
|
||||
)
|
||||
}
|
||||
></i>
|
||||
)}
|
||||
<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={() =>
|
||||
setViewExpense({
|
||||
expenseId: paymentRequest.id,
|
||||
view: true,
|
||||
})
|
||||
}
|
||||
></i>
|
||||
|
||||
<i
|
||||
className="bx bx-edit text-secondary cursor-pointer"
|
||||
title="Edit"
|
||||
onClick={() =>
|
||||
setManagePaymentRequestModal({
|
||||
IsOpen: true,
|
||||
expenseId: row.id, // Pass ID for editing
|
||||
})
|
||||
}
|
||||
></i>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<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>
|
||||
|
||||
<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={paymentRequestColumns.length + 1}
|
||||
className="text-center py-4"
|
||||
>
|
||||
No Payment Requests Found
|
||||
<td colSpan={8} className="text-center border-0 ">
|
||||
<div className="py-8">
|
||||
<p>No Request Found</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
24
src/components/common/Tooltip.jsx
Normal file
24
src/components/common/Tooltip.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
const Tooltip = ({ text, placement = "top", children }) => {
|
||||
useEffect(() => {
|
||||
|
||||
const el = document.querySelector(`[data-tooltip-id="${text}"]`);
|
||||
if (el) {
|
||||
new window.bootstrap.Tooltip(el);
|
||||
}
|
||||
}, [text]);
|
||||
|
||||
return (
|
||||
<span
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement={placement}
|
||||
title={text}
|
||||
data-tooltip-id={text}
|
||||
style={{ cursor: "pointer", display: "inline-flex", alignItems: "center" }}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
export default Tooltip;
|
||||
@ -3,18 +3,25 @@ import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import {
|
||||
useCreateExpenseType,
|
||||
useUpdateExpenseType,
|
||||
useCreateExpenseCategory,
|
||||
useUpdateExpenseCategory,
|
||||
} from "../../hooks/masterHook/useMaster";
|
||||
import Label from "../common/Label";
|
||||
import Tooltip from "../common/Tooltip";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const ExpnseSchema = z.object({
|
||||
name: z.string().min(1, { message: "Name is required" }),
|
||||
noOfPersonsRequired: z.boolean().default(false),
|
||||
isAttachmentRequried: z.boolean().default(false),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
});
|
||||
|
||||
const ManageExpenseType = ({ data = null, onClose }) => {
|
||||
const ManageExpenseCategory = ({ data = null, onClose }) => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
@ -22,12 +29,12 @@ const ManageExpenseType = ({ data = null, onClose }) => {
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(ExpnseSchema),
|
||||
defaultValues: { name: "", noOfPersonsRequired: false, description: "" },
|
||||
defaultValues: { name: "", noOfPersonsRequired: false,isAttachmentRequried:false, description: "" },
|
||||
});
|
||||
const { mutate: UpdateExpenseType, isPending:isPendingUpdate } = useUpdateExpenseType(
|
||||
const { mutate: UpdateExpenseType, isPending:isPendingUpdate } = useUpdateExpenseCategory(
|
||||
() => onClose?.()
|
||||
);
|
||||
const { mutate: CreateExpenseType, isPending } = useCreateExpenseType(() =>
|
||||
const { mutate: CreateExpenseType, isPending } = useCreateExpenseCategory(() =>
|
||||
onClose?.()
|
||||
);
|
||||
|
||||
@ -47,6 +54,7 @@ const ManageExpenseType = ({ data = null, onClose }) => {
|
||||
reset({
|
||||
name: data.name ?? "",
|
||||
noOfPersonsRequired: data.noOfPersonsRequired ?? false,
|
||||
isAttachmentRequried:data.isAttachmentRequried ?? false,
|
||||
description: data.description ?? "",
|
||||
});
|
||||
}
|
||||
@ -76,14 +84,37 @@ const ManageExpenseType = ({ data = null, onClose }) => {
|
||||
<p className="danger-text">{errors.description.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-12 d-flex align-items-center">
|
||||
<label className="from-label">No. of Persons Required </label>{" "}
|
||||
<div className="col-12 d-flex flex-wrap gap-4 align-items-center">
|
||||
<label className="form-label d-flex align-items-center gap-2 mb-0">
|
||||
<Tooltip
|
||||
text="These checkboxes let you specify if the task needs multiple persons."
|
||||
placement="top"
|
||||
>
|
||||
<i className="bx bx-info-circle "></i>
|
||||
</Tooltip> No. of Persons Required?
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input ms-2"
|
||||
className="form-check-input ms-2"
|
||||
{...register("noOfPersonsRequired")}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label className="form-label d-flex align-items-center gap-2 mb-0">
|
||||
<Tooltip
|
||||
text="These checkboxes let you if file attachments are mandatory."
|
||||
placement="top"
|
||||
>
|
||||
<i className="bx bx-info-circle "></i>
|
||||
</Tooltip> Attachment Required?
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input ms-2"
|
||||
{...register("isAttachmentRequired")}
|
||||
/>
|
||||
</label>
|
||||
|
||||
|
||||
</div>
|
||||
<div className="col-12 text-end">
|
||||
<button
|
||||
type="reset"
|
||||
@ -112,4 +143,4 @@ const ManageExpenseType = ({ data = null, onClose }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ManageExpenseType;
|
||||
export default ManageExpenseCategory;
|
||||
@ -9,7 +9,7 @@ import CreateCategory from "./CreateContactCategory";
|
||||
import CreateContactTag from "./CreateContactTag";
|
||||
import EditContactCategory from "./EditContactCategory";
|
||||
import EditContactTag from "./EditContactTag";
|
||||
import ManageExpenseType from "./ManageExpenseType";
|
||||
import ManageExpenseCategory from "./ManageExpenseCategory";
|
||||
import ManagePaymentMode from "./ManagePaymentMode";
|
||||
import ManageExpenseStatus from "./ManageExpenseStatus";
|
||||
import ManageDocumentCategory from "./ManageDocumentCategory";
|
||||
@ -43,8 +43,8 @@ const MasterModal = ({ modaldata, closeModal }) => {
|
||||
),
|
||||
"Contact Tag": <CreateContactTag data={item} onClose={closeModal} />,
|
||||
"Edit-Contact Tag": <EditContactTag data={item} onClose={closeModal} />,
|
||||
"Expense Type": <ManageExpenseType onClose={closeModal} />,
|
||||
"Edit-Expense Type": <ManageExpenseType data={item} onClose={closeModal} />,
|
||||
"Expense Category": <ManageExpenseCategory onClose={closeModal} />,
|
||||
"Edit-Expense Category": <ManageExpenseCategory data={item} onClose={closeModal} />,
|
||||
"Payment Mode": <ManagePaymentMode onClose={closeModal} />,
|
||||
"Edit-Payment Mode": <ManagePaymentMode data={item} onClose={closeModal} />,
|
||||
"Expense Status": <ManageExpenseStatus onClose={closeModal} />,
|
||||
|
||||
@ -150,15 +150,15 @@ export const useContactTags = () => {
|
||||
return { contactTags, loading, error };
|
||||
};
|
||||
|
||||
export const useExpenseType = () => {
|
||||
export const useExpenseCategory = () => {
|
||||
const {
|
||||
data: ExpenseTypes = [],
|
||||
isLoading: loading,
|
||||
error,
|
||||
} = useQuery({
|
||||
queryKey: ["Expense Type"],
|
||||
queryKey: ["Expense Category"],
|
||||
queryFn: async () => {
|
||||
const res = await MasterRespository.getExpenseType();
|
||||
const res = await MasterRespository.getExpenseCategory
|
||||
return res.data;
|
||||
},
|
||||
onError: (error) => {
|
||||
@ -293,8 +293,8 @@ const fetchMasterData = async (masterType) => {
|
||||
return (await MasterRespository.getContactCategory()).data;
|
||||
case "Contact Tag":
|
||||
return (await MasterRespository.getContactTag()).data;
|
||||
case "Expense Type":
|
||||
return (await MasterRespository.getExpenseType()).data;
|
||||
case "Expense Category":
|
||||
return (await MasterRespository.getExpenseCategory()).data;
|
||||
case "Payment Mode":
|
||||
return (await MasterRespository.getPaymentMode()).data;
|
||||
case "Expense Status":
|
||||
@ -596,17 +596,17 @@ export const useUpdateContactTag = (onSuccessCallback) => {
|
||||
};
|
||||
|
||||
// ----------------------Expense Type------------------
|
||||
export const useCreateExpenseType = (onSuccessCallback) => {
|
||||
export const useCreateExpenseCategory= (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
const resp = await MasterRespository.createExpenseType(payload);
|
||||
const resp = await MasterRespository.createExpenseCategory(payload);
|
||||
return resp.data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["masterData", "Expense Type"],
|
||||
queryKey: ["masterData", "Expense Category"],
|
||||
});
|
||||
showToast("Expense Type added successfully", "success");
|
||||
if (onSuccessCallback) onSuccessCallback(data);
|
||||
@ -616,17 +616,17 @@ export const useCreateExpenseType = (onSuccessCallback) => {
|
||||
},
|
||||
});
|
||||
};
|
||||
export const useUpdateExpenseType = (onSuccessCallback) => {
|
||||
export const useUpdateExpenseCategory = (onSuccessCallback) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async ({ id, payload }) => {
|
||||
const response = await MasterRespository.updateExpenseType(id, payload);
|
||||
const response = await MasterRespository.updateExpenseCategory(id, payload);
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: (data, variables) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["masterData", "Expense Type"],
|
||||
queryKey: ["masterData", "Expense Category"],
|
||||
});
|
||||
showToast("Expense Type updated successfully.", "success");
|
||||
|
||||
|
||||
@ -281,6 +281,16 @@ export const usePaymentRequestList = (
|
||||
keepPreviousData: true,
|
||||
});
|
||||
};
|
||||
export const usePaymentRequestDetail =(RequestId)=>{
|
||||
return useQuery({
|
||||
queryKey:['paymentRequest',RequestId],
|
||||
queryFn:async()=>{
|
||||
const resp = await ExpenseRepository.GetPaymentRequest(RequestId);
|
||||
return resp.data;
|
||||
},
|
||||
enabled:!!RequestId
|
||||
})
|
||||
}
|
||||
|
||||
// ---------------------------Put Post Payment Request---------------------------------------
|
||||
export const useCreatePaymentRequest = (onSuccessCallBack) => {
|
||||
|
||||
@ -1,89 +1,123 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { createContext, useState,useEffect, useContext } from "react";
|
||||
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||
import GlobalModel from "../../components/common/GlobalModel";
|
||||
import ManagePaymentRequest from "../../components/PaymentRequest/ManagePaymentRequest";
|
||||
import ExpenseFilterPanel from "../../components/Expenses/ExpenseFilterPanel";
|
||||
import { useFab } from "../../Context/FabContext";
|
||||
import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestList";
|
||||
|
||||
export const PaymentRequestContext = createContext();
|
||||
export const usePaymentRequestContext = () => {
|
||||
const context = useContext(PaymentRequestContext);
|
||||
if (!context) {
|
||||
throw new Error("usePaymentRequestContext must be used within an ExpenseProvider");
|
||||
}
|
||||
return context;
|
||||
};
|
||||
const PaymentRequestPage = () => {
|
||||
const [ManagePaymentRequestModal, setManagePaymentRequestModal] = useState({
|
||||
const [ManageRequest, setManageRequest] = useState({
|
||||
IsOpen: null,
|
||||
expenseId: null,
|
||||
RequestId: null,
|
||||
});
|
||||
const { setOffcanvasContent, setShowTrigger } = useFab();
|
||||
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
{/* Breadcrumb */}
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/" },
|
||||
{ label: "Finance", link: "/Payment Request" },
|
||||
{ label: "Payment Request" },
|
||||
]}
|
||||
const contextValue = {
|
||||
// setViewExpense,
|
||||
setManageRequest,
|
||||
// setDocumentView,
|
||||
// filterData,
|
||||
// removeFilterChip
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
setShowTrigger(true);
|
||||
setOffcanvasContent(
|
||||
"Expense Filters",
|
||||
<ExpenseFilterPanel
|
||||
|
||||
/>
|
||||
);
|
||||
|
||||
{/* Top Bar */}
|
||||
<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">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder="Search Payment Req.."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
return () => {
|
||||
setShowTrigger(false);
|
||||
setOffcanvasContent("", null);
|
||||
};
|
||||
},[]);
|
||||
|
||||
<div className="col-6 text-end mt-2 mt-sm-0">
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setManagePaymentRequestModal({
|
||||
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>
|
||||
return (
|
||||
<PaymentRequestContext.Provider value={contextValue}>
|
||||
<div className="container-fluid">
|
||||
{/* Breadcrumb */}
|
||||
<Breadcrumb
|
||||
data={[
|
||||
{ label: "Home", link: "/" },
|
||||
{ label: "Finance", link: "/Payment Request" },
|
||||
{ label: "Payment Request" },
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Top Bar */}
|
||||
<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">
|
||||
<input
|
||||
type="search"
|
||||
className="form-control form-control-sm w-auto"
|
||||
placeholder="Search Payment Req.."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-6 text-end mt-2 mt-sm-0">
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setManageRequest({
|
||||
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>
|
||||
</div>
|
||||
|
||||
{/* Add/Edit Modal */}
|
||||
{ManagePaymentRequestModal.IsOpen && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="lg"
|
||||
closeModal={() =>
|
||||
setManagePaymentRequestModal({ IsOpen: null, expenseId: null })
|
||||
}
|
||||
>
|
||||
<ManagePaymentRequestModal
|
||||
key={ManagePaymentRequestModal.expenseId ?? "new"}
|
||||
expenseToEdit={ManagePaymentRequestModal.expenseId}
|
||||
closeModal={() =>
|
||||
setManagePaymentRequestModal({ IsOpen: null, expenseId: null })
|
||||
}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{/* Payment Request List */}
|
||||
<div className="card">
|
||||
<PaymentRequestList
|
||||
search={search}
|
||||
setManagePaymentRequestModal={setManagePaymentRequestModal}
|
||||
/>
|
||||
search={search}
|
||||
/>
|
||||
|
||||
{/* Add/Edit Modal */}
|
||||
{ManageRequest.IsOpen && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="lg"
|
||||
closeModal={() =>
|
||||
setManageRequest({ IsOpen: null, expenseId: null })
|
||||
}
|
||||
>
|
||||
<ManagePaymentRequest
|
||||
key={ManageRequest.RequestId ?? "new"}
|
||||
requestToEdit={ManageRequest.RequestId}
|
||||
closeModal={() =>
|
||||
setManageRequest({ IsOpen: null, RequestId: null })
|
||||
}
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</PaymentRequestContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -23,6 +23,8 @@ 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}`),
|
||||
|
||||
//#endregion
|
||||
|
||||
|
||||
|
||||
@ -49,8 +49,8 @@ export const MasterRespository = {
|
||||
"Work Category": (id) => api.delete(`api/master/work-category/${id}`),
|
||||
"Contact Category": (id) => api.delete(`/api/master/contact-category/${id}`),
|
||||
"Contact Tag": (id) => api.delete(`/api/master/contact-tag/${id}`),
|
||||
"Expense Type": (id, isActive) =>
|
||||
api.delete(`/api/Master/expenses-type/delete/${id}`, (isActive = false)),
|
||||
"Expense Category": (id, isActive) =>
|
||||
api.delete(`/api/Master/expenses-category/delete/${id}`, (isActive = false)),
|
||||
"Payment Mode": (id, isActive) =>
|
||||
api.delete(`/api/Master/payment-mode/delete/${id}`, (isActive = false)),
|
||||
"Expense Status": (id, isActive) =>
|
||||
@ -82,10 +82,10 @@ export const MasterRespository = {
|
||||
|
||||
getAuditStatus: () => api.get("/api/Master/work-status"),
|
||||
|
||||
getExpenseType: () => api.get("/api/Master/expenses-types"),
|
||||
createExpenseType: (data) => api.post("/api/Master/expenses-type", data),
|
||||
updateExpenseType: (id, data) =>
|
||||
api.put(`/api/Master/expenses-type/edit/${id}`, data),
|
||||
getExpenseCategory: () => api.get("/api/Master/expenses-categories"),
|
||||
createExpenseCategory: (data) => api.post("/api/Master/expenses-category", data),
|
||||
updateExpenseCategory: (id, data) =>
|
||||
api.put(`/api/Master/expenses-category/edit/${id}`, data),
|
||||
|
||||
getPaymentMode: () => api.get("/api/Master/payment-modes"),
|
||||
createPaymentMode: (data) => api.post(`/api/Master/payment-mode`, data),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user