Adding Dropdown in Employee.

src/components/Documents/ManageDocument.jsx

@@ -17,6 +17,8 @@ import {
 import showToast from "../../services/toastService";
 import { useDocumentContext } from "./Documents";
 import { isPending } from "@reduxjs/toolkit";
+import { AppFormController, AppFormProvider } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 const toBase64 = (file) =>
   new Promise((resolve, reject) => {
@@ -72,9 +74,12 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
     handleSubmit,
     watch,
     setValue,
+    control,
     reset,
     formState: { errors },
   } = methods;
+
+
   const { mutate: UploadDocument, isPending: isUploading } = useUploadDocument(
     () => {
       showToast("Document Uploaded Successfully", "success");
@@ -231,66 +236,74 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
 
   const isPending = isUploading || isUpdating;
   return (
+    <AppFormProvider {...methods}>
       <div className="p-2">
-      <p className="fw-bold fs-6">Upload New Document</p>
+        <h5 className="">Upload New Document</h5>
         <FormProvider key={documentTypeId} {...methods}>
           <form onSubmit={handleSubmit(onSubmit)} className="text-start">
             {/* Category */}
-          <div className="mb-2">
+            <div className="col-12 col-md-12 mb-2 mb-md-4">
-            <Label htmlFor="documentCategoryId" required>Document Category</Label>
+              <AppFormController
-            <select
+                name="documentCategoryId"
-              {...register("documentCategoryId")}
+                control={control}
-              className="form-select form-select-sm"
+                render={({ field }) => (
-            >
+                  <SelectField
-              {isLoading && (
+                    label="Document Category"
-                <option disabled value="">
+                    options={DocumentCategories ?? []}
-                  Loading...
+                    placeholder="Select Category"
-                </option>
+                    required
+                    labelKeyKey="name"
+                    valueKeyKey="id"
+                    value={field.value}
+                    onChange={field.onChange}
+                    isLoading={isLoading}
+                    className="m-0"
+                  />
                 )}
-              {!isLoading && <option value="">Select Category</option>}
+              />
-              {DocumentCategories?.map((type) => (
+
-                <option key={type.id} value={type.id}>
-                  {type.name}
-                </option>
-              ))}
-            </select>
               {errors.documentCategoryId && (
-              <div className="danger-text">
+                <small className="danger-text">
                   {errors.documentCategoryId.message}
-              </div>
+                </small>
               )}
             </div>
 
+
             {/* Type */}
             {categoryId && (
-            <div className="mb-2">
+              <div className="col-12 col-md-12 mb-2 mb-md-4">
-              <Label htmlFor="documentTypeId" required>Document Type</Label>
+                <AppFormController
-              <select
+                  name="documentTypeId"
-                {...register("documentTypeId")}
+                  control={control}
-                className="form-select form-select-sm"
+                  render={({ field }) => (
-              >
+                    <SelectField
-                {isTypeLoading && (
+                      label="Document Type"
-                  <option disabled value="">
+                      options={DocumentTypes ?? []}
-                    Loading...
+                      placeholder="Select Document Type"
-                  </option>
+                      required
+                      labelKeyKey="name"
+                      valueKeyKey="id"
+                      value={field.value}
+                      onChange={field.onChange}
+                      isLoading={isTypeLoading}
+                      className="m-0"
+                    />
                   )}
-                {DocumentTypes?.map((type) => (
+                />
-                  <option key={type.id} value={type.id}>
+
-                    {type.name}
-                  </option>
-                ))}
-              </select>
                 {errors.documentTypeId && (
-                <div className="danger-text">
+                  <small className="danger-text">
                     {errors.documentTypeId.message}
-                </div>
+                  </small>
                 )}
               </div>
+
             )}
 
 
             {/* Document ID */}
-          <div className="mb-2">
+            <div className="mb-4">
               <label
                 htmlFor="documentId"
                 required={selectedType?.isMandatory ?? false}
@@ -299,7 +312,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
               </label>
               <input
                 type="text"
-              className="form-control form-control-sm"
+                className="form-control "
                 {...register("documentId")}
               />
               {errors.documentId && (
@@ -314,7 +327,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
               </Label>
               <input
                 type="text"
-              className="form-control form-control-sm"
+                className="form-control "
                 {...register("name")}
               />
               {errors.name && (
@@ -325,7 +338,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
 
 
             {/* Upload */}
-          <div className="row my-2">
+            <div className="row my-4">
               <div className="col-md-12">
                 <Label htmlFor="attachment" required>Upload Document</Label>
 
@@ -384,7 +397,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
                 )}
               </div>
             </div>
-          <div className="mb-2">
+            <div className="mb-4">
               <TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
               {errors.tags && (
                 <small className="danger-text">{errors.tags.message}</small>
@@ -392,7 +405,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
             </div>
 
             {/* Description */}
-          <div className="mb-2">
+            <div className="mb-4">
               <Label htmlFor="description" required>Description</Label>
               <textarea
                 rows="2"
@@ -425,6 +438,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
           </form>
         </FormProvider>
       </div>
+    </AppFormProvider>
   );
 };
 

src/components/Employee/ManageEmployee.jsx

@@ -517,39 +517,35 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
           </div>
         </div>
         <div className="row mb-3">
-          <div className="col-sm-4">
+          <div className="col-sm-4 text-start">
-            <Label className="form-text text-start" required>
+            <AppFormController
-              Official Designation
+              name="jobRoleId"
-            </Label>
+              control={control}
-            <div className="input-group">
+              render={({ field }) => (
-              <select
+                <SelectField
-                className="form-select"
+                  label="Official Designation"
-                {...register("jobRoleId")}
+                  required
-                id="jobRoleId"
+                  options={[...job_role].sort((a, b) =>
-                aria-label=""
+                    a?.name?.localeCompare(b?.name)
-              >
+                  )}
-                <option disabled value="">
+                  placeholder="Select Role"
-                  Select Role
+                  labelKeyKey="name"
-                </option>
+                  valueKeyKey="id"
-                {[...job_role]
+                  value={field.value}
-                  .sort((a, b) => a?.name?.localeCompare(b.name))
+                  onChange={field.onChange}
-                  .map((item) => (
+                  className="m-0"
-                    <option value={item?.id} key={item.id}>
+                />
-                      {item?.name}{" "}
+              )}
-                    </option>
+            />
-                  ))}
+
-              </select>
-            </div>
             {errors.jobRoleId && (
-              <div
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
                 {errors.jobRoleId.message}
               </div>
             )}
           </div>
-          <div className="col-sm-4">
+
+          <div className="col-sm-4 mt-n1">
             <Label className="form-text text-start" required>
               Emergency Contact Person
             </Label>
@@ -570,7 +566,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               </div>
             )}
           </div>
-          <div className="col-sm-4">
+          <div className="col-sm-4 mt-n1">
             <Label className="form-text text-start" required>
               Emergency Phone Number
             </Label>

src/components/Project/ProjectPermission.jsx

@@ -10,6 +10,8 @@ import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import showToast from "../../services/toastService";
+import { AppFormController } from "../../hooks/appHooks/useAppForm";
+import SelectField from "../common/Forms/SelectField";
 
 export const ProjectPermissionSchema = z.object({
   employeeId: z.string().min(1, "Employee is required"),
@@ -115,35 +117,42 @@ const hasChanges =
       <form className="row" onSubmit={handleSubmit(onSubmit)}>
         <div className="d-flex justify-content-between align-items-end gap-2 mb-3">
           <div className="text-start d-flex align-items-center gap-2">
-            <div className="d-block">
+            {/* <div className="d-block">
               <label className="form-label">Select Employee</label>
-            </div>
+            </div> */}
-            <div className="d-block">
+
-              {" "}
+            <div className="d-block flex-grow-1">
-              <select
+              <AppFormController
-                className="form-select form-select-sm"
+                name="employeeId"
-                {...register("employeeId")}
+                control={control}
-                disabled={isPending}
+                render={({ field }) => (
-              >
+                  <SelectField
-                {loading ? (
+                    label="Select Employee"
-                  <option value="">Loading...</option>
+                    options={
-                ) : (
+                      employees
-                  <>
-                    <option value="">-- Select Employee --</option>
-                    {[...employees]
                         ?.sort((a, b) =>
-                        `${a?.firstName} ${a?.firstName}`?.localeCompare(
+                          `${a?.firstName} ${a?.lastName}`.localeCompare(
                             `${b?.firstName} ${b?.lastName}`
                           )
                         )
-                      ?.map((emp) => (
+                        ?.map((emp) => ({
-                        <option key={emp.id} value={emp.id}>
+                          id: emp.id,
-                          {emp.firstName} {emp.lastName}
+                          name: `${emp.firstName} ${emp.lastName}`,
-                        </option>
+                        })) ?? []
-                      ))}
+                    }
-                  </>
+                    placeholder="-- Select Employee --"
+                    required
+                    labelKeyKey="name"
+                    valueKeyKey="id"
+                    value={field.value}
+                    onChange={field.onChange}
+                    isLoading={loading}
+                    disabled={isPending}
+                    className="m-0"
+                  />
                 )}
-              </select>
+              />
+
               {errors.employeeId && (
                 <div className="d-block text-danger small">
                   {errors.employeeId.message}
@@ -152,6 +161,7 @@ const hasChanges =
             </div>
           </div>
 
+
           <div className="mt-3 text-end">
             {hasChanges && (
               <button