recover , misssing code during resloving merged

This commit is contained in:
pramod.mahajan 2025-11-06 00:21:57 +05:30
parent 1ca1f15422
commit 33256981da
8 changed files with 700 additions and 645 deletions

View File

@ -6,6 +6,7 @@ import {
} from "../../hooks/useExpense";
import {
formatCurrency,
formatFigure,
getColorNameFromHex,
getIconByFileType,
localToUtc,
@ -536,7 +537,7 @@ const ViewPaymentRequest = ({ requestId }) => {
<i className="bx bx-time-five me-2 "></i>{" "}
<p className="fw-medium">TimeLine</p>
</div>
<PaymentStatusLogs data={data} />
<PaymentStat data={data} />
</div>
</div>
</form>

View File

@ -1,484 +1,490 @@
import React, { useEffect, useState } from 'react'
import Label from '../common/Label';
import { useForm } from 'react-hook-form';
import { useExpenseCategory } from '../../hooks/masterHook/useMaster';
import DatePicker from '../common/DatePicker';
import { zodResolver } from '@hookform/resolvers/zod';
import { defaultRecurringExpense, PaymentRecurringExpense } from './RecurringExpenseSchema';
import { INR_CURRENCY_CODE } from '../../utils/constants';
import { useCurrencies, useProjectName } from '../../hooks/useProjects';
import { useCreateRecurringExpense, usePayee, useRecurringExpenseDetail, useUpdateRecurringExpense } from '../../hooks/useExpense';
import InputSuggestions from '../common/InputSuggestion';
import MultiEmployeeSearchInput from '../common/MultiEmployeeSearchInput';
import React, { useEffect, useState } from "react";
import Label from "../common/Label";
import { Controller, useForm } from "react-hook-form";
import {
useExpenseCategory,
useRecurringStatus,
} from "../../hooks/masterHook/useMaster";
import DatePicker from "../common/DatePicker";
import { zodResolver } from "@hookform/resolvers/zod";
import {
defaultRecurringExpense,
PaymentRecurringExpense,
} from "./RecurringExpenseSchema";
import {
FREQUENCY_FOR_RECURRING,
INR_CURRENCY_CODE,
} from "../../utils/constants";
import { useCurrencies, useProjectName } from "../../hooks/useProjects";
import {
useCreateRecurringExpense,
usePayee,
useRecurringExpenseDetail,
useUpdateRecurringExpense,
} from "../../hooks/useExpense";
import InputSuggestions from "../common/InputSuggestion";
import MultiEmployeeSearchInput from "../common/MultiEmployeeSearchInput";
function ManageRecurringExpense({ closeModal, requestToEdit = null }) {
const {
const {
data,
isLoading,
isError,
error: requestError,
} = useRecurringExpenseDetail(requestToEdit);
//APIs
const { projectNames, loading: projectLoading, error, isError: isProjectError, } = useProjectName();
const { data: currencyData, isLoading: currencyLoading, isError: currencyError } = useCurrencies();
const { data: statusData, isLoading: statusLoading, isError: statusError } = useRecurringStatus();
const { data: Payees, isLoading: isPayeeLoaing, isError: isPayeeError, error: payeeError } = usePayee()
const { ExpenseCategories, loading: ExpenseLoading, error: ExpenseError } = useExpenseCategory();
//APIs
const {
projectNames,
loading: projectLoading,
error,
isError: isProjectError,
} = useProjectName();
const {
data: currencyData,
isLoading: currencyLoading,
isError: currencyError,
} = useCurrencies();
const {
data: statusData,
isLoading: statusLoading,
isError: statusError,
} = useRecurringStatus();
const {
data: Payees,
isLoading: isPayeeLoaing,
isError: isPayeeError,
error: payeeError,
} = usePayee();
const {
ExpenseCategories,
loading: ExpenseLoading,
error: ExpenseError,
} = useExpenseCategory();
const schema = PaymentRecurringExpense();
const { register, control, watch, handleSubmit, setValue, reset, formState: { errors }, } = useForm({
resolver: zodResolver(schema),
defaultValues: defaultRecurringExpense,
const schema = PaymentRecurringExpense();
const {
register,
control,
watch,
handleSubmit,
setValue,
reset,
formState: { errors },
} = useForm({
resolver: zodResolver(schema),
defaultValues: defaultRecurringExpense,
});
const handleClose = () => {
reset();
closeModal();
};
const { mutate: CreateRecurringExpense, isPending: createPending } =
useCreateRecurringExpense(() => {
handleClose();
});
const handleClose = () => {
reset();
closeModal();
// const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest(() =>
// handleClose()
// );
useEffect(() => {
if (requestToEdit && data) {
reset({
title: data.title || "",
description: data.description || "",
payee: data.payee || "",
notifyTo: data.notifyTo || "",
currencyId: data.currency.id || "",
amount: data.amount || "",
strikeDate: data.strikeDate?.slice(0, 10) || "",
projectId: data.project.id || "",
paymentBufferDays: data.paymentBufferDays || "",
numberOfIteration: data.numberOfIteration || "",
expenseCategoryId: data.expenseCategory.id || "",
statusId: data.statusId || "",
frequency: data.frequency || "",
isVariable: data.isVariable || false,
});
}
}, [data, reset]);
// console.log("Veer",data)
const onSubmit = (fromdata) => {
let payload = {
...fromdata,
// strikeDate: localToUtc(fromdata.strikeDate),
strikeDate: fromdata.strikeDate
? new Date(fromdata.strikeDate).toISOString()
: null,
};
if (requestToEdit) {
const editPayload = { ...payload, id: data.id };
PaymentRequestUpdate({ id: data.id, payload: editPayload });
} else {
CreateRecurringExpense(payload);
}
console.log("Kartik", payload);
};
const { mutate: CreateRecurringExpense, isPending: createPending } = useCreateRecurringExpense(
() => {
handleClose();
}
);
// const { mutate: PaymentRequestUpdate, isPending } = useUpdatePaymentRequest(() =>
// handleClose()
// );
return (
<div className="container p-3">
<h5 className="m-0">
{requestToEdit
? "Update Expense Recurring "
: "Create Expense Recurring"}
</h5>
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
{/* Project and Category */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label className="form-label" required>
Select Project
</Label>
<select
className="form-select form-select-sm"
{...register("projectId")}
>
<option value="">Select Project</option>
{projectLoading ? (
<option>Loading...</option>
) : (
projectNames?.map((project) => (
<option key={project.id} value={project.id}>
{project.name}
</option>
))
)}
</select>
{errors.projectId && (
<small className="danger-text">{errors.projectId.message}</small>
)}
</div>
useEffect(() => {
if (requestToEdit && data) {
reset({
title: data.title || "",
description: data.description || "",
payee: data.payee || "",
notifyTo: data.notifyTo || "",
currencyId: data.currency.id || "",
amount: data.amount || "",
strikeDate: data.strikeDate?.slice(0, 10) || "",
projectId: data.project.id || "",
paymentBufferDays: data.paymentBufferDays || "",
numberOfIteration: data.numberOfIteration || "",
expenseCategoryId: data.expenseCategory.id || "",
statusId: data.statusId || "",
frequency: data.frequency || "",
isVariable: data.isVariable || false,
});
}
}, [data, reset]);
// console.log("Veer",data)
const onSubmit = (fromdata) => {
let payload = {
...fromdata,
// strikeDate: localToUtc(fromdata.strikeDate),
strikeDate: fromdata.strikeDate ? new Date(fromdata.strikeDate).toISOString() : null,
};
if (requestToEdit) {
const editPayload = { ...payload, id: data.id};
PaymentRequestUpdate({ id: data.id, payload: editPayload });
} else {
CreateRecurringExpense(payload);
}
console.log("Kartik", payload)
};
return (
<div className="container p-3">
<h5 className="m-0">
{requestToEdit ? "Update Expense Recurring " : "Create Expense Recurring"}
</h5>
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
{/* Project and Category */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label className="form-label" required>
Select Project
</Label>
<select
className="form-select form-select-sm"
{...register("projectId")}
>
<option value="">Select Project</option>
{projectLoading ? (
<option>Loading...</option>
) : (
projectNames?.map((project) => (
<option key={project.id} value={project.id}>
{project.name}
</option>
))
)}
</select>
{errors.projectId && (
<small className="danger-text">{errors.projectId.message}</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="expenseCategoryId" className="form-label" required>
Expense Category
</Label>
<select
className="form-select form-select-sm"
id="expenseCategoryId"
{...register("expenseCategoryId")}
>
<option value="" disabled>
Select Category
</option>
{ExpenseLoading ? (
<option disabled>Loading...</option>
) : (
ExpenseCategories?.map((expense) => (
<option key={expense.id} value={expense.id}>
{expense.name}
</option>
))
)}
</select>
{errors.expenseCategoryId && (
<small className="danger-text">
{errors.expenseCategoryId.message}
</small>
)}
</div>
</div>
{/* Title and Is Variable */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="title" className="form-label" required>
Title
</Label>
<input
type="text"
id="title"
className="form-control form-control-sm"
{...register("title")}
placeholder="Enter title"
/>
{errors.title && (
<small className="danger-text">
{errors.title.message}
</small>
)}
</div>
{/* <div className="col-md-6">
<Label htmlFor="isVariable" className="form-label" required>
Is Variable
</Label>
<select
id="isVariable"
className="form-select form-select-sm"
{...register("isVariable", {
setValueAs: (v) => v === "true" ? true : v === "false" ? false : false,
})}
>
<option value="false">False</option>
<option value="true">True</option>
</select>
{errors.isVariable && (
<small className="danger-text">{errors.isVariable.message}</small>
)}
</div> */}
<div className="col-md-6 mt-2">
<Label htmlFor="isVariable" className="form-label" required>
Payment Type
</Label>
<Controller
name="isVariable"
control={control}
defaultValue={defaultRecurringExpense.isVariable ?? false}
render={({ field }) => (
<div className="d-flex align-items-center gap-3">
<div className="form-check">
<input
type="radio"
id="isVariableTrue"
className="form-check-input"
checked={field.value === true}
onChange={() => field.onChange(true)}
/>
<Label htmlFor="isVariableTrue" className="form-check-label">
Is Variable
</Label>
</div>
<div className="form-check">
<input
type="radio"
id="isVariableFalse"
className="form-check-input"
checked={field.value === false}
onChange={() => field.onChange(false)}
/>
<Label htmlFor="isVariableFalse" className="form-check-label">
Fixed
</Label>
</div>
</div>
)}
/>
{errors.isVariable && (
<small className="danger-text">{errors.isVariable.message}</small>
)}
</div>
</div>
{/* Date and Amount */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="strikeDate" className="form-label" required>
Strike Date
</Label>
<DatePicker
name="strikeDate"
control={control}
minDate={new Date()}
className='w-100'
/>
{errors.strikeDate && (
<small className="danger-text">
{errors.strikeDate.message}
</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="amount" className="form-label" required>
Amount
</Label>
<input
type="number"
id="amount"
className="form-control form-control-sm"
min="1"
step="0.01"
inputMode="decimal"
{...register("amount", { valueAsNumber: true })}
placeholder="Enter amount"
/>
{errors.amount && (
<small className="danger-text">{errors.amount.message}</small>
)}
</div>
</div>
{/* Payee and Currency */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="payee" className="form-label" required>
Payee (Supplier Name/Transporter Name/Other)
</Label>
<InputSuggestions
organizationList={Payees}
value={watch("payee") || ""}
onChange={(val) =>
setValue("payee", val, { shouldValidate: true })
}
error={errors.payee?.message}
placeholder="Select or enter payee"
/>
</div>
<div className="col-md-6">
<Label htmlFor="currencyId" className="form-label" required>
Currency
</Label>
<select
id="currencyId"
className="form-select form-select-sm"
{...register("currencyId")}
>
<option value="">Select Currency</option>
{currencyLoading && <option>Loading...</option>}
{!currencyLoading &&
!currencyError &&
currencyData?.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>
{/* Frequency To and Status Id */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="frequency" className="form-label" required>
Frequency
</Label>
<select
id="frequency"
className="form-select form-select-sm"
{...register("frequency", { valueAsNumber: true })}
>
<option value="">Select Frequency</option>
{Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => (
<option key={key} value={key}>
{label}
</option>
))}
</select>
{errors.frequency && (
<small className="danger-text">{errors.frequency.message}</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="statusId" className="form-label" required>
Status
</Label>
<select
id="statusId"
className="form-select form-select-sm"
{...register("statusId")}
>
<option value="">Select Currency</option>
{currencyLoading && <option>Loading...</option>}
{!currencyLoading &&
!currencyError &&
currencyData?.map((currency) => (
<option key={currency.id} value={currency.id}>
{`${currency.currencyName} (${currency.symbol})`}
</option>
))}
</select>
{errors.statusId && (
<small className="danger-text">{errors.statusId.message}</small>
)}
</div>
</div>
{/* Payment Buffer Days and Number of Iteration */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="paymentBufferDays" className="form-label" required>
Payment Buffer Days
</Label>
<input
type="number"
id="paymentBufferDays"
className="form-control form-control-sm"
min="0"
step="1"
{...register("paymentBufferDays", { valueAsNumber: true })}
placeholder="Enter payment buffer days"
/>
{errors.paymentBufferDays && (
<small className="danger-text">{errors.paymentBufferDays.message}</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="numberOfIteration" className="form-label" required>
Number of Iteration
</Label>
<input
type="number"
id="numberOfIteration"
className="form-control form-control-sm"
min="1"
step="1"
{...register("numberOfIteration", { valueAsNumber: true })}
placeholder="Enter number of iterations"
/>
{errors.numberOfIteration && (
<small className="danger-text">{errors.numberOfIteration.message}</small>
)}
</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">
<Label htmlFor="notifyTo" className="form-label" required>
Notify Employees
</Label>
<MultiEmployeeSearchInput
control={control}
name="notifyTo"
projectId={watch("projectId")}
placeholder="Select Employees"
forAll={true}
/>
</div>
</div>
{/* Description */}
<div className="row my-2 text-start">
<div className="col-md-12">
<Label htmlFor="description" className="form-label" required>
Description
</Label>
<textarea
id="description"
className="form-control form-control-sm"
{...register("description")}
rows="2"
></textarea>
{errors.description && (
<small className="danger-text">
{errors.description.message}
</small>
)}
</div>
</div>
<div className="d-flex justify-content-end gap-3">
<button
type="reset"
onClick={handleClose}
className="btn btn-label-secondary btn-sm mt-3"
>
Cancel
</button>
<button
type="submit"
className="btn btn-primary btn-sm mt-3"
>
Submit
</button>
</div>
</form>
<div className="col-md-6">
<Label htmlFor="expenseCategoryId" className="form-label" required>
Expense Category
</Label>
<select
className="form-select form-select-sm"
id="expenseCategoryId"
{...register("expenseCategoryId")}
>
<option value="" disabled>
Select Category
</option>
{ExpenseLoading ? (
<option disabled>Loading...</option>
) : (
ExpenseCategories?.map((expense) => (
<option key={expense.id} value={expense.id}>
{expense.name}
</option>
))
)}
</select>
{errors.expenseCategoryId && (
<small className="danger-text">
{errors.expenseCategoryId.message}
</small>
)}
</div>
</div>
)
{/* Title and Is Variable */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="title" className="form-label" required>
Title
</Label>
<input
type="text"
id="title"
className="form-control form-control-sm"
{...register("title")}
placeholder="Enter title"
/>
{errors.title && (
<small className="danger-text">{errors.title.message}</small>
)}
</div>
<div className="col-md-6 mt-2">
<Label htmlFor="isVariable" className="form-label" required>
Payment Type
</Label>
<Controller
name="isVariable"
control={control}
defaultValue={defaultRecurringExpense.isVariable ?? false}
render={({ field }) => (
<div className="d-flex align-items-center gap-3">
<div className="form-check">
<input
type="radio"
id="isVariableTrue"
className="form-check-input"
checked={field.value === true}
onChange={() => field.onChange(true)}
/>
<Label
htmlFor="isVariableTrue"
className="form-check-label"
>
Is Variable
</Label>
</div>
<div className="form-check">
<input
type="radio"
id="isVariableFalse"
className="form-check-input"
checked={field.value === false}
onChange={() => field.onChange(false)}
/>
<Label
htmlFor="isVariableFalse"
className="form-check-label"
>
Fixed
</Label>
</div>
</div>
)}
/>
{errors.isVariable && (
<small className="danger-text">{errors.isVariable.message}</small>
)}
</div>
</div>
{/* Date and Amount */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="strikeDate" className="form-label" required>
Strike Date
</Label>
<DatePicker
name="strikeDate"
control={control}
minDate={new Date()}
className="w-100"
/>
{errors.strikeDate && (
<small className="danger-text">{errors.strikeDate.message}</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="amount" className="form-label" required>
Amount
</Label>
<input
type="number"
id="amount"
className="form-control form-control-sm"
min="1"
step="0.01"
inputMode="decimal"
{...register("amount", { valueAsNumber: true })}
placeholder="Enter amount"
/>
{errors.amount && (
<small className="danger-text">{errors.amount.message}</small>
)}
</div>
</div>
{/* Payee and Currency */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="payee" className="form-label" required>
Payee (Supplier Name/Transporter Name/Other)
</Label>
<InputSuggestions
organizationList={Payees}
value={watch("payee") || ""}
onChange={(val) =>
setValue("payee", val, { shouldValidate: true })
}
error={errors.payee?.message}
placeholder="Select or enter payee"
/>
</div>
<div className="col-md-6">
<Label htmlFor="currencyId" className="form-label" required>
Currency
</Label>
<select
id="currencyId"
className="form-select form-select-sm"
{...register("currencyId")}
>
<option value="">Select Currency</option>
{currencyLoading && <option>Loading...</option>}
{!currencyLoading &&
!currencyError &&
currencyData?.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>
{/* Frequency To and Status Id */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="frequency" className="form-label" required>
Frequency
</Label>
<select
id="frequency"
className="form-select form-select-sm"
{...register("frequency", { valueAsNumber: true })}
>
<option value="">Select Frequency</option>
{Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => (
<option key={key} value={key}>
{label}
</option>
))}
</select>
{errors.frequency && (
<small className="danger-text">{errors.frequency.message}</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="statusId" className="form-label" required>
Status
</Label>
<select
id="statusId"
className="form-select form-select-sm"
{...register("statusId")}
>
<option value="">Select Status</option>
{statusLoading && <option>Loading...</option>}
{!currencyLoading &&
!currencyError &&
statusData?.map((status) => (
<option key={status.id} value={status.id}>
{`${status.name} `}
</option>
))}
</select>
{errors.statusId && (
<small className="danger-text">{errors.statusId.message}</small>
)}
</div>
</div>
{/* Payment Buffer Days and Number of Iteration */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="paymentBufferDays" className="form-label" required>
Payment Buffer Days
</Label>
<input
type="number"
id="paymentBufferDays"
className="form-control form-control-sm"
min="0"
step="1"
{...register("paymentBufferDays", { valueAsNumber: true })}
placeholder="Enter payment buffer days"
/>
{errors.paymentBufferDays && (
<small className="danger-text">
{errors.paymentBufferDays.message}
</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="numberOfIteration" className="form-label" required>
Number of Iteration
</Label>
<input
type="number"
id="numberOfIteration"
className="form-control form-control-sm"
min="1"
step="1"
{...register("numberOfIteration", { valueAsNumber: true })}
placeholder="Enter number of iterations"
/>
{errors.numberOfIteration && (
<small className="danger-text">
{errors.numberOfIteration.message}
</small>
)}
</div>
</div>
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="notifyTo" className="form-label" required>
Notify Employees
</Label>
<MultiEmployeeSearchInput
control={control}
name="notifyTo"
projectId={watch("projectId")}
placeholder="Select Employees"
forAll={true}
/>
</div>
</div>
{/* Description */}
<div className="row my-2 text-start">
<div className="col-md-12">
<Label htmlFor="description" className="form-label" required>
Description
</Label>
<textarea
id="description"
className="form-control form-control-sm"
{...register("description")}
rows="2"
></textarea>
{errors.description && (
<small className="danger-text">
{errors.description.message}
</small>
)}
</div>
</div>
<div className="d-flex justify-content-end gap-3">
<button
type="reset"
onClick={handleClose}
className="btn btn-label-secondary btn-sm mt-3"
>
Cancel
</button>
<button type="submit" className="btn btn-primary btn-sm mt-3">
Submit
</button>
</div>
</form>
</div>
);
}
export default ManageRecurringExpense
export default ManageRecurringExpense;

View File

@ -80,7 +80,7 @@ export const defaultRecurringExpense = {
notifyTo: "",
currencyId: "",
amount: 0,
strikeDate: "", // or null if your DatePicker accepts null
strikeDate: "",
projectId: "",
paymentBufferDays: 0,
numberOfIteration: 1,

View File

@ -5,177 +5,178 @@ import { useController } from "react-hook-form";
import Avatar from "../common/Avatar";
const MultiEmployeeSearchInput = ({
control,
name,
projectId,
placeholder,
forAll,
control,
name,
projectId,
placeholder,
forAll,
}) => {
const {
field: { onChange, value, ref },
fieldState: { error },
} = useController({ name, control });
const {
field: { onChange, value, ref },
fieldState: { error },
} = useController({ name, control });
const [search, setSearch] = useState("");
const [showDropdown, setShowDropdown] = useState(false);
const [selectedEmployees, setSelectedEmployees] = useState([]);
const dropdownRef = useRef(null);
const [search, setSearch] = useState("");
const [showDropdown, setShowDropdown] = useState(false);
const [selectedEmployees, setSelectedEmployees] = useState([]);
const dropdownRef = useRef(null);
const debouncedSearch = useDebounce(search, 500);
const debouncedSearch = useDebounce(search, 500);
const { data: employees, isLoading } = useEmployeesName(
projectId,
debouncedSearch,
forAll
);
const { data: employees, isLoading } = useEmployeesName(
projectId,
debouncedSearch,
forAll
);
useEffect(() => {
useEffect(() => {
if (value && employees?.data) {
// Ensure value is a string (sometimes it may come as array/object)
const stringValue =
typeof value === "string"
? value
: Array.isArray(value)
? value.join(",")
: "";
// Ensure value is a string (sometimes it may come as array/object)
const stringValue =
typeof value === "string"
? value
: Array.isArray(value)
? value.join(",")
: "";
const emails = stringValue.split(",").filter(Boolean);
const foundEmps = employees.data.filter((emp) =>
emails.includes(emp.email)
);
const emails = stringValue.split(",").filter(Boolean);
const foundEmps = employees.data.filter((emp) =>
emails.includes(emp.email)
);
setSelectedEmployees(foundEmps);
setSelectedEmployees(foundEmps);
if (forAll && foundEmps.length > 0) {
setSearch(""); // clear search field
}
if (forAll && foundEmps.length > 0) {
setSearch(""); // clear search field
}
}
}, [value, employees?.data, forAll]);
}, [value, employees?.data, forAll]);
const handleSelect = (employee) => {
if (!selectedEmployees.find((emp) => emp.email === employee.email)) {
const newSelected = [...selectedEmployees, employee];
setSelectedEmployees(newSelected);
// Store emails instead of IDs
onChange(
newSelected
.map((e) => e.email)
.filter(Boolean)
.join(",")
);
setSearch("");
setShowDropdown(false);
}
};
const handleSelect = (employee) => {
if (!selectedEmployees.find((emp) => emp.email === employee.email)) {
const newSelected = [...selectedEmployees, employee];
setSelectedEmployees(newSelected);
// Store emails instead of IDs
onChange(
newSelected
.map((e) => e.email)
.filter(Boolean)
.join(",")
);
setSearch("");
setShowDropdown(false);
}
};
const handleRemove = (email) => {
const newSelected = selectedEmployees.filter((e) => e.email !== email);
setSelectedEmployees(newSelected);
onChange(
newSelected
.map((e) => e.email)
.filter(Boolean)
.join(",")
);
};
useEffect(() => {
const handleClickOutside = (event) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setShowDropdown(false);
}
};
const handleEsc = (event) => {
if (event.key === "Escape") setShowDropdown(false);
};
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("keydown", handleEsc);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("keydown", handleEsc);
};
}, []);
return (
<div className="position-relative" ref={dropdownRef}>
<div className="d-flex flex-wrap gap-1 mb-1">
{selectedEmployees.map((emp) => (
<div
key={emp.email}
className="badge bg-label-secondary d-flex align-items-center py-0 px-1"
style={{ fontSize: "0.75rem" }}
>
<Avatar
size="xs"
classAvatar="m-0 me-1"
firstName={emp.firstName}
lastName={emp.lastName}
/>
{emp.firstName} {emp.lastName}
<span
className="ms-1"
style={{ cursor: "pointer", fontSize: "0.75rem" }}
onClick={() => handleRemove(emp.email)}
>
×
</span>
</div>
))}
</div>
<input
type="search"
ref={ref}
className="form-control form-control-sm"
placeholder={placeholder}
value={search}
onChange={(e) => {
setSearch(e.target.value);
setShowDropdown(true);
}}
onFocus={() => setShowDropdown(true)}
/>
{showDropdown && (employees?.data?.length > 0 || isLoading) && (
<ul
className="list-group position-absolute bg-white w-100 shadow z-3 rounded-1 px-0"
style={{ maxHeight: 200, overflowY: "auto", zIndex: 1050 }}
>
{isLoading ? (
<li className="list-group-item py-1 px-2 text-muted">Searching...</li>
) : (
employees?.data
?.filter((emp) => !selectedEmployees.find((e) => e.email === emp.email))
.map((emp) => (
<li
key={emp.email}
className="list-group-item list-group-item-action py-1 px-2"
style={{ cursor: "pointer" }}
onClick={() => handleSelect(emp)}
>
<div className="d-flex align-items-center">
<Avatar
size="xs"
classAvatar="m-0 me-2"
firstName={emp.firstName}
lastName={emp.lastName}
/>
<span className="text-muted">{`${emp.firstName} ${emp.lastName}`}</span>
</div>
</li>
))
)}
</ul>
)}
{error && <small className="text-danger">{error.message}</small>}
</div>
const handleRemove = (email) => {
const newSelected = selectedEmployees.filter((e) => e.email !== email);
setSelectedEmployees(newSelected);
onChange(
newSelected
.map((e) => e.email)
.filter(Boolean)
.join(",")
);
};
useEffect(() => {
const handleClickOutside = (event) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setShowDropdown(false);
}
};
const handleEsc = (event) => {
if (event.key === "Escape") setShowDropdown(false);
};
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("keydown", handleEsc);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("keydown", handleEsc);
};
}, []);
return (
<div className="position-relative" ref={dropdownRef}>
<div className="d-flex flex-wrap gap-1 mb-1">
{selectedEmployees.map((emp) => (
<div
key={emp.email}
className="badge bg-label-secondary d-flex align-items-center py-0 px-1"
style={{ fontSize: "0.75rem" }}
>
<Avatar
size="xs"
classAvatar="m-0 me-1"
firstName={emp.firstName}
lastName={emp.lastName}
/>
{emp.firstName} {emp.lastName}
<span
className="ms-1"
style={{ cursor: "pointer", fontSize: "0.75rem" }}
onClick={() => handleRemove(emp.email)}
>
×
</span>
</div>
))}
</div>
<input
type="search"
ref={ref}
className="form-control form-control-sm"
placeholder={placeholder}
value={search}
onChange={(e) => {
setSearch(e.target.value);
setShowDropdown(true);
}}
onFocus={() => setShowDropdown(true)}
/>
{showDropdown && (employees?.data?.length > 0 || isLoading) && (
<ul
className="list-group position-absolute bg-white w-100 shadow z-3 rounded-1 px-0"
style={{ maxHeight: 200, overflowY: "auto", zIndex: 1050 }}
>
{isLoading ? (
<li className="list-group-item py-1 px-2 text-muted">
Searching...
</li>
) : (
employees?.data
?.filter(
(emp) => !selectedEmployees.find((e) => e.email === emp.email)
)
.map((emp) => (
<li
key={emp.email}
className="list-group-item list-group-item-action py-1 px-2"
style={{ cursor: "pointer" }}
onClick={() => handleSelect(emp)}
>
<div className="d-flex align-items-center">
<Avatar
size="xs"
classAvatar="m-0 me-2"
firstName={emp.firstName}
lastName={emp.lastName}
/>
<span className="text-muted">{`${emp.firstName} ${emp.lastName}`}</span>
</div>
</li>
))
)}
</ul>
)}
{error && <small className="text-danger">{error.message}</small>}
</div>
);
};
export default MultiEmployeeSearchInput;

View File

@ -10,6 +10,20 @@ import {
} from "@tanstack/react-query";
import showToast from "../../services/toastService";
export const useRecurringStatus = ()=>{
return useQuery({
queryKey:["RecurringStatus"],
queryFn:async()=>{
const resp = await MasterRespository.getRecurringStatus();
return resp.data
}
})
}
export const usePaymentAjustmentHead = (isActive) => {
return useQuery({
queryKey: ["paymentType", isActive],

View File

@ -6,7 +6,15 @@ import { useSelector } from "react-redux";
import moment from "moment";
// -------------------Query------------------------------------------------------
export const usePayee =()=>{
return useQuery({
queryKey:["payee"],
queryFn:async()=>{
const resp = await ExpenseRepository.GetPayee();
return resp.data;
}
})
}
const cleanFilter = (filter) => {
const cleaned = { ...filter };
@ -484,6 +492,7 @@ export const useRecurringExpenseList = (
return useQuery({
queryKey: ["recurringExpenseList",pageSize,pageNumber,filter,isActive,searchString],
queryFn: async()=>{
debugger
const resp = await ExpenseRepository.GetRecurringExpenseList(pageSize,pageNumber,filter,isActive,searchString);
return resp.data;
},

View File

@ -1,25 +1,34 @@
import { api } from "../utils/axiosClient";
const ExpenseRepository = {
//#region Expense
GetExpenseList: (pageSize, pageNumber, filter, searchString) => {
const payloadJsonString = JSON.stringify(filter);
return api.get(`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
return api.get(
`/api/expense/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`
);
},
GetExpenseDetails: (id) => api.get(`/api/Expense/details/${id}`),
CreateExpense: (data) => api.post("/api/Expense/create", data),
UpdateExpense: (id, data) => api.put(`/api/Expense/edit/${id}`, data),
DeleteExpense: (id) => api.delete(`/api/Expense/delete/${id}`),
ActionOnExpense: (data) => api.post('/api/expense/action', data),
GetExpenseFilter: () => api.get('/api/Expense/filter'),
ActionOnExpense: (data) => api.post("/api/expense/action", data),
GetExpenseFilter: () => api.get("/api/Expense/filter"),
//#endregion
//#region Payment Request
GetPaymentRequestList: (pageSize, pageNumber, filter, isActive, searchString) => {
GetPaymentRequestList: (
pageSize,
pageNumber,
filter,
isActive,
searchString
) => {
const payloadJsonString = JSON.stringify(filter);
return api.get(`/api/Expense/get/payment-requests/list?isActive=${isActive}&pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`);
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),
@ -30,21 +39,33 @@ const ExpenseRepository = {
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),
DeletePaymentRequest: () => api.get("delete here come"),
CreatePaymentRequestExpense: (data) =>
api.post("/api/Expense/payment-request/expense/create", data),
GetPayee:()=>api.get('/api/Expense/payment-request/payee'),
//#endregion
//#region Recurring Expense
CreateRecurringExpense: (data) => api.post("/api/Expense/recurring-payment/create", data),
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: (employeeId)=>api.get(`/api/Expense/get/transactions/${employeeId}`),
GetRecurringExpenseList:(pageSize, pageNumber, filter, searchString) => {
const payloadJsonString = JSON.stringify(filter);
return api.get(
`/api/expense/get/recurring-payment/list?pageSize=${pageSize}&pageNumber=${pageNumber}&filter=${payloadJsonString}&searchString=${searchString}`
);
},
CreateRecurringExpense: (data) =>
api.post("/api/Expense/recurring-payment/create", data),
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: (employeeId) =>
api.get(`/api/Expense/get/transactions/${employeeId}`),
//#endregion
};
export default ExpenseRepository;

View File

@ -141,4 +141,7 @@ export const MasterRespository = {
api.post(`/api/Master/payment-adjustment-head`, data),
updatePaymentAjustmentHead: (id, data) =>
api.put(`/api/Master/payment-adjustment-head/edit/${id}`, data),
getRecurringStatus:()=>api.get(`/api/Master/recurring-status/list`)
};