Merge branch 'upgrade_Expense' of https://git.marcoaiot.com/admin/marco.pms.web into Issues_Expense

This commit is contained in:
Kartik Sharma 2025-11-06 17:22:27 +05:30
commit 0729723d5e
12 changed files with 221 additions and 138 deletions

View File

@ -1,13 +1,53 @@
import React from "react";
import React, { useEffect, useMemo } from "react";
import { useExpenseTransactions } from "../../hooks/useExpense";
import Error from "../common/Error";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Loader, { SpinnerLoader } from "../common/Loader";
import { useForm, useFormContext } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { employee } from "../../data/masters";
import { useAdvancePaymentContext } from "../../pages/AdvancePayment/AdvancePaymentPage";
import { formatFigure } from "../../utils/appUtils";
const AdvancePaymentList = ({ employeeId }) => {
const { setBalance } = useAdvancePaymentContext();
const { data, isError, isLoading, error, isFetching } =
useExpenseTransactions(employeeId, { enabled: !!employeeId });
// Handle no employee selected
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,
financeUId: r.financeUId,
balance: currentBalance,
};
});
useEffect(() => {
if (!employeeId) {
setBalance(null);
return;
}
if (rowsWithBalance.length > 0) {
setBalance(rowsWithBalance[rowsWithBalance.length - 1].balance);
} else {
setBalance(0);
}
}, [employeeId, data, setBalance]);
if (!employeeId) {
return (
<div
@ -19,7 +59,6 @@ const AdvancePaymentList = ({ employeeId }) => {
);
}
// Handle loading state
if (isLoading || isFetching) {
return (
<div
@ -31,41 +70,27 @@ const AdvancePaymentList = ({ employeeId }) => {
);
}
// Handle error state
if (isError) {
return (
<div className="text-center py-3">
{error?.status === 404 ? (
"No advance payment transactions found."
) : (
<Error error={error} />
)}
<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 = [
{
key: "date",
label: (
<>
Date
</>
),
align: "text-start",
},
{ key: "description", label: "Description", align: "text-start" },
{
key: "credit",
label: (
@ -84,6 +109,7 @@ const AdvancePaymentList = ({ employeeId }) => {
),
align: "text-end",
},
{
key: "balance",
label: (
@ -103,6 +129,17 @@ const AdvancePaymentList = ({ employeeId }) => {
</div>
);
}
const DecideCreditOrDebit = ({ financeUId }) => {
if (!financeUId) return null;
const prefix = financeUId?.substring(0, 2).toUpperCase();
if (prefix === "PR") return <span className="text-success">+</span>;
if (prefix === "EX") return <span className="text-danger">-</span>;
return null;
};
return (
<div className="table-responsive">
<table className="table align-middle">
@ -129,17 +166,25 @@ const AdvancePaymentList = ({ employeeId }) => {
)
) : col.key === "debit" ? (
row.amount < 0 ? (
<span>{Math.abs(row.amount).toLocaleString("en-IN")}</span>
<span>
{Math.abs(row.amount).toLocaleString("en-IN")}
</span>
) : (
"-"
)
) : col.key === "balance" ? (
<span>{row.currentBalance?.toLocaleString("en-IN")}</span>
<div className="d-flex align-items-center justify-content-end">
<DecideCreditOrDebit financeUId={row?.financeUId} />
<span className="mx-2">
{formatFigure(row.currentBalance)}
</span>
</div>
) : col.key === "date" ? (
<small className="text-muted px-1">
{formatUTCToLocalTime(row.paidAt)}
</small>
) : (
<div className="d-flex flex-column text-start">
<small className="text-muted">
{formatUTCToLocalTime(row.paidAt)}
</small>
<div className="d-flex flex-column text-start gap-1 py-1">
<small className="fw-semibold text-dark">
{row.project?.name || "-"}
</small>
@ -152,21 +197,31 @@ const AdvancePaymentList = ({ employeeId }) => {
))
) : (
<tr>
<td colSpan={columns.length} className="text-center text-muted py-3">
<td
colSpan={columns.length}
className="text-center text-muted py-3"
>
No advance payment records found.
</td>
</tr>
)}
</tbody>
<tfoot className="table-secondary fw-bold">
<tr>
<td className="text-start p-3">Final Balance</td>
<td className="text-end" colSpan="3">
{currentBalance.toLocaleString("en-IN", {
style: "currency",
currency: "INR",
})}
<tfoot className=" fw-bold">
<tr className="tr-group text-dark py-2">
<td className="text-start">
{" "}
<div className="d-flex align-items-center px-1 py-2">
Final Balance
</div>
</td>
<td className="text-end" colSpan="4">
<div className="d-flex align-items-center justify-content-end px-1 py-2">
{currentBalance.toLocaleString("en-IN", {
style: "currency",
currency: "INR",
})}
</div>
</td>
</tr>
</tfoot>

View File

@ -267,7 +267,7 @@ const ExpenseList = ({ filters, groupBy = "transactionDate", searchText }) => {
Object.values(grouped).map(({ key, displayField, items }) => (
<React.Fragment key={key}>
<tr className="tr-group text-dark">
<td colSpan={8} className="text-start ">
<td colSpan={8} className="text-start">
<div className="d-flex align-items-center px-2">
{" "}
<small className="fs-6 py-1">

View File

@ -117,7 +117,7 @@ const ViewExpense = ({ ExpenseId }) => {
</div>
<div className="row mb-1 ">
<div className="col-12 col-lg-7 col-xl-8 mb-3">
<div className="col-12 col-lg-7 col-xl-7 mb-3">
<div className="row">
<div className="col-12 d-flex justify-content-between text-start fw-semibold my-2">
<span>{data?.expenseUId}</span>
@ -525,7 +525,7 @@ const ViewExpense = ({ ExpenseId }) => {
</div>
</div>
<div className="col-12 col-lg-5 col-xl-4">
<div className="col-12 col-lg-5 col-xl-5">
<div className="d-flex align-items-center text-secondary mb-4">
<i className="bx bx-time-five me-2"></i>{" "}
<p className=" m-0">TimeLine</p>

View File

@ -27,31 +27,27 @@ export const PaymentRequestSchema = (expenseTypes, isItself) => {
.refine((val) => /^\d+(\.\d{1,2})?$/.test(val.toString()), {
message: "Amount must have at most 2 decimal places",
}),
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),
})
)
,
})
};
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),
})
),
});
};
export const defaultPaymentRequest = {
title:"",
title: "",
description: "",
payee: "",
currencyId: "",
@ -63,7 +59,6 @@ export const defaultPaymentRequest = {
billAttachments: [],
};
export const SearchPaymentRequestSchema = z.object({
projectIds: z.array(z.string()).optional(),
statusIds: z.array(z.string()).optional(),
@ -86,7 +81,6 @@ export const defaultPaymentRequestFilter = {
endDate: null,
};
export const PaymentRequestActionScheam = (
isTransaction = false,
transactionDate
@ -149,9 +143,9 @@ export const defaultPRActionValues = {
paidTransactionId: null,
paidAt: null,
paidById: null,
tdsPercentage:"0",
tdsPercentage: "0",
baseAmount: null,
taxAmount:null,
taxAmount: null,
};
export const RequestedExpenseSchema = z.object({

View File

@ -5,7 +5,6 @@ import Timeline from "../common/TimeLine";
import moment from "moment";
import { getColorNameFromHex } from "../../utils/appUtils";
const PaymentStatusLogs = ({ data }) => {
const [visibleCount, setVisibleCount] = useState(4);
const sortedLogs = useMemo(() => {
if (!data?.updateLogs) return [];
@ -14,18 +13,16 @@ const PaymentStatusLogs = ({ data }) => {
);
}, [data?.updateLogs]);
const logsToShow = useMemo(
() => sortedLogs.slice(0, visibleCount),
[sortedLogs, visibleCount]
);
const timelineData = useMemo(() => {
return logsToShow.map((log, index) => ({
id: index + 1,
return sortedLogs.map((log, index) => ({
id: log.id,
title: log.nextStatus?.name || "Status Updated",
description: log.nextStatus?.description || "",
timeAgo: log.updatedAt,
color: getColorNameFromHex(log.nextStatus?.color) || "primary",
userComment:log.comment,
users: log.updatedBy
? [
{
@ -37,14 +34,13 @@ const PaymentStatusLogs = ({ data }) => {
]
: [],
}));
}, [logsToShow]);
}, [sortedLogs]);
const handleShowMore = () => {
setVisibleCount((prev) => prev + 4);
};
return (
<div className="page-min-h overflow-auto">
<div className="page-min-h overflow-auto h-56" >
{/* <div className="row g-2">
{logsToShow.map((log) => (
<div key={log.id} className="col-12 d-flex align-items-start mb-1">

View File

@ -403,26 +403,6 @@ function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
</div>
</div>
{/* Notify */}
{/* <div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="notifyTo" className="form-label" required>
Notify Employees
</Label>
<input
type="text"
id="notifyTo"
className="form-control form-control-sm"
{...register("notifyTo")}
/>
{errors.notifyTo && (
<small className="danger-text">
{errors.notifyTo.message}
</small>
)}
</div>
</div> */}
<div className="row my-2 text-start">
<div className="col-md-6">

View File

@ -32,6 +32,7 @@ const EmployeeSearchInput = ({
const found = employees.data.find((emp) => emp.id === value);
if (found && forAll) {
setSearch(`${found.firstName} ${found.lastName}`);
sessionStorage.setItem("transaction-empId",found?.id)
}
}
}, [value, employees?.data, forAll]);

View File

@ -53,7 +53,7 @@ const MultiEmployeeSearchInput = ({
}, [value, employees?.data, forAll]);
const handleSelect = (employee) => {
if (!selectedEmployees.find((emp) => emp.email === employee.email)) {
if (!selectedEmployees.find((emp) => emp.id === employee.id)) {
const newSelected = [...selectedEmployees, employee];
setSelectedEmployees(newSelected);
// Store emails instead of IDs
@ -150,11 +150,11 @@ const MultiEmployeeSearchInput = ({
) : (
employees?.data
?.filter(
(emp) => !selectedEmployees.find((e) => e.email === emp.email)
(emp) => !selectedEmployees.find((e) => e.id === emp.id)
)
.map((emp) => (
<li
key={emp.email}
key={emp.id}
className="list-group-item list-group-item-action py-1 px-2"
style={{ cursor: "pointer" }}
onClick={() => handleSelect(emp)}

View File

@ -5,6 +5,13 @@ import { formatUTCToLocalTime } from "../../utils/dateUtils";
import moment from "moment";
const Timeline = ({ items = [], transparent = true }) => {
if(items.length === 0){
return (
<div className="d-flex justify-content-center align-item-center page-min-h">
<p>Not Action yet</p>
</div>
)
}
return (
<ul
className={`timeline ${
@ -25,12 +32,12 @@ const Timeline = ({ items = [], transparent = true }) => {
></span>
<div className="timeline-event">
<div className="timeline-header mb-3 d-flex justify-content-between">
<div className="timeline-header mb-1 d-flex justify-content-between">
<h6 className="mb-0 text-body">{item.title}</h6>
<small className="text-body-secondary"><Tooltip text={formatUTCToLocalTime(item.timeAgo,true)}>{moment.utc(item.timeAgo).local().fromNow()}</Tooltip></small>
</div>
{item.description && <p className="mb-2">{item.description}</p>}
{item.description && <p className="mb-1">{item.description}</p>}
{item.attachments && item.attachments.length > 0 && (
<div className="d-flex align-items-center mb-2">
@ -54,7 +61,7 @@ const Timeline = ({ items = [], transparent = true }) => {
)}
{item.users && item.users.length > 0 && (
<div className="d-flex flex-wrap align-items-center mb-2">
<div className="d-flex flex-wrap align-items-center ">
<ul className="list-unstyled users-list d-flex align-items-center avatar-group m-0">
{item.users.map((user, i) => (
<li key={i} className="avatar me-1" title={user.name}>
@ -82,8 +89,11 @@ const Timeline = ({ items = [], transparent = true }) => {
<small>{item.users[0].role}</small>
</div>
)}
</div>
)}
<div className="d-flex flex-wrap ms-10">{item.userComment && <p className="mb-2 ">{item.userComment}</p>}</div>
</div>
</li>
))}

View File

@ -434,7 +434,8 @@ export const useExpenseTransactions = (employeeId)=>{
const resp = await ExpenseRepository.GetTranctionList(employeeId);
return resp.data
},
enabled:!!employeeId
enabled:!!employeeId,
keepPreviousData:true,
})
}
//#endregion

View File

@ -1,45 +1,91 @@
import React from "react";
import React, {
createContext,
useContext,
useEffect,
useMemo,
useState,
} from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import { useEmployee } from "../../hooks/useEmployees";
import EmployeeSearchInput from "../../components/common/EmployeeSearchInput";
import { useForm } from "react-hook-form";
import Label from "../../components/common/Label";
import AdvancePaymentList from "../../components/AdvancePayment/AdvancePaymentList";
import { employee } from "../../data/masters";
import { formatFigure } from "../../utils/appUtils";
export const AdvancePaymentContext = createContext();
export const useAdvancePaymentContext = () => {
const context = useContext(AdvancePaymentContext);
if (!context) {
throw new Error(
"useAdvancePaymentContext must be used within an AdvancePaymentProvider"
);
}
return context;
};
const AdvancePaymentPage = () => {
const { control, watch } = useForm({
const [balance, setBalance] = useState(null);
const { control, reset, watch } = useForm({
defaultValues: {
employeeId: "",
},
});
const selectedEmployeeId = watch("employeeId");
useEffect(() => {
const selectedEmpoyee = sessionStorage.getItem("transaction-empId");
reset({
employeeId: selectedEmpoyee || "",
});
}, [reset]);
return (
<div className="container-fluid">
<Breadcrumb
data={[
{ label: "Home", link: "/" },
{ label: "Finance", link: "/advance-payment" },
{ label: "Advance Payment" },
]}
/>
<div className="card px-4 py-2 page-min-h ">
<div className="row">
<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>
<AdvancePaymentContext.Provider value={{ setBalance }}>
<div className="container-fluid">
<Breadcrumb
data={[
{ label: "Home", link: "/" },
{ label: "Finance", link: "/advance-payment" },
{ label: "Advance Payment" },
]}
/>
<div className="card px-4 py-2 page-min-h ">
<div className="row py-1">
<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>
<div className="col-md-8 d-flex align-items-center justify-content-end">
{balance ? (
<>
<label className="fs-5 fw-semibold">Total Balance : </label>
<span
className={`${
balance > 0 ? "text-success" : "text-danger"
} fs-5 fw-bold ms-1`}
>
{formatFigure(balance, {
type: "currency",
currency: "INR",
})}
</span>
</>
) : (
<></>
)}
</div>
</div>
<AdvancePaymentList employeeId={selectedEmployeeId} />
</div>
<AdvancePaymentList employeeId={selectedEmployeeId}/>
</div>
</div>
</AdvancePaymentContext.Provider>
);
};

View File

@ -64,7 +64,7 @@ export const APPROVE_EXPENSE = "eaafdd76-8aac-45f9-a530-315589c6deca";
export const PROCESS_EXPENSE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11";
export const EXPENSE_MANAGE = "ea5a1529-4ee8-4828-80ea-0e23c9d4dd11";
export const EXPENSE_MANAGE = "bdee29a2-b73b-402d-8dd1-c4b1f81ccbc3";
export const EXPENSE_REJECTEDBY = [
"965eda62-7907-4963-b4a1-657fb0b2724b",