use
This commit is contained in:
commit
1ca1f15422
@ -1,82 +1,68 @@
|
||||
import React from "react";
|
||||
import { useExpenseTransactions } from "../../hooks/useExpense";
|
||||
import Error from "../common/Error";
|
||||
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Loader, { SpinnerLoader } from "../common/Loader";
|
||||
|
||||
const AdvancePaymentList = ({ employeeId }) => {
|
||||
const {data,isError, isLoading,isFetching,error} = useExpenseTransactions(employeeId)
|
||||
const record = {
|
||||
openingBalance: 25000.0,
|
||||
rows: [
|
||||
{ id: 1, description: "Opening Balance", credit: 0.0, debit: 0.0 },
|
||||
{
|
||||
id: 2,
|
||||
description: "Sales Invoice #INV-001",
|
||||
credit: 15000.0,
|
||||
debit: 0.0,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
description: "Sales Invoice #INV-002",
|
||||
credit: 12000.0,
|
||||
debit: 0.0,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
description: "Purchase - Raw Materials",
|
||||
credit: 0.0,
|
||||
debit: 8000.0,
|
||||
},
|
||||
{ id: 5, description: "Office Rent - June", credit: 0.0, debit: 5000.0 },
|
||||
{
|
||||
id: 6,
|
||||
description: "Client Payment Received (Bank)",
|
||||
credit: 10000.0,
|
||||
debit: 0.0,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
description: "Supplier Payment - ABC Corp",
|
||||
credit: 0.0,
|
||||
debit: 6000.0,
|
||||
},
|
||||
{ id: 8, description: "Interest Income", credit: 750.0, debit: 0.0 },
|
||||
{ id: 9, description: "Bank Charges", credit: 0.0, debit: 250.0 },
|
||||
{
|
||||
id: 10,
|
||||
description: "Utilities - Electricity",
|
||||
credit: 0.0,
|
||||
debit: 1800.0,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
description: "Service Income - Project Alpha",
|
||||
credit: 5000.0,
|
||||
debit: 0.0,
|
||||
},
|
||||
{ id: 12, description: "Misc Expense", credit: 0.0, debit: 450.0 },
|
||||
{
|
||||
id: 13,
|
||||
description: "Adjustment - Prior Year",
|
||||
credit: 0.0,
|
||||
debit: 500.0,
|
||||
},
|
||||
{ id: 14, description: "Commission Earned", credit: 1200.0, debit: 0.0 },
|
||||
{
|
||||
id: 15,
|
||||
description: "Employee Salary - June",
|
||||
credit: 0.0,
|
||||
debit: 9500.0,
|
||||
},
|
||||
{ id: 16, description: "GST Refund", credit: 2000.0, debit: 0.0 },
|
||||
{ id: 17, description: "Insurance Premium", credit: 0.0, debit: 3000.0 },
|
||||
{ id: 18, description: "Late Fee Collected", credit: 350.0, debit: 0.0 },
|
||||
{ id: 19, description: "Maintenance Expense", credit: 0.0, debit: 600.0 },
|
||||
{ id: 20, description: "Closing Balance", credit: 0.0, debit: 0.0 },
|
||||
],
|
||||
};
|
||||
let currentBalance = record.openingBalance;
|
||||
const rowsWithBalance = record.rows.map((r) => {
|
||||
currentBalance += r.credit - r.debit;
|
||||
return { ...r, balance: currentBalance };
|
||||
const { data, isError, isLoading, error, isFetching } =
|
||||
useExpenseTransactions(employeeId, { enabled: !!employeeId });
|
||||
|
||||
// Handle no employee selected
|
||||
if (!employeeId) {
|
||||
return (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ height: "200px" }}
|
||||
>
|
||||
<p className="text-muted m-0">Please select an employee</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle loading state
|
||||
if (isLoading || isFetching) {
|
||||
return (
|
||||
<div
|
||||
className="d-flex justify-content-center align-items-center"
|
||||
style={{ height: "200px" }}
|
||||
>
|
||||
<SpinnerLoader/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Handle error state
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="text-center py-3">
|
||||
{error?.status === 404 ? (
|
||||
"No advance payment transactions found."
|
||||
) : (
|
||||
<Error error={error} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const records = Array.isArray(data) ? data : [];
|
||||
|
||||
let currentBalance = 0;
|
||||
const rowsWithBalance = records.map((r) => {
|
||||
const isCredit = r.amount > 0;
|
||||
const credit = isCredit ? r.amount : 0;
|
||||
const debit = !isCredit ? Math.abs(r.amount) : 0;
|
||||
currentBalance += credit - debit;
|
||||
|
||||
return {
|
||||
id: r.id,
|
||||
description: r.title || "-",
|
||||
projectName: r.project?.name || "-",
|
||||
createdAt: r.createdAt,
|
||||
credit,
|
||||
debit,
|
||||
balance: currentBalance,
|
||||
};
|
||||
});
|
||||
|
||||
const columns = [
|
||||
@ -84,36 +70,45 @@ const AdvancePaymentList = ({ employeeId }) => {
|
||||
{
|
||||
key: "credit",
|
||||
label: (
|
||||
<span>
|
||||
Credit (<i className="bx bx-rupee text-success"></i>)
|
||||
</span>
|
||||
<>
|
||||
Credit <i className="bx bx-rupee text-success"></i>
|
||||
</>
|
||||
),
|
||||
align: "text-end",
|
||||
},
|
||||
{
|
||||
key: "debit",
|
||||
label: (
|
||||
<span>
|
||||
Debit (<i className="bx bx-rupee text-danger"></i>)
|
||||
</span>
|
||||
<>
|
||||
Debit <i className="bx bx-rupee text-danger"></i>
|
||||
</>
|
||||
),
|
||||
align: "text-end",
|
||||
},
|
||||
{
|
||||
key: "balance",
|
||||
label: (
|
||||
<span>
|
||||
<>
|
||||
Balance <i className="bi bi-currency-rupee text-primary"></i>
|
||||
</span>
|
||||
</>
|
||||
),
|
||||
align: "text-end fw-bold",
|
||||
},
|
||||
];
|
||||
|
||||
// Handle empty records
|
||||
if (rowsWithBalance.length === 0) {
|
||||
return (
|
||||
<div className="text-center text-muted py-3">
|
||||
No advance payment records found.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="table-responsive ">
|
||||
<table className="table align-middle">
|
||||
<thead className="table_header_border ">
|
||||
<div className="table-responsive">
|
||||
<table className="table align-middle">
|
||||
<thead className="table_header_border">
|
||||
<tr>
|
||||
{columns.map((col) => (
|
||||
<th key={col.key} className={col.align}>
|
||||
@ -126,25 +121,28 @@ const AdvancePaymentList = ({ employeeId }) => {
|
||||
{rowsWithBalance.map((row) => (
|
||||
<tr key={row.id}>
|
||||
{columns.map((col) => (
|
||||
<td key={col.key} className={`${col.align} p-6`}>
|
||||
{col.key === "balance" ||
|
||||
col.key === "credit" ||
|
||||
col.key === "debit"
|
||||
? row[col.key].toLocaleString("en-IN", {
|
||||
style: "currency",
|
||||
currency: "INR",
|
||||
})
|
||||
: (<div className="d-flex flex-column">
|
||||
<small>{new Date().toISOString()}</small>
|
||||
<small>Projec Name</small>
|
||||
<small>{row[col.key]}</small>
|
||||
</div>)}
|
||||
<td key={col.key} className={`${col.align} p-2`}>
|
||||
{["balance", "credit", "debit"].includes(col.key) ? (
|
||||
<span>
|
||||
{row[col.key].toLocaleString("en-IN")}
|
||||
</span>
|
||||
) : (
|
||||
<div className="d-flex flex-column text-start">
|
||||
<small className="text-muted">
|
||||
{formatUTCToLocalTime(row.createdAt)}
|
||||
</small>
|
||||
<small className="fw-semibold text-dark">
|
||||
{row.projectName}
|
||||
</small>
|
||||
<small>{row.description}</small>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
<tfoot className="table-secondary fw-bold ">
|
||||
<tfoot className="table-secondary fw-bold">
|
||||
<tr>
|
||||
<td className="text-start p-3">Final Balance</td>
|
||||
<td className="text-end" colSpan="3">
|
||||
|
||||
@ -123,9 +123,9 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
align: "text-start mx-2",
|
||||
},
|
||||
{
|
||||
key: "expensesType",
|
||||
key: "expensesCategory",
|
||||
label: "Expense Category",
|
||||
getValue: (e) => e.expensesType?.name || "N/A",
|
||||
getValue: (e) => e.expenseCategory?.name || "N/A",
|
||||
align: "text-start",
|
||||
},
|
||||
{
|
||||
@ -253,7 +253,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
className={`sorting d-table-cell `}
|
||||
aria-sort="descending"
|
||||
>
|
||||
<div className={`${col.align} p`}>{col.label}</div>
|
||||
<div className={`${col.align} `}>{col.label}</div>
|
||||
</th>
|
||||
)
|
||||
)}
|
||||
@ -288,16 +288,20 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
|
||||
(col.isAlwaysVisible || groupBy !== col.key) && (
|
||||
<td
|
||||
key={col.key}
|
||||
className={`d-table-cell ${col.align ?? ""}`}
|
||||
className={`d-table-cell ml-2 ${col.align ?? ""} `}
|
||||
>
|
||||
{col.customRender
|
||||
<div className={`d-flex px-2 ${col.key === "status" ? "justify-content-center":""}
|
||||
${col.key === "amount" ? "justify-content-end":""}
|
||||
${col.key === "submitted" ? "justify-content-center":""}
|
||||
`}>{col.customRender
|
||||
? col.customRender(expense)
|
||||
: col.getValue(expense)}
|
||||
</div>
|
||||
</td>
|
||||
)
|
||||
)}
|
||||
<td className="sticky-action-column bg-white">
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
<div className="d-flex flex-row gap-2">
|
||||
<i
|
||||
className="bx bx-show text-primary cursor-pointer"
|
||||
onClick={() =>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { z } from "zod";
|
||||
import { localToUtc } from "../../utils/appUtils";
|
||||
import { DEFAULT_CURRENCY } from "../../utils/constants";
|
||||
|
||||
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
|
||||
const ALLOWED_TYPES = [
|
||||
@ -24,6 +25,10 @@ export const ExpenseSchema = (expenseTypes) => {
|
||||
location: z.string().min(1, { message: "Location is required" }),
|
||||
supplerName: z.string().min(1, { message: "Supplier name is required" }),
|
||||
gstNumber: z.string().optional(),
|
||||
currencyId: z
|
||||
.string()
|
||||
.min(1, { message: "currency is required" })
|
||||
.default(DEFAULT_CURRENCY),
|
||||
amount: z.coerce
|
||||
.number({
|
||||
invalid_type_error: "Amount is required and must be a number",
|
||||
@ -94,6 +99,7 @@ export const defaultExpense = {
|
||||
amount: "",
|
||||
noOfPersons: "",
|
||||
gstNumber: "",
|
||||
currencyId: DEFAULT_CURRENCY,
|
||||
billAttachments: [],
|
||||
};
|
||||
|
||||
@ -108,6 +114,9 @@ export const ExpenseActionScheam = (
|
||||
reimburseTransactionId: z.string().nullable().optional(),
|
||||
reimburseDate: z.string().nullable().optional(),
|
||||
reimburseById: z.string().nullable().optional(),
|
||||
tdsPercentage: z.number().nullable().optional(),
|
||||
baseAmount: z.string().nullable().optional(),
|
||||
taxAmount: z.string().nullable().optional(),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (isReimbursement) {
|
||||
@ -125,15 +134,7 @@ export const ExpenseActionScheam = (
|
||||
message: "Reimburse Date is required",
|
||||
});
|
||||
}
|
||||
// let reimburse_Date = localToUtc(data.reimburseDate);
|
||||
// if (transactionDate > reimburse_Date) {
|
||||
// ctx.addIssue({
|
||||
// code: z.ZodIssueCode.custom,
|
||||
// path: ["reimburseDate"],
|
||||
// message:
|
||||
// "Reimburse Date must be greater than or equal to Expense created Date",
|
||||
// });
|
||||
// }
|
||||
|
||||
if (!data.reimburseById) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
@ -141,6 +142,20 @@ export const ExpenseActionScheam = (
|
||||
message: "Reimburse By is required",
|
||||
});
|
||||
}
|
||||
if (!data.baseAmount) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ["baseAmount"],
|
||||
message: "Base Amount i required",
|
||||
});
|
||||
}
|
||||
if (!data.taxAmount) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ["taxAmount"],
|
||||
message: "Tax is required",
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -152,6 +167,9 @@ export const defaultActionValues = {
|
||||
reimburseTransactionId: null,
|
||||
reimburseDate: null,
|
||||
reimburseById: null,
|
||||
tdsPercentage: 0,
|
||||
baseAmount:null,
|
||||
taxAmount: 0,
|
||||
};
|
||||
|
||||
export const SearchSchema = z.object({
|
||||
|
||||
@ -8,9 +8,9 @@ const ExpenseStatusLogs = ({ data }) => {
|
||||
const [visibleCount, setVisibleCount] = useState(4);
|
||||
|
||||
const sortedLogs = useMemo(() => {
|
||||
if (!data?.updateLogs) return [];
|
||||
return [...data.updateLogs].sort(
|
||||
(a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)
|
||||
if (!data?.expenseLogs) return [];
|
||||
return [...data.expenseLogs].sort(
|
||||
(a, b) => new Date(b.updateAt) - new Date(a.updateAt)
|
||||
);
|
||||
}, [data?.updateLogs]);
|
||||
|
||||
@ -20,11 +20,12 @@ const ExpenseStatusLogs = ({ data }) => {
|
||||
);
|
||||
|
||||
const timelineData = useMemo(() => {
|
||||
|
||||
return logsToShow.map((log, index) => ({
|
||||
id: index + 1,
|
||||
title: log.nextStatus?.name || "Status Updated",
|
||||
description: log.nextStatus?.description || "",
|
||||
timeAgo: moment.utc(log?.updatedAt).local().fromNow(),
|
||||
title: log.action || "Status Updated",
|
||||
description: log.comment || "",
|
||||
timeAgo: log.updateAt,
|
||||
color: getColorNameFromHex(log.nextStatus?.color) || "primary",
|
||||
users: log.updatedBy
|
||||
? [
|
||||
@ -44,46 +45,8 @@ const ExpenseStatusLogs = ({ data }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-min-h overflow-auto">
|
||||
{/* <div className="row g-2">
|
||||
{logsToShow.map((log) => (
|
||||
<div key={log.id} className="col-12 d-flex align-items-start mb-1">
|
||||
<Avatar
|
||||
size="xs"
|
||||
firstName={log.updatedBy.firstName}
|
||||
lastName={log.updatedBy.lastName}
|
||||
/>
|
||||
|
||||
<div className="flex-grow-1">
|
||||
<div className="text-start">
|
||||
<div className="flex">
|
||||
<span>{`${log.updatedBy.firstName} ${log.updatedBy.lastName}`}</span>
|
||||
<small className="text-secondary text-tiny ms-2">
|
||||
<em>{log.action}</em>
|
||||
</small>
|
||||
<span className="text-tiny text-secondary d-block">
|
||||
{formatUTCToLocalTime(log.updateAt, true)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="d-flex align-items-center text-muted small mt-1">
|
||||
<span>{log.comment}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{sortedLogs.length > visibleCount && (
|
||||
<div className="text-center my-1">
|
||||
<button
|
||||
className="btn btn-xs btn-outline-primary"
|
||||
onClick={handleShowMore}
|
||||
>
|
||||
Show More
|
||||
</button>
|
||||
</div>
|
||||
)} */}
|
||||
<div className="page-min-h overflow-auto py-1">
|
||||
|
||||
|
||||
<Timeline items={timelineData} />
|
||||
</div>
|
||||
|
||||
@ -12,19 +12,19 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
|
||||
return true;
|
||||
})
|
||||
.map((file, idx) => (
|
||||
<div className="col-12 col-sm-6 col-md-4 col-lg-8 bg-white shadow-sm rounded p-2 m-2">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-12 col-sm-6 col-md-4 mb-2" key={idx}>
|
||||
<div className="d-flex align-items-center justify-content-between bg-white border rounded p-1 ">
|
||||
{/* File icon and info */}
|
||||
<div className="col-10 d-flex align-items-center gap-2">
|
||||
<div className="d-flex align-items-center flex-grow-1 gap-2 overflow-hidden">
|
||||
<i
|
||||
className={`bx ${getIconByFileType(
|
||||
file?.contentType
|
||||
)} fs-3`}
|
||||
)} fs-3 text-primary`}
|
||||
style={{ minWidth: "30px" }}
|
||||
></i>
|
||||
|
||||
<div className="d-flex flex-column text-truncate">
|
||||
<span className="fw-medium small text-truncate">
|
||||
<span className="fw-semibold small text-truncate">
|
||||
{file.fileName}
|
||||
</span>
|
||||
<span className="text-body-secondary small">
|
||||
@ -33,16 +33,17 @@ const Filelist = ({ files, removeFile, expenseToEdit }) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-2 text-end">
|
||||
{/* Delete icon */}
|
||||
<Tooltip text="Remove file">
|
||||
<i
|
||||
className="bx bx-trash fs-4 cursor-pointer text-danger bx-sm "
|
||||
className="bx bx-sm bx-trash text-danger fs-4 cursor-pointer ms-2"
|
||||
role="button"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
removeFile(expenseToEdit ? file.documentId : idx);
|
||||
}}
|
||||
></i>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { defaultExpense, ExpenseSchema } from "./ExpenseSchema";
|
||||
import { formatFileSize, localToUtc } from "../../utils/appUtils";
|
||||
import { useProjectName } from "../../hooks/useProjects";
|
||||
import { useCurrencies, useProjectName } from "../../hooks/useProjects";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { changeMaster } from "../../slices/localVariablesSlice";
|
||||
import useMaster, {
|
||||
@ -30,6 +30,7 @@ import ErrorPage from "../../pages/ErrorPage";
|
||||
import Label from "../common/Label";
|
||||
import EmployeeSearchInput from "../common/EmployeeSearchInput";
|
||||
import Filelist from "./Filelist";
|
||||
import { DEFAULT_CURRENCY } from "../../utils/constants";
|
||||
|
||||
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
const {
|
||||
@ -66,7 +67,11 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
error,
|
||||
isError: isProjectError,
|
||||
} = useProjectName();
|
||||
|
||||
const {
|
||||
data: currencies,
|
||||
isLoading: currencyLoading,
|
||||
error: currencyError,
|
||||
} = useCurrencies();
|
||||
const {
|
||||
PaymentModes,
|
||||
loading: PaymentModeLoading,
|
||||
@ -82,7 +87,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
isLoading: EmpLoading,
|
||||
isError: isEmployeeError,
|
||||
} = useEmployeesNameByProject(selectedproject);
|
||||
|
||||
|
||||
const files = watch("billAttachments");
|
||||
const onFileChange = async (e) => {
|
||||
const newFiles = Array.from(e.target.files);
|
||||
@ -129,6 +134,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
const removeFile = (index) => {
|
||||
documentId;
|
||||
if (expenseToEdit) {
|
||||
const newFiles = files.map((file, i) => {
|
||||
if (file.documentId !== index) return file;
|
||||
@ -159,6 +165,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
amount: data.amount || "",
|
||||
noOfPersons: data.noOfPersons || "",
|
||||
gstNumber: data.gstNumber || "",
|
||||
currencyId: data.currencyId || DEFAULT_CURRENCY,
|
||||
billAttachments: data.documents
|
||||
? data.documents.map((doc) => ({
|
||||
fileName: doc.fileName,
|
||||
@ -197,7 +204,9 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
const ExpenseTypeId = watch("expensesCategoryId");
|
||||
|
||||
useEffect(() => {
|
||||
setExpenseType(ExpenseCategories?.find((type) => type.id === ExpenseTypeId));
|
||||
setExpenseType(
|
||||
ExpenseCategories?.find((type) => type.id === ExpenseTypeId)
|
||||
);
|
||||
}, [ExpenseTypeId]);
|
||||
|
||||
const handleClose = () => {
|
||||
@ -297,37 +306,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* <div className="col-md-6">
|
||||
<Label htmlFor="paidById" className="form-label" required>
|
||||
Paid By
|
||||
</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="paymentModeId"
|
||||
{...register("paidById")}
|
||||
disabled={!selectedproject}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Person
|
||||
</option>
|
||||
{EmpLoading ? (
|
||||
<option disabled>Loading...</option>
|
||||
) : (
|
||||
employees?.map((emp) => (
|
||||
<option key={emp.id} value={emp.id}>
|
||||
{`${emp.firstName} ${emp.lastName} `}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
{errors.paidById && (
|
||||
<small className="danger-text">{errors.paidById.message}</small>
|
||||
)}
|
||||
</div> */}
|
||||
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<label className="form-label">Paid By </label>
|
||||
<Label className="form-label" required>Paid By </Label>
|
||||
<EmployeeSearchInput
|
||||
control={control}
|
||||
name="paidById"
|
||||
@ -460,6 +440,32 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6 text-start">
|
||||
<Label htmlFor="currencyId" className="form-label" required>
|
||||
Select Currency
|
||||
</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="currencyId"
|
||||
{...register("currencyId")}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Currency
|
||||
</option>
|
||||
{currencyLoading ? (
|
||||
<option disabled>Loading...</option>
|
||||
) : (
|
||||
currencies?.map((currency) => (
|
||||
<option key={currency.id} value={currency.id}>
|
||||
{`${currency.currencyName} (${currency.symbol}) `}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
{errors.currencyId && (
|
||||
<small className="danger-text">{errors.currencyId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-12">
|
||||
@ -515,7 +521,13 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
{errors.billAttachments.message}
|
||||
</small>
|
||||
)}
|
||||
{files.length > 0 && <Filelist files={files} removeFile={removeFile} expenseToEdit={expenseToEdit}/>}
|
||||
{files.length > 0 && (
|
||||
<Filelist
|
||||
files={files}
|
||||
removeFile={removeFile}
|
||||
expenseToEdit={expenseToEdit}
|
||||
/>
|
||||
)}
|
||||
|
||||
{Array.isArray(errors.billAttachments) &&
|
||||
errors.billAttachments.map((fileError, index) => (
|
||||
|
||||
@ -9,7 +9,13 @@ import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { defaultActionValues, ExpenseActionScheam } from "./ExpenseSchema";
|
||||
import { useExpenseContext } from "../../pages/Expense/ExpensePage";
|
||||
import { getColorNameFromHex, getIconByFileType, localToUtc } from "../../utils/appUtils";
|
||||
import {
|
||||
formatCurrency,
|
||||
formatFigure,
|
||||
getColorNameFromHex,
|
||||
getIconByFileType,
|
||||
localToUtc,
|
||||
} from "../../utils/appUtils";
|
||||
import { ExpenseDetailsSkeleton } from "./ExpenseSkeleton";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import {
|
||||
@ -103,365 +109,429 @@ const ViewExpense = ({ ExpenseId }) => {
|
||||
const handleImageLoad = (id) => {
|
||||
setImageLoaded((prev) => ({ ...prev, [id]: true }));
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row mb-1">
|
||||
<div className="col-12 mb-1">
|
||||
<h5 className="fw-semibold m-0">Expense Details</h5>
|
||||
<hr />
|
||||
</div>
|
||||
<div className="col-12 text-start fw-semibold my-2">{data?.expenseUId}</div>
|
||||
{/* Row 1 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Transaction Date :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{formatUTCToLocalTime(data?.transactionDate)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Expense Type :
|
||||
</label>
|
||||
<div className="text-muted">{data?.expensesType?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 mb-1">
|
||||
<h5 className="fw-semibold m-0">Expense Details</h5>
|
||||
</div>
|
||||
|
||||
{/* Row 2 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Supplier :
|
||||
</label>
|
||||
<div className="text-muted">{data?.supplerName}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Amount :
|
||||
</label>
|
||||
<div className="text-muted">₹ {data.amount}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Payment Mode :
|
||||
</label>
|
||||
<div className="text-muted">{data?.paymentMode?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
{data?.gstNumber && (
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
<div className="row mb-1 ">
|
||||
<div className="col-12 col-lg-7 col-xl-8 mb-3">
|
||||
<div className="row">
|
||||
<div className="col-12 d-flex justify-content-between text-start fw-semibold my-2">
|
||||
<span>{data?.expenseUId}</span>
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(data?.status?.color) || "secondary"
|
||||
}`}
|
||||
t
|
||||
>
|
||||
GST Number :
|
||||
</label>
|
||||
<div className="text-muted">{data?.gstNumber}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Row 4 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Status :
|
||||
</label>
|
||||
<span
|
||||
className={`badge bg-label-${
|
||||
getColorNameFromHex(data?.status?.color) || "secondary"
|
||||
}`}
|
||||
>
|
||||
{data?.status?.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Pre-Approved :
|
||||
</label>
|
||||
<div className="text-muted">{data.preApproved ? "Yes" : "No"}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Project :
|
||||
</label>
|
||||
<div className="text-muted">{data?.project?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Created At :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{formatUTCToLocalTime(data?.createdAt, true)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 6 */}
|
||||
{data.createdBy && (
|
||||
<div className="col-md-6 text-start">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Created By :
|
||||
</label>
|
||||
<div className="d-flex align-items-center">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={data.createdBy?.firstName}
|
||||
lastName={data.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data.createdBy?.firstName ?? ""} ${
|
||||
data.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-md-6 text-start">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Paid By :
|
||||
</label>
|
||||
<div className="d-flex align-items-center ">
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0"
|
||||
firstName={data.paidBy?.firstName}
|
||||
lastName={data.paidBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data.paidBy?.firstName ?? ""} ${
|
||||
data.paidBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
{data?.status?.name}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-start my-1">
|
||||
<label className="fw-semibold form-label">Description : </label>
|
||||
<div className="text-muted">{data?.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label me-2 mb-2 fw-semibold">Attachment :</label>
|
||||
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
{data?.documents?.map((doc) => {
|
||||
const isImage = doc.contentType?.includes("image");
|
||||
|
||||
return (
|
||||
<div
|
||||
key={doc.documentId}
|
||||
className="border rounded hover-scale p-2 d-flex flex-column align-items-center"
|
||||
style={{
|
||||
width: "80px",
|
||||
cursor: isImage ? "pointer" : "default",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (isImage) {
|
||||
setDocumentView({
|
||||
IsOpen: true,
|
||||
Image: doc.preSignedUrl,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className={`bx ${getIconByFileType(doc.contentType)}`}
|
||||
style={{ fontSize: "30px" }}
|
||||
></i>
|
||||
<small
|
||||
className="text-center text-tiny text-truncate w-100"
|
||||
title={doc.fileName}
|
||||
{/* Row 1 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
{doc.fileName}
|
||||
</small>
|
||||
Transaction Date :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{formatUTCToLocalTime(data?.transactionDate)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{data.expensesReimburse && (
|
||||
<div className="row text-start mt-2">
|
||||
<div className="col-md-6 mb-sm-0 mb-2">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Transaction ID :
|
||||
</label>
|
||||
{data.expensesReimburse.reimburseTransactionId || "N/A"}
|
||||
</div>
|
||||
<div className="col-md-6 ">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Reimburse Date :
|
||||
</label>
|
||||
{formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Expense Type :
|
||||
</label>
|
||||
<div className="text-muted">{data?.expensesType?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{data.expensesReimburse && (
|
||||
<>
|
||||
<div className="col-md-6 d-flex align-items-center">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Reimburse By :
|
||||
{/* Row 2 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Supplier :
|
||||
</label>
|
||||
<div className="text-muted">{data?.supplerName}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Amount :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{" "}
|
||||
{formatFigure(data?.amount, {
|
||||
type: "currency",
|
||||
currency: data?.currency?.currencyCode ?? "INR",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 3 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Payment Mode :
|
||||
</label>
|
||||
<div className="text-muted">{data?.paymentMode?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{data?.gstNumber && (
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
GST Number :
|
||||
</label>
|
||||
<div className="text-muted">{data?.gstNumber}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Pre-Approved :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{data.preApproved ? "Yes" : "No"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Row 5 */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Project :
|
||||
</label>
|
||||
<div className="text-muted">{data?.project?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<div className="d-flex">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold text-start"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Created At :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{formatUTCToLocalTime(data?.createdAt, true)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Created & Paid By */}
|
||||
{data.createdBy && (
|
||||
<div className="col-md-6 text-start mb-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Created By :
|
||||
</label>
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={data.createdBy?.firstName}
|
||||
lastName={data.createdBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data.createdBy?.firstName ?? ""} ${
|
||||
data.createdBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-md-6 text-start mb-3">
|
||||
<div className="d-flex align-items-center">
|
||||
<label
|
||||
className="form-label me-2 mb-0 fw-semibold"
|
||||
style={{ minWidth: "130px" }}
|
||||
>
|
||||
Paid By :
|
||||
</label>
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={data?.expensesReimburse?.reimburseBy?.firstName}
|
||||
lastName={data?.expensesReimburse?.reimburseBy?.lastName}
|
||||
firstName={data.paidBy?.firstName}
|
||||
lastName={data.paidBy?.lastName}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
|
||||
{`${data.paidBy?.firstName ?? ""} ${
|
||||
data.paidBy?.lastName ?? ""
|
||||
}`.trim() || "N/A"}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<hr className="divider my-1 border-2 divider-primary my-2" />
|
||||
</div>
|
||||
|
||||
{Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
|
||||
<>
|
||||
{IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
|
||||
<div className="row">
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<label className="form-label">Transaction Id </label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register("reimburseTransactionId")}
|
||||
/>
|
||||
{errors.reimburseTransactionId && (
|
||||
<small className="danger-text">
|
||||
{errors.reimburseTransactionId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<label className="form-label">Transaction Date </label>
|
||||
<DatePicker
|
||||
name="reimburseDate"
|
||||
control={control}
|
||||
minDate={data?.createdAt}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
{errors.reimburseDate && (
|
||||
<small className="danger-text">
|
||||
{errors.reimburseDate.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<label className="form-label">Reimburse By </label>
|
||||
<EmployeeSearchInput
|
||||
control={control}
|
||||
name="reimburseById"
|
||||
projectId={null}
|
||||
/>
|
||||
{/* Description */}
|
||||
<div className="col-12 text-start mb-2">
|
||||
<label className="fw-semibold form-label">Description : </label>
|
||||
<div className="text-muted">{data?.description}</div>
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
<div className="col-12 text-start mb-2">
|
||||
<label className="form-label me-2 mb-2 fw-semibold">
|
||||
Attachment :
|
||||
</label>
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
{data?.documents?.map((doc) => {
|
||||
const isImage = doc.contentType?.includes("image");
|
||||
return (
|
||||
<div
|
||||
key={doc.documentId}
|
||||
className="d-flex align-items-center cusor-pointer"
|
||||
onClick={() => {
|
||||
if (isImage) {
|
||||
setDocumentView({
|
||||
IsOpen: true,
|
||||
Image: doc.preSignedUrl,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className={`bx ${getIconByFileType(doc.contentType)}`}
|
||||
style={{ fontSize: "30px" }}
|
||||
></i>
|
||||
<small
|
||||
className="text-center text-tiny text-truncate w-100"
|
||||
title={doc.fileName}
|
||||
>
|
||||
{doc.fileName}
|
||||
</small>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-12 mb-3 text-start">
|
||||
{((nextStatusWithPermission.length > 0 && !IsRejectedExpense) ||
|
||||
(IsRejectedExpense && isCreatedBy)) && (
|
||||
<>
|
||||
<Label className="form-label me-2 mb-0" required>Comment</Label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
{...register("comment")}
|
||||
rows="2"
|
||||
/>
|
||||
{errors.comment && (
|
||||
<small className="danger-text">
|
||||
{errors.comment.message}
|
||||
</small>
|
||||
|
||||
{data.expensesReimburse && (
|
||||
<div className="row text-start mt-2">
|
||||
<div className="col-md-6 mb-sm-0 mb-2">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Transaction ID :
|
||||
</label>
|
||||
{data.expensesReimburse.reimburseTransactionId || "N/A"}
|
||||
</div>
|
||||
<div className="col-md-6 ">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Reimburse Date :
|
||||
</label>
|
||||
{formatUTCToLocalTime(data.expensesReimburse.reimburseDate)}
|
||||
</div>
|
||||
|
||||
{data.expensesReimburse && (
|
||||
<>
|
||||
<div className="col-md-6 d-flex align-items-center">
|
||||
<label className="form-label me-2 mb-0 fw-semibold">
|
||||
Reimburse By :
|
||||
</label>
|
||||
<Avatar
|
||||
size="xs"
|
||||
classAvatar="m-0 me-1"
|
||||
firstName={
|
||||
data?.expensesReimburse?.reimburseBy?.firstName
|
||||
}
|
||||
lastName={
|
||||
data?.expensesReimburse?.reimburseBy?.lastName
|
||||
}
|
||||
/>
|
||||
<span className="text-muted">
|
||||
{`${data?.expensesReimburse?.reimburseBy?.firstName} ${data?.expensesReimburse?.reimburseBy?.lastName}`.trim()}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<hr className="divider my-1 border-2 divider-primary my-2" />
|
||||
|
||||
{Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
|
||||
<>
|
||||
{IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
|
||||
<div className="row ">
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<Label className="form-label" required>Transaction Id </Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register("reimburseTransactionId")}
|
||||
/>
|
||||
{errors.reimburseTransactionId && (
|
||||
<small className="danger-text">
|
||||
{errors.reimburseTransactionId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start mb-1">
|
||||
<Label className="form-label" required>Transaction Date </Label>
|
||||
<DatePicker
|
||||
name="reimburseDate"
|
||||
control={control}
|
||||
minDate={data?.transactionDate}
|
||||
maxDate={new Date()}
|
||||
/>
|
||||
{errors.reimburseDate && (
|
||||
<small className="danger-text">
|
||||
{errors.reimburseDate.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start mb-1">
|
||||
<Label className="form-label" required>
|
||||
Reimburse By{" "}
|
||||
</Label>
|
||||
<EmployeeSearchInput
|
||||
control={control}
|
||||
name="reimburseById"
|
||||
projectId={null}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<Label className="form-label" >
|
||||
TDS Percentage
|
||||
</Label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm"
|
||||
{...register("tdsPercentage")}
|
||||
/>
|
||||
{errors.tdsPercentage && (
|
||||
<small className="danger-text">
|
||||
{errors.tdsPercentage.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<Label className="form-label" required>
|
||||
Base Amount
|
||||
</Label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm"
|
||||
{...register("baseAmount")}
|
||||
/>
|
||||
{errors.baseAmount && (
|
||||
<small className="danger-text">
|
||||
{errors.baseAmount.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<Label className="form-label" required>
|
||||
Tax Amount
|
||||
</Label>
|
||||
<input
|
||||
type="number"
|
||||
className="form-control form-control-sm"
|
||||
{...register("taxAmount")}
|
||||
/>
|
||||
{errors.taxAmount && (
|
||||
<small className="danger-text">
|
||||
{errors.taxAmount.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-12 mb-3 text-start mt-1">
|
||||
{((nextStatusWithPermission.length > 0 &&
|
||||
!IsRejectedExpense) ||
|
||||
(IsRejectedExpense && isCreatedBy)) && (
|
||||
<>
|
||||
<Label className="form-label me-2 mb-0" required>
|
||||
Comment
|
||||
</Label>
|
||||
<textarea
|
||||
className="form-control form-control-sm"
|
||||
{...register("comment")}
|
||||
rows="2"
|
||||
/>
|
||||
{errors.comment && (
|
||||
<small className="danger-text">
|
||||
{errors.comment.message}
|
||||
</small>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{nextStatusWithPermission?.length > 0 &&
|
||||
(!IsRejectedExpense || isCreatedBy) && (
|
||||
<div className="text-end flex-wrap gap-2 my-2 mt-3">
|
||||
{nextStatusWithPermission.map((status, index) => (
|
||||
<button
|
||||
key={status.id || index}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setClickedStatusId(status.id);
|
||||
setValue("statusId", status.id);
|
||||
handleSubmit(onSubmit)();
|
||||
}}
|
||||
disabled={isPending || isFetching}
|
||||
className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
|
||||
>
|
||||
{isPending && clickedStatusId === status.id
|
||||
? "Please Wait..."
|
||||
: status.displayName || status.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{nextStatusWithPermission?.length > 0 &&
|
||||
(!IsRejectedExpense || isCreatedBy) && (
|
||||
<div className="text-end flex-wrap gap-2 my-2 mt-3">
|
||||
{nextStatusWithPermission.map((status, index) => (
|
||||
<button
|
||||
key={status.id || index}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setClickedStatusId(status.id);
|
||||
setValue("statusId", status.id);
|
||||
handleSubmit(onSubmit)();
|
||||
}}
|
||||
disabled={isPending || isFetching}
|
||||
className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
|
||||
>
|
||||
{isPending && clickedStatusId === status.id
|
||||
? "Please Wait..."
|
||||
: status.displayName || status.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ExpenseStatusLogs data={data} />
|
||||
<div className="col-12 col-lg-5 col-xl-4">
|
||||
<div className="d-flex align-items-center text-secondary mb-">
|
||||
<i className="bx bx-time-five me-2"></i>{" "}
|
||||
<p className=" m-0">TimeLine</p>
|
||||
</div>
|
||||
<ExpenseStatusLogs data={data} />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
247
src/components/PaymentRequest/MakeExpense.jsx
Normal file
247
src/components/PaymentRequest/MakeExpense.jsx
Normal file
@ -0,0 +1,247 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import React from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import {
|
||||
DefaultRequestedExpense,
|
||||
RequestedExpenseSchema,
|
||||
} from "./PaymentRequestSchema";
|
||||
import Label from "../common/Label";
|
||||
import { usePaymentMode } from "../../hooks/masterHook/useMaster";
|
||||
import { useCreatePaymentRequestExpense, useCreateRecurringExpense } from "../../hooks/useExpense";
|
||||
import Filelist from "../Expenses/Filelist";
|
||||
import { usePaymentRequestContext } from "../../pages/PaymentRequest/PaymentRequestPage";
|
||||
|
||||
const MakeExpense = ({ onClose }) => {
|
||||
const {isExpenseGenerate} = usePaymentRequestContext()
|
||||
const {
|
||||
PaymentModes,
|
||||
loading: PaymentModeLoading,
|
||||
error: PaymentModeError,
|
||||
} = usePaymentMode();
|
||||
|
||||
const {
|
||||
setValue,
|
||||
register,
|
||||
watch,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
resolver: zodResolver(RequestedExpenseSchema),
|
||||
defaultValues: DefaultRequestedExpense,
|
||||
});
|
||||
const files = watch("billAttachments");
|
||||
const onFileChange = async (e) => {
|
||||
const newFiles = Array.from(e.target.files);
|
||||
if (newFiles.length === 0) return;
|
||||
|
||||
const existingFiles = watch("billAttachments") || [];
|
||||
|
||||
const parsedFiles = await Promise.all(
|
||||
newFiles.map(async (file) => {
|
||||
const base64Data = await toBase64(file);
|
||||
return {
|
||||
fileName: file.name,
|
||||
base64Data,
|
||||
contentType: file.type,
|
||||
fileSize: file.size,
|
||||
description: "",
|
||||
isActive: true,
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
const combinedFiles = [
|
||||
...existingFiles,
|
||||
...parsedFiles.filter(
|
||||
(newFile) =>
|
||||
!existingFiles.some(
|
||||
(f) =>
|
||||
f.fileName === newFile.fileName && f.fileSize === newFile.fileSize
|
||||
)
|
||||
),
|
||||
];
|
||||
|
||||
setValue("billAttachments", combinedFiles, {
|
||||
shouldDirty: true,
|
||||
shouldValidate: true,
|
||||
});
|
||||
};
|
||||
|
||||
const toBase64 = (file) =>
|
||||
new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result.split(",")[1]);
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
const removeFile = (index) => {
|
||||
debugger
|
||||
const newFiles = files.filter((_, i) => i !== index);
|
||||
setValue("billAttachments", newFiles, { shouldValidate: true });
|
||||
};
|
||||
|
||||
const { mutate: CreatedExpense, isPending } = useCreatePaymentRequestExpense(
|
||||
() => {
|
||||
handleClose();
|
||||
}
|
||||
);
|
||||
const onSubmit = (formData) => {
|
||||
let payload = {
|
||||
...formData,
|
||||
paymentRequestId:isExpenseGenerate?.requestId
|
||||
}
|
||||
CreatedExpense(payload)
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
};
|
||||
return (
|
||||
<div className="row px-2 py-3">
|
||||
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<h5 className="m-0">
|
||||
Create New Expense
|
||||
</h5>
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-6 mb-2">
|
||||
<Label htmlFor="paymentModeId" className="form-label" required>
|
||||
Payment Mode
|
||||
</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
id="paymentModeId"
|
||||
{...register("paymentModeId")}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Mode
|
||||
</option>
|
||||
{PaymentModeLoading ? (
|
||||
<option disabled>Loading...</option>
|
||||
) : (
|
||||
PaymentModes?.map((payment) => (
|
||||
<option key={payment.id} value={payment.id}>
|
||||
{payment.name}
|
||||
</option>
|
||||
))
|
||||
)}
|
||||
</select>
|
||||
{errors.paymentModeId && (
|
||||
<small className="danger-text">
|
||||
{errors.paymentModeId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-md-6">
|
||||
<label htmlFor="statusId" className="form-label ">
|
||||
GST Number
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="gstNumber"
|
||||
className="form-control form-control-sm"
|
||||
min="1"
|
||||
{...register("gstNumber")}
|
||||
/>
|
||||
{errors.gstNumber && (
|
||||
<small className="danger-text">{errors.gstNumber.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-6 text-start">
|
||||
<Label htmlFor="location" className="form-label" required>
|
||||
Location
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
className="form-control form-control-sm"
|
||||
{...register("location")}
|
||||
/>
|
||||
{errors.location && (
|
||||
<small className="danger-text">{errors.location.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-md-12">
|
||||
<Label className="form-label" required>
|
||||
Upload Bill{" "}
|
||||
</Label>
|
||||
|
||||
<div
|
||||
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => document.getElementById("billAttachments").click()}
|
||||
>
|
||||
<i className="bx bx-cloud-upload d-block bx-lg"> </i>
|
||||
<span className="text-muted d-block">
|
||||
Click to select or click here to browse
|
||||
</span>
|
||||
<small className="text-muted">(PDF, JPG, PNG, max 5MB)</small>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
id="billAttachments"
|
||||
accept=".pdf,.jpg,.jpeg,.png"
|
||||
multiple
|
||||
style={{ display: "none" }}
|
||||
{...register("billAttachments")}
|
||||
onChange={(e) => {
|
||||
onFileChange(e);
|
||||
e.target.value = "";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{errors.billAttachments && (
|
||||
<small className="danger-text">
|
||||
{errors.billAttachments.message}
|
||||
</small>
|
||||
)}
|
||||
{files.length > 0 && (
|
||||
<Filelist
|
||||
files={files}
|
||||
removeFile={removeFile}
|
||||
expenseToEdit={false}
|
||||
/>
|
||||
)}
|
||||
|
||||
{Array.isArray(errors.billAttachments) &&
|
||||
errors.billAttachments.map((fileError, index) => (
|
||||
<div key={index} className="danger-text small mt-1">
|
||||
{
|
||||
(fileError?.fileSize?.message ||
|
||||
fileError?.contentType?.message ||
|
||||
fileError?.base64Data?.message,
|
||||
fileError?.documentId?.message)
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex justify-content-end gap-3">
|
||||
{" "}
|
||||
<button
|
||||
type="reset"
|
||||
disabled={isPending}
|
||||
onClick={handleClose}
|
||||
className="btn btn-label-secondary btn-sm mt-3"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-sm mt-3"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending ? "Please Wait..." : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MakeExpense;
|
||||
File diff suppressed because it is too large
Load Diff
@ -278,7 +278,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
|
||||
)
|
||||
)}
|
||||
<td className="sticky-action-column bg-white">
|
||||
<div className="d-flex justify-content-center gap-2">
|
||||
<div className="d-flex flex-row gap-2">
|
||||
<i
|
||||
className="bx bx-show text-primary cursor-pointer"
|
||||
onClick={() =>
|
||||
|
||||
@ -7,29 +7,27 @@ const ALLOWED_TYPES = [
|
||||
"image/jpg",
|
||||
"image/jpeg",
|
||||
];
|
||||
export const PaymentRequestSchema = (expenseTypes,isItself) => {
|
||||
return z
|
||||
.object({
|
||||
title: z.string().min(1, { message: "Project is required" }),
|
||||
projectId: z.string().min(1, { message: "Project is required" }),
|
||||
expenseCategoryId: z
|
||||
.string()
|
||||
.min(1, { message: "Expense Category is required" }),
|
||||
currencyId: z
|
||||
.string()
|
||||
.min(1, { message: "Currency is required" }),
|
||||
dueDate: z.string().min(1, { message: "Date is required" }),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
payee: z.string().min(1, { message: "Supplier name is required" }),
|
||||
isAdvancePayment: z.boolean().optional(),
|
||||
amount: z.coerce
|
||||
.number({
|
||||
invalid_type_error: "Amount is required and must be a number",
|
||||
})
|
||||
.min(1, "Amount must be Enter")
|
||||
.refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
|
||||
message: "Amount must have at most 2 decimal places",
|
||||
}),
|
||||
export const PaymentRequestSchema = (expenseTypes, isItself) => {
|
||||
return z.object({
|
||||
title: z.string().min(1, { message: "Project is required" }),
|
||||
projectId: z.string().min(1, { message: "Project is required" }),
|
||||
expenseCategoryId: z
|
||||
.string()
|
||||
.min(1, { message: "Expense Category is required" }),
|
||||
currencyId: z.string().min(1, { message: "Currency is required" }),
|
||||
dueDate: z.string().min(1, { message: "Date is required" }),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
payee: z.string().min(1, { message: "Supplier name is required" }),
|
||||
isAdvancePayment: z.boolean().optional().default(false),
|
||||
amount: z.coerce
|
||||
.number({
|
||||
invalid_type_error: "Amount is required and must be a number",
|
||||
})
|
||||
.min(1, "Amount must be Enter")
|
||||
.refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
|
||||
message: "Amount must have at most 2 decimal places",
|
||||
}),
|
||||
|
||||
billAttachments: z
|
||||
.array(
|
||||
z.object({
|
||||
@ -64,7 +62,7 @@ export const defaultPaymentRequest = {
|
||||
dueDate: "",
|
||||
projectId: "",
|
||||
expenseCategoryId: "",
|
||||
isAdvancePayment:boolean,
|
||||
isAdvancePayment: false,
|
||||
billAttachments: [],
|
||||
};
|
||||
|
||||
@ -103,7 +101,9 @@ export const PaymentRequestActionScheam = (
|
||||
paymentRequestId: z.string().nullable().optional(),
|
||||
paidAt: z.string().nullable().optional(),
|
||||
paidById: z.string().nullable().optional(),
|
||||
|
||||
tdsPercentage: z.string().nullable().optional(),
|
||||
baseAmount: z.string().nullable().optional(),
|
||||
taxAmount: z.string().nullable().optional(),
|
||||
})
|
||||
.superRefine((data, ctx) => {
|
||||
if (isTransaction) {
|
||||
@ -121,15 +121,6 @@ export const PaymentRequestActionScheam = (
|
||||
message: "Transacion Date is required",
|
||||
});
|
||||
}
|
||||
// let reimburse_Date = localToUtc(data.reimburseDate);
|
||||
// if (transactionDate > reimburse_Date) {
|
||||
// ctx.addIssue({
|
||||
// code: z.ZodIssueCode.custom,
|
||||
// path: ["reimburseDate"],
|
||||
// message:
|
||||
// "Reimburse Date must be greater than or equal to Expense created Date",
|
||||
// });
|
||||
// }
|
||||
if (!data.paidById) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
@ -137,6 +128,20 @@ export const PaymentRequestActionScheam = (
|
||||
message: "Paid By is required",
|
||||
});
|
||||
}
|
||||
if (!data.baseAmount) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ["baseAmount"],
|
||||
message: "Base Amount i required",
|
||||
});
|
||||
}
|
||||
if (!data.taxAmount) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
path: ["taxAmount"],
|
||||
message: "Tax is required",
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -144,8 +149,41 @@ export const PaymentRequestActionScheam = (
|
||||
export const defaultActionValues = {
|
||||
comment: "",
|
||||
statusId: "",
|
||||
|
||||
paidTransactionId: null,
|
||||
paidAt: null,
|
||||
paidById: null,
|
||||
};
|
||||
tdsPercentage:"0",
|
||||
baseAmount: null,
|
||||
taxAmount:null,
|
||||
};
|
||||
|
||||
export const RequestedExpenseSchema = z.object({
|
||||
paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
|
||||
location: z.string().min(1, { message: "Location is required" }),
|
||||
gstNumber: z.string().optional(),
|
||||
billAttachments: z
|
||||
.array(
|
||||
z.object({
|
||||
fileName: z.string().min(1, { message: "Filename is required" }),
|
||||
base64Data: z.string().nullable(),
|
||||
contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
|
||||
message: "Only PDF, PNG, JPG, or JPEG files are allowed",
|
||||
}),
|
||||
documentId: z.string().optional(),
|
||||
fileSize: z.number().max(MAX_FILE_SIZE, {
|
||||
message: "File size must be less than or equal to 5MB",
|
||||
}),
|
||||
description: z.string().optional(),
|
||||
isActive: z.boolean().default(true),
|
||||
})
|
||||
)
|
||||
.nonempty({ message: "At least one file attachment is required" }),
|
||||
});
|
||||
|
||||
export const DefaultRequestedExpense = {
|
||||
paymentModeId: "",
|
||||
location: "",
|
||||
gstNumber: "",
|
||||
// amount:"",
|
||||
billAttachments: [],
|
||||
};
|
||||
|
||||
@ -42,7 +42,8 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
|
||||
const IsReview = useHasUserPermission(REVIEW_EXPENSE);
|
||||
const [imageLoaded, setImageLoaded] = useState({});
|
||||
const { setDocumentView } = usePaymentRequestContext();
|
||||
const { setDocumentView, setModalSize, setVieRequest, setIsExpenseGenerate } =
|
||||
usePaymentRequestContext();
|
||||
const ActionSchema =
|
||||
ExpenseActionScheam(IsPaymentProcess, data?.createdAt) ?? z.object({});
|
||||
const navigate = useNavigate();
|
||||
@ -109,10 +110,16 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
const handleImageLoad = (id) => {
|
||||
setImageLoaded((prev) => ({ ...prev, [id]: true }));
|
||||
};
|
||||
|
||||
const handleExpense = () => {
|
||||
setIsExpenseGenerate({ IsOpen: true, requestId: requestId });
|
||||
setVieRequest({ IsOpen: true, requestId: requestId });
|
||||
};
|
||||
return (
|
||||
<form className="container px-3" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="col-12 mb-1">
|
||||
<form
|
||||
className="container px-3 py-2 py-md-0"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<div className="col-12 mb-2 text-center ">
|
||||
<h5 className="fw-semibold m-0">Payment Request Details</h5>
|
||||
<hr />
|
||||
</div>
|
||||
@ -180,7 +187,10 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
Amount :
|
||||
</label>
|
||||
<div className="text-muted">
|
||||
{formatCurrency(data?.amount, data?.currency?.currencyCode)}
|
||||
{formatFigure(data?.amount, {
|
||||
type: "currency",
|
||||
currency: data?.currency?.currencyCode,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -331,42 +341,13 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
</label>
|
||||
|
||||
<div className="d-flex flex-wrap gap-2">
|
||||
{data?.documents?.length > 0 ? (
|
||||
data?.documents?.map((doc) => {
|
||||
const isImage = doc?.contentType?.includes("image");
|
||||
|
||||
return (
|
||||
<div
|
||||
key={doc.documentId}
|
||||
className="border rounded hover-scale p-2 d-flex flex-column align-items-center"
|
||||
style={{
|
||||
width: "80px",
|
||||
cursor: isImage ? "pointer" : "default",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (isImage) {
|
||||
setDocumentView({
|
||||
IsOpen: true,
|
||||
Image: doc.preSignedUrl,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className={`bx ${getIconByFileType(doc.contentType)}`}
|
||||
style={{ fontSize: "30px" }}
|
||||
></i>
|
||||
<small
|
||||
className="text-center text-tiny text-truncate w-100"
|
||||
title={doc.fileName}
|
||||
>
|
||||
{doc.fileName}
|
||||
</small>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
{data?.attachments?.length > 0 ? (
|
||||
<FilelistView
|
||||
files={data?.attachments}
|
||||
viewFile={setDocumentView}
|
||||
/>
|
||||
) : (
|
||||
<p className="m-0">No Attachment</p>
|
||||
<p className="m-0 text-secondary">No Attachment</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -407,7 +388,7 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{Array.isArray(data?.nextStatus) && data?.nextStatus.length > 0 && (
|
||||
{Array.isArray(data?.nextStatus) && data?.nextStatus.length > 0 ? (
|
||||
<>
|
||||
{IsPaymentProcess && nextStatusWithPermission?.length > 0 && (
|
||||
<div className="row">
|
||||
@ -424,7 +405,7 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<div className="col-12 col-md-6 text-start mb-1">
|
||||
<label className="form-label">Transaction Date </label>
|
||||
<DatePicker
|
||||
name="paidAt"
|
||||
@ -446,6 +427,49 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
projectId={null}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start mb-1">
|
||||
<Label className="form-label">TDS Percentage</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register("tdsPercentage")}
|
||||
/>
|
||||
{errors.tdsPercentage && (
|
||||
<small className="danger-text">
|
||||
{errors.tdsPercentage.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start mb-1">
|
||||
<Label className="form-label" required>
|
||||
Base Amount
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register("baseAmount")}
|
||||
/>
|
||||
{errors.baseAmount && (
|
||||
<small className="danger-text">
|
||||
{errors.baseAmount.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start mb-1">
|
||||
<Label className="form-label" required>
|
||||
Tax Amount
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
{...register("taxAmount")}
|
||||
/>
|
||||
{errors.taxAmount && (
|
||||
<small className="danger-text">
|
||||
{errors.taxAmount.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-12 mb-3 text-start">
|
||||
@ -493,11 +517,26 @@ const ViewPaymentRequest = ({ requestId }) => {
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : !data?.isExpenseCreated ? (
|
||||
<div className="text-end flex-wrap gap-2 my-2 mt-3">
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={handleExpense}
|
||||
>
|
||||
Make Expense
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 col-sm-6 col-md-4">
|
||||
<ExpenseStatusLogs data={data} />
|
||||
<div className=" col-sm-12 my-md-0 border-top border-md-none col-md-5">
|
||||
<div className="d-flex mb-2 py-1">
|
||||
<i className="bx bx-time-five me-2 "></i>{" "}
|
||||
<p className="fw-medium">TimeLine</p>
|
||||
</div>
|
||||
<PaymentStatusLogs data={data} />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -52,7 +52,7 @@ const Avatar = ({ firstName, lastName, size = "sm", classAvatar }) => {
|
||||
return (
|
||||
<div className="avatar-wrapper p-1">
|
||||
<div className={`avatar avatar-${size} me-2 ${classAvatar}`}>
|
||||
<span className={`avatar-initial rounded-circle ${bgClass}`}>
|
||||
<span className={`avatar-initial rounded-circle text-white ${bgClass}`}>
|
||||
{generateAvatarText(firstName, lastName)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -112,7 +112,7 @@ const EmployeeSearchInput = ({
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{error && <small className="text-danger">{error.message}</small>}
|
||||
{error && <small className="danger-text">{error.message}</small>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -26,7 +26,7 @@ export const SpinnerLoader = ()=>{
|
||||
<div className="spinner-border text-primary mb-3" role="status">
|
||||
<span className="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p className="text-secondary mb-0">Loading attendance data...</p>
|
||||
<p className="text-secondary mb-0">Loading data... Please wait</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -358,8 +358,51 @@ export const useActionOnPaymentRequest = (onSuccessCallBack) => {
|
||||
},
|
||||
});
|
||||
};
|
||||
//#endregion
|
||||
export const useDeletePaymentRequest = ()=>{
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
|
||||
return response.data;
|
||||
},
|
||||
onSuccess: (updatedExpense, variables) => {
|
||||
showToast("Request processed successfully.", "success");
|
||||
|
||||
queryClient.invalidateQueries({queryKey:["paymentRequestList"]})
|
||||
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error.response.data.message ||
|
||||
"Something went wrong.Please try again later.",
|
||||
"error"
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
export const useCreatePaymentRequestExpense = (onSuccessCallBack) => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async (payload) => {
|
||||
await ExpenseRepository.CreatePaymentRequestExpense(payload);
|
||||
},
|
||||
|
||||
onSuccess: (_, variables) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["Expenses"] });
|
||||
queryClient.invalidateQueries({queryKey:["paymentRequest",variables.paymentRequestId]})
|
||||
showToast("Expense Created Successfully", "success");
|
||||
if (onSuccessCallBack) onSuccessCallBack();
|
||||
},
|
||||
onError: (error) => {
|
||||
showToast(
|
||||
error.message || "Something went wrong please try again !",
|
||||
"error"
|
||||
);
|
||||
},
|
||||
});
|
||||
};
|
||||
export const usePaymentRequestFilter = () => {
|
||||
return useQuery({
|
||||
queryKey: ["PaymentRequestFilter"],
|
||||
@ -371,13 +414,15 @@ export const usePaymentRequestFilter = () => {
|
||||
|
||||
});
|
||||
};
|
||||
//#endregion
|
||||
|
||||
|
||||
|
||||
//#region Advance Payment
|
||||
export const useExpenseTransactions = (employeeId)=>{
|
||||
return useQuery({
|
||||
queryKey:["transaction",employeeId],
|
||||
queryFn:async()=> {
|
||||
debugger
|
||||
const resp = await ExpenseRepository.GetTranctionList(employeeId);
|
||||
return resp.data
|
||||
},
|
||||
|
||||
@ -23,16 +23,16 @@ const AdvancePaymentPage = () => {
|
||||
{ label: "Advance Payment" },
|
||||
]}
|
||||
/>
|
||||
<div className="card px-2 py-2 page-min-h">
|
||||
<div className="card px-4 py-2 page-min-h ">
|
||||
<div className="row">
|
||||
<div className="col-12 ">
|
||||
<div className="d-block w-max w-25 text-start" >
|
||||
<Label>Search Employee</Label>
|
||||
<div className="col-12 col-md-4">
|
||||
<div className="d-block text-start" >
|
||||
<EmployeeSearchInput
|
||||
control={control}
|
||||
name="employeeId"
|
||||
projectId={null}
|
||||
forAll={true}
|
||||
placeholder={"Enter Employee Name"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,6 +8,8 @@ import PaymentRequestList from "../../components/PaymentRequest/PaymentRequestLi
|
||||
import PaymentRequestFilterPanel from "../../components/PaymentRequest/PaymentRequestFilterPanel";
|
||||
import { defaultPaymentRequestFilter,SearchPaymentRequestSchema } from "../../components/PaymentRequest/PaymentRequestSchema";
|
||||
import ViewPaymentRequest from "../../components/PaymentRequest/ViewPaymentRequest";
|
||||
import PreviewDocument from "../../components/Expenses/PreviewDocument";
|
||||
import MakeExpense from "../../components/PaymentRequest/MakeExpense";
|
||||
|
||||
export const PaymentRequestContext = createContext();
|
||||
export const usePaymentRequestContext = () => {
|
||||
@ -25,12 +27,22 @@ const PaymentRequestPage = () => {
|
||||
const [ViewRequest,setVieRequest] = useState({view:false,requestId:null})
|
||||
const { setOffcanvasContent, setShowTrigger } = useFab();
|
||||
const [filters, setFilters] = useState(defaultPaymentRequestFilter);
|
||||
|
||||
const [ViewDocument, setDocumentView] = useState({
|
||||
IsOpen: false,
|
||||
Image: null,
|
||||
});
|
||||
const [isExpenseGenerate,setIsExpenseGenerate] = useState({IsOpen: null,
|
||||
RequestId: null,})
|
||||
const [modalSize,setModalSize] = useState("md")
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const contextValue = {
|
||||
setManageRequest,
|
||||
setVieRequest
|
||||
setVieRequest,
|
||||
setDocumentView,
|
||||
setModalSize,
|
||||
setIsExpenseGenerate,
|
||||
isExpenseGenerate
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -124,7 +136,27 @@ const PaymentRequestPage = () => {
|
||||
modalType="top"
|
||||
closeModal={() => setVieRequest({ requestId: null, view: false })}
|
||||
>
|
||||
<ViewPaymentRequest requestId={ViewRequest?.requestId}/>
|
||||
<ViewPaymentRequest requestId={ViewRequest?.requestId} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
{isExpenseGenerate.IsOpen && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="md"
|
||||
closeModal={() => setIsExpenseGenerate({IsOpen:false, requestId: null})}
|
||||
>
|
||||
<MakeExpense onClose={() => setIsExpenseGenerate({IsOpen:false, requestId: null})} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
{ViewDocument.IsOpen && (
|
||||
<GlobalModel
|
||||
isOpen
|
||||
size="md"
|
||||
key={ViewDocument.Image ?? "doc"}
|
||||
closeModal={() => setDocumentView({ IsOpen: false, Image: null })}
|
||||
>
|
||||
<PreviewDocument imageUrl={ViewDocument.Image} />
|
||||
</GlobalModel>
|
||||
)}
|
||||
|
||||
|
||||
@ -21,11 +21,17 @@ const ExpenseRepository = {
|
||||
const payloadJsonString = JSON.stringify(filter);
|
||||
return api.get(`/api/Expense/get/payment-requests/list?isActive=${isActive}&pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
|
||||
},
|
||||
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'),
|
||||
ActionOnPaymentRequest: (data) => api.post('/api/Expense/payment-request/action', data),
|
||||
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"),
|
||||
ActionOnPaymentRequest: (data) =>
|
||||
api.post("/api/Expense/payment-request/action", data),
|
||||
DeletePaymentRequest:()=>api.get("delete here come"),
|
||||
CreatePaymentRequestExpense:(data)=>api.post('/api/Expense/payment-request/expense/create',data),
|
||||
//#endregion
|
||||
|
||||
//#region Recurring Expense
|
||||
@ -34,11 +40,11 @@ const ExpenseRepository = {
|
||||
UpdateRecurringExpense: (id, data) => api.put(`/api/Expense/recurring-payment/edit/${id}`, data),
|
||||
GetRecurringExpense: (id) => api.get(`/api/Expense/get/recurring-payment/details/${id}`),
|
||||
//#endregion
|
||||
|
||||
|
||||
|
||||
//#region Advance Payment
|
||||
GetTranctionList: () => api.get(`/get/transactions/${employeeId}`)
|
||||
GetTranctionList: (employeeId)=>api.get(`/api/Expense/get/transactions/${employeeId}`),
|
||||
//#endregion
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
export default ExpenseRepository;
|
||||
|
||||
@ -157,6 +157,7 @@ export const PROJECT_STATUS = [
|
||||
},
|
||||
];
|
||||
|
||||
export const DEFAULT_CURRENCY = "78e96e4a-7ce0-4164-ae3a-c833ad45ec2c";
|
||||
|
||||
export const EXPENSE_STATUS = {
|
||||
daft: "297e0d8f-f668-41b5-bfea-e03b354251c8",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user