Adding New dropdown in across all modules.
This commit is contained in:
parent
7df9d47f07
commit
dbf4f5e9c8
@ -396,34 +396,33 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
{/* Category + Projects */}
|
||||
<div className="row">
|
||||
<div className="col-md-6 text-start">
|
||||
<label className="form-label">Category</label>
|
||||
<select
|
||||
className="form-select "
|
||||
{...register("contactCategoryId")}
|
||||
>
|
||||
{contactCategoryLoading && !contactCategory ? (
|
||||
<option disabled value="">
|
||||
Loading...
|
||||
</option>
|
||||
) : (
|
||||
<>
|
||||
<option disabled value="">
|
||||
Select Category
|
||||
</option>
|
||||
{contactCategory?.map((cate) => (
|
||||
<option key={cate.id} value={cate.id}>
|
||||
{cate.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
<AppFormController
|
||||
name="contactCategoryId"
|
||||
control={control}
|
||||
rules={{ required: "Category is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="Category"
|
||||
required
|
||||
options={contactCategory ?? []}
|
||||
placeholder="Select Category"
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={contactCategoryLoading && !contactCategory}
|
||||
className="m-0"
|
||||
/>
|
||||
)}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.contactCategoryId && (
|
||||
<small className="danger-text">
|
||||
{errors.contactCategoryId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<SelectMultiple
|
||||
name="projectIds"
|
||||
|
||||
@ -17,6 +17,8 @@ import DatePicker from "../common/DatePicker";
|
||||
import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
|
||||
import { useOrganizationsList } from "../../hooks/useOrganization";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
const dispatch = useDispatch();
|
||||
@ -96,26 +98,26 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
reset(
|
||||
currentEmployee
|
||||
? {
|
||||
id: currentEmployee.id || null,
|
||||
firstName: currentEmployee.firstName || "",
|
||||
middleName: currentEmployee.middleName || "",
|
||||
lastName: currentEmployee.lastName || "",
|
||||
email: currentEmployee.email || "",
|
||||
currentAddress: currentEmployee.currentAddress || "",
|
||||
birthDate: formatDate(currentEmployee.birthDate) || "",
|
||||
joiningDate: formatDate(currentEmployee.joiningDate) || "",
|
||||
emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
|
||||
emergencyContactPerson:
|
||||
currentEmployee.emergencyContactPerson || "",
|
||||
aadharNumber: currentEmployee.aadharNumber || "",
|
||||
gender: currentEmployee.gender || "",
|
||||
panNumber: currentEmployee.panNumber || "",
|
||||
permanentAddress: currentEmployee.permanentAddress || "",
|
||||
phoneNumber: currentEmployee.phoneNumber || "",
|
||||
jobRoleId: currentEmployee.jobRoleId?.toString() || "",
|
||||
organizationId: currentEmployee.organizationId || "",
|
||||
hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
|
||||
}
|
||||
id: currentEmployee.id || null,
|
||||
firstName: currentEmployee.firstName || "",
|
||||
middleName: currentEmployee.middleName || "",
|
||||
lastName: currentEmployee.lastName || "",
|
||||
email: currentEmployee.email || "",
|
||||
currentAddress: currentEmployee.currentAddress || "",
|
||||
birthDate: formatDate(currentEmployee.birthDate) || "",
|
||||
joiningDate: formatDate(currentEmployee.joiningDate) || "",
|
||||
emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
|
||||
emergencyContactPerson:
|
||||
currentEmployee.emergencyContactPerson || "",
|
||||
aadharNumber: currentEmployee.aadharNumber || "",
|
||||
gender: currentEmployee.gender || "",
|
||||
panNumber: currentEmployee.panNumber || "",
|
||||
permanentAddress: currentEmployee.permanentAddress || "",
|
||||
phoneNumber: currentEmployee.phoneNumber || "",
|
||||
jobRoleId: currentEmployee.jobRoleId?.toString() || "",
|
||||
organizationId: currentEmployee.organizationId || "",
|
||||
hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
|
||||
}
|
||||
: {}
|
||||
);
|
||||
setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
|
||||
@ -147,7 +149,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
message: "Only letters are allowed",
|
||||
},
|
||||
})}
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
id="firstName"
|
||||
placeholder="First Name"
|
||||
onInput={(e) => {
|
||||
@ -173,7 +175,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
message: "Only letters are allowed",
|
||||
},
|
||||
})}
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
id="middleName"
|
||||
placeholder="Middle Name"
|
||||
onInput={(e) => {
|
||||
@ -201,7 +203,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
message: "Only letters are allowed",
|
||||
},
|
||||
})}
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
id="lastName"
|
||||
placeholder="Last Name"
|
||||
onInput={(e) => {
|
||||
@ -231,7 +233,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
type="email"
|
||||
id="email"
|
||||
{...register("email")}
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
placeholder="example@domain.com"
|
||||
maxLength={80}
|
||||
aria-describedby="Email"
|
||||
@ -255,7 +257,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
keyboardType="numeric"
|
||||
id="phoneNumber"
|
||||
{...register("phoneNumber")}
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
placeholder="Phone Number"
|
||||
inputMode="numeric"
|
||||
maxLength={10}
|
||||
@ -272,7 +274,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
</div>
|
||||
<div className="row mb-3"></div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4">
|
||||
{/* <div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Gender
|
||||
</Label>
|
||||
@ -300,7 +302,44 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
{errors.gender.message}
|
||||
</div>
|
||||
)}
|
||||
</div> */}
|
||||
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Gender
|
||||
</Label>
|
||||
|
||||
<div className="">
|
||||
<AppFormController
|
||||
name="gender"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label=""
|
||||
options={[
|
||||
{ id: "Male", name: "Male" },
|
||||
{ id: "Female", name: "Female" },
|
||||
{ id: "Other", name: "Other" },
|
||||
]}
|
||||
placeholder="Select Gender"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errors.gender && (
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
{errors.gender.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-sm-4">
|
||||
<Label className="form-text text-start" required>
|
||||
Birth Date
|
||||
@ -358,7 +397,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
|
||||
<textarea
|
||||
id="currentAddress"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
placeholder="Current Address"
|
||||
aria-label="Current Address"
|
||||
aria-describedby="basic-icon-default-message2"
|
||||
@ -388,7 +427,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
|
||||
<textarea
|
||||
id="permanentAddress"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
placeholder="Permanent Address"
|
||||
aria-label="Permanent Address"
|
||||
aria-describedby="basic-icon-default-message2"
|
||||
@ -419,25 +458,34 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
<Label className="form-text text-start" required>
|
||||
Organization
|
||||
</Label>
|
||||
<div className="input-group">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("organizationId")}
|
||||
id="organizationId"
|
||||
aria-label=""
|
||||
>
|
||||
<option disabled value="">
|
||||
Select Organization
|
||||
</option>
|
||||
{organzationList?.data
|
||||
.sort((a, b) => a?.name?.localeCompare(b?.name))
|
||||
.map((item) => (
|
||||
<option value={item?.id} key={item?.id}>
|
||||
{item?.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div>
|
||||
<AppFormController
|
||||
name="organizationId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Already showing label above
|
||||
options={
|
||||
organzationList?.data
|
||||
?.sort((a, b) => a?.name?.localeCompare(b?.name))
|
||||
?.map((item) => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
})) || []
|
||||
}
|
||||
placeholder="Select Organization"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errors.organizationId && (
|
||||
<div
|
||||
className="danger-text text-start justify-content-center"
|
||||
@ -448,6 +496,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-sm-6 d-flex align-items-center mt-2">
|
||||
<label className="form-check-label d-flex align-items-center">
|
||||
<input
|
||||
@ -474,7 +523,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
</Label>
|
||||
<div className="input-group">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
className="form-select"
|
||||
{...register("jobRoleId")}
|
||||
id="jobRoleId"
|
||||
aria-label=""
|
||||
@ -507,7 +556,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
<input
|
||||
type="text"
|
||||
{...register("emergencyContactPerson")}
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
id="emergencyContactPerson"
|
||||
maxLength={50}
|
||||
placeholder="Contact Person"
|
||||
@ -528,7 +577,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
<input
|
||||
type="text"
|
||||
{...register("emergencyPhoneNumber")}
|
||||
className="form-control form-control-sm phone-mask"
|
||||
className="form-control phone-mask"
|
||||
id="emergencyPhoneNumber"
|
||||
placeholder="Phone Number"
|
||||
inputMode="numeric"
|
||||
@ -551,7 +600,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
<input
|
||||
type="text"
|
||||
{...register("aadharNumber")}
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
id="aadharNumber"
|
||||
placeholder="AADHAR Number"
|
||||
maxLength={12}
|
||||
@ -569,7 +618,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
<input
|
||||
type="text"
|
||||
{...register("panNumber")}
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
id="panNumber"
|
||||
placeholder="PAN Number"
|
||||
maxLength={10}
|
||||
|
||||
@ -37,6 +37,7 @@ import SelectEmployeeServerSide, {
|
||||
} from "../common/Forms/SelectFieldServerSide";
|
||||
import { useAllocationServiceProjectTeam } from "../../hooks/useServiceProject";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
const {
|
||||
@ -182,15 +183,15 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
currencyId: data.currency.id || DEFAULT_CURRENCY,
|
||||
billAttachments: data.documents
|
||||
? data.documents.map((doc) => ({
|
||||
fileName: doc.fileName,
|
||||
base64Data: null,
|
||||
contentType: doc.contentType,
|
||||
documentId: doc.documentId,
|
||||
fileSize: 0,
|
||||
description: "",
|
||||
preSignedUrl: doc.preSignedUrl,
|
||||
isActive: doc.isActive ?? true,
|
||||
}))
|
||||
fileName: doc.fileName,
|
||||
base64Data: null,
|
||||
contentType: doc.contentType,
|
||||
documentId: doc.documentId,
|
||||
fileSize: 0,
|
||||
description: "",
|
||||
preSignedUrl: doc.preSignedUrl,
|
||||
isActive: doc.isActive ?? true,
|
||||
}))
|
||||
: [],
|
||||
});
|
||||
}
|
||||
@ -236,7 +237,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
{expenseToEdit ? "Update Expense " : "Create New Expense"}
|
||||
</h5>
|
||||
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row my-2 text-start">
|
||||
<div className="row my-2 text-start">
|
||||
<div className="col-12 col-md-6">
|
||||
<SelectProjectField
|
||||
label="Project"
|
||||
@ -259,30 +260,32 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
||||
Expense Category
|
||||
</Label>
|
||||
<select
|
||||
className="form-select "
|
||||
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>
|
||||
))
|
||||
|
||||
<AppFormController
|
||||
name="expenseCategoryId"
|
||||
control={control}
|
||||
rules={{ required: "Expense Category is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already shown above
|
||||
placeholder="Select Category"
|
||||
options={expenseCategories ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={ExpenseLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
</select>
|
||||
{errors.expensesCategoryId && (
|
||||
/>
|
||||
|
||||
{errors.expenseCategoryId && (
|
||||
<small className="danger-text">
|
||||
{errors.expensesCategoryId.message}
|
||||
{errors.expenseCategoryId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="row my-2 text-start">
|
||||
@ -290,40 +293,40 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
<Label htmlFor="paymentModeId" className="form-label" required>
|
||||
Payment Mode
|
||||
</Label>
|
||||
<select
|
||||
className="form-select "
|
||||
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>
|
||||
))
|
||||
|
||||
<AppFormController
|
||||
name="paymentModeId"
|
||||
control={control}
|
||||
rules={{ required: "Payment Mode is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is shown above
|
||||
placeholder="Select Mode"
|
||||
options={PaymentModes ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={PaymentModeLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.paymentModeId && (
|
||||
<small className="danger-text">
|
||||
{errors.paymentModeId.message}
|
||||
</small>
|
||||
<small className="danger-text">{errors.paymentModeId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
|
||||
<div className="col-12 col-md-6 text-start">
|
||||
<AppFormController
|
||||
name="paidById"
|
||||
name="paidById"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectEmployeeServerSide
|
||||
label="Paid By" required
|
||||
label="Paid By" required
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isFullObject={false}
|
||||
isFullObject={false}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
@ -437,32 +440,37 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-4">
|
||||
<div className="col-md-6 text-start ">
|
||||
<div className="col-md-6 text-start">
|
||||
<Label htmlFor="currencyId" className="form-label" required>
|
||||
Select Currency
|
||||
</Label>
|
||||
<select
|
||||
className="form-select "
|
||||
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>
|
||||
))
|
||||
|
||||
<AppFormController
|
||||
name="currencyId"
|
||||
control={control}
|
||||
rules={{ required: "Currency is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already shown above
|
||||
placeholder="Select Currency"
|
||||
options={currencies?.map((currency) => ({
|
||||
id: currency.id,
|
||||
name: `${currency.currencyName} (${currency.symbol})`,
|
||||
})) ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={currencyLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.currencyId && (
|
||||
<small className="danger-text">{errors.currencyId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{expenseCategory?.noOfPersonsRequired && (
|
||||
<div className="col-md-6 text-start">
|
||||
<Label className="form-label" required>
|
||||
@ -553,7 +561,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
(fileError?.fileSize?.message ||
|
||||
fileError?.contentType?.message ||
|
||||
fileError?.base64Data?.message,
|
||||
fileError?.documentId?.message)
|
||||
fileError?.documentId?.message)
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
@ -578,8 +586,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
|
||||
{isPending || createPending
|
||||
? "Please Wait..."
|
||||
: expenseToEdit
|
||||
? "Update"
|
||||
: "Save as Draft"}
|
||||
? "Update"
|
||||
: "Save as Draft"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -30,6 +30,8 @@ import InputSuggestions from "../common/InputSuggestion";
|
||||
import { useProfile } from "../../hooks/useProfile";
|
||||
import { blockUI } from "../../utils/blockUI";
|
||||
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
const {
|
||||
@ -176,15 +178,15 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
isAdvancePayment: data.isAdvancePayment || false,
|
||||
billAttachments: data.attachments
|
||||
? data?.attachments?.map((doc) => ({
|
||||
fileName: doc.fileName,
|
||||
base64Data: null,
|
||||
contentType: doc.contentType,
|
||||
documentId: doc.id,
|
||||
fileSize: 0,
|
||||
description: "",
|
||||
preSignedUrl: doc.preSignedUrl,
|
||||
isActive: doc.isActive ?? true,
|
||||
}))
|
||||
fileName: doc.fileName,
|
||||
base64Data: null,
|
||||
contentType: doc.contentType,
|
||||
documentId: doc.id,
|
||||
fileSize: 0,
|
||||
description: "",
|
||||
preSignedUrl: doc.preSignedUrl,
|
||||
isActive: doc.isActive ?? true,
|
||||
}))
|
||||
: [],
|
||||
});
|
||||
}
|
||||
@ -266,9 +268,9 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
shouldDirty: true,
|
||||
shouldValidate: true,
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
disabled={
|
||||
disabled={
|
||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||
}
|
||||
/>
|
||||
@ -281,33 +283,33 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
||||
Expense Category
|
||||
</Label>
|
||||
<select
|
||||
className="form-select "
|
||||
id="expenseCategoryId"
|
||||
{...register("expenseCategoryId")}
|
||||
disabled={
|
||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||
}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Select Category
|
||||
</option>
|
||||
{ExpenseLoading ? (
|
||||
<option disabled>Loading...</option>
|
||||
) : (
|
||||
expenseCategories?.map((expense) => (
|
||||
<option key={expense.id} value={expense.id}>
|
||||
{expense.name}
|
||||
</option>
|
||||
))
|
||||
|
||||
<AppFormController
|
||||
name="expenseCategoryId"
|
||||
control={control}
|
||||
rules={{ required: "Expense Category is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already above
|
||||
placeholder="Select Category"
|
||||
options={expenseCategories ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={ExpenseLoading}
|
||||
isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.expenseCategoryId && (
|
||||
<small className="danger-text">
|
||||
{errors.expenseCategoryId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Title and Advance Payment */}
|
||||
@ -458,30 +460,39 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
<Label htmlFor="currencyId" className="form-label" required>
|
||||
Currency
|
||||
</Label>
|
||||
<select
|
||||
id="currencyId"
|
||||
className="form-select "
|
||||
{...register("currencyId")}
|
||||
disabled={
|
||||
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
|
||||
}
|
||||
>
|
||||
<option value="">Select Currency</option>
|
||||
|
||||
{currencyLoading && <option>Loading...</option>}
|
||||
<AppFormController
|
||||
name="currencyId"
|
||||
control={control}
|
||||
rules={{ required: "Currency is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already above
|
||||
placeholder="Select Currency"
|
||||
options={currencyData?.map((currency) => ({
|
||||
id: currency.id,
|
||||
name: `${currency.currencyName} (${currency.symbol})`,
|
||||
})) ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={currencyLoading}
|
||||
isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
|
||||
noOptionsMessage={() =>
|
||||
!currencyLoading && !currencyError && (!currencyData || currencyData.length === 0)
|
||||
? "No currency found"
|
||||
: null
|
||||
}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{!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>
|
||||
|
||||
{/* Description */}
|
||||
@ -508,7 +519,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
</div>
|
||||
|
||||
{/* Upload Document */}
|
||||
<div className="row my-2 text-start">
|
||||
<div className="row my-4 text-start">
|
||||
<div className="col-md-12">
|
||||
<Label className="form-label">Upload Bill </Label>
|
||||
|
||||
@ -559,7 +570,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
(fileError?.fileSize?.message ||
|
||||
fileError?.contentType?.message ||
|
||||
fileError?.base64Data?.message,
|
||||
fileError?.documentId?.message)
|
||||
fileError?.documentId?.message)
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
@ -582,8 +593,8 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||
{createPending || isPending
|
||||
? "Please Wait..."
|
||||
: requestToEdit
|
||||
? "Update"
|
||||
: "Save as Draft"}
|
||||
? "Update"
|
||||
: "Save as Draft"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -18,6 +18,8 @@ import {
|
||||
import eventBus from "../../services/eventBus";
|
||||
import { useCreateTask } from "../../hooks/useTasks";
|
||||
import Label from "../common/Label";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const TaskSchema = (maxPlanned) => {
|
||||
return z.object({
|
||||
@ -128,8 +130,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
const handleCheckboxChange = (event, user) => {
|
||||
const updatedSelectedEmployees = event.target.checked
|
||||
? [...(watch("selectedEmployees") || []), user.id].filter(
|
||||
(v, i, a) => a.indexOf(v) === i
|
||||
)
|
||||
(v, i, a) => a.indexOf(v) === i
|
||||
)
|
||||
: (watch("selectedEmployees") || []).filter((id) => id !== user.id);
|
||||
|
||||
setValue("selectedEmployees", updatedSelectedEmployees);
|
||||
@ -241,48 +243,57 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
<div className="row mb-1">
|
||||
<div className="col-12">
|
||||
<div className="row text-start">
|
||||
<div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center">
|
||||
<div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center mt-4">
|
||||
<div>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={selectedOrganization || ""}
|
||||
onChange={(e) =>
|
||||
setSelectedOrganization(e.target.value)
|
||||
}
|
||||
>
|
||||
{isServiceLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">--Select Organization--</option>
|
||||
{organizationList?.map((org,index) => (
|
||||
<option key={`${org.id}-${index}`} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
<AppFormController
|
||||
name="organizationId"
|
||||
control={control}
|
||||
rules={{ required: "Organization is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // No label here, use external label if needed
|
||||
options={organizationList ?? []}
|
||||
placeholder="--Select Organization--"
|
||||
required
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
isLoading={isServiceLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.organizationId && (
|
||||
<small className="danger-text">{errors.organizationId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={selectedService || ""}
|
||||
onChange={(e) => setSelectedService(e.target.value)}
|
||||
>
|
||||
{isOrgLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">--Select Service--</option>
|
||||
{serviceList?.map((service,index) => (
|
||||
<option key={`${service.id}-${index}`} value={service.id}>
|
||||
{service.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
<AppFormController
|
||||
name="serviceId"
|
||||
control={control}
|
||||
rules={{ required: "Service is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // No label as you have one above or elsewhere
|
||||
options={serviceList ?? []}
|
||||
placeholder="--Select Service--"
|
||||
required
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
isLoading={isOrgLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.serviceId && (
|
||||
<small className="danger-text">{errors.serviceId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -292,12 +303,11 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
{/* Dropdown */}
|
||||
<div className="dropdown position-relative d-inline-block">
|
||||
<a
|
||||
className={`dropdown-toggle hide-arrow cursor-pointer ${
|
||||
selectedRoles.includes("all") ||
|
||||
className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") ||
|
||||
selectedRoles.length === 0
|
||||
? "text-secondary"
|
||||
: "text-primary"
|
||||
}`}
|
||||
? "text-secondary"
|
||||
: "text-primary"
|
||||
}`}
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<i className="bx bx-slider-alt ms-2"></i>
|
||||
@ -409,7 +419,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
<p className="text-center">Loading employees...</p>
|
||||
</div>
|
||||
) : filteredEmployees?.length > 0 ? (
|
||||
filteredEmployees.map((emp,index) => {
|
||||
filteredEmployees.map((emp, index) => {
|
||||
const jobRole = jobRoleData?.find(
|
||||
(role) => role?.id === emp?.jobRoleId
|
||||
);
|
||||
@ -479,14 +489,14 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
{watch("selectedEmployees")?.length > 0 && (
|
||||
<div className="mt-1">
|
||||
<div className="text-start px-2">
|
||||
{watch("selectedEmployees")?.map((empId,ind) => {
|
||||
{watch("selectedEmployees")?.map((empId, ind) => {
|
||||
const emp = employees?.data?.find(
|
||||
(emp) => emp.id === empId
|
||||
);
|
||||
return (
|
||||
emp && (
|
||||
<span
|
||||
key={`${empId}-${ind}`}
|
||||
key={`${empId}-${ind}`}
|
||||
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
|
||||
>
|
||||
{emp.firstName} {emp.lastName}
|
||||
|
||||
@ -3,11 +3,11 @@ import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useSelector } from "react-redux";
|
||||
import { getCachedData } from "../../../slices/apiDataManager";
|
||||
import showToast from "../../../services/toastService";
|
||||
import { useManageProjectInfra } from "../../../hooks/useProjects";
|
||||
import useSelect from "../../common/useSelect";
|
||||
import Label from "../../common/Label";
|
||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../../common/Forms/SelectField";
|
||||
|
||||
const buildingSchema = z.object({
|
||||
Id: z.string().optional(),
|
||||
@ -22,14 +22,8 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
watch,
|
||||
reset,
|
||||
} = useForm({
|
||||
|
||||
const methods = useForm({
|
||||
resolver: zodResolver(buildingSchema),
|
||||
defaultValues: {
|
||||
Id: "0",
|
||||
@ -37,12 +31,23 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
||||
description: "",
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
watch,
|
||||
reset,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = methods;
|
||||
|
||||
const watchedId = watch("Id");
|
||||
|
||||
const { mutate: ManageBuilding, isPending } = useManageProjectInfra({
|
||||
onSuccessCallback: (data, variables) => {
|
||||
onSuccessCallback: () => {
|
||||
showToast(
|
||||
watchedId != "0"
|
||||
watchedId !== "0"
|
||||
? "Building updated Successfully"
|
||||
: "Building created Successfully",
|
||||
"success"
|
||||
@ -79,7 +84,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
||||
description: editingBuilding.description,
|
||||
});
|
||||
}
|
||||
}, [editingBuilding]);
|
||||
}, [editingBuilding, reset]);
|
||||
|
||||
const onSubmitHandler = (data) => {
|
||||
const payload = {
|
||||
@ -88,95 +93,109 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
|
||||
projectId: selectedProject,
|
||||
};
|
||||
|
||||
let infraObject = [
|
||||
const infraObject = [
|
||||
{
|
||||
building: payload,
|
||||
floor: null,
|
||||
workArea: null,
|
||||
},
|
||||
];
|
||||
|
||||
ManageBuilding({ infraObject, projectId: selectedProject });
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
|
||||
<h5 className="text-center mb-2">Manage Buildings</h5>
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Select Building</label>
|
||||
<select
|
||||
{...register("Id")}
|
||||
className="select2 form-select form-select-sm"
|
||||
>
|
||||
<option value="0">Add New Building</option>
|
||||
{sortedBuildings.length > 0 ? (
|
||||
sortedBuildings.map((b) => (
|
||||
<option key={b.id} value={b.id}>
|
||||
{b.buildingName}
|
||||
</option>
|
||||
))
|
||||
) : (
|
||||
<option disabled>No buildings found</option>
|
||||
<AppFormProvider {...methods}>
|
||||
<form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
|
||||
<h5 className="text-center mb-2">Manage Buildings</h5>
|
||||
|
||||
{/* Building Select */}
|
||||
<div className="col-12 text-start">
|
||||
<Label htmlFor="Id" className="form-label">
|
||||
Select Building
|
||||
</Label>
|
||||
<AppFormController
|
||||
name="Id"
|
||||
control={control}
|
||||
rules={{ required: "Building is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label=""
|
||||
placeholder="Select Building"
|
||||
options={[
|
||||
{ id: "0", name: "Add New Building" },
|
||||
...(sortedBuildings?.map((b) => ({
|
||||
id: String(b.id),
|
||||
name: b.buildingName,
|
||||
})) ?? []),
|
||||
]}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
noOptionsMessage={() =>
|
||||
!sortedBuildings || sortedBuildings.length === 0
|
||||
? "No buildings found"
|
||||
: null
|
||||
}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.Id && <span className="danger-text">{errors.Id.message}</span>}
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
{watchedId !== "0" ? "Rename Building Name" : "New Building Name"}
|
||||
</Label>
|
||||
<input
|
||||
{...register("name")}
|
||||
type="text"
|
||||
className="form-control "
|
||||
/>
|
||||
{errors.name && <span className="danger-text">{errors.name.message}</span>}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
Description
|
||||
</Label>
|
||||
<textarea
|
||||
{...register("description")}
|
||||
rows="5"
|
||||
maxLength="160"
|
||||
className="form-control "
|
||||
/>
|
||||
{errors.description && (
|
||||
<span className="danger-text">{errors.description.message}</span>
|
||||
)}
|
||||
</select>
|
||||
{errors.Id && <span className="danger-text">{errors.Id.message}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
{watchedId !== "0" ? "Rename Building Name" : "New Building Name"}
|
||||
</Label>
|
||||
<input
|
||||
{...register("name")}
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
/>
|
||||
{errors.name && (
|
||||
<span className="danger-text">{errors.name.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>Description</Label>
|
||||
<textarea
|
||||
{...register("description")}
|
||||
rows="5"
|
||||
maxLength="160"
|
||||
className="form-control form-control-sm"
|
||||
/>
|
||||
{errors.description && (
|
||||
<span className="danger-text">{errors.description.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
disabled={isPending}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
reset();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending
|
||||
? "Please wait..."
|
||||
: watchedId !== "0"
|
||||
? "Edit Building"
|
||||
: "Add Building"}
|
||||
</button>
|
||||
|
||||
|
||||
</div>
|
||||
</form>
|
||||
{/* Buttons */}
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
disabled={isPending}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
reset();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
|
||||
{isPending
|
||||
? "Please wait..."
|
||||
: watchedId !== "0"
|
||||
? "Edit Building"
|
||||
: "Add Building"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</AppFormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -6,6 +6,8 @@ import showToast from "../../../services/toastService";
|
||||
import { useManageProjectInfra } from "../../../hooks/useProjects";
|
||||
import { useSelector } from "react-redux";
|
||||
import Label from "../../common/Label";
|
||||
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../../common/Forms/SelectField";
|
||||
|
||||
// Schema
|
||||
const floorSchema = z.object({
|
||||
@ -27,17 +29,12 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
||||
);
|
||||
const [selectedBuilding, setSelectedBuilding] = useState(null);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
reset,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useForm({
|
||||
const methods = useForm({
|
||||
defaultValues,
|
||||
resolver: zodResolver(floorSchema),
|
||||
});
|
||||
|
||||
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
|
||||
const watchId = watch("id");
|
||||
const watchBuildingId = watch("buildingId");
|
||||
const { mutate: ManageFloor, isPending } = useManageProjectInfra({
|
||||
@ -48,7 +45,7 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
||||
: "Floor created Successfully",
|
||||
"success"
|
||||
);
|
||||
reset({ id: "0", floorName: ""});
|
||||
reset({ id: "0", floorName: "" });
|
||||
// onClose?.();
|
||||
},
|
||||
});
|
||||
@ -98,94 +95,128 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
|
||||
<div className="text-center mb-1">
|
||||
<h5 className="mb-1">Manage Floor</h5>
|
||||
</div>
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>Select Building</Label>
|
||||
<select
|
||||
{...register("buildingId")}
|
||||
className="form-select form-select-sm"
|
||||
onChange={handleBuildingChange}
|
||||
>
|
||||
<option value="0">Select Building</option>
|
||||
{project?.length > 0 &&
|
||||
project
|
||||
.filter((b) => b.buildingName)
|
||||
.sort((a, b) => a.buildingName.localeCompare(b.buildingName))
|
||||
.map((b) => (
|
||||
<option key={b.id} value={b.id}>
|
||||
{b.buildingName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{errors.buildingId && (
|
||||
<p className="danger-text">{errors.buildingId.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{watchBuildingId !== "0" && (
|
||||
<>
|
||||
<div className="col-12 text-start">
|
||||
<label className="form-label">Select Floor</label>
|
||||
<select
|
||||
{...register("id")}
|
||||
className="form-select form-select-sm"
|
||||
onChange={handleFloorChange}
|
||||
>
|
||||
<option value="0">Add New Floor</option>
|
||||
{selectedBuilding?.floors?.length > 0 &&
|
||||
selectedBuilding.floors
|
||||
.filter((f) => f.floorName)
|
||||
.sort((a, b) => a.floorName.localeCompare(b.floorName))
|
||||
.map((f) => (
|
||||
<option key={f.id} value={f.id}>
|
||||
{f.floorName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
{watchId !== "0" ? "Edit Floor Name" : "New Floor Name"}
|
||||
</Label>
|
||||
<input
|
||||
{...register("floorName")}
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Floor Name"
|
||||
/>
|
||||
{errors.floorName && (
|
||||
<p className="danger-text">{errors.floorName.message}</p>
|
||||
<AppFormProvider {...methods}>
|
||||
<form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
|
||||
<div className="text-center mb-1">
|
||||
<h5 className="mb-1">Manage Floor</h5>
|
||||
</div>
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
Select Building
|
||||
</Label>
|
||||
<AppFormController
|
||||
name="buildingId"
|
||||
control={control}
|
||||
rules={{ required: "Building is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label=""
|
||||
placeholder="Select Building"
|
||||
options={
|
||||
project
|
||||
?.filter((b) => b.buildingName)
|
||||
.sort((a, b) => a.buildingName.localeCompare(b.buildingName))
|
||||
.map((b) => ({ id: String(b.id), name: b.buildingName })) ?? []
|
||||
}
|
||||
value={field.value || ""}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
setValue("id", "0");
|
||||
setValue("floorName", "");
|
||||
}}
|
||||
required
|
||||
noOptionsMessage={() => (!project || project.length === 0 ? "No buildings found" : null)}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{errors.buildingId && <p className="danger-text">{errors.buildingId.message}</p>}
|
||||
</div>
|
||||
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
disabled={isPending}
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending
|
||||
? "Please Wait"
|
||||
: watchId !== "0"
|
||||
? "Edit Floor"
|
||||
: "Add Floor"}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
{watchBuildingId !== "0" && (
|
||||
<>
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label">
|
||||
Select Floor
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="id"
|
||||
control={control}
|
||||
rules={{ required: "Floor is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is already above
|
||||
placeholder="Select Floor"
|
||||
options={[
|
||||
{ id: "0", name: "Add New Floor" },
|
||||
...(selectedBuilding?.floors
|
||||
?.filter((f) => f.floorName)
|
||||
.sort((a, b) => a.floorName.localeCompare(b.floorName))
|
||||
.map((f) => ({ id: f.id, name: f.floorName })) ?? []),
|
||||
]}
|
||||
value={field.value || ""}
|
||||
onChange={(value) => {
|
||||
field.onChange(value);
|
||||
handleFloorChange?.(value);
|
||||
}}
|
||||
required
|
||||
noOptionsMessage={() =>
|
||||
!selectedBuilding?.floors || selectedBuilding.floors.length === 0
|
||||
? "No floors found"
|
||||
: null
|
||||
}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{errors.id && (
|
||||
<span className="danger-text">{errors.id.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-12 text-start">
|
||||
<Label className="form-label" required>
|
||||
{watchId !== "0" ? "Edit Floor Name" : "New Floor Name"}
|
||||
</Label>
|
||||
<input
|
||||
{...register("floorName")}
|
||||
className="form-control"
|
||||
placeholder="Floor Name"
|
||||
/>
|
||||
{errors.floorName && (
|
||||
<p className="danger-text">{errors.floorName.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="col-12 text-end mt-6 my-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-label-secondary me-3"
|
||||
disabled={isPending}
|
||||
onClick={onClose}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isPending}
|
||||
>
|
||||
{isPending
|
||||
? "Please Wait"
|
||||
: watchId !== "0"
|
||||
? "Edit Floor"
|
||||
: "Add Floor"}
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</AppFormProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -17,6 +17,8 @@ import {
|
||||
useOrganizationsList,
|
||||
} from "../../hooks/useOrganization";
|
||||
import { localToUtc } from "../../utils/appUtils";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const currentDate = new Date().toLocaleDateString("en-CA");
|
||||
const formatDate = (date) => {
|
||||
@ -42,8 +44,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
1,
|
||||
true
|
||||
);
|
||||
const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
|
||||
const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
|
||||
const { mutate: UpdateProject, isPending } = useUpdateProject(() => { onClose?.() });
|
||||
const { mutate: CeateProject, isPending: isCreating } = useCreateProject(() => { onClose?.() })
|
||||
|
||||
const {
|
||||
register,
|
||||
@ -74,7 +76,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
pmcId: projects_Details?.pmc?.id || "",
|
||||
});
|
||||
setAddressLength(projects_Details?.projectAddress?.length || 0);
|
||||
}, [project, projects_Details, reset,data]);
|
||||
}, [project, projects_Details, reset, data]);
|
||||
|
||||
const onSubmitForm = (formData) => {
|
||||
if (project) {
|
||||
@ -85,8 +87,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
id: project,
|
||||
};
|
||||
UpdateProject({ projectId: project, payload: payload });
|
||||
}else{
|
||||
let payload = {
|
||||
} else {
|
||||
let payload = {
|
||||
...formData,
|
||||
startDate: localToUtc(formData.startDate),
|
||||
endDate: localToUtc(formData.endDate),
|
||||
@ -122,7 +124,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
placeholder="Project Name"
|
||||
{...register("name")}
|
||||
/>
|
||||
@ -143,7 +145,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
type="text"
|
||||
id="shortName"
|
||||
name="shortName"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
placeholder="Short Name"
|
||||
{...register("shortName")}
|
||||
/>
|
||||
@ -164,7 +166,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
type="text"
|
||||
id="contactPerson"
|
||||
name="contactPerson"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
placeholder="Contact Person"
|
||||
maxLength={50}
|
||||
{...register("contactPerson")}
|
||||
@ -190,6 +192,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
placeholder="DD-MM-YYYY"
|
||||
maxDate={new Date()} // optional: restrict future dates
|
||||
className="w-100"
|
||||
size="md"
|
||||
/>
|
||||
|
||||
{errors.startDate && (
|
||||
@ -213,6 +216,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
placeholder="DD-MM-YYYY"
|
||||
minDate={getValues("startDate")} // optional: restrict future dates
|
||||
className="w-100"
|
||||
size="md"
|
||||
/>
|
||||
|
||||
{errors.endDate && (
|
||||
@ -225,104 +229,109 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 ">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
<div className="col-12">
|
||||
<Label htmlFor="modalEditUserStatus" className="form-label">
|
||||
Status
|
||||
</label>
|
||||
<select
|
||||
id="modalEditUserStatus"
|
||||
name="modalEditUserStatus"
|
||||
className="select2 form-select form-select-sm"
|
||||
aria-label="Default select example"
|
||||
{...register("projectStatusId", {
|
||||
required: "Status is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{PROJECT_STATUS.map((status) => (
|
||||
<option key={status.id} value={status.id}>
|
||||
{status.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="projectStatusId"
|
||||
control={control}
|
||||
rules={{ required: "Status is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is already above
|
||||
placeholder="Select Status"
|
||||
options={PROJECT_STATUS?.map((status) => ({
|
||||
id: status.id,
|
||||
name: status.label,
|
||||
})) ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{errors.projectStatusId && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
{errors.projectStatusId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 ">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
|
||||
<div className="col-12 mt-n1">
|
||||
<Label htmlFor="promoterId" className="form-label">
|
||||
Promoter
|
||||
</label>
|
||||
<select
|
||||
className="select2 form-select form-select-sm"
|
||||
aria-label="Default select example"
|
||||
{...register("promoterId", {
|
||||
required: "Promoter is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{isLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select Promoter</option>
|
||||
{data?.data?.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="promoterId"
|
||||
control={control}
|
||||
rules={{ required: "Promoter is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is already above
|
||||
placeholder="Select Promoter"
|
||||
options={data?.data ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={isLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
noOptionsMessage={() =>
|
||||
!isLoading && (!data?.data || data.data.length === 0)
|
||||
? "No promoters found"
|
||||
: null
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.promoterId && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
{errors.promoterId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 ">
|
||||
<label className="form-label" htmlFor="modalEditUserStatus">
|
||||
|
||||
<div className="col-12 mt-n1">
|
||||
<Label htmlFor="pmcId" className="form-label">
|
||||
PMC
|
||||
</label>
|
||||
<select
|
||||
className="select2 form-select form-select-sm"
|
||||
aria-label="Default select example"
|
||||
{...register("pmcId", {
|
||||
required: "Promoter is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{isLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select PMC</option>
|
||||
{data?.data?.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
</Label>
|
||||
|
||||
<AppFormController
|
||||
name="pmcId"
|
||||
control={control}
|
||||
rules={{ required: "PMC is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is already above
|
||||
placeholder="Select PMC"
|
||||
options={data?.data ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={isLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
noOptionsMessage={() =>
|
||||
!isLoading && (!data?.data || data.data.length === 0)
|
||||
? "No PMC found"
|
||||
: null
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.pmcId && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
|
||||
{errors.pmcId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
|
||||
|
||||
<div className="d-flex justify-content-between text-secondary text-tiny text-wrap mt-n1">
|
||||
<span>
|
||||
<i className="bx bx-sm bx-info-circle"></i> Not found PMC and
|
||||
Pomoter, find through SPRID or create new
|
||||
@ -376,7 +385,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={isPending || isCreating || loading}
|
||||
>
|
||||
{isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
|
||||
{isPending || isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -28,6 +28,8 @@ import { useEmployeesName } from "../../hooks/useEmployees";
|
||||
import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
|
||||
import HoverPopup from "../common/HoverPopup";
|
||||
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
const {
|
||||
@ -200,30 +202,32 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<Label htmlFor="expenseCategoryId" className="form-label" required>
|
||||
Expense Category
|
||||
</Label>
|
||||
<select
|
||||
className="form-select"
|
||||
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>
|
||||
))
|
||||
|
||||
<AppFormController
|
||||
name="expenseCategoryId"
|
||||
control={control}
|
||||
rules={{ required: "Expense Category is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is already above
|
||||
placeholder="Select Category"
|
||||
options={expenseCategories ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={ExpenseLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.expenseCategoryId && (
|
||||
<small className="danger-text">
|
||||
{errors.expenseCategoryId.message}
|
||||
</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Title and Is Variable */}
|
||||
@ -375,34 +379,45 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
<Label htmlFor="currencyId" className="form-label" required>
|
||||
Currency
|
||||
</Label>
|
||||
<select
|
||||
id="currencyId"
|
||||
className="form-select"
|
||||
{...register("currencyId")}
|
||||
>
|
||||
<option value="">Select Currency</option>
|
||||
|
||||
{currencyLoading && <option>Loading...</option>}
|
||||
<AppFormController
|
||||
name="currencyId"
|
||||
control={control}
|
||||
rules={{ required: "Currency is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already shown above
|
||||
placeholder="Select Currency"
|
||||
options={currencyData?.map((currency) => ({
|
||||
id: currency.id,
|
||||
name: `${currency.currencyName} (${currency.symbol})`,
|
||||
})) ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={currencyLoading}
|
||||
noOptionsMessage={() =>
|
||||
!currencyLoading && !currencyError && (!currencyData || currencyData.length === 0)
|
||||
? "No currency found"
|
||||
: null
|
||||
}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{!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 mt-n2">
|
||||
<div className="col-md-6">
|
||||
<div className="d-flex justify-content-start align-items-center gap-2">
|
||||
<Label htmlFor="frequency" className="form-label mb-0" required>
|
||||
<Label htmlFor="frequency" className="form-label mb-1" required>
|
||||
Frequency
|
||||
</Label>
|
||||
<HoverPopup
|
||||
@ -415,51 +430,69 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
</p>
|
||||
}
|
||||
>
|
||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
|
||||
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer mb-1"></i>
|
||||
</HoverPopup>
|
||||
</div>
|
||||
|
||||
<select
|
||||
id="frequency"
|
||||
className="form-select mt-1"
|
||||
{...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>
|
||||
<AppFormController
|
||||
name="frequency"
|
||||
control={control}
|
||||
rules={{ required: "Frequency is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label shown above
|
||||
placeholder="Select Frequency"
|
||||
options={Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => ({
|
||||
id: key,
|
||||
name: label,
|
||||
}))}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
className="m-0 mt-1"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{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"
|
||||
{...register("statusId")}
|
||||
>
|
||||
<option value="">Select Status</option>
|
||||
{statusLoading && <option>Loading...</option>}
|
||||
{!statusLoading &&
|
||||
!statusError &&
|
||||
statusData?.map((status) => (
|
||||
<option key={status.id} value={status.id}>
|
||||
{status.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<AppFormController
|
||||
name="statusId"
|
||||
control={control}
|
||||
rules={{ required: "Status is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already shown above
|
||||
placeholder="Select Status"
|
||||
options={statusData ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={statusLoading}
|
||||
noOptionsMessage={() =>
|
||||
!statusLoading && !statusError && (!statusData || statusData.length === 0)
|
||||
? "No status found"
|
||||
: null
|
||||
}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{errors.statusId && (
|
||||
<small className="danger-text">{errors.statusId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Payment Buffer Days and End Date */}
|
||||
@ -564,7 +597,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="row my-2 text-start">
|
||||
<div className="row my-4 text-start">
|
||||
<div className="col-md-12">
|
||||
<Label htmlFor="description" className="form-label" required>
|
||||
Description
|
||||
|
||||
@ -23,6 +23,8 @@ import {
|
||||
useServiceProject,
|
||||
useUpdateServiceProject,
|
||||
} from "../../hooks/useServiceProject";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
const {
|
||||
@ -117,51 +119,54 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
</div>
|
||||
<div className="row text-start">
|
||||
<div className="col-12 mb-2">
|
||||
<Label htmlFor="name" required>
|
||||
<Label htmlFor="clientId" required>
|
||||
Client
|
||||
</Label>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<select
|
||||
className="select2 form-select form-select-sm flex-grow-1"
|
||||
aria-label="Default select example"
|
||||
{...register("clientId", {
|
||||
required: "Client is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{isLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select Client</option>
|
||||
{organization?.data?.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
|
||||
<div className="d-flex align-items-center gap-2 w-100">
|
||||
<div className="flex-grow-1" style={{ minWidth: "250px" }}>
|
||||
<AppFormController
|
||||
name="clientId"
|
||||
control={control}
|
||||
rules={{ required: "Client is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label=""
|
||||
options={organization?.data ?? []}
|
||||
placeholder="Select Client"
|
||||
required
|
||||
labelKeyKey="name"
|
||||
valueKeyKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
isLoading={isLoading}
|
||||
className="m-0 w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<i
|
||||
className="bx bx-plus-circle bx-xs cursor-pointer text-primary"
|
||||
className="bx bx-plus-circle bx-xs cursor-pointer text-primary mt-n3"
|
||||
onClick={() => {
|
||||
onClose();
|
||||
openOrgModal({ startStep: 2 }); // Step 4 = ManagOrg
|
||||
openOrgModal({ startStep: 2 });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errors?.clientId && (
|
||||
<span className="danger-text">{errors.clientId.message}</span>
|
||||
<small className="danger-text">{errors.clientId.message}</small>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 mb-2">
|
||||
<div className="col-12 mb-4">
|
||||
<Label htmlFor="name" required>
|
||||
Project Name
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register("name")}
|
||||
placeholder="Enter Project Name.."
|
||||
/>
|
||||
@ -175,7 +180,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register("shortName")}
|
||||
placeholder="Enter Project Short Name.."
|
||||
/>
|
||||
@ -184,23 +189,37 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="name" required>
|
||||
<Label htmlFor="statusId" required>
|
||||
Select Status
|
||||
</Label>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("statusId")}
|
||||
>
|
||||
<option>Select Service</option>
|
||||
{PROJECT_STATUS?.map((status) => (
|
||||
<option key={status.id} value={status.id}>{status.label}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<AppFormController
|
||||
name="statusId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // label already above
|
||||
options={PROJECT_STATUS?.map((status) => ({
|
||||
id: status.id,
|
||||
name: status.label,
|
||||
}))}
|
||||
placeholder="Select Status"
|
||||
required
|
||||
labelKey="name"
|
||||
valueKey="id"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
className="form-select w-100"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{errors?.statusId && (
|
||||
<span className="danger-text">{errors.statusId.message}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 mb-2">
|
||||
|
||||
<div className="col-12 mb-4">
|
||||
<SelectMultiple
|
||||
options={data?.data}
|
||||
isLoading={isLoading}
|
||||
@ -214,15 +233,15 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<div className="col-12 col-md-6 mb-4">
|
||||
<Label htmlFor="name" required>
|
||||
Contact Person
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register("contactName")}
|
||||
placeholder="Enter Employee name.."
|
||||
placeholder="Enter Employee name.."
|
||||
/>
|
||||
{errors?.contactName && (
|
||||
<span className="danger-text">{errors.contactName.message}</span>
|
||||
@ -234,7 +253,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register("contactEmail")}
|
||||
placeholder="Enter Employee Email.."
|
||||
/>
|
||||
@ -242,14 +261,14 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
<span className="danger-text">{errors.contactEmail.message}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<div className="col-12 col-md-6 mb-4">
|
||||
<Label htmlFor="name" required>
|
||||
Contact Number
|
||||
</Label>
|
||||
<input
|
||||
type="text"
|
||||
maxLength={10}
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register("contactPhone")}
|
||||
placeholder="Enter Employee Contact.."
|
||||
onInput={(e) => {
|
||||
@ -268,6 +287,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
|
||||
name="assignedDate"
|
||||
className="w-100"
|
||||
control={control}
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 col-md-12 mb-2">
|
||||
|
||||
@ -12,6 +12,8 @@ import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
||||
import Avatar from "../common/Avatar";
|
||||
import { PaymentHistorySkeleton } from "./CollectionSkeleton";
|
||||
import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const AddPayment = ({ onClose }) => {
|
||||
const { addPayment } = useCollectionContext();
|
||||
@ -60,7 +62,7 @@ const AddPayment = ({ onClose }) => {
|
||||
<Label required>TransanctionId</Label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register("transactionId")}
|
||||
/>
|
||||
{errors.transactionId && (
|
||||
@ -78,10 +80,10 @@ const AddPayment = ({ onClose }) => {
|
||||
minDate={
|
||||
data?.clientSubmitedDate
|
||||
? new Date(
|
||||
new Date(data?.clientSubmitedDate).setDate(
|
||||
new Date(data?.clientSubmitedDate).getDate() + 1
|
||||
)
|
||||
new Date(data?.clientSubmitedDate).setDate(
|
||||
new Date(data?.clientSubmitedDate).getDate() + 1
|
||||
)
|
||||
)
|
||||
: null
|
||||
}
|
||||
maxDate={new Date()}
|
||||
@ -93,33 +95,30 @@ const AddPayment = ({ onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label
|
||||
htmlFor="paymentAdjustmentHeadId"
|
||||
className="form-label"
|
||||
required
|
||||
>
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label htmlFor="paymentAdjustmentHeadId" className="form-label" required>
|
||||
Payment Adjustment Head
|
||||
</Label>
|
||||
<select
|
||||
className="form-select form-select-sm "
|
||||
{...register("paymentAdjustmentHeadId")}
|
||||
>
|
||||
{isPaymentTypeLoading ? (
|
||||
<option>Loading..</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select Payment Head</option>
|
||||
{paymentTypes?.data
|
||||
?.sort((a, b) => a.name.localeCompare(b.name))
|
||||
?.map((type) => (
|
||||
<option key={type.id} value={type.id}>
|
||||
{type.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
|
||||
<AppFormController
|
||||
name="paymentAdjustmentHeadId"
|
||||
control={control}
|
||||
rules={{ required: "Payment Adjustment Head is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label is already above
|
||||
placeholder="Select Payment Head"
|
||||
options={paymentTypes?.data
|
||||
?.sort((a, b) => a.name.localeCompare(b.name)) ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={isPaymentTypeLoading}
|
||||
className="m-0 form-select-sm w-100"
|
||||
/>
|
||||
)}
|
||||
</select>
|
||||
/>
|
||||
|
||||
{errors.paymentAdjustmentHeadId && (
|
||||
<small className="danger-text">
|
||||
{errors.paymentAdjustmentHeadId.message}
|
||||
@ -127,6 +126,7 @@ const AddPayment = ({ onClose }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label htmlFor="amount" className="form-label" required>
|
||||
Amount
|
||||
@ -134,7 +134,7 @@ const AddPayment = ({ onClose }) => {
|
||||
<input
|
||||
type="number"
|
||||
id="amount"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
min="1"
|
||||
step="0.01"
|
||||
inputMode="decimal"
|
||||
@ -150,7 +150,7 @@ const AddPayment = ({ onClose }) => {
|
||||
</Label>
|
||||
<textarea
|
||||
id="comment"
|
||||
className="form-control form-control-sm"
|
||||
className="form-control "
|
||||
{...register("comment")}
|
||||
/>
|
||||
{errors.comment && (
|
||||
|
||||
@ -19,6 +19,8 @@ import { formatDate } from "../../utils/dateUtils";
|
||||
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
import { useOrganizationsList } from "../../hooks/useOrganization";
|
||||
import { AppFormController } from "../../hooks/appHooks/useAppForm";
|
||||
import SelectField from "../common/Forms/SelectField";
|
||||
|
||||
const ManageCollection = ({ collectionId, onClose }) => {
|
||||
const { data, isError, isLoading, error } = useCollection(collectionId);
|
||||
@ -189,37 +191,34 @@ const ManageCollection = ({ collectionId, onClose }) => {
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label htmlFor="name" required>
|
||||
<Label htmlFor="billedToId" required>
|
||||
Bill To
|
||||
</Label>
|
||||
<div className="d-flex align-items-center gap-2">
|
||||
<select
|
||||
className="select2 form-select form-select flex-grow-1"
|
||||
aria-label="Default select example"
|
||||
{...register("billedToId", {
|
||||
required: "Client is required",
|
||||
valueAsNumber: false,
|
||||
})}
|
||||
>
|
||||
{isLoading ? (
|
||||
<option>Loading...</option>
|
||||
) : (
|
||||
<>
|
||||
<option value="">Select Client</option>
|
||||
{organization?.data?.map((org) => (
|
||||
<option key={org.id} value={org.id}>
|
||||
{org.name}
|
||||
</option>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
{errors?.clientId && (
|
||||
|
||||
<AppFormController
|
||||
name="billedToId"
|
||||
control={control}
|
||||
rules={{ required: "Client is required" }}
|
||||
render={({ field }) => (
|
||||
<SelectField
|
||||
label="" // Label already shown above
|
||||
placeholder="Select Client"
|
||||
options={organization?.data ?? []}
|
||||
value={field.value || ""}
|
||||
onChange={field.onChange}
|
||||
required
|
||||
isLoading={isLoading}
|
||||
className="m-0 flex-grow-1"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
{errors?.billedToId && (
|
||||
<span className="danger-text">{errors.billedToId.message}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="col-12 col-md-6 mb-2">
|
||||
<Label required>Title</Label>
|
||||
<input
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user