Adding dropdown in Edit Task.

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -12,6 +12,8 @@ import { useManageTask } from "../../../hooks/useProjects";
 import { cacheData, getCachedData } from "../../../slices/apiDataManager";
 import { refreshData } from "../../../slices/localVariablesSlice";
 import showToast from "../../../services/toastService";
+import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
+import SelectField from "../../common/Forms/SelectField";
 
 const taskSchema = z
   .object({
@@ -37,17 +39,7 @@ const EditActivityModal = ({
   const { activities, loading: loadingActivities } = useActivitiesMaster();
   const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
   const [selectedActivity, setSelectedActivity] = useState(null);
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    reset,
-    setValue,
-    getValues,
-    watch,
-  } = useForm({
-    resolver: zodResolver(taskSchema),
+  const methods = useForm({
     defaultValues: {
       activityID: "",
       workCategoryId: "",
@@ -55,7 +47,11 @@ const EditActivityModal = ({
       completedWork: 0,
       comment: "",
     },
+    resolver: zodResolver(taskSchema),
   });
+
+  const { register, control, watch, handleSubmit, reset, setValue, getValues, formState: { errors } } = methods;
+
   const { mutate: UpdateTask, isPending } = useManageTask({
     onSuccessCallback: (response) => {
       showToast(response?.message, "success")
@@ -63,8 +59,6 @@ const EditActivityModal = ({
     }
   });
 
-
-
   const activityID = watch("activityID");
 
   const sortedActivities = useMemo(
@@ -125,6 +119,7 @@ const EditActivityModal = ({
     });
   }
   return (
+    <AppFormProvider {...methods}>
       <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
         <div className="text-center mb-1">
           <h5 className="mb-1">Manage Task</h5>
@@ -134,7 +129,7 @@ const EditActivityModal = ({
           <div className="col-12 col-md-6">
             <label className="form-label">Select Building</label>
             <input
-            className="form-control form-control-sm"
+              className="form-control"
               value={building?.buildingName}
               disabled
             />
@@ -143,7 +138,7 @@ const EditActivityModal = ({
           <div className="col-12 col-md-6">
             <label className="form-label">Select Floor</label>
             <input
-            className="form-control form-control-sm"
+              className="form-control"
               value={floor?.floorName}
               disabled
             />
@@ -153,7 +148,7 @@ const EditActivityModal = ({
         <div className="col-12 text-start">
           <label className="form-label">Select Work Area</label>
           <input
-          className="form-control form-control-sm"
+            className="form-control"
             value={workArea?.areaName}
             disabled
           />
@@ -161,7 +156,7 @@ const EditActivityModal = ({
         <div className="col-12 text-start">
           <label className="form-label">Select Service</label>
           <input
-          className="form-control form-control-sm"
+            className="form-control"
             value={
               workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
             }
@@ -174,7 +169,7 @@ const EditActivityModal = ({
           <label className="form-label">Select Activity</label>
           <select
             {...register("activityID")}
-          className="form-select form-select-sm"
+            className="form-select"
             disabled
           >
             <option >Select Activity</option>
@@ -194,33 +189,43 @@ const EditActivityModal = ({
         </div>
 
         <div className="col-12 text-start">
-        <label className="form-label">Select Work Category</label>
-        <select
-          {...register("workCategoryId")}
-          className="form-select form-select-sm"
-        >
-          <option disabled>Select Category</option>
-          {loadingCategories ? (
-            <option>Loading...</option>
-          ) : (
-            sortedCategories.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name}
-              </option>
-            ))
+          <AppFormController
+            name="workCategoryId"
+            control={control}
+            render={({ field }) => (
+              <SelectField
+                label="Select Work Category"
+                placeholder="Select Category"
+                options={
+                  loadingCategories
+                    ? []
+                    : sortedCategories?.map((c) => ({
+                      id: String(c.id),
+                      name: c.name,
+                    })) ?? []
+                }
+                isLoading={loadingCategories}
+                labelKey="name"
+                valueKey="id"
+                value={field.value}
+                onChange={field.onChange}
+                className="m-0"
+              />
             )}
-        </select>
+          />
+
           {errors.workCategoryId && (
-          <p className="danger-text">{errors.workCategoryId.message}</p>
+            <small className="danger-text">{errors.workCategoryId.message}</small>
           )}
         </div>
 
+
         <div className="col-5 text-start">
           <label className="form-label">Planned Work</label>
           <input
             {...register("plannedWork", { valueAsNumber: true })}
             type="number"
-          className="form-control form-control-sm"
+            className="form-control"
           />
           {errors.plannedWork && (
             <p className="danger-text">{errors.plannedWork.message}</p>
@@ -233,7 +238,7 @@ const EditActivityModal = ({
             {...register("completedWork", { valueAsNumber: true })}
             type="number"
             disabled={getValues("completedWork") > 0}
-          className="form-control form-control-sm"
+            className="form-control"
           />
           {errors.completedWork && (
             <p className="danger-text">{errors.completedWork.message}</p>
@@ -243,7 +248,7 @@ const EditActivityModal = ({
         <div className="col-2 text-start">
           <label className="form-label">Unit</label>
           <input
-          className="form-control form-control-sm"
+            className="form-control"
             disabled
             value={selectedActivity?.unitOfMeasurement || ""}
           />
@@ -275,6 +280,7 @@ const EditActivityModal = ({
           </button>
         </div>
       </form>
+    </AppFormProvider>
   );
 };