Adding cross button in Employee popup.
This commit is contained in:
parent
562a4ca46d
commit
84563812b7
@ -172,8 +172,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
.then((response) => {
|
||||
cacheData("employeeProfileInfo", data);
|
||||
showToast(
|
||||
`Employee details ${
|
||||
data.id == null ? "created" : "updated"
|
||||
`Employee details ${data.id == null ? "created" : "updated"
|
||||
} successfully.`,
|
||||
"success"
|
||||
);
|
||||
@ -207,24 +206,24 @@ 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() || "",
|
||||
}
|
||||
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() || "",
|
||||
}
|
||||
: {} // Empty object resets the form
|
||||
);
|
||||
setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
|
||||
@ -233,410 +232,417 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
{/* <div className="c">
|
||||
|
||||
{/* <div className="c">
|
||||
{!currentEmployee && empLoading && employeeId && (
|
||||
<p>Loading Employee Data...</p>
|
||||
)} */}
|
||||
|
||||
<form onSubmit={handleSubmit( onSubmit )} className="p-sm-5 p-2">
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="p-sm-5 p-2 position-relative">
|
||||
{/* Cross button */}
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close position-absolute top-0 end-0 m-2"
|
||||
aria-label="Close"
|
||||
onClick={onClosed}
|
||||
></button>
|
||||
<div className="text-center"><p className="fs-6 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p></div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4">
|
||||
{" "}
|
||||
<div className="form-text text-start">First Name</div>
|
||||
<input
|
||||
type="text"
|
||||
name="FirstName"
|
||||
{...register("firstName")}
|
||||
className="form-control form-control-sm"
|
||||
id="firstName"
|
||||
placeholder="First Name"
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.firstName.message}
|
||||
</div>
|
||||
)}
|
||||
</div>{" "}
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Middle Name</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4">
|
||||
{" "}
|
||||
<div className="form-text text-start">First Name</div>
|
||||
<input
|
||||
type="text"
|
||||
name="FirstName"
|
||||
{...register("firstName")}
|
||||
className="form-control form-control-sm"
|
||||
id="firstName"
|
||||
placeholder="First Name"
|
||||
/>
|
||||
{errors.firstName && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.firstName.message}
|
||||
</div>
|
||||
)}
|
||||
</div>{" "}
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Middle Name</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
{...register("middleName")}
|
||||
className="form-control form-control-sm"
|
||||
id="middleName"
|
||||
placeholder="Middle Name"
|
||||
/>
|
||||
{errors.middleName && (
|
||||
<div
|
||||
className="danger-text text-start "
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.middleName.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Last Name</div>
|
||||
<input
|
||||
type="text"
|
||||
{...register("lastName")}
|
||||
className="form-control form-control-sm"
|
||||
id="lastName"
|
||||
placeholder="Last Name"
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.lastName.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-6">
|
||||
<div className="form-text text-start">Email</div>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
{...register("email")}
|
||||
className="form-control form-control-sm"
|
||||
placeholder="example@domain.com"
|
||||
maxLength={80}
|
||||
aria-describedby="Email"
|
||||
disabled={!!currentEmployee?.email}
|
||||
/>
|
||||
{errors.email && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.email.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<div className="form-text text-start">Phone Number</div>
|
||||
<input
|
||||
type="text"
|
||||
keyboardType="numeric"
|
||||
id="phoneNumber"
|
||||
{...register("phoneNumber")}
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Phone Number"
|
||||
inputMode="numeric"
|
||||
maxLength={10}
|
||||
/>
|
||||
{errors.phoneNumber && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.phoneNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3"></div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Gender</div>
|
||||
<input
|
||||
type="text"
|
||||
{...register("middleName")}
|
||||
className="form-control form-control-sm"
|
||||
id="middleName"
|
||||
placeholder="Middle Name"
|
||||
/>
|
||||
{errors.middleName && (
|
||||
<div
|
||||
className="danger-text text-start "
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.middleName.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Last Name</div>
|
||||
<input
|
||||
type="text"
|
||||
{...register("lastName")}
|
||||
className="form-control form-control-sm"
|
||||
id="lastName"
|
||||
placeholder="Last Name"
|
||||
/>
|
||||
{errors.lastName && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.lastName.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-6">
|
||||
<div className="form-text text-start">Email</div>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
{...register("email")}
|
||||
className="form-control form-control-sm"
|
||||
placeholder="example@domain.com"
|
||||
maxLength={80}
|
||||
aria-describedby="Email"
|
||||
disabled={!!currentEmployee?.email}
|
||||
/>
|
||||
{errors.email && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.email.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<div className="form-text text-start">Phone Number</div>
|
||||
<input
|
||||
type="text"
|
||||
keyboardType="numeric"
|
||||
id="phoneNumber"
|
||||
{...register("phoneNumber")}
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Phone Number"
|
||||
inputMode="numeric"
|
||||
maxLength={10}
|
||||
/>
|
||||
{errors.phoneNumber && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.phoneNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3"></div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Gender</div>
|
||||
|
||||
<div className="input-group input-group-merge ">
|
||||
<select
|
||||
className="form-select form-select-sm "
|
||||
{...register("gender")}
|
||||
id="gender"
|
||||
aria-label=""
|
||||
>
|
||||
<option disabled value="">
|
||||
Select Gender
|
||||
</option>
|
||||
<option value="Male">Male </option>
|
||||
<option value="Female">Female</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
{errors.gender && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.gender.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Birth Date</div>
|
||||
<div className="input-group input-group-merge ">
|
||||
<select
|
||||
className="form-select form-select-sm "
|
||||
{...register("gender")}
|
||||
id="gender"
|
||||
aria-label=""
|
||||
>
|
||||
<option disabled value="">
|
||||
Select Gender
|
||||
</option>
|
||||
<option value="Male">Male </option>
|
||||
<option value="Female">Female</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
{errors.gender && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.gender.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Birth Date</div>
|
||||
|
||||
<div className="input-group input-group-merge ">
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
type="date"
|
||||
{...register("birthDate")}
|
||||
id="birthDate"
|
||||
/>
|
||||
</div>
|
||||
{errors.birthDate && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.birthDate.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Joining Date</div>
|
||||
<div className="input-group input-group-merge ">
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
type="date"
|
||||
{...register("birthDate")}
|
||||
id="birthDate"
|
||||
/>
|
||||
</div>
|
||||
{errors.birthDate && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.birthDate.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Joining Date</div>
|
||||
|
||||
<div className="input-group input-group-merge ">
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
type="date"
|
||||
{...register("joiningDate")}
|
||||
id="joiningDate"
|
||||
/>
|
||||
</div>
|
||||
{errors.joiningDate && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.joiningDate.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-6">
|
||||
<div className="form-text text-start">Current Address</div>
|
||||
<div className="input-group input-group-merge ">
|
||||
<input
|
||||
className="form-control form-control-sm"
|
||||
type="date"
|
||||
{...register("joiningDate")}
|
||||
id="joiningDate"
|
||||
/>
|
||||
</div>
|
||||
{errors.joiningDate && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.joiningDate.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-6">
|
||||
<div className="form-text text-start">Current Address</div>
|
||||
|
||||
<textarea
|
||||
id="currentAddress"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Current Address"
|
||||
aria-label="Current Address"
|
||||
aria-describedby="basic-icon-default-message2"
|
||||
{...register("currentAddress")}
|
||||
maxLength={500}
|
||||
onChange={(e) => {
|
||||
setCurrentAddressLength(e.target.value.length);
|
||||
// let react-hook-form still handle it
|
||||
register("currentAddress").onChange(e);
|
||||
}}
|
||||
></textarea>
|
||||
<div className="text-end muted">
|
||||
<small>
|
||||
{" "}
|
||||
{500 - currentAddressLength} characters left
|
||||
</small>
|
||||
</div>
|
||||
{errors.currentAddress && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.currentAddress.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<div className="form-text text-start">
|
||||
Permanent Address
|
||||
</div>
|
||||
<textarea
|
||||
id="currentAddress"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Current Address"
|
||||
aria-label="Current Address"
|
||||
aria-describedby="basic-icon-default-message2"
|
||||
{...register("currentAddress")}
|
||||
maxLength={500}
|
||||
onChange={(e) => {
|
||||
setCurrentAddressLength(e.target.value.length);
|
||||
// let react-hook-form still handle it
|
||||
register("currentAddress").onChange(e);
|
||||
}}
|
||||
></textarea>
|
||||
<div className="text-end muted">
|
||||
<small>
|
||||
{" "}
|
||||
{500 - currentAddressLength} characters left
|
||||
</small>
|
||||
</div>
|
||||
{errors.currentAddress && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.currentAddress.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<div className="form-text text-start">
|
||||
Permanent Address
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
id="permanentAddress"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Permanent Address"
|
||||
aria-label="Permanent Address"
|
||||
aria-describedby="basic-icon-default-message2"
|
||||
{...register("permanentAddress")}
|
||||
maxLength={500}
|
||||
onChange={(e) => {
|
||||
setPermanentAddressLength(e.target.value.length);
|
||||
register("permanentAddress").onChange(e);
|
||||
}}
|
||||
></textarea>
|
||||
<div className="text-end muted">
|
||||
<small>
|
||||
{500 - permanentAddressLength} characters left
|
||||
</small>
|
||||
</div>
|
||||
{errors.permanentAddress && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.permanentAddress.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
{" "}
|
||||
<div className="divider">
|
||||
<div className="divider-text">Other Information</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Role</div>
|
||||
<div className="input-group input-group-merge ">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("jobRoleId")}
|
||||
id="jobRoleId"
|
||||
aria-label=""
|
||||
>
|
||||
<option disabled value="">
|
||||
Select Role
|
||||
</option>
|
||||
{[...job_role]
|
||||
.sort((a, b) => a?.name?.localeCompare(b.name))
|
||||
.map((item) => (
|
||||
<option value={item?.id} key={item.id}>
|
||||
{item?.name}{" "}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{errors.jobRoleId && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.jobRoleId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">
|
||||
Emergency Contact Person
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
{...register("emergencyContactPerson")}
|
||||
className="form-control form-control-sm"
|
||||
id="emergencyContactPerson"
|
||||
maxLength={50}
|
||||
placeholder="Contact Person"
|
||||
/>
|
||||
{errors.emergencyContactPerson && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.emergencyContactPerson.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">
|
||||
Emergency Phone Number
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
{...register("emergencyPhoneNumber")}
|
||||
className="form-control form-control-sm phone-mask"
|
||||
id="emergencyPhoneNumber"
|
||||
placeholder="Phone Number"
|
||||
inputMode="numeric"
|
||||
maxLength={10}
|
||||
/>
|
||||
{errors.emergencyPhoneNumber && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.emergencyPhoneNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3 d-none">
|
||||
<div className="col-sm-6">
|
||||
<div className="form-text text-start">AADHAR Number</div>
|
||||
<textarea
|
||||
id="permanentAddress"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Permanent Address"
|
||||
aria-label="Permanent Address"
|
||||
aria-describedby="basic-icon-default-message2"
|
||||
{...register("permanentAddress")}
|
||||
maxLength={500}
|
||||
onChange={(e) => {
|
||||
setPermanentAddressLength(e.target.value.length);
|
||||
register("permanentAddress").onChange(e);
|
||||
}}
|
||||
></textarea>
|
||||
<div className="text-end muted">
|
||||
<small>
|
||||
{500 - permanentAddressLength} characters left
|
||||
</small>
|
||||
</div>
|
||||
{errors.permanentAddress && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.permanentAddress.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
{" "}
|
||||
<div className="divider">
|
||||
<div className="divider-text">Other Information</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3">
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">Role</div>
|
||||
<div className="input-group input-group-merge ">
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
{...register("jobRoleId")}
|
||||
id="jobRoleId"
|
||||
aria-label=""
|
||||
>
|
||||
<option disabled value="">
|
||||
Select Role
|
||||
</option>
|
||||
{[...job_role]
|
||||
.sort((a, b) => a?.name?.localeCompare(b.name))
|
||||
.map((item) => (
|
||||
<option value={item?.id} key={item.id}>
|
||||
{item?.name}{" "}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{errors.jobRoleId && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.jobRoleId.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">
|
||||
Emergency Contact Person
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
{...register("emergencyContactPerson")}
|
||||
className="form-control form-control-sm"
|
||||
id="emergencyContactPerson"
|
||||
maxLength={50}
|
||||
placeholder="Contact Person"
|
||||
/>
|
||||
{errors.emergencyContactPerson && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.emergencyContactPerson.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="form-text text-start">
|
||||
Emergency Phone Number
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
{...register("emergencyPhoneNumber")}
|
||||
className="form-control form-control-sm phone-mask"
|
||||
id="emergencyPhoneNumber"
|
||||
placeholder="Phone Number"
|
||||
inputMode="numeric"
|
||||
maxLength={10}
|
||||
/>
|
||||
{errors.emergencyPhoneNumber && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.emergencyPhoneNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row mb-3 d-none">
|
||||
<div className="col-sm-6">
|
||||
<div className="form-text text-start">AADHAR Number</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
{...register("aadharNumber")}
|
||||
className="form-control form-control-sm"
|
||||
id="aadharNumber"
|
||||
placeholder="AADHAR Number"
|
||||
maxLength={12}
|
||||
inputMode="numeric"
|
||||
/>
|
||||
{errors.aadharNumber && (
|
||||
<div className="danger-text text-start">
|
||||
{errors.aadharNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-6 d-none">
|
||||
<div className="form-text text-start">PAN Number</div>
|
||||
<input
|
||||
type="text"
|
||||
{...register("aadharNumber")}
|
||||
className="form-control form-control-sm"
|
||||
id="aadharNumber"
|
||||
placeholder="AADHAR Number"
|
||||
maxLength={12}
|
||||
inputMode="numeric"
|
||||
/>
|
||||
{errors.aadharNumber && (
|
||||
<div className="danger-text text-start">
|
||||
{errors.aadharNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-sm-6 d-none">
|
||||
<div className="form-text text-start">PAN Number</div>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
{...register("panNumber")}
|
||||
className="form-control form-control-sm"
|
||||
id="panNumber"
|
||||
placeholder="PAN Number"
|
||||
maxLength={10}
|
||||
/>
|
||||
{errors.panNumber && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.panNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
{...register("panNumber")}
|
||||
className="form-control form-control-sm"
|
||||
id="panNumber"
|
||||
placeholder="PAN Number"
|
||||
maxLength={10}
|
||||
/>
|
||||
{errors.panNumber && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.panNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{employeeId && (
|
||||
<div className="row mb-3 d-none">
|
||||
<div className="col-sm-12">
|
||||
<input type="text" name="id" {...register("id")} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{employeeId && (
|
||||
<div className="row mb-3 d-none">
|
||||
<div className="col-sm-12">
|
||||
<input type="text" name="id" {...register("id")} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="row justify-content-start">
|
||||
<div className="col-sm-12">
|
||||
<button
|
||||
aria-label="manage employee"
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isloading}
|
||||
>
|
||||
{isloading
|
||||
? "Please Wait..."
|
||||
: employeeId
|
||||
? "Update"
|
||||
: "Create"}
|
||||
</button>
|
||||
<div className="row justify-content-start">
|
||||
<div className="col-sm-12">
|
||||
<button
|
||||
aria-label="manage employee"
|
||||
type="submit"
|
||||
className="btn btn-sm btn-primary"
|
||||
disabled={isloading}
|
||||
>
|
||||
{isloading
|
||||
? "Please Wait..."
|
||||
: employeeId
|
||||
? "Update"
|
||||
: "Create"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
aria-label="manage employee"
|
||||
type="reset"
|
||||
className="btn btn-sm btn-primary ms-2"
|
||||
disabled={isloading}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<button
|
||||
aria-label="manage employee"
|
||||
type="reset"
|
||||
className="btn btn-sm btn-primary ms-2"
|
||||
disabled={isloading}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user