From 562a4ca46d3deb33109943b56d8b360efeb96a35 Mon Sep 17 00:00:00 2001
From: Kartik sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 30 Jun 2025 16:27:12 +0530
Subject: [PATCH 1/2] "Changes in the employee popup size."

---
 src/components/Employee/ManageEmployee.jsx | 2 +-
 src/pages/Activities/TaskPlannng.jsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Employee/ManageEmployee.jsx b/src/components/Employee/ManageEmployee.jsx
index 7cb4b0f1..58194227 100644
--- a/src/components/Employee/ManageEmployee.jsx
+++ b/src/components/Employee/ManageEmployee.jsx
@@ -239,7 +239,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                 <p>Loading Employee Data...</p>
               )} */}
 
-      <form onSubmit={handleSubmit( onSubmit )} className="p-sm-0 p-2">
+      <form onSubmit={handleSubmit( onSubmit )} className="p-sm-5 p-2">
         <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">
diff --git a/src/pages/Activities/TaskPlannng.jsx b/src/pages/Activities/TaskPlannng.jsx
index d4fcd2a1..d532696e 100644
--- a/src/pages/Activities/TaskPlannng.jsx
+++ b/src/pages/Activities/TaskPlannng.jsx
@@ -112,7 +112,7 @@ const TaskPlannng = () => {
         <Breadcrumb
           data={[
             { label: "Home", link: "/dashboard" },
-            { label: "Daily Task Planning", link: "/activities/task" },
+            { label: "Daily Task Planning" }
           ]}
         ></Breadcrumb>
         {project_listLoader && <p>Loading..</p>}

From 84563812b709246f81dfb269c40da1bc269ca6e7 Mon Sep 17 00:00:00 2001
From: Kartik sharma <kartik.sharma@marcoaiot.com>
Date: Mon, 30 Jun 2025 16:42:58 +0530
Subject: [PATCH 2/2] Adding cross button in Employee popup.

---
 src/components/Employee/ManageEmployee.jsx | 822 +++++++++++----------
 1 file changed, 414 insertions(+), 408 deletions(-)

diff --git a/src/components/Employee/ManageEmployee.jsx b/src/components/Employee/ManageEmployee.jsx
index 58194227..e3c34b30 100644
--- a/src/components/Employee/ManageEmployee.jsx
+++ b/src/components/Employee/ManageEmployee.jsx
@@ -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>
-          
     </>
   );
 };