src/components/Dashboard/ProjectProgressChart.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import LineChart from "../Charts/LineChart";
-import { useProjectName } from "../../hooks/useProjects";
+import { useProjects } from "../../hooks/useProjects";
 import { useDashboard_Data } from "../../hooks/useDashboard_Data";
 import { useSelector } from "react-redux";
 
@@ -11,7 +11,7 @@ const ProjectProgressChart = ({
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
-  const { projectNames } = useProjectName();
+  const { projects } = useProjects();
   const [range, setRange] = useState(DefaultRange);
   const [showAllEmployees, setShowAllEmployees] = useState(false);
 
@@ -79,9 +79,7 @@ const ProjectProgressChart = ({
     })
   );
 
-  const selectedProjectData = projectNames?.find(
+  const selectedProjectData = projects?.find((p) => p.id === selectedProject);
-    (p) => p.id === selectedProject
-  );
   const selectedProjectName = selectedProjectData?.shortName?.trim()
     ? selectedProjectData.shortName
     : selectedProjectData?.name;

src/components/Directory/BucketForm.jsx

@@ -43,7 +43,7 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
               Name
             </Label>
             <input
-              className="form-control"
+              className="form-control form-control-sm"
               {...register("name")}
             />
             {errors.name && (
@@ -51,12 +51,12 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
             )}
           </div>
 
-          <div className="my-3">
+          <div className="mb-3">
             <Label htmlFor="description" className="text-start" required>
               Description
             </Label>
             <textarea
-              className="form-control"
+              className="form-control form-control-sm"
               {...register("description")}
               rows="3"
             />

src/components/Directory/BucketList.jsx

@@ -14,7 +14,7 @@ const BucketList = ({ buckets, loading, searchTerm, onEdit, onDelete }) => {
   if (!loading && sorted.length === 0) return <div>No buckets found</div>;
 
   return (
-    <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0 text-start">
+    <div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0">
       {sorted.map((bucket) => (
         <div className="col" key={bucket.id}>
           <div className="card h-100">

src/components/Directory/CardViewContact.jsx

@@ -40,7 +40,7 @@ const CardViewContact = ({
         className="card text-start border-1"
         style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }}
       >
-        <div className="card-body px-1 py-2 pb-0">
+        <div className="card-body  px-1 py-2 pb-0">
           <div className="d-flex justify-content-between">
             <div
               className={`d-flex align-items-center ${
@@ -61,7 +61,7 @@ const CardViewContact = ({
                   (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
                 }
               />{" "}
-              <span className="text-heading fs-6 ms-2 mt-n1"> {contact?.name}</span>
+              <span className="text-heading fs-6 ms-2"> {contact?.name}</span>
             </div>
             <div>
               {IsActive && (

src/components/Directory/ManageBucket1.jsx

@@ -45,7 +45,7 @@ const ManageBucket1 = () => {
   return (
     <div className="container m-0 p-0" style={{ minHeight: "00px" }}>
       <div className="d-flex justify-content-center">
-        <h5 className="m-0">Manage Buckets</h5>
+        <p className="fs-5 fw-semibold m-0">Manage Buckets</p>
       </div>
 
       {action ? (

src/components/Directory/ManageContact.jsx

@@ -19,8 +19,6 @@ import SelectMultiple from "../common/SelectMultiple";
 import { ContactSchema, defaultContactValue } from "./DirectorySchema";
 import InputSuggestions from "../common/InputSuggestion";
 import Label from "../common/Label";
-import { AppFormController } from "../../hooks/appHooks/useAppForm";
-import SelectField from "../common/Forms/SelectField";
 
 const ManageContact = ({ contactId, closeModal }) => {
   // fetch master data
@@ -196,7 +194,7 @@ const ManageContact = ({ contactId, closeModal }) => {
               Name
             </Label>
             <input
-              className="form-control "
+              className="form-control form-control-sm"
               {...register("name")}
             />
             {errors.name && (
@@ -212,7 +210,6 @@ const ManageContact = ({ contactId, closeModal }) => {
               value={watch("organization") || ""}
               onChange={(val) => setValue("organization", val, { shouldValidate: true })}
               error={errors.organization?.message}
-              size="md"
             />
 
           </div>
@@ -225,7 +222,7 @@ const ManageContact = ({ contactId, closeModal }) => {
               Designation
             </Label>
             <input
-              className="form-control "
+              className="form-control form-control-sm"
               {...register("designation")}
               onChange={handleDesignationChange}
             />
@@ -260,7 +257,7 @@ const ManageContact = ({ contactId, closeModal }) => {
         </div>
 
         {/* Emails + Phones */}
-        <div className="row mt-3">
+        <div className="row mt-1">
           <div className="col-md-6">
             {emailFields.map((field, index) => (
               <div
@@ -268,39 +265,22 @@ const ManageContact = ({ contactId, closeModal }) => {
                 className="row d-flex align-items-center mb-1"
               >
                 <div className="col-5 text-start">
-                  <AppFormController
+                  <label className="form-label">Label</label>
-                    name={`contactEmails.${index}.label`}
+                  <select
-                    control={control}
+                    className="form-select form-select-sm"
-                    render={({ field }) => (
+                    {...register(`contactEmails.${index}.label`)}
-                      <SelectField
+                  >
-                        label="Label"
+                    <option value="Work">Work</option>
-                        options={[
+                    <option value="Personal">Personal</option>
-                          { id: "Work", name: "Work" },
+                    <option value="Other">Other</option>
-                          { id: "Personal", name: "Personal" },
+                  </select>
-                          { id: "Other", name: "Other" }
-                        ]}
-                        placeholder="Choose a Label"
-                        required
-                        labelKey="name"
-                        valueKeyKey="id"
-                        value={field.value}
-                        onChange={field.onChange}
-                        className="m-0"
-                      />
-                    )}
-                  />
-                  {errors.contactEmails?.[index]?.label && (
-                    <small className="danger-text">
-                      {errors.contactEmails[index].label.message}
-                    </small>
-                  )}
                 </div>
-                <div className="col-7 text-start mt-n3">
+                <div className="col-7 text-start">
                   <label className="form-label">Email</label>
                   <div className="d-flex align-items-center">
                     <input
                       type="email"
-                      className="form-control "
+                      className="form-control form-control-sm"
                       {...register(`contactEmails.${index}.emailAddress`)}
                       placeholder="email@example.com"
                     />
@@ -328,43 +308,27 @@ const ManageContact = ({ contactId, closeModal }) => {
 
           <div className="col-md-6">
             {phoneFields.map((field, index) => (
-              <div key={field.id} className="row d-flex align-items-center mb-2">
+              <div
-
+                key={field.id}
+                className="row d-flex align-items-center mb-2"
+              >
                 <div className="col-5 text-start">
-                  <AppFormController
+                  <label className="form-label">Label</label>
-                    name={`contactPhones.${index}.label`}
+                  <select
-                    control={control}
+                    className="form-select form-select-sm"
-                    render={({ field }) => (
+                    {...register(`contactPhones.${index}.label`)}
-                      <SelectField
+                  >
-                        label="Label"
+                    <option value="Office">Office</option>
-                        options={[
+                    <option value="Personal">Personal</option>
-                          { id: "Office", name: "Office" },
+                    <option value="Business">Business</option>
-                          { id: "Personal", name: "Personal" },
+                  </select>
-                          { id: "Business", name: "Business" }
-                        ]}
-                        placeholder="Choose a Label"
-                        required
-                        labelKey="name"
-                        valueKeyKey="id"
-                        value={field.value}
-                        onChange={field.onChange}
-                        className="m-0"
-                      />
-                    )}
-                  />
-                  {errors.contactPhones?.[index]?.label && (
-                    <small className="danger-text">
-                      {errors.contactPhones[index].label.message}
-                    </small>
-                  )}
                 </div>
-
+                <div className="col-7 text-start">
-                <div className="col-7 text-start mt-n3">
                   <label className="form-label">Phone</label>
                   <div className="d-flex align-items-center">
                     <input
                       type="text"
-                      className="form-control "
+                      className="form-control form-control-sm"
                       {...register(`contactPhones.${index}.phoneNumber`)}
                       placeholder="9876543210"
                     />
@@ -386,43 +350,42 @@ const ManageContact = ({ contactId, closeModal }) => {
                     </small>
                   )}
                 </div>
-
               </div>
             ))}
           </div>
-
         </div>
 
         {/* Category + Projects */}
-        <div className="row">
+        <div className="row my-1">
           <div className="col-md-6 text-start">
-            <AppFormController
+            <label className="form-label">Category</label>
-              name="contactCategoryId"
+            <select
-              control={control}
+              className="form-select form-select-sm"
-              rules={{ required: "Category is required" }}
+              {...register("contactCategoryId")}
-              render={({ field }) => (
+            >
-                <SelectField
+              {contactCategoryLoading && !contactCategory ? (
-                  label="Category"
+                <option disabled value="">
-                  required
+                  Loading...
-                  options={contactCategory ?? []}
+                </option>
-                  placeholder="Select Category"
+              ) : (
-                  labelKey="name"
+                <>
-                  valueKeyKey="id"
+                  <option disabled value="">
-                  value={field.value}
+                    Select Category
-                  onChange={field.onChange}
+                  </option>
-                  isLoading={contactCategoryLoading && !contactCategory}
+                  {contactCategory?.map((cate) => (
-                  className="m-0"
+                    <option key={cate.id} value={cate.id}>
-                />
+                      {cate.name}
+                    </option>
+                  ))}
+                </>
               )}
-            />
+            </select>
-
             {errors.contactCategoryId && (
               <small className="danger-text">
                 {errors.contactCategoryId.message}
               </small>
             )}
           </div>
-
           <div className="col-12 col-md-6 text-start">
             <SelectMultiple
               name="projectIds"
@@ -439,14 +402,13 @@ const ManageContact = ({ contactId, closeModal }) => {
         </div>
 
         {/* Tags */}
-        <div className="col-12 text-start mt-3">
+        <div className="col-12 text-start">
           <TagInput
             name="tags"
             label="Tags"
             options={contactTags}
             isRequired={true}
             placeholder="Enter Tag"
-            size="sm"
           />
           {errors.tags && (
             <small className="danger-text">{errors.tags.message}</small>
@@ -455,8 +417,8 @@ const ManageContact = ({ contactId, closeModal }) => {
 
         {/* Buckets */}
         <div className="row">
-          <div className="col-md-12 mt-3 text-start">
+          <div className="col-md-12 mt-1 text-start">
-            <label className="form-label mb-2">Select Bucket</label>
+            <label className="form-label ">Select Bucket</label>
             <ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
               {bucketsLoaging && <p>Loading...</p>}
               {buckets?.map((item) => (
@@ -492,15 +454,15 @@ const ManageContact = ({ contactId, closeModal }) => {
         <div className="col-12 text-start">
           <label className="form-label">Address</label>
           <textarea
-            className="form-control "
+            className="form-control form-control-sm"
             rows="2"
             {...register("address")}
           />
         </div>
-        <div className="col-12 text-start mt-3">
+        <div className="col-12 text-start">
           <label className="form-label">Description</label>
           <textarea
-            className="form-control "
+            className="form-control form-control-sm"
             rows="2"
             {...register("description")}
           />

src/components/Documents/ManageDocument.jsx

@@ -17,8 +17,6 @@ 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) => {
@@ -74,12 +72,9 @@ 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");
@@ -93,34 +88,34 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
     }
   );
 
-
+ 
   const onSubmit = (data) => {
-    const normalizeAttachment = (attachment) => {
+  const normalizeAttachment = (attachment) => {
-      if (!attachment) return null;
+    if (!attachment) return null;
-      return {
+    return {
-        ...attachment,
+      ...attachment,
-        fileSize: Math.ceil(attachment.fileSize / 1024),
+      fileSize: Math.ceil(attachment.fileSize / 1024), 
-      };
     };
-
-    const payload = {
-      ...data,
-      attachment: normalizeAttachment(data.attachment),
-    };
-
-    if (ManageDoc?.document) {
-      const DocumentPayload = {
-        ...payload,
-        id: DocData.id,
-        tags: MergedTagsWithExistenStatus(data?.tags, DocData?.tags),
-      };
-      UpdateDocument({ documentId: DocData?.id, DocumentPayload });
-    } else {
-      const DocumentPayload = { ...payload, entityId: Entity };
-      UploadDocument(DocumentPayload);
-    }
   };
 
+  const payload = {
+    ...data,
+    attachment: normalizeAttachment(data.attachment),
+  };
+
+  if (ManageDoc?.document) {
+    const DocumentPayload = {
+      ...payload,
+      id: DocData.id,
+      tags: MergedTagsWithExistenStatus(data?.tags, DocData?.tags),
+    };
+    UpdateDocument({ documentId: DocData?.id, DocumentPayload });
+  } else {
+    const DocumentPayload = { ...payload, entityId: Entity };
+    UploadDocument(DocumentPayload);
+  }
+};
+
   const {
     data: DocData,
     isLoading: isDocLoading,
@@ -139,7 +134,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
   const { DocumentTypes, isLoading: isTypeLoading } = useDocumentTypes(
     categoryId || null
   );
-  const { data: DocumentTags } = useDocumentTags()
+  const {data:DocumentTags} = useDocumentTags()
 
   // Update schema whenever document type changes
   useEffect(() => {
@@ -149,7 +144,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
       (t) => String(t.id) === String(documentTypeId)
     );
     if (!type) return;
-    setSelectedType(type)
+   setSelectedType(type)
     const newSchema = DocumentPayloadSchema({
       isMandatory: type.isMandatory ?? false,
       regexExpression: type.regexExpression ?? null,
@@ -205,10 +200,10 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
         t === "application/pdf"
           ? ".pdf"
           : t === "image/jpeg"
-            ? ".jpg,.jpeg"
+          ? ".jpg,.jpeg"
-            : t === "image/png"
+          : t === "image/png"
-              ? ".png"
+          ? ".png"
-              : ""
+          : ""
       )
       .join(",") || "";
 
@@ -236,209 +231,200 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
 
   const isPending = isUploading || isUpdating;
   return (
-    <AppFormProvider {...methods}>
+    <div className="p-2">
-      <div className="p-2">
+      <p className="fw-bold fs-6">Upload New Document</p>
-        <h5 className="">Upload New Document</h5>
+      <FormProvider key={documentTypeId} {...methods}>
-        <FormProvider key={documentTypeId} {...methods}>
+        <form onSubmit={handleSubmit(onSubmit)} className="text-start">
-          <form onSubmit={handleSubmit(onSubmit)} className="text-start">
+          {/* Category */}
-            {/* 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
+              )}
-                    labelKey="name"
+              {!isLoading && <option value="">Select Category</option>}
-                    valueKeyKey="id"
+              {DocumentCategories?.map((type) => (
-                    value={field.value}
+                <option key={type.id} value={type.id}>
-                    onChange={field.onChange}
+                  {type.name}
-                    isLoading={isLoading}
+                </option>
-                    className="m-0"
+              ))}
-                  />
+            </select>
-                )}
+            {errors.documentCategoryId && (
-              />
+              <div className="danger-text">
+                {errors.documentCategoryId.message}
+              </div>
+            )}
+          </div>
 
-              {errors.documentCategoryId && (
+          {/* Type */}
-                <small className="danger-text">
+          {categoryId && (
-                  {errors.documentCategoryId.message}
+            <div className="mb-2">
-                </small>
+              <Label htmlFor="documentTypeId" required>Document Type</Label>
+              <select
+                {...register("documentTypeId")}
+                className="form-select form-select-sm"
+              >
+                {isTypeLoading && (
+                  <option disabled value="">
+                    Loading...
+                  </option>
+                )}
+                {DocumentTypes?.map((type) => (
+                  <option key={type.id} value={type.id}>
+                    {type.name}
+                  </option>
+                ))}
+              </select>
+              {errors.documentTypeId && (
+                <div className="danger-text">
+                  {errors.documentTypeId.message}
+                </div>
               )}
             </div>
+          )}
 
+          
+          {/* Document ID */}
+          <div className="mb-2">
+            <label
+              htmlFor="documentId"
+              required={selectedType?.isMandatory ?? false}
+            >
+              Document ID
+            </label>
+            <input
+              type="text"
+              className="form-control form-control-sm"
+              {...register("documentId")}
+            />
+            {errors.documentId && (
+              <div className="danger-text">{errors.documentId.message}</div>
+            )}
+          </div>
 
-            {/* Type */}
+          {/* Document Name */}
-            {categoryId && (
+          <div className="mb-2">
-              <div className="col-12 col-md-12 mb-2 mb-md-4">
+            <Label htmlFor="name" required>
-                <AppFormController
+              Document Name
-                  name="documentTypeId"
+            </Label>
-                  control={control}
+            <input
-                  render={({ field }) => (
+              type="text"
-                    <SelectField
+              className="form-control form-control-sm"
-                      label="Document Type"
+              {...register("name")}
-                      options={DocumentTypes ?? []}
+            />
-                      placeholder="Select Document Type"
+            {errors.name && (
-                      required
+              <div className="danger-text">{errors.name.message}</div>
-                      labelKey="name"
+            )}
-                      valueKeyKey="id"
+          </div>
-                      value={field.value}
+
-                      onChange={field.onChange}
+          
-                      isLoading={isTypeLoading}
+
-                      className="m-0"
+          {/* Upload */}
-                    />
+          <div className="row my-2">
-                  )}
+            <div className="col-md-12">
+              <Label htmlFor="attachment" required>Upload Document</Label>
+
+              <div
+                className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
+                style={{ cursor: "pointer" }}
+                onClick={() => document.getElementById("attachment").click()}
+              >
+                <i className="bx bx-cloud-upload d-block bx-lg"></i>
+                <span className="text-muted d-block">
+                  Click to select or click here to browse
+                </span>
+                <small className="text-muted">
+                  ({selectedType?.allowedContentType || "PDF/JPG/PNG"}, max{" "}
+                  {selectedType?.maxSizeAllowedInMB ?? 25}MB)
+                </small>
+
+                <input
+                  type="file"
+                  id="attachment"
+                  accept={selectedType?.allowedContentType}
+                  style={{ display: "none" }}
+                  onChange={(e) => {
+                    onFileChange(e);
+                    e.target.value = ""; // reset input
+                  }}
                 />
-
-                {errors.documentTypeId && (
-                  <small className="danger-text">
-                    {errors.documentTypeId.message}
-                  </small>
-                )}
               </div>
 
-            )}
+              {errors.attachment && (
-
+                <small className="danger-text">
-
+                  {errors.attachment.message
-            {/* Document ID */}
+                    ? errors.attachment.message
-            <div className="mb-4">
+                    : errors.attachment.fileName?.message ||
-              <label
-                htmlFor="documentId"
-                required={selectedType?.isMandatory ?? false}
-              >
-                Document ID
-              </label>
-              <input
-                type="text"
-                className="form-control "
-                {...register("documentId")}
-              />
-              {errors.documentId && (
-                <div className="danger-text">{errors.documentId.message}</div>
-              )}
-            </div>
-
-            {/* Document Name */}
-            <div className="mb-2">
-              <Label htmlFor="name" required>
-                Document Name
-              </Label>
-              <input
-                type="text"
-                className="form-control "
-                {...register("name")}
-              />
-              {errors.name && (
-                <div className="danger-text">{errors.name.message}</div>
-              )}
-            </div>
-
-
-
-            {/* Upload */}
-            <div className="row my-4">
-              <div className="col-md-12">
-                <Label htmlFor="attachment" required>Upload Document</Label>
-
-                <div
-                  className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
-                  style={{ cursor: "pointer" }}
-                  onClick={() => document.getElementById("attachment").click()}
-                >
-                  <i className="bx bx-cloud-upload d-block bx-lg"></i>
-                  <span className="text-muted d-block">
-                    Click to select or click here to browse
-                  </span>
-                  <small className="text-muted">
-                    ({selectedType?.allowedContentType || "PDF/JPG/PNG"}, max{" "}
-                    {selectedType?.maxSizeAllowedInMB ?? 25}MB)
-                  </small>
-
-                  <input
-                    type="file"
-                    id="attachment"
-                    accept={selectedType?.allowedContentType}
-                    style={{ display: "none" }}
-                    onChange={(e) => {
-                      onFileChange(e);
-                      e.target.value = ""; // reset input
-                    }}
-                  />
-                </div>
-
-                {errors.attachment && (
-                  <small className="danger-text">
-                    {errors.attachment.message
-                      ? errors.attachment.message
-                      : errors.attachment.fileName?.message ||
                       errors.attachment.base64Data?.message ||
                       errors.attachment.contentType?.message ||
                       errors.attachment.fileSize?.message}
-                  </small>
+                </small>
-                )}
+              )}
 
-                {file?.base64Data && (
+              {file?.base64Data && (
-                  <div className="d-flex justify-content-between text-start p-1 mt-2">
+                <div className="d-flex justify-content-between text-start p-1 mt-2">
-                    <div>
+                  <div>
-                      <span className="mb-0 text-secondary small d-block">
+                    <span className="mb-0 text-secondary small d-block">
-                        {file.fileName}
+                      {file.fileName}
-                      </span>
+                    </span>
-                      <span className="text-body-secondary small d-block">
+                    <span className="text-body-secondary small d-block">
-                        {(file.fileSize / 1024).toFixed(1)} KB
+                      {(file.fileSize / 1024).toFixed(1)} KB
-                      </span>
+                    </span>
-                    </div>
-                    <i
-                      className="bx bx-trash bx-sm cursor-pointer text-danger"
-                      onClick={removeFile}
-                    ></i>
                   </div>
-                )}
+                  <i
-              </div>
+                    className="bx bx-trash bx-sm cursor-pointer text-danger"
-            </div>
+                    onClick={removeFile}
-            <div className="mb-4">
+                  ></i>
-              <TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
+                </div>
-              {errors.tags && (
-                <small className="danger-text">{errors.tags.message}</small>
               )}
             </div>
+          </div>
+          <div className="mb-2">
+            <TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
+            {errors.tags && (
+              <small className="danger-text">{errors.tags.message}</small>
+            )}
+          </div>
 
-            {/* Description */}
+          {/* Description */}
-            <div className="mb-4">
+          <div className="mb-2">
-              <Label htmlFor="description" required>Description</Label>
+            <Label htmlFor="description" required>Description</Label>
-              <textarea
+            <textarea
-                rows="2"
+              rows="2"
-                className="form-control"
+              className="form-control"
-                {...register("description")}
+              {...register("description")}
-              ></textarea>
+            ></textarea>
-              {errors.description && (
+            {errors.description && (
-                <div className="danger-text">{errors.description.message}</div>
+              <div className="danger-text">{errors.description.message}</div>
-              )}
+            )}
-            </div>
+          </div>
 
-            {/* Buttons */}
+          {/* Buttons */}
-            <div className="d-flex justify-content-end gap-3 mt-4">
+          <div className="d-flex justify-content-end gap-3 mt-4">            
-              <button
+            <button
-                type="reset"
+              type="reset"
-                className="btn btn-label-secondary btn-sm"
+              className="btn btn-label-secondary btn-sm"
-                disabled={isPending}
+              disabled={isPending}
-                onClick={closeModal}
+              onClick={closeModal}
-              >
+            >
-                Cancel
+              Cancel
-              </button>
+            </button>
-              <button
+            <button
-                type="submit"
+              type="submit"
-                className="btn btn-primary btn-sm"
+              className="btn btn-primary btn-sm"
-                disabled={isPending}
+              disabled={isPending}
-              >
+            >
-                {isPending ? "Please Wait..." : " Submit"}
+              {isPending ? "Please Wait..." : " Submit"}
-              </button>
+            </button>
-            </div>
+          </div>
-          </form>
+        </form>
-        </FormProvider>
+      </FormProvider>
-      </div>
+    </div>
-    </AppFormProvider>
   );
 };
 

src/components/Employee/EmpActivities.jsx

@@ -21,7 +21,7 @@ const EmpActivities = ({ employee }) => {
   if (isLoading) return <div>Loading...</div>
   return (
     <>
-      <div className="card page-min-h mt-3">
+      <div className="card h-100 mt-4">
         <div className="card-body">
           <div className="my-0 text-start">
             <DateRangePicker

src/components/Employee/EmpAttendance.jsx

@@ -71,7 +71,7 @@ const EmpAttendance = () => {
           <AttendLogs Id={attendanceId} />
         </GlobalModel>
       )}
-      <div className="card px-4 mt-3 py-2 " style={{ minHeight: "500px" }}>
+      <div className="card px-4 mt-5 py-2 " style={{ minHeight: "500px" }}>
         <div
           className="dataTables_length text-start py-2 d-flex justify-content-between "
           id="DataTables_Table_0_length"

src/components/Employee/EmpDashboard.jsx

@@ -18,7 +18,7 @@ const EmpDashboard = ({ profile }) => {
           <EmpOverview profile={profile}></EmpOverview>
         </div>
 
-        <div className="col col-sm-6 mt-3">
+        <div className="col col-sm-6 pt-5">
           <div className="card ">
             <div className="card-body">
               <small className="card-text text-uppercase text-body-secondary small text-start d-block">
@@ -82,7 +82,7 @@ const EmpDashboard = ({ profile }) => {
             </div>
           </div>
         </div>
-        <div className="col-12 col-sm-6 pt-2">
+        <div className="col-12 col-sm-6 pt-5">
           <EmpReportingManager
             employeeId={profile?.id}
             employee={profile}

src/components/Employee/EmpDocuments.jsx

@@ -6,12 +6,10 @@ import { useParams } from "react-router-dom";
 import { DOCUMENTS_ENTITIES } from "../../utils/constants";
 
 const EmpDocuments = ({ profile, loggedInUser }) => {
-  const { employeeId } = useParams()
+ const {employeeId} = useParams()
   return (
     <>
-      <div className="mt-3">
+       <Documents Document_Entity={DOCUMENTS_ENTITIES.EmployeeEntity} Entity={employeeId} />
-        <Documents Document_Entity={DOCUMENTS_ENTITIES.EmployeeEntity} Entity={employeeId} />
-      </div>
     </>
   );
 };

src/components/Employee/EmpOverview.jsx

@@ -5,7 +5,7 @@ const EmpOverview = ({ profile }) => {
   const { loggedInUserProfile } = useProfile();
 
   return (
-    <div className="row mt-n2">
+    <div className="row">
       <div className="col-12 mb-4">
         <div className="card">
           <div className="card-body">

src/components/Employee/ManageEmployee.jsx

@@ -17,8 +17,6 @@ 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();
@@ -98,26 +96,26 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
     reset(
       currentEmployee
         ? {
-          id: currentEmployee.id || null,
+            id: currentEmployee.id || null,
-          firstName: currentEmployee.firstName || "",
+            firstName: currentEmployee.firstName || "",
-          middleName: currentEmployee.middleName || "",
+            middleName: currentEmployee.middleName || "",
-          lastName: currentEmployee.lastName || "",
+            lastName: currentEmployee.lastName || "",
-          email: currentEmployee.email || "",
+            email: currentEmployee.email || "",
-          currentAddress: currentEmployee.currentAddress || "",
+            currentAddress: currentEmployee.currentAddress || "",
-          birthDate: formatDate(currentEmployee.birthDate) || "",
+            birthDate: formatDate(currentEmployee.birthDate) || "",
-          joiningDate: formatDate(currentEmployee.joiningDate) || "",
+            joiningDate: formatDate(currentEmployee.joiningDate) || "",
-          emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
+            emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
-          emergencyContactPerson:
+            emergencyContactPerson:
-            currentEmployee.emergencyContactPerson || "",
+              currentEmployee.emergencyContactPerson || "",
-          aadharNumber: currentEmployee.aadharNumber || "",
+            aadharNumber: currentEmployee.aadharNumber || "",
-          gender: currentEmployee.gender || "",
+            gender: currentEmployee.gender || "",
-          panNumber: currentEmployee.panNumber || "",
+            panNumber: currentEmployee.panNumber || "",
-          permanentAddress: currentEmployee.permanentAddress || "",
+            permanentAddress: currentEmployee.permanentAddress || "",
-          phoneNumber: currentEmployee.phoneNumber || "",
+            phoneNumber: currentEmployee.phoneNumber || "",
-          jobRoleId: currentEmployee.jobRoleId?.toString() || "",
+            jobRoleId: currentEmployee.jobRoleId?.toString() || "",
-          organizationId: currentEmployee.organizationId || "",
+            organizationId: currentEmployee.organizationId || "",
-          hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
+            hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
-        }
+          }
         : {}
     );
     setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
@@ -149,7 +147,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                   message: "Only letters are allowed",
                 },
               })}
-              className="form-control "
+              className="form-control form-control-sm"
               id="firstName"
               placeholder="First Name"
               onInput={(e) => {
@@ -175,7 +173,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                   message: "Only letters are allowed",
                 },
               })}
-              className="form-control "
+              className="form-control form-control-sm"
               id="middleName"
               placeholder="Middle Name"
               onInput={(e) => {
@@ -203,7 +201,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
                   message: "Only letters are allowed",
                 },
               })}
-              className="form-control "
+              className="form-control form-control-sm"
               id="lastName"
               placeholder="Last Name"
               onInput={(e) => {
@@ -233,7 +231,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               type="email"
               id="email"
               {...register("email")}
-              className="form-control "
+              className="form-control form-control-sm"
               placeholder="example@domain.com"
               maxLength={80}
               aria-describedby="Email"
@@ -257,7 +255,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               keyboardType="numeric"
               id="phoneNumber"
               {...register("phoneNumber")}
-              className="form-control "
+              className="form-control form-control-sm"
               placeholder="Phone Number"
               inputMode="numeric"
               maxLength={10}
@@ -274,7 +272,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>
@@ -302,44 +300,7 @@ 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
@@ -397,7 +358,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
 
             <textarea
               id="currentAddress"
-              className="form-control "
+              className="form-control form-control-sm"
               placeholder="Current Address"
               aria-label="Current Address"
               aria-describedby="basic-icon-default-message2"
@@ -427,7 +388,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
 
             <textarea
               id="permanentAddress"
-              className="form-control "
+              className="form-control form-control-sm"
               placeholder="Permanent Address"
               aria-label="Permanent Address"
               aria-describedby="basic-icon-default-message2"
@@ -458,34 +419,25 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             <Label className="form-text text-start" required>
               Organization
             </Label>
-
+            <div className="input-group">
-            <div>
+              <select
-              <AppFormController
+                className="form-select form-select-sm"
-                name="organizationId"
+                {...register("organizationId")}
-                control={control}
+                id="organizationId"
-                render={({ field }) => (
+                aria-label=""
-                  <SelectField
+              >
-                    label="" // Already showing label above
+                <option disabled value="">
-                    options={
+                  Select Organization
-                      organzationList?.data
+                </option>
-                        ?.sort((a, b) => a?.name?.localeCompare(b?.name))
+                {organzationList?.data
-                        ?.map((item) => ({
+                  .sort((a, b) => a?.name?.localeCompare(b?.name))
-                          id: item.id,
+                  .map((item) => (
-                          name: item.name,
+                    <option value={item?.id} key={item?.id}>
-                        })) || []
+                      {item?.name}
-                    }
+                    </option>
-                    placeholder="Select Organization"
+                  ))}
-                    required
+              </select>
-                    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"
@@ -496,7 +448,6 @@ 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
@@ -517,42 +468,46 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
           </div>
         </div>
         <div className="row mb-3">
-          <div className="col-sm-4 text-start">
+          <div className="col-sm-4">
-            <AppFormController
+            <Label className="form-text text-start" required>
-              name="jobRoleId"
+              Official Designation
-              control={control}
+            </Label>
-              render={({ field }) => (
+            <div className="input-group">
-                <SelectField
+              <select
-                  label="Official Designation"
+                className="form-select form-select-sm"
-                  required
+                {...register("jobRoleId")}
-                  options={[...job_role].sort((a, b) =>
+                id="jobRoleId"
-                    a?.name?.localeCompare(b?.name)
+                aria-label=""
-                  )}
+              >
-                  placeholder="Select Role"
+                <option disabled value="">
-                  labelKey="name"
+                  Select Role
-                  valueKeyKey="id"
+                </option>
-                  value={field.value}
+                {[...job_role]
-                  onChange={field.onChange}
+                  .sort((a, b) => a?.name?.localeCompare(b.name))
-                  className="m-0"
+                  .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" }}>
+              <div
+                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>
             <input
               type="text"
               {...register("emergencyContactPerson")}
-              className="form-control "
+              className="form-control form-control-sm"
               id="emergencyContactPerson"
               maxLength={50}
               placeholder="Contact Person"
@@ -566,14 +521,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
               </div>
             )}
           </div>
-          <div className="col-sm-4 mt-n1">
+          <div className="col-sm-4">
             <Label className="form-text text-start" required>
               Emergency Phone Number
             </Label>
             <input
               type="text"
               {...register("emergencyPhoneNumber")}
-              className="form-control  phone-mask"
+              className="form-control form-control-sm phone-mask"
               id="emergencyPhoneNumber"
               placeholder="Phone Number"
               inputMode="numeric"
@@ -596,7 +551,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             <input
               type="text"
               {...register("aadharNumber")}
-              className="form-control "
+              className="form-control form-control-sm"
               id="aadharNumber"
               placeholder="AADHAR Number"
               maxLength={12}
@@ -614,7 +569,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
             <input
               type="text"
               {...register("panNumber")}
-              className="form-control "
+              className="form-control form-control-sm"
               id="panNumber"
               placeholder="PAN Number"
               maxLength={10}

src/components/Expenses/ManageExpense.jsx

@@ -37,7 +37,6 @@ 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 {
@@ -183,15 +182,15 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
         currencyId: data.currency.id || DEFAULT_CURRENCY,
         billAttachments: data.documents
           ? data.documents.map((doc) => ({
-            fileName: doc.fileName,
+              fileName: doc.fileName,
-            base64Data: null,
+              base64Data: null,
-            contentType: doc.contentType,
+              contentType: doc.contentType,
-            documentId: doc.documentId,
+              documentId: doc.documentId,
-            fileSize: 0,
+              fileSize: 0,
-            description: "",
+              description: "",
-            preSignedUrl: doc.preSignedUrl,
+              preSignedUrl: doc.preSignedUrl,
-            isActive: doc.isActive ?? true,
+              isActive: doc.isActive ?? true,
-          }))
+            }))
           : [],
       });
     }
@@ -237,7 +236,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"
@@ -260,32 +259,30 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <Label htmlFor="expenseCategoryId" className="form-label" required>
               Expense Category
             </Label>
-
+            <select
-            <AppFormController
+              className="form-select "
-              name="expenseCategoryId"
+              id="expenseCategoryId"
-              control={control}
+              {...register("expenseCategoryId")}
-              rules={{ required: "Expense Category is required" }}
+            >
-              render={({ field }) => (
+              <option value="" disabled>
-                <SelectField
+                Select Category
-                  label="" // Label already shown above
+              </option>
-                  placeholder="Select Category"
+              {ExpenseLoading ? (
-                  options={expenseCategories ?? []}
+                <option disabled>Loading...</option>
-                  value={field.value || ""}
+              ) : (
-                  onChange={field.onChange}
+                expenseCategories?.map((expense) => (
-                  required
+                  <option key={expense.id} value={expense.id}>
-                  isLoading={ExpenseLoading}
+                    {expense.name}
-                  className="m-0 form-select-sm w-100"
+                  </option>
-                />
+                ))
               )}
-            />
+            </select>
-
+            {errors.expensesCategoryId && (
-            {errors.expenseCategoryId && (
               <small className="danger-text">
-                {errors.expenseCategoryId.message}
+                {errors.expensesCategoryId.message}
               </small>
             )}
           </div>
-
         </div>
 
         <div className="row my-2 text-start">
@@ -293,40 +290,40 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <Label htmlFor="paymentModeId" className="form-label" required>
               Payment Mode
             </Label>
-
+            <select
-            <AppFormController
+              className="form-select "
-              name="paymentModeId"
+              id="paymentModeId"
-              control={control}
+              {...register("paymentModeId")}
-              rules={{ required: "Payment Mode is required" }}
+            >
-              render={({ field }) => (
+              <option value="" disabled>
-                <SelectField
+                Select Mode
-                  label="" // Label is shown above
+              </option>
-                  placeholder="Select Mode"
+              {PaymentModeLoading ? (
-                  options={PaymentModes ?? []}
+                <option disabled>Loading...</option>
-                  value={field.value || ""}
+              ) : (
-                  onChange={field.onChange}
+                PaymentModes?.map((payment) => (
-                  required
+                  <option key={payment.id} value={payment.id}>
-                  isLoading={PaymentModeLoading}
+                    {payment.name}
-                  className="m-0 form-select-sm w-100"
+                  </option>
-                />
+                ))
               )}
-            />
+            </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} 
                 />
               )}
             />
@@ -440,37 +437,32 @@ 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
-            <AppFormController
+              className="form-select "
-              name="currencyId"
+              id="currencyId"
-              control={control}
+              {...register("currencyId")}
-              rules={{ required: "Currency is required" }}
+            >
-              render={({ field }) => (
+              <option value="" disabled>
-                <SelectField
+                Select Currency
-                  label="" // Label already shown above
+              </option>
-                  placeholder="Select Currency"
+              {currencyLoading ? (
-                  options={currencies?.map((currency) => ({
+                <option disabled>Loading...</option>
-                    id: currency.id,
+              ) : (
-                    name: `${currency.currencyName} (${currency.symbol})`,
+                currencies?.map((currency) => (
-                  })) ?? []}
+                  <option key={currency.id} value={currency.id}>
-                  value={field.value || ""}
+                    {`${currency.currencyName} (${currency.symbol}) `}
-                  onChange={field.onChange}
+                  </option>
-                  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>
@@ -561,7 +553,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
                     (fileError?.fileSize?.message ||
                       fileError?.contentType?.message ||
                       fileError?.base64Data?.message,
-                      fileError?.documentId?.message)
+                    fileError?.documentId?.message)
                   }
                 </div>
               ))}
@@ -586,8 +578,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             {isPending || createPending
               ? "Please Wait..."
               : expenseToEdit
-                ? "Update"
+              ? "Update"
-                : "Save as Draft"}
+              : "Save as Draft"}
           </button>
         </div>
       </form>

src/components/PaymentRequest/ManagePaymentRequest.jsx

@@ -30,8 +30,6 @@ 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 {
@@ -178,15 +176,15 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
         isAdvancePayment: data.isAdvancePayment || false,
         billAttachments: data.attachments
           ? data?.attachments?.map((doc) => ({
-            fileName: doc.fileName,
+              fileName: doc.fileName,
-            base64Data: null,
+              base64Data: null,
-            contentType: doc.contentType,
+              contentType: doc.contentType,
-            documentId: doc.id,
+              documentId: doc.id,
-            fileSize: 0,
+              fileSize: 0,
-            description: "",
+              description: "",
-            preSignedUrl: doc.preSignedUrl,
+              preSignedUrl: doc.preSignedUrl,
-            isActive: doc.isActive ?? true,
+              isActive: doc.isActive ?? true,
-          }))
+            }))
           : [],
       });
     }
@@ -268,9 +266,9 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                   shouldDirty: true,
                   shouldValidate: true,
                 })
-
+                
               }
-              disabled={
+                disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
               }
             />
@@ -283,33 +281,33 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             <Label htmlFor="expenseCategoryId" className="form-label" required>
               Expense Category
             </Label>
-
+            <select
-            <AppFormController
+              className="form-select "
-              name="expenseCategoryId"
+              id="expenseCategoryId"
-              control={control}
+              {...register("expenseCategoryId")}
-              rules={{ required: "Expense Category is required" }}
+              disabled={
-              render={({ field }) => (
+                data?.recurringPayment?.isVariable && !isDraft && !isProcessed
-                <SelectField
+              }
-                  label="" // Label already above
+            >
-                  placeholder="Select Category"
+              <option value="" disabled>
-                  options={expenseCategories ?? []}
+                Select Category
-                  value={field.value || ""}
+              </option>
-                  onChange={field.onChange}
+              {ExpenseLoading ? (
-                  required
+                <option disabled>Loading...</option>
-                  isLoading={ExpenseLoading}
+              ) : (
-                  isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
+                expenseCategories?.map((expense) => (
-                  className="m-0 form-select-sm w-100"
+                  <option key={expense.id} value={expense.id}>
-                />
+                    {expense.name}
+                  </option>
+                ))
               )}
-            />
+            </select>
-
             {errors.expenseCategoryId && (
               <small className="danger-text">
                 {errors.expenseCategoryId.message}
               </small>
             )}
           </div>
-
         </div>
 
         {/* Title and Advance Payment  */}
@@ -460,39 +458,30 @@ 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>
 
-            <AppFormController
+              {currencyLoading && <option>Loading...</option>}
-              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  */}
@@ -519,7 +508,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
         </div>
 
         {/* Upload Document  */}
-        <div className="row my-4 text-start">
+        <div className="row my-2 text-start">
           <div className="col-md-12">
             <Label className="form-label">Upload Bill </Label>
 
@@ -570,7 +559,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                     (fileError?.fileSize?.message ||
                       fileError?.contentType?.message ||
                       fileError?.base64Data?.message,
-                      fileError?.documentId?.message)
+                    fileError?.documentId?.message)
                   }
                 </div>
               ))}
@@ -593,8 +582,8 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             {createPending || isPending
               ? "Please Wait..."
               : requestToEdit
-                ? "Update"
+              ? "Update"
-                : "Save as Draft"}
+              : "Save as Draft"}
           </button>
         </div>
       </form>

src/components/Project/AssignTask.jsx

@@ -18,8 +18,6 @@ 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({
@@ -109,7 +107,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     );
 
   const dispatch = useDispatch();
-  const { loading, data: jobRoleData } = useMaster("Job Role");
+  const { loading, data: jobRoleData } = useMaster();
 
   const [selectedRoles, setSelectedRoles] = useState(["all"]);
   const [displayedSelection, setDisplayedSelection] = useState("");
@@ -130,8 +128,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);
@@ -243,57 +241,48 @@ 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 mt-4">
+                    <div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center">
                       <div>
-                        <AppFormController
+                        <select
-                          name="organizationId"
+                          className="form-select form-select-sm"
-                          control={control}
+                          value={selectedOrganization || ""}
-                          rules={{ required: "Organization is required" }}
+                          onChange={(e) =>
-                          render={({ field }) => (
+                            setSelectedOrganization(e.target.value)
-                            <SelectField
+                          }
-                              label="" // No label here, use external label if needed
+                        >
-                              options={organizationList ?? []}
+                          {isServiceLoading ? (
-                              placeholder="--Select Organization--"
+                            <option>Loading...</option>
-                              required
+                          ) : (
-                              labelKey="name"
+                            <>
-                              valueKeyKey="id"
+                              <option value="">--Select Organization--</option>
-                              value={field.value || ""}
+                              {organizationList?.map((org,index) => (
-                              onChange={field.onChange}
+                                <option key={`${org.id}-${index}`} value={org.id}>
-                              isLoading={isServiceLoading}
+                                  {org.name}
-                              className="m-0 form-select-sm w-100"
+                                </option>
-                            />
+                              ))}
+                            </>
                           )}
-                        />
+                        </select>
-
-                        {errors.organizationId && (
-                          <small className="danger-text">{errors.organizationId.message}</small>
-                        )}
                       </div>
-
                       <div>
-                        <AppFormController
+                        <select
-                          name="serviceId"
+                          className="form-select form-select-sm"
-                          control={control}
+                          value={selectedService || ""}
-                          rules={{ required: "Service is required" }}
+                          onChange={(e) => setSelectedService(e.target.value)}
-                          render={({ field }) => (
+                        >
-                            <SelectField
+                          {isOrgLoading ? (
-                              label="" // No label as you have one above or elsewhere
+                            <option>Loading...</option>
-                              options={serviceList ?? []}
+                          ) : (
-                              placeholder="--Select Service--"
+                            <>
-                              required
+                              <option value="">--Select Service--</option>
-                              labelKey="name"
+                              {serviceList?.map((service,index) => (
-                              valueKeyKey="id"
+                                <option key={`${service.id}-${index}`}  value={service.id}>
-                              value={field.value || ""}
+                                  {service.name}
-                              onChange={field.onChange}
+                                </option>
-                              isLoading={isOrgLoading}
+                              ))}
-                              className="m-0 form-select-sm w-100"
+                            </>
-                            />
                           )}
-                        />
+                        </select>
-
-                        {errors.serviceId && (
-                          <small className="danger-text">{errors.serviceId.message}</small>
-                        )}
                       </div>
                     </div>
                     <div
@@ -303,11 +292,12 @@ 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-secondary"
-                            : "text-primary"
+                              : "text-primary"
-                            }`}
+                          }`}
                           onClick={() => setOpen(!open)}
                         >
                           <i className="bx bx-slider-alt ms-2"></i>
@@ -419,7 +409,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
                         );
@@ -489,14 +479,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}

src/components/Project/Infrastructure/BuildingModel.jsx

@@ -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,8 +22,14 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
   );
-
+  const {
-  const methods = useForm({
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    watch,
+    reset,
+  } = useForm({
     resolver: zodResolver(buildingSchema),
     defaultValues: {
       Id: "0",
@@ -31,23 +37,12 @@ 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: () => {
+    onSuccessCallback: (data, variables) => {
       showToast(
-        watchedId !== "0"
+        watchedId != "0"
           ? "Building updated Successfully"
           : "Building created Successfully",
         "success"
@@ -84,7 +79,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
         description: editingBuilding.description,
       });
     }
-  }, [editingBuilding, reset]);
+  }, [editingBuilding]);
 
   const onSubmitHandler = (data) => {
     const payload = {
@@ -93,109 +88,95 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
       projectId: selectedProject,
     };
 
-    const infraObject = [
+    let infraObject = [
       {
         building: payload,
         floor: null,
         workArea: null,
       },
     ];
-
     ManageBuilding({ infraObject, projectId: selectedProject });
   };
 
   return (
-    <AppFormProvider {...methods}>
+    <form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
-      <form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
+      <h5 className="text-center mb-2">Manage Buildings</h5>
-        <h5 className="text-center mb-2">Manage Buildings</h5>
+      <div className="col-12 text-start">
-
+        <label className="form-label">Select Building</label>
-        {/* Building Select */}
+        <select
-        <div className="col-12 text-start">
+          {...register("Id")}
-          <Label htmlFor="Id" className="form-label">
+          className="select2 form-select form-select-sm"
-            Select Building
+        >
-          </Label>
+          <option value="0">Add New Building</option>
-          <AppFormController
+          {sortedBuildings.length > 0 ? (
-            name="Id"
+            sortedBuildings.map((b) => (
-            control={control}
+              <option key={b.id} value={b.id}>
-            rules={{ required: "Building is required" }}
+                {b.buildingName}
-            render={({ field }) => (
+              </option>
-              <SelectField
+            ))
-                label=""
+          ) : (
-                placeholder="Select Building"
+            <option disabled>No buildings found</option>
-                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>
           )}
-        </div>
+        </select>
+        {errors.Id && <span className="danger-text">{errors.Id.message}</span>}
+      </div>
 
-        {/* Buttons */}
+      {/* Name */}
-        <div className="col-12 text-end mt-6 my-2">
+      <div className="col-12 text-start">
-          <button
+        <Label className="form-label" required>
-            type="reset"
+          {watchedId !== "0" ? "Rename Building Name" : "New Building Name"}
-            className="btn btn-sm btn-label-secondary me-3"
+        </Label>
-            disabled={isPending}
+        <input
-            onClick={() => {
+          {...register("name")}
-              onClose();
+          type="text"
-              reset();
+          className="form-control form-control-sm"
-            }}
+        />
-          >
+        {errors.name && (
-            Cancel
+          <span className="danger-text">{errors.name.message}</span>
-          </button>
+        )}
-          <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
+      </div>
-            {isPending
+
-              ? "Please wait..."
+      {/* Description */}
-              : watchedId !== "0"
+      <div className="col-12 text-start">
-              ? "Edit Building"
+        <Label className="form-label" required>Description</Label>
-              : "Add Building"}
+        <textarea
-          </button>
+          {...register("description")}
-        </div>
+          rows="5"
-      </form>
+          maxLength="160"
-    </AppFormProvider>
+          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>
   );
 };
 

src/components/Project/Infrastructure/EditActivityModal.jsx

@@ -12,8 +12,6 @@ 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({
@@ -39,7 +37,17 @@ const EditActivityModal = ({
   const { activities, loading: loadingActivities } = useActivitiesMaster();
   const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
   const [selectedActivity, setSelectedActivity] = useState(null);
-  const methods = useForm({
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+    setValue,
+    getValues,
+    watch,
+  } = useForm({
+    resolver: zodResolver(taskSchema),
     defaultValues: {
       activityID: "",
       workCategoryId: "",
@@ -47,11 +55,7 @@ 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")
@@ -59,6 +63,8 @@ const EditActivityModal = ({
     }
   });
 
+
+
   const activityID = watch("activityID");
 
   const sortedActivities = useMemo(
@@ -120,168 +126,158 @@ const EditActivityModal = ({
     });
   }
   return (
-    <AppFormProvider {...methods}>
+    <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
-      <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
+      <div className="text-center mb-1">
-        <div className="text-center mb-1">
+        <h5 className="mb-1">Manage Task</h5>
-          <h5 className="mb-1">Manage Task</h5>
+      </div>
-        </div>
 
-        <div className="row g-2 text-start">
+      <div className="row g-2 text-start">
-          <div className="col-12 col-md-6">
+        <div className="col-12 col-md-6">
-            <label className="form-label">Select Building</label>
+          <label className="form-label">Select Building</label>
-            <input
-              className="form-control"
-              value={building?.buildingName}
-              disabled
-            />
-          </div>
-
-          <div className="col-12 col-md-6">
-            <label className="form-label">Select Floor</label>
-            <input
-              className="form-control"
-              value={floor?.floorName}
-              disabled
-            />
-          </div>
-        </div>
-
-        <div className="col-12 text-start">
-          <label className="form-label">Select Work Area</label>
           <input
-            className="form-control"
+            className="form-control form-control-sm"
-            value={workArea?.areaName}
+            value={building?.buildingName}
-            disabled
-          />
-        </div>
-        <div className="col-12 text-start">
-          <label className="form-label">Select Service</label>
-          <input
-            className="form-control"
-            value={
-              workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
-            }
             disabled
           />
         </div>
 
-
+        <div className="col-12 col-md-6">
-        <div className="col-12 text-start">
+          <label className="form-label">Select Floor</label>
-          <label className="form-label">Select Activity</label>
+          <input
-          <select
+            className="form-control form-control-sm"
-            {...register("activityID")}
+            value={floor?.floorName}
-            className="form-select"
             disabled
-          >
-            <option >Select Activity</option>
-            {loadingActivities ? (
-              <option>Loading...</option>
-            ) : (
-              sortedActivities.map((a) => (
-                <option key={a.id} value={a.id}>
-                  {a.activityName}
-                </option>
-              ))
-            )}
-          </select>
-          {errors.activityID && (
-            <p className="danger-text">{errors.activityID.message}</p>
-          )}
-        </div>
-
-        <div className="col-12 text-start">
-          <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"
-              />
-            )}
-          />
-
-          {errors.workCategoryId && (
-            <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"
-          />
-          {errors.plannedWork && (
-            <p className="danger-text">{errors.plannedWork.message}</p>
-          )}
-        </div>
-
-        <div className="col-5 text-start">
-          <label className="form-label">Completed Work</label>
-          <input
-            {...register("completedWork", { valueAsNumber: true })}
-            type="number"
-            disabled={getValues("completedWork") > 0}
-            className="form-control"
-          />
-          {errors.completedWork && (
-            <p className="danger-text">{errors.completedWork.message}</p>
-          )}
-        </div>
-
-        <div className="col-2 text-start">
-          <label className="form-label">Unit</label>
-          <input
-            className="form-control"
-            disabled
-            value={selectedActivity?.unitOfMeasurement || ""}
           />
         </div>
+      </div>
 
-        <div className="col-12 text-start">
+      <div className="col-12 text-start">
-          <label className="form-label">Comment</label>
+        <label className="form-label">Select Work Area</label>
-          <textarea {...register("comment")} rows="2" className="form-control" />
+        <input
-          {errors.comment && (
+          className="form-control form-control-sm"
-            <div className="danger-text">{errors.comment.message}</div>
+          value={workArea?.areaName}
+          disabled
+        />
+      </div>
+      <div className="col-12 text-start">
+        <label className="form-label">Select Service</label>
+        <input
+          className="form-control form-control-sm"
+          value={
+            workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
+          }
+          disabled
+        />
+      </div>
+
+
+      <div className="col-12 text-start">
+        <label className="form-label">Select Activity</label>
+        <select
+          {...register("activityID")}
+          className="form-select form-select-sm"
+          disabled
+        >
+          <option >Select Activity</option>
+          {loadingActivities ? (
+            <option>Loading...</option>
+          ) : (
+            sortedActivities.map((a) => (
+              <option key={a.id} value={a.id}>
+                {a.activityName}
+              </option>
+            ))
           )}
-        </div>
+        </select>
+        {errors.activityID && (
+          <p className="danger-text">{errors.activityID.message}</p>
+        )}
+      </div>
 
-        <div className="col-12 text-end mt-5">
+      <div className="col-12 text-start">
-          <button
+        <label className="form-label">Select Work Category</label>
-            type="button"
+        <select
-            className="btn btn-sm btn-label-secondary me-2"
+          {...register("workCategoryId")}
-            onClick={onClose}
+          className="form-select form-select-sm"
-            disabled={isPending}
+        >
-          >
+          <option disabled>Select Category</option>
-            Cancel
+          {loadingCategories ? (
-          </button>
+            <option>Loading...</option>
-          <button
+          ) : (
-            type="submit"
+            sortedCategories.map((c) => (
-            className="btn btn-sm btn-primary"
+              <option key={c.id} value={c.id}>
-            disabled={isPending}
+                {c.name}
-          >
+              </option>
-            {isPending ? "Please Wait..." : "Edit Task"}
+            ))
-          </button>
+          )}
-        </div>
+        </select>
-      </form>
+        {errors.workCategoryId && (
-    </AppFormProvider>
+          <p className="danger-text">{errors.workCategoryId.message}</p>
+        )}
+      </div>
+
+      <div className="col-5 text-start">
+        <label className="form-label">Planned Work</label>
+        <input
+          {...register("plannedWork", { valueAsNumber: true })}
+          type="number"
+          step="0.01"   // <-- allows 2 decimal places
+          className="form-control form-control-sm"
+        />
+
+        {errors.plannedWork && (
+          <p className="danger-text">{errors.plannedWork.message}</p>
+        )}
+      </div>
+
+      <div className="col-5 text-start">
+        <label className="form-label">Completed Work</label>
+        <input
+          {...register("completedWork", { valueAsNumber: true })}
+          type="number"
+          disabled={getValues("completedWork") > 0}
+          className="form-control form-control-sm"
+        />
+        {errors.completedWork && (
+          <p className="danger-text">{errors.completedWork.message}</p>
+        )}
+      </div>
+
+      <div className="col-2 text-start">
+        <label className="form-label">Unit</label>
+        <input
+          className="form-control form-control-sm"
+          disabled
+          value={selectedActivity?.unitOfMeasurement || ""}
+        />
+      </div>
+
+      <div className="col-12 text-start">
+        <label className="form-label">Comment</label>
+        <textarea {...register("comment")} rows="2" className="form-control" />
+        {errors.comment && (
+          <div className="danger-text">{errors.comment.message}</div>
+        )}
+      </div>
+
+      <div className="col-12 text-end mt-5">
+        <button
+          type="button"
+          className="btn btn-sm btn-label-secondary me-2"
+          onClick={onClose}
+          disabled={isPending}
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          className="btn btn-sm btn-primary"
+          disabled={isPending}
+        >
+          {isPending ? "Please Wait..." : "Edit Task"}
+        </button>
+      </div>
+    </form>
   );
 };
 

src/components/Project/Infrastructure/FloorModel.jsx

@@ -6,8 +6,6 @@ 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({
@@ -29,12 +27,17 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
   );
   const [selectedBuilding, setSelectedBuilding] = useState(null);
 
-  const methods = useForm({
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    reset,
+    watch,
+    formState: { errors },
+  } = 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({
@@ -45,7 +48,7 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
           : "Floor created Successfully",
         "success"
       );
-      reset({ id: "0", floorName: "" });
+      reset({ id: "0", floorName: ""});
       // onClose?.();
     },
   });
@@ -95,139 +98,94 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
   };
 
   return (
-    <AppFormProvider {...methods}>
+    <form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
-      <form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
+      <div className="text-center mb-1">
-        <div className="text-center mb-1">
+        <h5 className="mb-1">Manage Floor</h5>
-          <h5 className="mb-1">Manage Floor</h5>
+      </div>
-        </div>
+      <div className="col-12 text-start">
-        <div className="col-12 text-start">
+        <Label className="form-label" required>Select Building</Label>
-          <Label className="form-label" required>
+        <select
-            Select Building
+          {...register("buildingId")}
-          </Label>
+          className="form-select form-select-sm"
-          <AppFormController
+          onChange={handleBuildingChange}
-            name="buildingId"
+        >
-            control={control}
+          <option value="0">Select Building</option>
-            rules={{ required: "Building is required" }}
+          {project?.length > 0 &&
-            render={({ field }) => (
+            project
-              <SelectField
+              .filter((b) => b.buildingName)
-                label=""
+              .sort((a, b) => a.buildingName.localeCompare(b.buildingName))
-                placeholder="Select Building"
+              .map((b) => (
-                options={
+                <option key={b.id} value={b.id}>
-                  project
+                  {b.buildingName}
-                    ?.filter((b) => b.buildingName)
+                </option>
-                    .sort((a, b) => a.buildingName.localeCompare(b.buildingName))
+              ))}
-                    .map((b) => ({ id: String(b.id), name: b.buildingName })) ?? []
+        </select>
-                }
+        {errors.buildingId && (
-                value={field.value || ""}
+          <p className="danger-text">{errors.buildingId.message}</p>
-                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"
-              />
-            )}
-          />
-          {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>
-
-              <AppFormController
-                name="id"
-                control={control}
-                rules={{ required: "Floor is required" }}
-                render={({ field }) => {
-                  // Prepare options
-                  const floorOptions = [
-                    { 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 })) ?? []),
-                  ];
-
-                  return (
-                    <SelectField
-                      label=""
-                      placeholder="Select Floor"
-                      options={floorOptions}
-                      value={field.value || "0"} // default to "0"
-                      onChange={(val) => {
-                        field.onChange(val); // update react-hook-form
-
-                        if (val === "0") {
-                          setValue("floorName", ""); // clear for new floor
-                        } else {
-                          const floor = selectedBuilding?.floors?.find(f => f.id === val);
-                          setValue("floorName", floor?.floorName || "");
-                        }
-                      }}
-                      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>
 
-        <div className="col-12 text-end mt-6 my-2">
+      {watchBuildingId !== "0" && (
-          <button
+        <>
-            type="button"
+          <div className="col-12 text-start">
-            className="btn btn-sm btn-label-secondary me-3"
+            <label className="form-label">Select Floor</label>
-            disabled={isPending}
+            <select
-            onClick={onClose}
+              {...register("id")}
-          >
+              className="form-select form-select-sm"
-            Cancel
+              onChange={handleFloorChange}
-          </button>
+            >
-          <button
+              <option value="0">Add New Floor</option>
-            type="submit"
+              {selectedBuilding?.floors?.length > 0 &&
-            className="btn btn-sm btn-primary"
+                selectedBuilding.floors
-            disabled={isPending}
+                  .filter((f) => f.floorName)
-          >
+                  .sort((a, b) => a.floorName.localeCompare(b.floorName))
-            {isPending
+                  .map((f) => (
-              ? "Please Wait"
+                    <option key={f.id} value={f.id}>
-              : watchId !== "0"
+                      {f.floorName}
-                ? "Edit Floor"
+                    </option>
-                : "Add Floor"}
+                  ))}
-          </button>
+            </select>
+          </div>
 
-        </div>
+          <div className="col-12 text-start">
-      </form>
+            <Label className="form-label" required>
-    </AppFormProvider>
+              {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>
+            )}
+          </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>
   );
 };
 

src/components/Project/Infrastructure/TaskModel.jsx

@@ -8,12 +8,10 @@ import {
   useGroups,
   useWorkCategoriesMaster,
 } from "../../../hooks/masterHook/useMaster";
-import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
+import { useManageTask,  useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
 import showToast from "../../../services/toastService";
 import Label from "../../common/Label";
 import { useSelectedProject } from "../../../slices/apiDataManager";
-import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
-import SelectField from "../../common/Forms/SelectField";
 
 const taskSchema = z.object({
   buildingID: z.string().min(1, "Building is required"),
@@ -78,12 +76,18 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
     setValue("activityID", "");
   };
 
-  const methods = useForm({
-    defaultValues: defaultModel,
-    resolver: zodResolver(taskSchema),
-  });
 
-  const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
+  const {
+    register,
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(taskSchema),
+    defaultValues: defaultModel,
+  });
 
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [activityData, setActivityData] = useState([]);
@@ -108,10 +112,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   const { mutate: CreateTask, isPending } = useManageTask({
     onSuccessCallback: (response) => {
       showToast(response?.message, "success");
-      setValue("activityID", ""),
+      setValue("activityID",""),
-        setValue("plannedWork", 0),
+      setValue("plannedWork",0),
-        setValue("completedWork", 0)
+      setValue("completedWork",0)
-      setValue("comment", "")
+      setValue("comment","")
     },
   });
   useEffect(() => {
@@ -144,290 +148,224 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
   };
 
   return (
-    <AppFormProvider {...methods}>
+    <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
-      <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
+      <div className="text-center mb-1">
-        <div className="text-center mb-1">
+        <h5 className="mb-1">Manage Task</h5>
-          <h5 className="mb-1">Manage Task</h5>
+      </div>
-        </div>
+      <div className="col-6 text-start">
-        {/* Select Building */}
+        <Label className="form-label" required>Select Building</Label>
+        <select
+          className="form-select form-select-sm"
+          {...register("buildingID")}
+        >
+          <option value="">Select Building</option>
+          {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>
+
+      {selectedBuilding && (
         <div className="col-6 text-start">
-          <AppFormController
+          <Label className="form-label" required>Select Floor</Label>
-            name="buildingID"
+          <select
-            control={control}
+            className="form-select form-select-sm"
-            render={({ field }) => (
+            {...register("floorId")}
-              <SelectField
+          >
-                label="Select Building"
+            <option value="">Select Floor</option>
-                options={project ?? []}
+            {selectedBuilding.floors
-                placeholder="Select Building"
+              ?.sort((a, b) => a.floorName.localeCompare(b.floorName))
-                required
+              ?.map((f) => (
-                labelKey="buildingName"
+                <option key={f.id} value={f.id}>
-                valueKey="id"
+                  {f.floorName}
-                value={field.value}
+                </option>
-                onChange={(value) => {
+              ))}
-                  field.onChange(value);
+          </select>
-                  setValue("floorId", "");
+          {errors.floorId && (
-                  setValue("workAreaId", "");
+            <p className="danger-text">{errors.floorId.message}</p>
-                  setSelectedService("");
-                  setSelectedGroup("");
-                }}
-                className="m-0"
-              />
-            )}
-          />
-          {errors.buildingID && (
-            <small className="danger-text">{errors.buildingID.message}</small>
           )}
         </div>
+      )}
 
-        {/* Select Floor */}
+      {/* Work Area Selection */}
-        {selectedBuilding && (
+      {selectedFloor && (
-          <div className="col-6 text-start">
+        <div className="col-12 text-start">
-            <AppFormController
+          <Label className="form-label" required>Select Work Area</Label>
-              name="floorId"
+          <select
-              control={control}
+            className="form-select form-select-sm"
-              render={({ field }) => (
+            {...register("workAreaId")}
-                <SelectField
-                  label="Select Floor"
-                  options={selectedBuilding?.floors ?? []}
-                  placeholder={
-                    selectedBuilding?.floors?.length > 0
-                      ? "Select Floor"
-                      : "No Floor Found"
-                  }
-                  required
-                  labelKey="floorName"
-                  valueKey="id"
-                  value={field.value}
-                  onChange={(value) => {
-                    field.onChange(value);
-                    setValue("workAreaId", "");
-                  }}
-                  className="m-0"
-                />
-              )}
-            />
-            {errors.floorId && (
-              <small className="danger-text">{errors.floorId.message}</small>
-            )}
-          </div>
-        )}
-
-        {/* Select Work Area */}
-        {selectedFloor && (
-          <div className="col-12 text-start">
-            <AppFormController
-              name="workAreaId"
-              control={control}
-              render={({ field }) => (
-                <SelectField
-                  label="Select Work Area"
-                  options={selectedFloor?.workAreas ?? []}
-                  placeholder="Select Work Area"
-                  required
-                  labelKey="areaName"
-                  valueKey="id"
-                  value={field.value}
-                  onChange={(value) => {
-                    field.onChange(value);
-                    setSelectedService("");
-                    setSelectedGroup("");
-                  }}
-                  className="m-0"
-                />
-              )}
-            />
-            {errors.workAreaId && (
-              <small className="danger-text">{errors.workAreaId.message}</small>
-            )}
-          </div>
-        )}
-
-        {/* Select Service */}
-        {selectedWorkArea && (
-          <div className="col-12 text-start">
-            <AppFormController
-              name="serviceId"
-              control={control}
-              render={({ field }) => (
-                <SelectField
-                  label="Select Service"
-                  options={assignedServices ?? []}
-                  placeholder="Select Service"
-                  required
-                  labelKey="name"
-                  valueKey="id"
-                  value={field.value}
-                  onChange={(value) => {
-                    field.onChange(value);
-                    setSelectedService(value);
-                    setSelectedGroup("");
-                    setValue("activityGroupId", "");
-                    setValue("activityID", "");
-                  }}
-                  isLoading={servicesLoading}
-                  className="m-0"
-                />
-              )}
-            />
-            {errors.serviceId && (
-              <small className="danger-text">{errors.serviceId.message}</small>
-            )}
-          </div>
-        )}
-
-        {/* Select Activity Group */}
-        {selectedService && (
-          <div className="col-12 text-start">
-            <AppFormController
-              name="activityGroupId"
-              control={control}
-              render={({ field }) => (
-                <SelectField
-                  label="Select Activity Group"
-                  options={groups ?? []}
-                  placeholder="Select Activity Group"
-                  required
-                  labelKey="name"
-                  valueKey="id"
-                  value={field.value}
-                  onChange={(value) => {
-                    field.onChange(value);
-                    setSelectedGroup(value);
-                    setValue("activityID", "");
-                  }}
-                  isLoading={groupsLoading}
-                  className="m-0"
-                />
-              )}
-            />
-            {errors.activityGroupId && (
-              <small className="danger-text">{errors.activityGroupId.message}</small>
-            )}
-          </div>
-        )}
-
-
-        {/* Select Activity */}
-        {selectedGroup && (
-          <div className="col-12 text-start">
-            <AppFormController
-              name="activityID"
-              control={control}
-              render={({ field }) => (
-                <SelectField
-                  label="Select Activity"
-                  options={activities ?? []}
-                  placeholder="Select Activity"
-                  required
-                  labelKey="activityName"
-                  valueKey="id"
-                  value={field.value}
-                  onChange={field.onChange}
-                  isLoading={activitiesLoading}
-                  className="m-0"
-                />
-              )}
-            />
-            {errors.activityID && (
-              <small className="danger-text">{errors.activityID.message}</small>
-            )}
-          </div>
-        )}
-
-        {watchActivityId && (
-          <div className="col-12 text-start">
-            <AppFormController
-              name="workCategoryId"
-              control={control}
-              render={({ field }) => (
-                <SelectField
-                  label="Select Work Category"
-                  options={categoryData ?? []}
-                  placeholder="Select Work Category"
-                  required
-                  labelKey="name"
-                  valueKey="id"
-                  value={field.value}
-                  onChange={field.onChange}
-                  className="m-0"
-                />
-              )}
-            />
-            {errors.workCategoryId && (
-              <small className="danger-text">{errors.workCategoryId.message}</small>
-            )}
-          </div>
-        )}
-
-        {selectedActivity && selectedCategory && (
-          <>
-            <div className="col-5 text-start">
-              <Label className="form-label" required>Planned Work</Label>
-              <input
-                type="number"
-                className="form-control "
-                {...register("plannedWork", { valueAsNumber: true })}
-              />
-              {errors.plannedWork && (
-                <p className="danger-text">{errors.plannedWork.message}</p>
-              )}
-            </div>
-            <div className="col-5 text-start">
-              <label className="form-label">Completed Work</label>
-              <input
-                type="number"
-                className="form-control "
-                {...register("completedWork", { valueAsNumber: true })}
-              />
-              {errors.completedWork && (
-                <p className="danger-text">{errors.completedWork.message}</p>
-              )}
-            </div>
-            <div className="col-2 text-start">
-              <label className="form-label">Unit</label>
-              <input
-                type="text"
-                className="form-control "
-                disabled
-                value={selectedActivity?.unitOfMeasurement || ""}
-              />
-            </div>
-          </>
-        )}
-
-        {selectedActivity && selectedCategory && (
-          <div className="col-12 text-start">
-            <label className="form-label">Comment</label>
-            <textarea
-              className="form-control"
-              rows="2"
-              {...register("comment")}
-            />
-            {errors.comment && (
-              <p className="danger-text">{errors.comment.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"
-            onClick={onClose}
           >
-            Cancel
+            <option value="">Select Work Area</option>
-          </button>
+            {selectedFloor.workAreas
-          <button
+              ?.sort((a, b) => a.areaName.localeCompare(b.areaName))
-            type="submit"
+              ?.map((w) => (
-            className="btn btn-sm btn-primary"
+                <option key={w.id} value={w.id}>
-            // disabled={isSubmitting}
+                  {w.areaName}
-            disabled={isPending}
+                </option>
-          >
+              ))}
-            {isPending ? "Please Wait..." : "Add Task"}
+          </select>
-          </button>
+          {errors.workAreaId && (
+            <p className="danger-text">{errors.workAreaId.message}</p>
+          )}
         </div>
-      </form>
+      )}
-    </AppFormProvider>
+
+      {/* Services Selection */}
+      {selectedWorkArea && (
+        <div className="col-12 text-start">
+          <Label className="form-label" required>Select Service</Label>
+          <select
+            className="form-select form-select-sm"
+            {...register("serviceId")}
+            value={selectedService}
+            // onChange={handleServiceChange}
+            onChange={(e) => {
+              handleServiceChange(e);
+              setValue("serviceId", e.target.value);
+            }}
+          >
+            <option value="">Select Service</option>
+            {servicesLoading && <option>Loading...</option>}
+            {assignedServices?.map((service) => (
+              <option key={service.id} value={service.id}>
+                {service.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {/* Activity Group (Organization) Selection */}
+      {selectedService && (
+        <div className="col-12 text-start">
+          <Label className="form-label" required>Select Activity Group</Label>
+          <select
+            className="form-select form-select-sm"
+            {...register("activityGroupId")}
+            value={selectedGroup}
+            onChange={handleGroupChange}
+          >
+            <option value="">Select Group</option>
+            {groupsLoading && <option>Loading...</option>}
+            {groups?.map((g) => (
+              <option key={g.id} value={g.id}>{g.name}</option>
+            ))}
+          </select>
+          {errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
+        </div>
+      )}
+
+
+      {/* Activity Selection */}
+      {selectedGroup && (
+        <div className="col-12 text-start">
+          <Label className="form-label" required>Select Activity</Label>
+          <select className="form-select form-select-sm" {...register("activityID")}>
+            <option value="">Select Activity</option>
+            {activitiesLoading && <option>Loading...</option>}
+            {activities?.map((a) => (
+              <option key={a.id} value={a.id}>{a.activityName}</option>
+            ))}
+          </select>
+          {errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
+        </div>
+      )}
+
+      {watchActivityId && (
+        <div className="col-12 text-start">
+          <label className="form-label">Select Work Category</label>
+          <select
+            className="form-select form-select-sm"
+            {...register("workCategoryId")}
+          >
+            {categoryData.map((c) => (
+              <option key={c.id} value={c.id}>
+                {c.name}
+              </option>
+            ))}
+          </select>
+          {errors.workCategoryId && (
+            <p className="danger-text">{errors.workCategoryId.message}</p>
+          )}
+        </div>
+      )}
+
+      {selectedActivity && selectedCategory && (
+        <>
+          <div className="col-5 text-start">
+            <Label className="form-label" required>Planned Work</Label>
+            <input
+              type="number"
+              className="form-control form-control-sm"
+              {...register("plannedWork", { valueAsNumber: true })}
+            />
+            {errors.plannedWork && (
+              <p className="danger-text">{errors.plannedWork.message}</p>
+            )}
+          </div>
+          <div className="col-5 text-start">
+            <label className="form-label">Completed Work</label>
+            <input
+              type="number"
+              className="form-control form-control-sm"
+              {...register("completedWork", { valueAsNumber: true })}
+            />
+            {errors.completedWork && (
+              <p className="danger-text">{errors.completedWork.message}</p>
+            )}
+          </div>
+          <div className="col-2 text-start">
+            <label className="form-label">Unit</label>
+            <input
+              type="text"
+              className="form-control form-control-sm"
+              disabled
+              value={selectedActivity?.unitOfMeasurement || ""}
+            />
+          </div>
+        </>
+      )}
+
+      {selectedActivity && selectedCategory && (
+        <div className="col-12 text-start">
+          <label className="form-label">Comment</label>
+          <textarea
+            className="form-control"
+            rows="2"
+            {...register("comment")}
+          />
+          {errors.comment && (
+            <p className="danger-text">{errors.comment.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"
+          onClick={onClose}
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          className="btn btn-sm btn-primary"
+          // disabled={isSubmitting}
+           disabled={isPending}
+        >
+          {isPending ? "Please Wait..." : "Add Task"}
+        </button>
+      </div>
+    </form>
   );
 };
 

src/components/Project/Infrastructure/WorkAreaModel.jsx

@@ -6,8 +6,6 @@ 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";
 
 const workAreaSchema = z.object({
   id: z.string().optional(),
@@ -28,14 +26,19 @@ const defaultModel = {
 const WorkAreaModel = ({ project, onSubmit, onClose }) => {
   const [selectedBuilding, setSelectedBuilding] = useState(null);
   const [selectedFloor, setSelectedFloor] = useState(null);
-  const selectedProject = useSelector((store) => store.localVariables.projectId);
+  const selectedProject = useSelector((store) => store.localVariables.projectId)
-  const methods = useForm({
+  const {
-    defaultValues: defaultModel,
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    reset,
+    watch,
+  } = useForm({
     resolver: zodResolver(workAreaSchema),
+    defaultValues: defaultModel,
   });
 
-  const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
-
   const watchBuildingId = watch("buildingId");
   const watchFloorId = watch("floorId");
   const watchWorkAreaId = watch("id");
@@ -101,122 +104,99 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
   };
 
   return (
-    <AppFormProvider {...methods}>
+    <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
-      <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
+      <div className="text-center mb-1">
-        <div className="text-center mb-1">
+        <h5 className="mb-1">Manage Work Area</h5>
-          <h5 className="mb-1">Manage Work Area</h5>
+      </div>
-        </div>
+      <div className="col-12 col-sm-6 text-start">
-        <div className="col-12 col-sm-6 text-start">
+        <Label className="form-label" required>Select Building</Label>
-          <AppFormController
+        <select
-            name="buildingId"
+          {...register("buildingId")}
-            control={control}
+          className="form-select form-select-sm"
-            render={({ field }) => (
+        >
-              <SelectField
+          <option value="0">Select Building</option>
-                label="Select Building"
+          {project?.map((b) => (
-                options={project ?? []}
+            <option key={b.id} value={b.id}>
-                placeholder="Select Building"
+              {b.buildingName}
-                required
+            </option>
-                labelKey="buildingName"
+          ))}
-                valueKey="id"
+        </select>
-                value={field.value}
+        {errors.buildingId && (
-                onChange={field.onChange}
+          <p className="danger-text">{errors.buildingId.message}</p>
-                className="m-0"
+        )}
-              />
+      </div>
-            )}
-          />
 
-          {errors.buildingId && (
+      {watchBuildingId !== "0" && (
-            <small className="danger-text">{errors.buildingId.message}</small>
+        <div className="col-12 col-sm-6 text-start">
+          <Label className="form-label" required>Select Floor</Label>
+          <select
+            {...register("floorId")}
+            className="form-select form-select-sm"
+          >
+            <option value="0">
+              {selectedBuilding?.floor?.length > 0
+                ? "NO Floor Found"
+                : "Select Floor"}
+            </option>
+
+            {selectedBuilding?.floors?.map((f) => (
+              <option key={f.id} value={f.id}>
+                {f.floorName}
+              </option>
+            ))}
+          </select>
+          {errors.floorId && (
+            <p className="danger-text">{errors.floorId.message}</p>
           )}
         </div>
+      )}
+      {watchFloorId !== "0" && (
+        <>
+          <div className="col-12 text-start">
+            <label className="form-label">Select Work Area</label>
+            <select
+              {...register("id")}
+              className="form-select form-select-sm"
+              onChange={handleWrokAreaChange}
+            >
+              <option value="0">Create New Work Area</option>
+              {selectedFloor?.workAreas?.length > 0 &&
+                selectedFloor?.workAreas?.map((w) => (
+                  <option key={w.id} value={w.id}>
+                    {w.areaName}
+                  </option>
+                ))}
+            </select>
+          </div>
 
-
+          <div className="col-12 text-start">
-        {watchBuildingId !== "0" && (
+            <Label className="form-label" required>
-          <div className="col-12 col-sm-6 text-start">
+              {watchWorkAreaId === "0"
-            <AppFormController
+                ? "Enter Work Area Name"
-              name="floorId"
+                : "Edit Work Area Name"}
-              control={control}
+            </Label>
-              render={({ field }) => (
+            <input
-                <SelectField
+              type="text"
-                  label="Select Floor"
+              className="form-control form-control-sm"
-                  options={selectedBuilding?.floors ?? []}
+              placeholder="Work Area"
-                  placeholder={
+              {...register("areaName")}
-                    selectedBuilding?.floors?.length > 0
-                      ? "Select Floor"
-                      : "No Floor Found"
-                  }
-                  required
-                  labelKey="floorName"
-                  valueKey="id"
-                  value={field.value}
-                  onChange={(value) => {
-                    field.onChange(value);
-                    setValue("areaName", ""); // reset Work Area name when floor changes
-                  }}
-                  className="m-0"
-                />
-              )}
             />
-            {errors.floorId && (
+            {errors.areaName && (
-              <small className="danger-text">{errors.floorId.message}</small>
+              <p className="danger-text">{errors.areaName.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.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
+        </button>
 
-        {watchFloorId !== "0" && (
+      </div>
-          <>
+    </form>
-            <div className="col-12 text-start">
-              <AppFormController
-                name="id"
-                control={control}
-                render={({ field }) => (
-                  <SelectField
-                    label="Select Work Area"
-                    options={selectedFloor?.workAreas ?? []}
-                    placeholder="Create New Work Area"
-                    required={false}
-                    labelKey="areaName"
-                    valueKey="id"
-                    value={field.value}
-                    onChange={(value) => {
-                      field.onChange(value);
-                      handleWrokAreaChange({ target: { value } }); // preserve your existing handler
-                    }}
-                    className="m-0"
-                  />
-                )}
-              />
-            </div>
-
-            <div className="col-12 text-start">
-              <Label className="form-label" required>
-                {watchWorkAreaId === "0"
-                  ? "Enter Work Area Name"
-                  : "Edit Work Area Name"}
-              </Label>
-              <input
-                type="text"
-                className="form-control"
-                placeholder="Work Area"
-                {...register("areaName")}
-              />
-              {errors.areaName && (
-                <p className="danger-text">{errors.areaName.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.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
-          </button>
-
-        </div>
-      </form>
-    </AppFormProvider>
   );
 };
 

src/components/Project/ManageProjectInfo.jsx

@@ -17,8 +17,6 @@ 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) => {
@@ -44,8 +42,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
     1,
     true
   );
-  const { mutate: UpdateProject, isPending } = useUpdateProject(() => { onClose?.() });
+  const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
-  const { mutate: CeateProject, isPending: isCreating } = useCreateProject(() => { onClose?.() })
+  const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
 
   const {
     register,
@@ -76,7 +74,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) {
@@ -87,8 +85,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
         id: project,
       };
       UpdateProject({ projectId: project, payload: payload });
-    } else {
+    }else{
-      let payload = {
+       let payload = {
         ...formData,
         startDate: localToUtc(formData.startDate),
         endDate: localToUtc(formData.endDate),
@@ -124,7 +122,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
             type="text"
             id="name"
             name="name"
-            className="form-control "
+            className="form-control form-control-sm"
             placeholder="Project Name"
             {...register("name")}
           />
@@ -145,7 +143,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
             type="text"
             id="shortName"
             name="shortName"
-            className="form-control "
+            className="form-control form-control-sm"
             placeholder="Short Name"
             {...register("shortName")}
           />
@@ -166,7 +164,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
             type="text"
             id="contactPerson"
             name="contactPerson"
-            className="form-control "
+            className="form-control form-control-sm"
             placeholder="Contact Person"
             maxLength={50}
             {...register("contactPerson")}
@@ -192,7 +190,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
             placeholder="DD-MM-YYYY"
             maxDate={new Date()} // optional: restrict future dates
             className="w-100"
-            size="md"
           />
 
           {errors.startDate && (
@@ -216,7 +213,6 @@ const ManageProjectInfo = ({ project, onClose }) => {
             placeholder="DD-MM-YYYY"
             minDate={getValues("startDate")} // optional: restrict future dates
             className="w-100"
-            size="md"
           />
 
           {errors.endDate && (
@@ -229,108 +225,103 @@ const ManageProjectInfo = ({ project, onClose }) => {
           )}
         </div>
 
-        <div className="col-12">
+        <div className="col-12 ">
-          <Label htmlFor="modalEditUserStatus" className="form-label">
+          <label className="form-label" htmlFor="modalEditUserStatus">
             Status
-          </Label>
+          </label>
-
+          <select
-          <AppFormController
+            id="modalEditUserStatus"
-            name="projectStatusId"
+            name="modalEditUserStatus"
-            control={control}
+            className="select2 form-select form-select-sm"
-            rules={{ required: "Status is required" }}
+            aria-label="Default select example"
-            render={({ field }) => (
+            {...register("projectStatusId", {
-              <SelectField
+              required: "Status is required",
-                label="" // Label is already above
+              valueAsNumber: false,
-                placeholder="Select Status"
+            })}
-                options={PROJECT_STATUS?.map((status) => ({
+          >
-                  id: status.id,
+            {PROJECT_STATUS.map((status) => (
-                  name: status.label,
+              <option key={status.id} value={status.id}>
-                })) ?? []}
+                {status.label}
-                value={field.value || ""}
+              </option>
-                onChange={field.onChange}
+            ))}
-                required
+          </select>
-                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 ">
-        <div className="col-12">
+          <label className="form-label" htmlFor="modalEditUserStatus">
-          <Label htmlFor="promoterId" className="form-label">
             Promoter
-          </Label>
+          </label>
-
+          <select
-          <AppFormController
+            className="select2 form-select form-select-sm"
-            name="promoterId"
+            aria-label="Default select example"
-            control={control}
+            {...register("promoterId", {
-            rules={{ required: "Promoter is required" }}
+              required: "Promoter is required",
-            render={({ field }) => (
+              valueAsNumber: false,
-              <SelectField
+            })}
-                label="" // Label is already above
+          >
-                placeholder="Select Promoter"
+            {isLoading ? (
-                options={data?.data ?? []}
+              <option>Loading...</option>
-                value={field.value || ""}
+            ) : (
-                onChange={field.onChange}
+              <>
-                required
+                <option value="">Select Promoter</option>
-                isLoading={isLoading}
+                {data?.data?.map((org) => (
-                className="m-0 form-select-sm w-100"
+                  <option key={org.id} value={org.id}>
-                noOptionsMessage={() =>
+                    {org.name}
-                  !isLoading && (!data?.data || data.data.length === 0)
+                  </option>
-                    ? "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 ">
-        <div className="col-12">
+          <label className="form-label" htmlFor="modalEditUserStatus">
-          <Label htmlFor="pmcId" className="form-label">
             PMC
-          </Label>
+          </label>
-
+          <select
-          <AppFormController
+            className="select2 form-select form-select-sm"
-            name="pmcId"
+            aria-label="Default select example"
-            control={control}
+            {...register("pmcId", {
-            rules={{ required: "PMC is required" }}
+              required: "Promoter is required",
-            render={({ field }) => (
+              valueAsNumber: false,
-              <SelectField
+            })}
-                label="" // Label is already above
+          >
-                placeholder="Select PMC"
+            {isLoading ? (
-                options={data?.data ?? []}
+              <option>Loading...</option>
-                value={field.value || ""}
+            ) : (
-                onChange={field.onChange}
+              <>
-                required
+                <option value="">Select PMC</option>
-                isLoading={isLoading}
+                {data?.data?.map((org) => (
-                className="m-0 form-select-sm w-100"
+                  <option key={org.id} value={org.id}>
-                noOptionsMessage={() =>
+                    {org.name}
-                  !isLoading && (!data?.data || data.data.length === 0)
+                  </option>
-                    ? "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">
           <span>
             <i className="bx bx-sm bx-info-circle"></i> Not found PMC and
@@ -385,7 +376,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>

src/components/Project/ProjectInfra.jsx

@@ -30,9 +30,6 @@ import { useParams } from "react-router-dom";
 import GlobalModel from "../common/GlobalModel";
 import { setService } from "../../slices/globalVariablesSlice";
 import { SpinnerLoader } from "../common/Loader";
-import { useForm } from "react-hook-form";
-import { AppFormController } from "../../hooks/appHooks/useAppForm";
-import SelectField from "../common/Forms/SelectField";
 
 const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
   const projectId = useSelectedProject();
@@ -55,12 +52,6 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
   const { data: assignedServices, isLoading: servicesLoading } =
     useProjectAssignedServices(projectId);
 
-  const { control } = useForm({
-    defaultValues: {
-      serviceId: selectedService || "",
-    },
-  });
-
   useEffect(() => {
     setProject(projectInfra);
   }, [data, projects_Details]);
@@ -69,11 +60,6 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
     setProject(response);
   };
 
-  const handleServiceChange = (serviceId) => {
-    dispatch(setService(serviceId));
-
-  };
-
   return (
     <>
       {showModalBuilding && (
@@ -129,39 +115,37 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
           <div className="card-body" style={{ padding: "0.5rem" }}>
             <div className="align-items-center">
               <div className="row ">
-                <div className="col-md-4 col-12 dataTables_length text-start py-2 px-2">
+                <div
-                  <div className="ms-4 mt-n1">
+                  className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
-                    {!servicesLoading && assignedServices?.length > 0 && (
+                  id="DataTables_Table_0_length"
-                      assignedServices.length > 1 ? (
+                >
-                        <AppFormController
+                  {!servicesLoading &&
-                          name="serviceId"
+                    assignedServices?.length > 0 &&
-                          control={control}
+                    (assignedServices.length > 1 ? (
-                          render={({ field }) => (
+                      <label>
-                            <SelectField
+                        <select
-                              label="Select Service"
+                          name="DataTables_Table_0_length"
-                              options={[{ id: "", name: "All Projects" }, ...(assignedServices ?? [])]} 
+                          aria-controls="DataTables_Table_0"
-                              placeholder="Choose a Service"
+                          className="form-select form-select-sm"
-                              required
+                          aria-label="Select Service"
-                              labelKey="name"
+                          value={selectedService}
-                              valueKey="id"
+                          onChange={(e) => dispatch(setService(e.target.value))}
-                              value={field.value}
+                        >
-                              onChange={(val) => {
+                          <option value="">All Services</option>
-                                field.onChange(val);
+                          {assignedServices.map((service) => (
-                                handleServiceChange(val);
+                            <option key={service.id} value={service.id}>
-                              }}
+                              {service.name}
-                              isLoading={servicesLoading}
+                            </option>
-                            />
+                          ))}
-                          )}
+                        </select>
-                        />
+                      </label>
-                      ) : (
+                    ) : (
-                        <h5>{assignedServices[0].name}</h5>
+                      <h5>{assignedServices[0].name}</h5>
-                      )
+                    ))}
-                    )}
-                  </div>
                 </div>
 
                 {/* Buttons Section (aligned to right) */}
-                <div className="col-md-8 col-12 text-end mt-4">
+                <div className="col-md-8 col-12 text-end mb-1">
                   {ManageInfra && (
                     <>
                       <button

src/components/Project/ProjectPermission.jsx

@@ -10,8 +10,6 @@ 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"),
@@ -48,26 +46,26 @@ const ProjectPermission = () => {
   );
 
   useEffect(() => {
-    if (!selectedEmployee) return;
+  if (!selectedEmployee) return;
 
-    const enabledPerms =
+  const enabledPerms =
-      selectedEmpPermissions?.permissions
-        ?.filter((perm) => perm.isEnabled)
-        ?.map((perm) => perm.id) || [];
-
-    setValue("selectedPermissions", enabledPerms, { shouldValidate: true });
-  }, [selectedEmpPermissions, setValue, selectedEmployee]);
-
-  const selectedPermissions = watch("selectedPermissions") || [];
-
-  const existingEnabledIds =
     selectedEmpPermissions?.permissions
-      ?.filter((p) => p.isEnabled)
+      ?.filter((perm) => perm.isEnabled)
-      ?.map((p) => p.id) || [];
+      ?.map((perm) => perm.id) || [];
 
-  const hasChanges =
+  setValue("selectedPermissions", enabledPerms, { shouldValidate: true });
-    selectedPermissions.length !== existingEnabledIds.length ||
+}, [selectedEmpPermissions, setValue, selectedEmployee]);
-    selectedPermissions.some((id) => !existingEnabledIds.includes(id));
+
+const selectedPermissions = watch("selectedPermissions") || [];
+
+const existingEnabledIds =
+  selectedEmpPermissions?.permissions
+    ?.filter((p) => p.isEnabled)
+    ?.map((p) => p.id) || [];
+
+const hasChanges =
+  selectedPermissions.length !== existingEnabledIds.length ||
+  selectedPermissions.some((id) => !existingEnabledIds.includes(id));
 
   const { mutate: updatePermission, isPending } =
     useUpdateProjectLevelEmployeePermission();
@@ -117,42 +115,35 @@ const ProjectPermission = () => {
       <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">
+              {" "}
-              <AppFormController
+              <select
-                name="employeeId"
+                className="form-select form-select-sm"
-                control={control}
+                {...register("employeeId")}
-                render={({ field }) => (
+                disabled={isPending}
-                  <SelectField
+              >
-                    label="Select Employee"
+                {loading ? (
-                    options={
+                  <option value="">Loading...</option>
-                      employees
+                ) : (
-                        ?.sort((a, b) =>
+                  <>
-                          `${a?.firstName} ${a?.lastName}`.localeCompare(
+                    <option value="">-- Select Employee --</option>
-                            `${b?.firstName} ${b?.lastName}`
+                    {[...employees]
-                          )
+                      ?.sort((a, b) =>
+                        `${a?.firstName} ${a?.firstName}`?.localeCompare(
+                          `${b?.firstName} ${b?.lastName}`
                         )
-                        ?.map((emp) => ({
+                      )
-                          id: emp.id,
+                      ?.map((emp) => (
-                          name: `${emp.firstName} ${emp.lastName}`,
+                        <option key={emp.id} value={emp.id}>
-                        })) ?? []
+                          {emp.firstName} {emp.lastName}
-                    }
+                        </option>
-                    placeholder="-- Select Employee --"
+                      ))}
-                    required
+                  </>
-                    labelKey="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}
@@ -161,7 +152,6 @@ const ProjectPermission = () => {
             </div>
           </div>
 
-
           <div className="mt-3 text-end">
             {hasChanges && (
               <button

src/components/Project/Team/TeamAssignToProject.jsx

@@ -2,11 +2,8 @@ import React, { useState } from "react";
 import TeamEmployeeList from "./TeamEmployeeList";
 import { useOrganization } from "../../../hooks/useDirectory";
 import { useOrganizationsList } from "../../../hooks/useOrganization";
-import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
+import {  useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
 import { useSelectedProject } from "../../../slices/apiDataManager";
-import { AppFormController } from "../../../hooks/appHooks/useAppForm";
-import SelectField from "../../common/Forms/SelectField";
-import { useForm } from "react-hook-form";
 
 const TeamAssignToProject = ({ closeModal }) => {
   const [searchText, setSearchText] = useState("");
@@ -14,48 +11,54 @@ const TeamAssignToProject = ({ closeModal }) => {
   const project = useSelectedProject();
   const { data, isLoading, isError, error } =
     useProjectAssignedOrganizationsName(project);
-  const { control, watch, formState: { errors } } = useForm({
-    defaultValues: { organizationId: "" },
-  });
   return (
     <div className="container">
       {/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */}
       <h5 className="mb-4">Assign Employee To Project</h5>
 
-      <div className="row align-items-center gx-5 text-start">
+      <div className="row align-items-center gx-5">
-          <div className="col-12 col-md-6 mb-2">
+        <div className="col">
-            <AppFormController
+          <div className="d-flex flex-grow-1 align-items-center gap-2">
-              name="organizationId"
+            {isLoading ? (
-              control={control}
+              <select className="form-select form-select-sm w-100" disabled>
-              rules={{ required: "Organization is required" }}
+                <option value="">Loading...</option>
-              render={({ field }) => (
+              </select>
-                <SelectField
+            ) : data?.length === 0 ? (
-                  label="Select Organization"
+              <p className="mb-0 badge bg-label-secondary">No organizations found</p>
-                  options={data ?? []}
+            ) : (
-                  placeholder="Choose an Organization"
+              <>
-                  required
+                <label
-                  labelKey="name"
+                  htmlFor="organization"
-                  valueKey="id"
+                  className="form-label mb-0 text-nowrap"
-                  value={field.value}
+                >
-                  onChange={field.onChange}
+                  Select Organization
-                  isLoading={isLoading}
+                </label>
-                  className="m-0 w-100"
+                <select
-                />
+                  id="organization"
-              )}
+                  className="form-select form-select-sm w-100"
-            />
+                  value={selectedOrg || ""}
-            {errors.organizationId && (
+                  onChange={(e) => setSelectedOrg(e.target.value)}
-              <small className="danger-text">{errors.organizationId.message}</small>
+                >
+                  <option value="">Select</option>
+                  {data.map((org) => (
+                    <option key={org.id} value={org.id}>
+                      {org.name}
+                    </option>
+                  ))}
+                </select>
+              </>
             )}
           </div>
-        <div className="col-12 col-md-6 mt-n5">
+        </div>
-          <div className="d-flex flex-column">
+        <div className="col">
-            <label htmlFor="search" className="form-label mb-1">
+          <div className="d-flex flex-grow-1 align-items-center gap-2">
+            <label htmlFor="search" className="form-label mb-0 text-nowrap">
               Search Employee
             </label>
             <input
               id="search"
               type="search"
-              className="form-control w-100"
+              className="form-control form-control-sm w-100"
               placeholder="Search..."
               value={searchText}
               onChange={(e) => setSearchText(e.target.value)}

src/components/Project/Team/Teams.jsx

@@ -22,9 +22,6 @@ import { useSelectedProject } from "../../../slices/apiDataManager";
 import GlobalModel from "../../common/GlobalModel";
 import TeamAssignToProject from "./TeamAssignToProject";
 import { SpinnerLoader } from "../../common/Loader";
-import { AppFormController } from "../../../hooks/appHooks/useAppForm";
-import SelectField from "../../common/Forms/SelectField";
-import { useForm } from "react-hook-form";
 
 const Teams = () => {
   const selectedProject = useSelectedProject();
@@ -33,15 +30,9 @@ const Teams = () => {
   const [employees, setEmployees] = useState([]);
   const [selectedEmployee, setSelectedEmployee] = useState(null);
   const [deleteEmployee, setDeleteEmplyee] = useState(null);
+  const [searchTerm, setSearchTerm] = useState(""); // State for search term
+  const [selectedService, setSelectedService] = useState(null);
   const [activeEmployee, setActiveEmployee] = useState(false);
-  const { control, watch } = useForm({
-    defaultValues: {
-      selectedService: "",
-      searchTerm: "",
-    },
-  });
-  const selectedService = watch("selectedService");
-  const searchTerm = watch("searchTerm");
 
   const { data: assignedServices, isLoading: servicesLoading } =
     useProjectAssignedServices(selectedProject);
@@ -104,23 +95,26 @@ const Teams = () => {
 
   const filteredEmployees = useMemo(() => {
     if (!projectEmployees) return [];
+
     let filtered = projectEmployees;
 
     if (activeEmployee) {
       filtered = projectEmployees.filter((emp) => !emp.isActive);
     }
 
+    // Apply search filter if present
     if (searchTerm?.trim()) {
       const lower = searchTerm.toLowerCase();
       filtered = filtered.filter((emp) => {
         const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase();
-        return fullName.includes(lower) || (emp.jobRoleName ?? "").toLowerCase().includes(lower);
+        const jobRole = getJobRole(emp?.jobRoleId)?.toLowerCase();
+        return fullName.includes(lower) || jobRole.includes(lower);
       });
     }
 
     return filtered;
   }, [projectEmployees, searchTerm, activeEmployee]);
-
+  const handleSearch = (e) => setSearchTerm(e.target.value);
   const employeeHandler = useCallback(
     (msg) => {
       if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
@@ -130,7 +124,6 @@ const Teams = () => {
     [filteredEmployees, refetch]
   );
 
-
   useEffect(() => {
     eventBus.on("employee", employeeHandler);
     return () => eventBus.off("employee", employeeHandler);
@@ -161,68 +154,62 @@ const Teams = () => {
       <div className="card card-action mb-6">
         <div className="card-body">
           <div className="row align-items-center justify-content-between mb-4 g-3">
-            <div className="col-md-6 col-12 d-flex flex-wrap align-items-center gap-3">
+            <div className="col-md-6 col-12 algin-items-center">
-              {!servicesLoading && assignedServices && (
+              <div className="d-flex flex-wrap align-items-center gap-3">
-                <>
+                <div>
-                  {assignedServices.length === 1 && (
+                  {!servicesLoading && (
-                    <h5 className="mb-2">{assignedServices[0].name}</h5>
+                    <>
+                      {assignedServices?.length === 1 && (
+                        <h5 className="mb-2">{assignedServices[0].name}</h5>
+                      )}
+
+                      {assignedServices?.length > 1 && (
+                        <select
+                          className="form-select form-select-sm"
+                          aria-label="Select Service"
+                          value={selectedService}
+                          onChange={handleServiceChange}
+                        >
+                          <option value="">All Services</option>
+                          {assignedServices.map((service) => (
+                            <option key={service.id} value={service.id}>
+                              {service.name}
+                            </option>
+                          ))}
+                        </select>
+                      )}
+                    </>
                   )}
+                </div>
 
-                  {assignedServices.length > 1 && (
+                <div className="form-check form-switch d-flex align-items-center text-nowrap">
-                    <div className="col-12 col-md-6 mb-2 text-start">
+                  <input
-                      <AppFormController
+                    type="checkbox"
-                        name="selectedService"
+                    className="form-check-input"
-                        control={control}
+                    id="activeEmployeeSwitch"
-                        render={({ field }) => (
+                    checked={activeEmployee}
-                          <SelectField
+                    onChange={handleToggleActive}
-                            label="Select Service"
+                  />
-                            options={[{ id: "", name: "All Services" }, ...assignedServices]} 
+                  <label
-                            placeholder="Choose a Service"
+                    className="form-check-label ms-2"
-                            labelKey="name"
+                    htmlFor="activeEmployeeSwitch"
-                            valueKey="id"
+                  >
-                            value={field.value}
+                    {activeEmployee ? "Active Employees" : "In-active Employees"}
-                            onChange={field.onChange}
+                  </label>
-                            isLoading={servicesLoading}
+                </div>
-                            className="w-100"
-                          />
-                        )}
-                      />
-                    </div>
-                  )}
-                </>
-              )}
-
-
-              <div className="form-check form-switch d-flex align-items-center text-nowrap">
-                <input
-                  type="checkbox"
-                  className="form-check-input"
-                  id="activeEmployeeSwitch"
-                  checked={activeEmployee}
-                  onChange={handleToggleActive}
-                />
-                <label className="form-check-label ms-2" htmlFor="activeEmployeeSwitch">
-                  {activeEmployee ? "Active Employees" : "In-active Employees"}
-                </label>
               </div>
             </div>
 
-            <div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3 mt-n1">
+            <div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
-              <div className="col-12 col-md-4">
+              <input
-                <AppFormController
+                type="search"
-                  name="searchTerm"
+                className="form-control form-control-sm"
-                  control={control}
+                placeholder="Search by Name or Role"
-                  render={({ field }) => (
+                aria-controls="DataTables_Table_0"
-                    <input
+                style={{ maxWidth: "200px" }}
-                      type="search"
+                value={searchTerm}
-                      className="form-control form-control-sm w-100"
+                onChange={handleSearch}
-                      placeholder="Search by Name or Role"
+              />
-                      value={field.value}
-                      onChange={field.onChange}
-                    />
-                  )}
-                />
-              </div>
 
               {HasAssignUserPermission && (
                 <button
@@ -259,73 +246,74 @@ const Teams = () => {
                   </tr>
                 </thead>
                 <tbody className="table-border-bottom-0">
-                  {filteredEmployees
+                  {filteredEmployees &&
-                    .sort((a, b) =>
+                    filteredEmployees
-                      (a.firstName || "").localeCompare(b.firstName || "")
+                      .sort((a, b) =>
-                    )
+                        (a.firstName || "").localeCompare(b.firstName || "")
-                    .map((emp) => (
+                      )
-                      <tr key={emp.id}>
+                      .map((emp) => (
-                        <td>
+                        <tr key={emp.id}>
-                          <div className="d-flex justify-content-start align-items-center">
-                            <Avatar
-                              firstName={emp.firstName}
-                              lastName={emp.lastName}
-                            />
-                            <div className="d-flex flex-column">
-                              <a
-                                onClick={() =>
-                                  navigate(
-                                    `/employee/${emp.employeeId}?for=attendance`
-                                  )
-                                }
-                                className="text-heading text-truncate cursor-pointer"
-                              >
-                                <span className="fw-normal">
-                                  {emp.firstName}{"  "}
-                                  {emp.lastName}
-                                </span>
-                              </a>
-                            </div>
-                          </div>
-                        </td>
-
-                        <td>{emp.serviceName || "N/A"}</td>
-                        <td>{emp.organizationName || "N/A"}</td>
-
-                        <td>
-                          {moment(emp.allocationDate).format("DD-MMM-YYYY")}
-                        </td>
-                        {activeEmployee && (
                           <td>
-                            {emp.reAllocationDate
+                            <div className="d-flex justify-content-start align-items-center">
-                              ? moment(emp.reAllocationDate).format(
+                              <Avatar
-                                "DD-MMM-YYYY"
+                                firstName={emp.firstName}
-                              )
+                                lastName={emp.lastName}
-                              : "Present"}
+                              />
+                              <div className="d-flex flex-column">
+                                <a
+                                  onClick={() =>
+                                    navigate(
+                                      `/employee/${emp.employeeId}?for=attendance`
+                                    )
+                                  }
+                                  className="text-heading text-truncate cursor-pointer"
+                                >
+                                  <span className="fw-normal">
+                                    {emp.firstName}{"  "}
+                                    {emp.lastName}
+                                  </span>
+                                </a>
+                              </div>
+                            </div>
                           </td>
-                        )}
+
-                        <td>
+                          <td>{emp.serviceName || "N/A"}</td>
-                          <span className="badge bg-label-primary me-1">
+                          <td>{emp.organizationName || "N/A"}</td>
-                            {getJobRole(emp.jobRoleId)}
+
-                          </span>
+                          <td>
-                        </td>
+                            {moment(emp.allocationDate).format("DD-MMM-YYYY")}
-                        <td>
+                          </td>
-                          {emp.isActive ? (
+                          {activeEmployee && (
-                            <button
+                            <td>
-                              aria-label="Delete"
+                              {emp.reAllocationDate
-                              type="button"
+                                ? moment(emp.reAllocationDate).format(
-                              title="Remove from project"
+                                  "DD-MMM-YYYY"
-                              className="btn p-0 dropdown-toggle hide-arrow"
+                                )
-                              onClick={() => setSelectedEmployee(emp)}
+                                : "Present"}
-                            >
+                            </td>
-                              <i className="bx bx-trash me-1 text-danger"></i>
-                            </button>
-                          ) : (
-                            <span>Not in project</span>
                           )}
-                        </td>
+                          <td>
-                      </tr>
+                            <span className="badge bg-label-primary me-1">
-                    ))}
+                              {getJobRole(emp.jobRoleId)}
+                            </span>
+                          </td>
+                          <td>
+                            {emp.isActive ? (
+                              <button
+                                aria-label="Delete"
+                                type="button"
+                                title="Remove from project"
+                                className="btn p-0 dropdown-toggle hide-arrow"
+                                onClick={() => setSelectedEmployee(emp)}
+                              >
+                                <i className="bx bx-trash me-1 text-danger"></i>
+                              </button>
+                            ) : (
+                              <span>Not in project</span>
+                            )}
+                          </td>
+                        </tr>
+                      ))}
                 </tbody>
               </table>
             )}

src/components/RecurringExpense/ManageRecurringExpense.jsx

@@ -28,8 +28,6 @@ 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 {
@@ -202,32 +200,30 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             <Label htmlFor="expenseCategoryId" className="form-label" required>
               Expense Category
             </Label>
-
+            <select
-            <AppFormController
+              className="form-select"
-              name="expenseCategoryId"
+              id="expenseCategoryId"
-              control={control}
+              {...register("expenseCategoryId")}
-              rules={{ required: "Expense Category is required" }}
+            >
-              render={({ field }) => (
+              <option value="" disabled>
-                <SelectField
+                Select Category
-                  label="" // Label is already above
+              </option>
-                  placeholder="Select Category"
+              {ExpenseLoading ? (
-                  options={expenseCategories ?? []}
+                <option disabled>Loading...</option>
-                  value={field.value || ""}
+              ) : (
-                  onChange={field.onChange}
+                expenseCategories?.map((expense) => (
-                  required
+                  <option key={expense.id} value={expense.id}>
-                  isLoading={ExpenseLoading}
+                    {expense.name}
-                  className="m-0 form-select-sm w-100"
+                  </option>
-                />
+                ))
               )}
-            />
+            </select>
-
             {errors.expenseCategoryId && (
               <small className="danger-text">
                 {errors.expenseCategoryId.message}
               </small>
             )}
           </div>
-
         </div>
 
         {/* Title and Is Variable  */}
@@ -379,45 +375,34 @@ 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>
 
-            <AppFormController
+              {currencyLoading && <option>Loading...</option>}
-              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-1" required>
+              <Label htmlFor="frequency" className="form-label mb-0" required>
                 Frequency
               </Label>
               <HoverPopup
@@ -430,69 +415,51 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
                   </p>
                 }
               >
-                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer mb-1"></i>
+                <i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
               </HoverPopup>
             </div>
 
-            <AppFormController
+            <select
-              name="frequency"
+              id="frequency"
-              control={control}
+              className="form-select mt-1"
-              rules={{ required: "Frequency is required" }}
+              {...register("frequency", { valueAsNumber: true })}
-              render={({ field }) => (
+            >
-                <SelectField
+              <option value="">Select Frequency</option>
-                  label="" // Label shown above
+              {Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => (
-                  placeholder="Select Frequency"
+                <option key={key} value={key}>
-                  options={Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => ({
+                  {label}
-                    id: key,
+                </option>
-                    name: label,
+              ))}
-                  }))}
+            </select>
-                  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
-            <AppFormController
+              id="statusId"
-              name="statusId"
+              className="form-select"
-              control={control}
+              {...register("statusId")}
-              rules={{ required: "Status is required" }}
+            >
-              render={({ field }) => (
+              <option value="">Select Status</option>
-                <SelectField
+              {statusLoading && <option>Loading...</option>}
-                  label="" // Label already shown above
+              {!statusLoading &&
-                  placeholder="Select Status"
+                !statusError &&
-                  options={statusData ?? []}
+                statusData?.map((status) => (
-                  value={field.value || ""}
+                  <option key={status.id} value={status.id}>
-                  onChange={field.onChange}
+                    {status.name}
-                  required
+                  </option>
-                  isLoading={statusLoading}
+                ))}
-                  noOptionsMessage={() =>
+            </select>
-                    !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 */}
@@ -597,7 +564,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         </div>
 
         {/* Description  */}
-        <div className="row my-4 text-start">
+        <div className="row my-2 text-start">
           <div className="col-md-12">
             <Label htmlFor="description" className="form-label" required>
               Description

src/components/ServiceProject/ManageServiceProject.jsx

@@ -23,8 +23,6 @@ import {
   useServiceProject,
   useUpdateServiceProject,
 } from "../../hooks/useServiceProject";
-import { AppFormController } from "../../hooks/appHooks/useAppForm";
-import SelectField from "../common/Forms/SelectField";
 
 const ManageServiceProject = ({ serviceProjectId, onClose }) => {
   const {
@@ -119,54 +117,51 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
         </div>
         <div className="row text-start">
           <div className="col-12 mb-2">
-            <Label htmlFor="clientId" required>
+            <Label htmlFor="name" required>
               Client
             </Label>
-
+            <div className="d-flex align-items-center gap-2">
-            <div className="d-flex align-items-center gap-2 w-100">
+              <select
-              <div className="flex-grow-1" style={{ minWidth: "250px" }}>
+                className="select2 form-select form-select-sm flex-grow-1"
-                <AppFormController
+                aria-label="Default select example"
-                  name="clientId"
+                {...register("clientId", {
-                  control={control}
+                  required: "Client is required",
-                  rules={{ required: "Client is required" }}
+                  valueAsNumber: false,
-                  render={({ field }) => (
+                })}
-                    <SelectField
+              >
-                      label=""
+                {isLoading ? (
-                      options={organization?.data ?? []}
+                  <option>Loading...</option>
-                      placeholder="Select Client"
+                ) : (
-                      required
+                  <>
-                      labelKey="name"
+                    <option value="">Select Client</option>
-                      valueKeyKey="id"
+                    {organization?.data?.map((org) => (
-                      value={field.value}
+                      <option key={org.id} value={org.id}>
-                      onChange={field.onChange}
+                        {org.name}
-                      isLoading={isLoading}
+                      </option>
-                      className="m-0 w-100"
+                    ))}
-                    />
+                  </>
-                  )}
+                )}
-                />
+              </select>
-              </div>
-
               <i
-                className="bx bx-plus-circle bx-xs cursor-pointer text-primary "
+                className="bx bx-plus-circle bx-xs cursor-pointer text-primary"
                 onClick={() => {
                   onClose();
-                  openOrgModal({ startStep: 2 });
+                  openOrgModal({ startStep: 2 });  // Step 4 = ManagOrg
                 }}
               />
             </div>
-
             {errors?.clientId && (
-              <small className="danger-text">{errors.clientId.message}</small>
+              <span className="danger-text">{errors.clientId.message}</span>
             )}
           </div>
 
-          <div className="col-12 mb-4">
+          <div className="col-12 mb-2">
             <Label htmlFor="name" required>
               Project Name
             </Label>
             <input
               type="text"
-              className="form-control "
+              className="form-control form-control-sm"
               {...register("name")}
               placeholder="Enter Project Name.."
             />
@@ -180,7 +175,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             </Label>
             <input
               type="text"
-              className="form-control "
+              className="form-control form-control-sm"
               {...register("shortName")}
               placeholder="Enter Project Short Name.."
             />
@@ -189,37 +184,23 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             )}
           </div>
           <div className="col-12 col-md-6">
-            <Label htmlFor="statusId" required>
+            <Label htmlFor="name" required>
               Select Status
             </Label>
-
+            <select
-            <AppFormController
+              className="form-select form-select-sm"
-              name="statusId"
+              {...register("statusId")}
-              control={control}
+            >
-              render={({ field }) => (
+              <option>Select Service</option>
-                <SelectField
+              {PROJECT_STATUS?.map((status) => (
-                  label="" // label already above
+                <option key={status.id} value={status.id}>{status.label}</option>
-                  options={PROJECT_STATUS?.map((status) => ({
+              ))}
-                    id: status.id,
+            </select>
-                    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}
@@ -233,15 +214,15 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             )}
           </div>
 
-          <div className="col-12 col-md-6 mb-4">
+          <div className="col-12 col-md-6 mb-2">
             <Label htmlFor="name" required>
               Contact Person
             </Label>
             <input
               type="text"
-              className="form-control "
+              className="form-control form-control-sm"
               {...register("contactName")}
-              placeholder="Enter Employee name.."
+              placeholder="Enter Employee name.."              
             />
             {errors?.contactName && (
               <span className="danger-text">{errors.contactName.message}</span>
@@ -253,7 +234,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             </Label>
             <input
               type="text"
-              className="form-control "
+              className="form-control form-control-sm"
               {...register("contactEmail")}
               placeholder="Enter Employee Email.."
             />
@@ -261,14 +242,14 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               <span className="danger-text">{errors.contactEmail.message}</span>
             )}
           </div>
-          <div className="col-12 col-md-6 mb-4">
+          <div className="col-12 col-md-6 mb-2">
             <Label htmlFor="name" required>
               Contact Number
             </Label>
             <input
               type="text"
               maxLength={10}
-              className="form-control "
+              className="form-control form-control-sm"
               {...register("contactPhone")}
               placeholder="Enter Employee Contact.."
               onInput={(e) => {
@@ -287,7 +268,6 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
               name="assignedDate"
               className="w-100"
               control={control}
-              size="md"
             />
           </div>
           <div className="col-12 col-md-12 mb-2">
@@ -317,7 +297,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
             )}
           </div>
         </div>
-        <div className="d-flex justify-content-end gap-2 mt-4">
+        <div className="d-flex justify-content-end gap-4 mt-4">
           <button
             className="btn btn-sm  btn-outline-secondary"
             disabled={isPending || isUpdating}

src/components/ServiceProject/ServiceProjectJob/ChangeStatus.jsx

@@ -68,7 +68,7 @@ const ChangeStatus = ({ statusId, projectId, jobId, popUpId }) => {
                 options={data ?? []}
                 placeholder="Choose a Status"
                 required
-                labelKey="name"
+                labelKeyKey="name"
                 valueKeyKey="id"
                 value={field.value}
                 onChange={field.onChange}

src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx

@@ -236,8 +236,8 @@ const ManageJob = ({ Job }) => {
                     options={data ?? []}
                     placeholder="Choose a Status"
                     required
-                    labelKey="name"
+                    labelKeyKey="name"
-                    valueKey="id"
+                    valueKeyKey="id"
                     value={field.value}
                     onChange={field.onChange}
                     isLoading={isLoading}

src/components/Tenant/ContactInfro.jsx

@@ -32,7 +32,7 @@ const ContactInfro = ({ onNext }) => {
         <input
           id="firstName"
           type="text"
-          className={`form-control `}
+          className={`form-control form-control-sm`}
           {...register("firstName")}
         />
         {errors.firstName && (
@@ -46,7 +46,7 @@ const ContactInfro = ({ onNext }) => {
         <input
           id="lastName"
           type="text"
-          className={`form-control  `}
+          className={`form-control form-control-sm `}
           {...register("lastName")}
         />
         {errors.lastName && (
@@ -60,7 +60,7 @@ const ContactInfro = ({ onNext }) => {
         <input
           id="email"
           type="email"
-          className={`form-control  `}
+          className={`form-control form-control-sm `}
           {...register("email")}
         />
         {errors.email && (
@@ -74,7 +74,7 @@ const ContactInfro = ({ onNext }) => {
         <input
           id="contactNumber"
           type="text"
-          className={`form-control  `}
+          className={`form-control form-control-sm `}
           {...register("contactNumber")}
           inputMode="tel"
           placeholder="+91 9876543210"

src/components/Tenant/EditProfile.jsx

@@ -7,8 +7,6 @@ import { LogoUpload } from './LogoUpload';
 import showToast from '../../services/toastService';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { EditTenant } from './TenantSchema';
-import { AppFormController } from '../../hooks/appHooks/useAppForm';
-import SelectField from '../common/Forms/SelectField';
 
 const EditProfile = ({ TenantId, onClose }) => {
   const { data, isLoading, isError, error } = useTenantDetails(TenantId);
@@ -39,7 +37,7 @@ const EditProfile = ({ TenantId, onClose }) => {
     }
   });
 
-  const { register, control, reset, handleSubmit, formState: { errors } } = methods;
+  const { register, reset, handleSubmit, formState: { errors } } = methods;
 
   const onSubmit = (formData) => {
     const tenantPayload = { ...formData, contactName: `${formData.firstName} ${formData.lastName}`, id: data.id, }
@@ -76,122 +74,93 @@ const EditProfile = ({ TenantId, onClose }) => {
       <form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
         <h5>Edit Tenant</h5>
 
-        <div className="col-sm-6 mt-n2 text-start">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="firstName" required>First Name</Label>
-          <input id="firstName" type="text" className="form-control " {...register("firstName")} inputMode='text' />
+          <input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
           {errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
         </div>
 
-        <div className="col-sm-6 mt-n2 text-start">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="lastName" required>Last Name</Label>
-          <input id="lastName" type="text" className="form-control " {...register("lastName")} />
+          <input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
           {errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
         </div>
 
 
 
-        <div className="col-sm-6  text-start">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="contactNumber" required>Contact Number</Label>
-          <input id="contactNumber" type="text" className="form-control " {...register("contactNumber")} inputMode="tel"
+          <input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} inputMode="tel"
             placeholder="+91 9876543210" />
           {errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
         </div>
 
-        <div className="col-sm-6  text-start">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="domainName" >Domain Name</Label>
-          <input id="domainName" type="text" className="form-control " {...register("domainName")} />
+          <input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
           {errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
         </div>
 
-        <div className="col-sm-6  text-start">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="taxId" >Tax ID</Label>
-          <input id="taxId" type="text" className="form-control " {...register("taxId")} />
+          <input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
           {errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
         </div>
 
-        <div className="col-sm-6  text-start">
+        <div className="col-sm-6 mt-1 text-start">
           <Label htmlFor="officeNumber" >Office Number</Label>
-          <input id="officeNumber" type="text" className="form-control " {...register("officeNumber")} />
+          <input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
           {errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
         </div>
 
-        <div className="col-sm-6 text-start">
+        <div className="col-sm-6 mt-1 text-start">
-          <AppFormController
+          <Label htmlFor="industryId" required>Industry</Label>
-            name="industryId"
+          <select className="form-select form-select-sm" {...register("industryId")}>
-            control={control}
+            {industryLoading ? <option value="">Loading...</option> :
-            render={({ field }) => (
+              Industries?.map((indu) => (
-              <SelectField
+                <option key={indu.id} value={indu.id}>{indu.name}</option>
-                label="Industry"
+              ))
-                options={Industries ?? []}
+            }
-                placeholder={industryLoading ? "Loading..." : "Choose an Industry"}
+          </select>
-                required
+          {errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
-                labelKey="name"
-                valueKey="id"
-                value={field.value}
-                onChange={field.onChange}
-                isLoading={industryLoading}
-                className="m-0 w-100"
-              />
-            )}
-          />
-
-          {errors.industryId && (
-            <small className="danger-text">{errors.industryId.message}</small>
-          )}
         </div>
 
-
+        <div className="col-sm-6 mt-1 text-start">
-        <div className="col-sm-6 text-start">
+          <Label htmlFor="reference">Reference</Label>
-          <AppFormController
+          <select className="form-select form-select-sm" {...register("reference")}>
-            name="reference"
+            {reference.map((org) => (
-            control={control}
+              <option key={org.val} value={org.val}>{org.name}</option>
-            render={({ field }) => (
+            ))}
-              <SelectField
+          </select>
-                label="Reference"
+          {errors.reference && <div className="danger-text">{errors.reference.message}</div>}
-                placeholder="Select Reference"
-                options={reference ?? []}
-                labelKey="name"
-                valueKey="val"
-                value={field.value}
-                onChange={field.onChange}
-                className="shadow-none border py-1 px-2 small m-0"                
-              />
-            )}
-          />
-          {errors.reference && (
-            <small className="danger-text">{errors.reference.message}</small>
-          )}
         </div>
         <div className="col-sm-6 text-start">
-          <AppFormController
+          <Label htmlFor="organizationSize" required>
-            name="organizationSize"
+            Organization Size
-            control={control}
+          </Label>
-            render={({ field }) => (
+
-              <SelectField
+          <select
-                label="Organization Size"
+            className="form-select form-select-sm"
-                placeholder="Select Organization Size"
+            {...register("organizationSize")}
-                options={orgSize ?? []}
+          >
-                labelKey="name"
+            {orgSize.map((org) => (
-                valueKey="val"
+              <option key={org.val} value={org.val}>
-                value={field.value}
+                {org.name}
-                onChange={field.onChange}
+              </option>
-                className="shadow-none border py-1 px-2 small m-0"
+            ))}
-                required
+          </select>
-              />
-            )}
-          />
           {errors.organizationSize && (
-            <small className="danger-text">{errors.organizationSize.message}</small>
+            <div className="danger-text">{errors.organizationSize.message}</div>
           )}
         </div>
 
-        <div className="col-12  text-start">
+        <div className="col-12 mt-1 text-start">
           <Label htmlFor="billingAddress" required>Billing Address</Label>
           <textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
           {errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
         </div>
 
-        <div className="col-12  text-start">
+        <div className="col-12 mt-1 text-start">
           <Label htmlFor="description">Description</Label>
           <textarea id="description" className="form-control" {...register("description")} rows={2} />
           {errors.description && <div className="danger-text">{errors.description.message}</div>}

src/components/Tenant/OrganizationInfo.jsx

@@ -8,9 +8,6 @@ import { orgSize, reference } from "../../utils/constants";
 import moment from "moment";
 import { useGlobalServices } from "../../hooks/masterHook/useMaster";
 import SelectMultiple from "../common/SelectMultiple";
-import { AppFormController } from "../../hooks/appHooks/useAppForm";
-import SelectField from "../common/Forms/SelectField";
-import { fill } from "pdf-lib";
 
 const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
   const { data, isError, isLoading: industryLoading } = useIndustries();
@@ -56,8 +53,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
       // onSubmitTenant(data);
       // onNext();
       const tenantPayload = { ...data, onBoardingDate: moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
-      // CreateTenant(tenantPayload);
+      CreateTenant(tenantPayload);
-      console.log(tenantPayload)
     }
   };
 
@@ -71,7 +67,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
 
 
   return (
-    <div className="row g-6 text-start">
+    <div className="row g-2 text-start">
       <div className="col-sm-6">
         <Label htmlFor="organizationName" required>
           Organization Name
@@ -79,7 +75,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
 
         <input
           id="organizationName"
-          className={`form-control  `}
+          className={`form-control form-control-sm `}
           {...register("organizationName")}
         />
         {errors.organizationName && (
@@ -93,7 +89,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
         <input
           id="officeNumber"
-          className={`form-control  `}
+          className={`form-control form-control-sm `}
           {...register("officeNumber")}
         />
         {errors.officeNumber && (
@@ -107,7 +103,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
         <input
           id="domainName"
-          className={`form-control  `}
+          className={`form-control form-control-sm `}
           {...register("domainName")}
         />
         {errors.domainName && (
@@ -121,7 +117,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
         <input
           id="taxId"
-          className={`form-control  `}
+          className={`form-control form-control-sm `}
           {...register("taxId")}
         />
         {errors.taxId && (
@@ -135,7 +131,6 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         </Label>
         <DatePicker
           name="onBoardingDate"
-          size="md"
           control={control}
           placeholder="DD-MM-YYYY"
           maxDate={new Date()}
@@ -148,79 +143,73 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         )}
       </div>
 
-      <div className="col-sm-6 mb-2 mb-md-4">
+      <div className="col-sm-6">
-        <AppFormController
+        <Label htmlFor="organizationSize" required>
-          name="organizationSize"
+          Organization Size
-          control={control}
+        </Label>
-          render={({ field }) => (
+
-            <SelectField
+        <select
-              label="Organization Size"
+          id="organizationSize"
-              placeholder="Select Organization Size"
+          className="form-select shadow-none border py-1 px-2"
-              options={orgSize ?? []}
+          style={{ fontSize: "0.875rem" }} // Bootstrap's small text size
-              labelKey="name"
+          {...register("organizationSize", { required: "Organization size is required" })}
-              valueKey="val"
+        >
-              value={field.value}
+          {orgSize.map((org) => (
-              onChange={field.onChange}
+            <option key={org.val} value={org.val}>
-              className="shadow-none border py-1 px-2 small m-0"
+              {org.name}
-              required
+            </option>
-            />
+          ))}
-          )}
+        </select>
-        />
+
         {errors.organizationSize && (
-          <small className="danger-text">{errors.organizationSize.message}</small>
+          <div className="danger-text">{errors.organizationSize.message}</div>
         )}
       </div>
 
-      <div className="col-sm-6 mt-n3">
-        <AppFormController
-          name="industryId"
-          control={control} // make sure `control` comes from useForm
-          render={({ field }) => (
-            <SelectField
-              label="Industry"
-              placeholder={industryLoading ? "Loading..." : "Select Industry"}
-              options={data ?? []}
-              labelKey="name"
-              valueKeyKey="id"
-              value={field.value}
-              onChange={field.onChange}
-              isLoading={industryLoading}
-              className="shadow-none border py-1 px-2 small"
-              required
-            />
-          )}
-        />
 
+      <div className="col-sm-6">
+        <Label htmlFor="industryId" required>
+          Industry
+        </Label>
+        <select
+          id="industryId"
+          className="form-select shadow-none border py-1 px-2 small"
+          {...register("industryId")}
+        >
+          {industryLoading ? (
+            <option value="">Loading...</option>
+          ) : (
+            data?.map((indu) => (
+              <option key={indu.id} value={indu.id}>
+                {indu.name}
+              </option>
+            ))
+          )}
+        </select>
         {errors.industryId && (
           <div className="danger-text">{errors.industryId.message}</div>
         )}
       </div>
 
-      <div className="col-sm-6 mb-2 mb-md-4 mt-n3">
+      <div className="col-sm-6">
-        <AppFormController
+        <Label htmlFor="reference" required>Reference</Label>
-          name="reference"
+        <select
-          control={control}
+          id="reference"
-          render={({ field }) => (
+          className="form-select shadow-none border py-1 px-2 small"
-            <SelectField
+          {...register("reference")}
-              label="Reference"
+        >
-              placeholder="Select Reference"
+          {reference.map((org) => (
-              options={reference ?? []}
+            <option key={org.val} value={org.val}>
-              labelKey="name"
+              {org.name}
-              valueKey="val"
+            </option>
-              value={field.value}
+          ))}
-              onChange={field.onChange}
+        </select>
-              className="shadow-none border py-1 px-2 small m-0"
-              required
-            />
-          )}
-        />
         {errors.reference && (
-          <small className="danger-text">{errors.reference.message}</small>
+          <div className="danger-text">{errors.reference.message}</div>
         )}
       </div>
 
-
+      <div className="col-sm-6">
-      <div className="col-sm-6 mt-n3">
         <SelectMultiple
           name="serviceIds"
           label="Services"
@@ -240,7 +229,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
         <textarea
           id="description"
           rows={3}
-          className={`form-control  `}
+          className={`form-control form-control-sm `}
           {...register("description")}
         />
         {errors.description && (

src/components/Tenant/TenantForm.jsx

@@ -43,7 +43,6 @@ const TenantForm = () => {
   const tenantForm = useForm({
     resolver: zodResolver(newTenantSchema),
     defaultValues: tenantDefaultValues,
-    mode: "onChange",
   });
 
   const subscriptionForm = useForm({

src/components/Tenant/TenantsList.jsx

@@ -114,8 +114,9 @@ const TenantsList = ({
       align: "text-center",
       getValue: (t) => (
         <span
-          className={`badge ${getTenantStatus(t.tenantStatus?.id) || "secondary"
+          className={`badge ${
-            }`}
+            getTenantStatus(t.tenantStatus?.id) || "secondary"
+          }`}
         >
           {t.tenantStatus?.name || "Unknown"}
         </span>
@@ -150,12 +151,13 @@ const TenantsList = ({
             <tbody>
               {data?.data.length > 0 ? (
                 data.data.map((tenant) => (
-                  <tr key={tenant.id} style={{ height: "50px" }}>
+                  <tr key={tenant.id}>
                     {TenantColumns.map((col) => (
                       <td
                         key={col.key}
-                        className={`d-table-cell px-3 py-2 align-middle ${col.align ?? ""
+                        className={`d-table-cell px-3 py-2 align-middle ${
-                          }`}
+                          col.align ?? ""
+                        }`}
                       >
                         {col.customRender
                           ? col.customRender(tenant)

src/components/collections/AddPayment.jsx

@@ -12,8 +12,6 @@ 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();
@@ -62,7 +60,7 @@ const AddPayment = ({ onClose }) => {
               <Label required>TransanctionId</Label>
               <input
                 type="text"
-                className="form-control "
+                className="form-control form-control-sm"
                 {...register("transactionId")}
               />
               {errors.transactionId && (
@@ -80,10 +78,10 @@ const AddPayment = ({ onClose }) => {
                 minDate={
                   data?.clientSubmitedDate
                     ? new Date(
-                      new Date(data?.clientSubmitedDate).setDate(
+                        new Date(data?.clientSubmitedDate).setDate(
-                        new Date(data?.clientSubmitedDate).getDate() + 1
+                          new Date(data?.clientSubmitedDate).getDate() + 1
+                        )
                       )
-                    )
                     : null
                 }
                 maxDate={new Date()}
@@ -95,30 +93,33 @@ const AddPayment = ({ onClose }) => {
               )}
             </div>
 
-            <div className="col-12 col-md-6 mb-2">
+            <div className="col-12 col-md-6  mb-2">
-              <Label htmlFor="paymentAdjustmentHeadId" className="form-label" required>
+              <Label
+                htmlFor="paymentAdjustmentHeadId"
+                className="form-label"
+                required
+              >
                 Payment Adjustment Head
               </Label>
-
+              <select
-              <AppFormController
+                className="form-select form-select-sm "
-                name="paymentAdjustmentHeadId"
+                {...register("paymentAdjustmentHeadId")}
-                control={control}
+              >
-                rules={{ required: "Payment Adjustment Head is required" }}
+                {isPaymentTypeLoading ? (
-                render={({ field }) => (
+                  <option>Loading..</option>
-                  <SelectField
+                ) : (
-                    label="" // Label is already above
+                  <>
-                    placeholder="Select Payment Head"
+                    <option value="">Select Payment Head</option>
-                    options={paymentTypes?.data
+                    {paymentTypes?.data
-                      ?.sort((a, b) => a.name.localeCompare(b.name)) ?? []}
+                      ?.sort((a, b) => a.name.localeCompare(b.name))
-                    value={field.value || ""}
+                      ?.map((type) => (
-                    onChange={field.onChange}
+                        <option key={type.id} value={type.id}>
-                    required
+                          {type.name}
-                    isLoading={isPaymentTypeLoading}
+                        </option>
-                    className="m-0 form-select-sm w-100"
+                      ))}
-                  />
+                  </>
                 )}
-              />
+              </select>
-
               {errors.paymentAdjustmentHeadId && (
                 <small className="danger-text">
                   {errors.paymentAdjustmentHeadId.message}
@@ -126,7 +127,6 @@ 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 "
+                className="form-control form-control-sm"
                 min="1"
                 step="0.01"
                 inputMode="decimal"
@@ -150,7 +150,7 @@ const AddPayment = ({ onClose }) => {
               </Label>
               <textarea
                 id="comment"
-                className="form-control "
+                className="form-control form-control-sm"
                 {...register("comment")}
               />
               {errors.comment && (

src/components/collections/ManageCollection.jsx

@@ -19,8 +19,6 @@ 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);
@@ -191,35 +189,38 @@ const ManageCollection = ({ collectionId, onClose }) => {
             </div>
 
             <div className="col-12 col-md-6 mb-2">
-              <Label htmlFor="billedToId" required>
+              <Label htmlFor="name" required>
                 Bill To
               </Label>
-
+              <div className="d-flex align-items-center gap-2">
-              <AppFormController
+                <select
-                name="billedToId"
+                  className="select2 form-select form-select flex-grow-1"
-                control={control}
+                  aria-label="Default select example"
-                rules={{ required: "Client is required" }}
+                  {...register("billedToId", {
-                render={({ field }) => (
+                    required: "Client is required",
-                  <SelectField
+                    valueAsNumber: false,
-                    label="" // Label already shown above
+                  })}
-                    placeholder="Select Client"
+                >
-                    options={organization?.data ?? []}
+                  {isLoading ? (
-                    value={field.value || ""}
+                    <option>Loading...</option>
-                    onChange={field.onChange}
+                  ) : (
-                    required
+                    <>
-                    isLoading={isLoading}
+                      <option value="">Select Client</option>
-                    className="m-0 flex-grow-1"
+                      {organization?.data?.map((org) => (
-                  />
+                        <option key={org.id} value={org.id}>
-                )}
+                          {org.name}
-              />
+                        </option>
-
+                      ))}
-              {errors?.billedToId && (
+                    </>
+                  )}
+                </select>
+              </div>
+              {errors?.clientId && (
                 <span className="danger-text">{errors.billedToId.message}</span>
               )}
             </div>
 
-
+            <div className="col-12 col-md-6 mb-2">
-            <div className="col-12 col-md-6 mb-4">
               <Label required>Title</Label>
               <input
                 type="text"
@@ -230,7 +231,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 <small className="danger-text">{errors.title.message}</small>
               )}
             </div>
-            <div className="col-12 col-md-6 mb-2">
+            <div className="col-12 col-md-6  mb-2">
               <Label required>Invoice Number</Label>
               <input
                 type="text"
@@ -256,7 +257,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 </small>
               )}
             </div>
-            <div className="col-12 col-md-6 mb-4">
+            <div className="col-12 col-md-6  mb-2">
               <Label required>Invoice Date</Label>
               <DatePicker
                 className="w-100"
@@ -271,7 +272,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 </small>
               )}
             </div>
-            <div className="col-12 col-md-6 mb-4">
+            <div className="col-12 col-md-6  mb-2">
               <Label required>Expected Payment Date</Label>
               <DatePicker
                 className="w-100"
@@ -286,7 +287,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 </small>
               )}
             </div>
-            <div className="col-12 col-md-6 mb-2">
+            <div className="col-12 col-md-6  mb-2">
               <Label required>Submission Date (Client)</Label>
               <DatePicker
                 className="w-100"
@@ -340,7 +341,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
                 </small>
               )}
             </div>
-            <div className="col-12 my-2 text-start mb-2">
+            <div className="col-12 my-2 text-start  mb-2">
               <div className="col-md-12">
                 <Label htmlFor="description" className="form-label" required>
                   Description
@@ -359,7 +360,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
               </div>
             </div>
 
-            <div className="col-12 my-3">
+            <div className="col-12">
               <Label className="form-label" required>
                 Upload Bill{" "}
               </Label>

src/components/common/Forms/SelectField.jsx

@@ -12,8 +12,6 @@ const SelectField = ({
   labelKey = "name",
   isLoading = false,
 }) => {
-  const [position, setPosition] = useState("bottom");
-
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
 
@@ -36,26 +34,10 @@ const SelectField = ({
     setOpen(false);
   };
 
-  const toggleDropdown = () => {
+  const toggleDropdown = () => setOpen((prev) => !prev);
-    if (!open) {
-      const rect = dropdownRef.current?.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-
-      const spaceBelow = viewportHeight - rect.bottom;
-      const dropdownHeight = 200; 
-
-      if (spaceBelow < dropdownHeight) {
-        setPosition("top"); // open upward
-      } else {
-        setPosition("bottom"); // open downward
-      }
-    }
-
-    setOpen((prev) => !prev);
-  };
 
   return (
-    <div className="position-relative mb-3" ref={dropdownRef}>
+    <div className="mb-3 position-relative" ref={dropdownRef}>
       {label && (
         <Label className="form-label" required={required}>
           {label}
@@ -78,45 +60,32 @@ const SelectField = ({
       </button>
 
       {open && !isLoading && (
-        <div
+        <ul
-          className="w-full px-1 shadow-md rounded p-1"
+          className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
           style={{
             position: "absolute",
-            top: position === "bottom" ? "100%" : "auto",
+            top: "100%",
-            bottom: position === "top" ? "100%" : "auto",
             left: 0,
             zIndex: 1050,
-
+            marginTop: "4px",
-            marginTop: position === "bottom" ? "2px" : "0",
+            borderRadius: "0.375rem",
-            marginBottom: position === "top" ? "2px" : "0",
+            overflow: "hidden",
           }}
         >
-          <ul
+          {options.map((option, i) => (
-            className="dropdown-menu w-100 show border-0 rounded px-1 py-1"
+            <li key={i}>
-            style={{
+              <button
-              position: "static",
+                type="button"
-
+                className={`dropdown-item ${
-              maxHeight: "220px",
+                  option[valueKey] === value ? "active" : ""
-              overflowY: "auto",
+                }`}
-              overflowX: "hidden",
+                onClick={() => handleSelect(option)}
-            }}
+              >
-            id="vertical-example"
+                {option[labelKey]}
-          >
+              </button>
-            {options.map((option, i) => (
+            </li>
-              <li key={i}>
+          ))}
-                <button
+        </ul>
-                  type="button"
-                  className={`dropdown-item rounded text-truncate ${
-                    option[valueKey] === value ? "active" : ""
-                  }`}
-                  onClick={() => handleSelect(option)}
-                >
-                  {option[labelKey]}
-                </button>
-              </li>
-            ))}
-          </ul>
-        </div>
       )}
     </div>
   );

src/components/common/TagInput.jsx

@@ -2,7 +2,7 @@ import { useFormContext, useWatch } from "react-hook-form";
 import React, { useEffect, useState } from "react";
 import Label from "./Label";
 
-const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [],size="sm" }) => {
+const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [] }) => {
   const { setValue, watch } = useFormContext();
   const tags = watch(name) || [];
   const [input, setInput] = useState("");
@@ -70,7 +70,7 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = fals
       </Label>
 
       <div
-        className={`form-control form-control-sm-${size}`}
+        className="form-control form-control-sm p-1"
         style={{ minHeight: "33px", position: "relative" }}
       >
         <div className="d-flex flex-wrap align-items-center gap-1">

src/components/master/CreateRole.jsx

@@ -228,7 +228,7 @@ const CreateRole = ({ modalType, onClose }) => {
       </div>
 
       {masterFeatures && (
-        <div className="col-12 text-end mt-5">
+        <div className="col-12 text-end">
            <button
             type="reset"
             className="btn btn-sm btn-label-secondary me-3"

src/components/master/CreateWorkCategory.jsx

@@ -90,7 +90,7 @@ const CreateWorkCategory = ({ onClose }) => {
           />
           {errors.name && <p className="text-danger">{errors.name.message}</p>}
         </div> 
-        <div className="col-12 col-md-12 text-start my-3">
+        <div className="col-12 col-md-12 text-start">
           <Label className="form-label" htmlFor="description" required>Description</Label>
         <textarea
           rows="3"

src/components/master/EditRole.jsx

@@ -276,7 +276,7 @@ const EditMaster = ({ master, onClose }) => {
 
 
 
-      <div className="col-12 text-end mt-5">
+      <div className="col-12 text-end mt-3">
         <button
           type="button"
           className="btn btn-sm btn-label-secondary me-3"

src/components/master/ManageDocumentCategory.jsx

@@ -9,8 +9,6 @@ import {
   useUpdateDocumentCategory,
 } from "../../hooks/masterHook/useMaster";
 import Label from "../common/Label";
-import { AppFormController } from "../../hooks/appHooks/useAppForm";
-import SelectField from "../common/Forms/SelectField";
 
 export const Document_Entity = Object.entries(DOCUMENTS_ENTITIES).map(
   ([key, value]) => ({ key, value })
@@ -36,7 +34,6 @@ const ManageDocumentCategory = ({ data, onClose }) => {
     register,
     handleSubmit,
     reset,
-    control,
     formState: { errors },
   } = methods;
 
@@ -92,7 +89,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
               <input
                 type="text"
                 {...register("name")}
-                className={`form-control  `}
+                className={`form-control form-control-sm `}
               />
               {errors.name && (
                 <p className="danger-text">{errors.name.message}</p>
@@ -100,43 +97,36 @@ const ManageDocumentCategory = ({ data, onClose }) => {
             </div>
 
             <div className="col-12">
-              <AppFormController
+              <Label required >Select Entity</Label>
-                name="entityTypeId"
+              <select
-                control={control}
+                className="form-select form-select-sm"
-                render={({ field }) => (
+                {...register("entityTypeId")}
-                  <SelectField
+              >
-                    label="Select Entity"
+                <option value="" disabled>Select entity</option>
-                    options={Document_Entity ?? []}
+                {Document_Entity.map((entity) => (
-                    placeholder="Select entity"
+                  <option key={entity.key} value={entity.value}>
-                    required
+                    {entity.key}
-                    labelKey="key"
+                  </option>
-                    valueKey="value"
+                ))}
-                    value={field.value}
+              </select>
-                    onChange={field.onChange}
-                    className="m-0 w-100"
-                  />
-                )}
-              />
-
               {errors.entityTypeId && (
                 <p className="danger-text">{errors.entityTypeId.message}</p>
               )}
             </div>
 
-
+            <div className="col-12">
-            <div className="col-12 my-3">
               <Label required >Description</Label>
               <textarea
                 rows="3"
                 {...register("description")}
-                className={`form-control `}
+                className={`form-control form-control-sm`}
               />
               {errors.description && (
                 <p className="danger-text">{errors.description.message}</p>
               )}
             </div>
 
-            <div className="d-flex flex-row justify-content-end gap-3">
+            <div className="d-flex flex-row justify-content-end gap-3 ">
               <button
                 type="button"
                 className="btn btn-sm btn-label-secondary"
@@ -147,16 +137,16 @@ const ManageDocumentCategory = ({ data, onClose }) => {
               </button>
               <button
                 type="submit"
-                className="btn btn-sm btn-primary"
+                className="btn btn-sm btn-primary me-3"
                 disabled={isPending || Updating}
               >
                 {isPending || Updating
                   ? "Please Wait..."
                   : data
-                    ? "Update"
+                  ? "Update"
-                    : "Submit"}
+                  : "Submit"}
               </button>
-
+              
             </div>
           </form>
         </div>

src/components/master/ManageDocumentType.jsx

@@ -5,8 +5,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useCreateDocumentType, useDocumentCategories, useUpdateDocumentType } from "../../hooks/masterHook/useMaster";
 import { DOCUMENTS_ENTITIES } from "../../utils/constants";
 import Label from "../common/Label";
-import { AppFormController } from "../../hooks/appHooks/useAppForm";
-import SelectField from "../common/Forms/SelectField";
 
 
 export const Document_Entity = Object.entries(DOCUMENTS_ENTITIES).map(
@@ -35,22 +33,21 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
       isValidationRequired: true,
       isMandatory: true,
       documentCategoryId: "",
-      entityTypeId: ""
+      entityTypeId:""
     },
   });
-  const {
+   const {
     register,
     handleSubmit,
-    reset, watch,
+    reset,watch,
-    control,
     formState: { errors },
   } = methods;
 
 
   const selectedDocumentEntity = watch("entityTypeId")
-  const { DocumentCategories, isLoading } = useDocumentCategories(selectedDocumentEntity)
+  const {DocumentCategories,isLoading} = useDocumentCategories(selectedDocumentEntity)
-
 
+ 
 
   const { mutate: createDocType, isPending: creating } = useCreateDocumentType(() =>
     onClose?.()
@@ -58,15 +55,15 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
   const { mutate: updateDocType, isPending: updating } = useUpdateDocumentType(() =>
     onClose?.()
   );
-  const onSubmit = (payload) => {
+const onSubmit = (payload) => {
-    const { entityTypeId, ...rest } = payload;
+  const { entityTypeId, ...rest } = payload;
 
-    if (data) {
+  if (data) {
-      updateDocType({ id: data.id, payload: { ...rest, id: data.id } });
+    updateDocType({ id: data.id, payload: { ...rest, id: data.id } });
-    } else {
+  } else {
-      createDocType(rest);
+    createDocType(rest);
-    }
+  }
-  };
+};
 
 
   useEffect(() => {
@@ -79,7 +76,7 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
         isValidationRequired: data.isValidationRequired ?? true,
         isMandatory: data.isMandatory ?? true,
         documentCategoryId: data.documentCategory?.id ?? "",
-        entityTypeId: data.documentCategory?.entityTypeId ?? ""
+        entityTypeId:data.documentCategory?.entityTypeId ?? ""
       });
     }
   }, [data]);
@@ -99,7 +96,7 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
           <input
             type="text"
             {...register("name")}
-            className={`form-control  `}
+            className={`form-control form-control-sm `}
           />
           {errors.name && <a className="text-danger">{errors.name.message}</a>}
         </div>
@@ -110,7 +107,7 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
           <input
             type="text"
             {...register("regexExpression")}
-            className="form-control "
+            className="form-control form-control-sm"
           />
         </div>
 
@@ -120,7 +117,7 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
           <input
             type="text"
             {...register("allowedContentType")}
-            className={`form-control form-control `}
+            className={`form-control form-control form-control-sm`}
           />
           {errors.allowedContentType && (
             <a className="text-danger">{errors.allowedContentType.message}</a>
@@ -133,7 +130,7 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
           <input
             type="number"
             {...register("maxSizeAllowedInMB", { valueAsNumber: true })}
-            className={`form-control `}
+            className={`form-control form-control-sm`}
           />
           {errors.maxSizeAllowedInMB && (
             <a className="text-danger">{errors.maxSizeAllowedInMB.message}</a>
@@ -159,59 +156,47 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
           />
           <label className="form-check-label">Mandatory</label>
         </div>
-        {/* Document Entity */}
+       <div className="col-12">
-        <div className="col-12">
+          <label className="form-label">Document Entity</label>
-          <AppFormController
+          <select
-            name="entityTypeId"
+            {...register("entityTypeId")}
-            control={control}
+            className={`form-select form-select-sm`}
-            render={({ field }) => (
+          >
-              <SelectField
+            <option value="">-- Select Category --</option>
-                label="Document Entity"
+            {Document_Entity.map((entity) => (
-                options={Document_Entity ?? []}
+              <option key={entity.key} value={entity.value}>
-                placeholder="-- Select Category --"
+                {entity.key}
-                required
+              </option>
-                labelKey="key"
+            ))}
-                valueKey="value"
+          </select>
-                value={field.value}
-                onChange={field.onChange}
-                className="m-0 w-100"
-              />
-            )}
-          />
           {errors.entityTypeId && (
-            <small className="text-danger">{errors.entityTypeId.message}</small>
+            <a className="text-danger">{errors.entityTypeId.message}</a>
           )}
         </div>
+        {/* Category */}
+        <div className="col-12">
+          <Label required> Document Category</Label>
+          <select
+            {...register("documentCategoryId")}
+            className={`form-select form-select-sm`}
+          >
 
-        {/* Document Category */}
+            {isLoading && <option value="" disabled>Loading....</option> }
-        <div className="col-12 my-3">
+            <option value="">-- Select Category --</option>
-          <AppFormController
+            {!isLoading && DocumentCategories?.map((cat) => (
-            name="documentCategoryId"
+              <option key={cat.id} value={cat.id}>
-            control={control}
+                {cat.name}
-            render={({ field }) => (
+              </option>
-              <SelectField
+            ))}
-                label="Document Category"
+          </select>
-                options={DocumentCategories ?? []}
-                placeholder={isLoading ? "Loading..." : "-- Select Category --"}
-                required
-                labelKey="name"
-                valueKey="id"
-                value={field.value}
-                onChange={field.onChange}
-                isLoading={isLoading}
-                className="m-0 w-100"
-              />
-            )}
-          />
           {errors.documentCategoryId && (
-            <small className="text-danger">{errors.documentCategoryId.message}</small>
+            <a className="text-danger">{errors.documentCategoryId.message}</a>
           )}
         </div>
 
-
         {/* Buttons */}
         <div className="d-flex flex-row justify-content-end gap-3 ">
-          <button
+           <button
             type="button"
             className="btn btn-sm btn-label-secondary"
             onClick={onClose}
@@ -227,10 +212,10 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
             {creating || updating
               ? "Please Wait..."
               : data
-                ? "Update"
+              ? "Update"
-                : "Submit"}
+              : "Submit"}
           </button>
-
+         
         </div>
       </form>
     </FormProvider>

src/components/master/ManagePaymentMode.jsx

@@ -56,7 +56,7 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
         />
         {errors.name && <p className="danger-text">{errors.name.message}</p>}
       </div>
-      <div className="col-12 col-md-12 text-start my-3">
+      <div className="col-12 col-md-12 text-start">
         <Label className="form-label" htmlFor="description" required>
           Description
         </Label>

src/components/master/Services/ManageActivity.jsx

@@ -145,7 +145,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
           <input
             type="text"
             {...register("activityName")}
-            className={`form-control  ${
+            className={`form-control form-control-sm ${
               errors.activityName ? "is-invalid" : ""
             }`}
           />
@@ -161,7 +161,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
           <input
             type="text"
             {...register("unitOfMeasurement")}
-            className={`form-control  ${
+            className={`form-control form-control-sm ${
               errors.unitOfMeasurement ? "is-invalid" : ""
             }`}
           />
@@ -203,7 +203,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
                       ></input>
                       <input
                         {...register(`checkList.${index}.description`)}
-                        className="form-control "
+                        className="form-control form-control-sm"
                         placeholder={`Checklist item ${index + 1}`}
                         onChange={(e) =>
                           handleChecklistChange(index, e.target.value)

src/components/master/Services/ManageGroup.jsx

@@ -62,7 +62,7 @@ const ManageGroup = ({ group = null, whichService = null, close }) => {
           <input
             type="text"
             {...register("name")}
-            className={`form-control  ${errors.name ? "is-invalids" : ""
+            className={`form-control form-control-sm ${errors.name ? "is-invalids" : ""
               }`}
           />
           {errors.name && (
@@ -76,7 +76,7 @@ const ManageGroup = ({ group = null, whichService = null, close }) => {
           <textarea
             rows="3"
             {...register("description")}
-            className={`form-control  ${errors.description ? "is-invalids" : ""
+            className={`form-control form-control-sm ${errors.description ? "is-invalids" : ""
               }`}
           ></textarea>
 

src/components/master/Services/ManageServices.jsx

@@ -62,7 +62,7 @@ const ManageServices = ({ data , onClose }) => {
         {errors.name && <p className="danger-text">{errors.name.message}</p>}
       </div>
 
-      <div className="col-12 col-md-12 text-start my-3">
+      <div className="col-12 col-md-12 text-start">
         <Label className="form-label" htmlFor="description" required>
           Description
         </Label>

src/components/master/Services/ServicesGroups.jsx

@@ -40,7 +40,7 @@ const ServiceGroups = ({ service }) => {
       <div className="accordion" id="accordionExample">
         <div className="accordion-item active shadow-none">
           {/* Service Header */}
-          <div className="d-flex justify-content-between text-start align-items-center accordion-header py-3">
+          <div className="d-flex justify-content-between text-start align-items-center accordion-header py-1">
             <p className="m-0 fw-bold fs-6">{service.name}</p>
             <button
               className="btn btn-sm btn-primary"

src/components/master/paymentAdjustmentHead/ManagePaymentHead.jsx

@@ -75,7 +75,7 @@ const ManagePaymentHead = ({ data, onClose }) => {
           )}
         </div>
 
-        <div className="my-3">
+        <div className="mb-3">
           <Label htmlFor="description" required>
             Description
           </Label>

src/components/purchase/DeliveryChallane.jsx

@@ -142,7 +142,7 @@ const DeliveryChallane = ({ purchaseId }) => {
                   label="Select Document Type"
                   options={data ?? []}
                   placeholder="Choose  Type"
-                  labelKey="name"
+                  labelKeyKey="name"
                   valueKeyKey="id"
                   value={field.value}
                   onChange={field.onChange}

src/components/purchase/PurchasePayment.jsx

@@ -111,7 +111,7 @@ const PurchasePayment = ({ onClose, purchaseId }) => {
                         options={paymentTypes?.data ?? []}
                         placeholder="Choose a Status"
                         required
-                        labelKey="name"
+                        labelKeyKey="name"
                         valueKeyKey="id"
                         value={field.value}
                         onChange={field.onChange}

src/components/purchase/PurchasePaymentDetails.jsx

@@ -223,7 +223,7 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
               label="Select Document Type"
               options={InvoiceDocTypes ?? []}
               placeholder="Choose  Type"
-              labelKey="name"
+              labelKeyKey="name"
               valueKeyKey="id"
               value={field.value}
               onChange={field.onChange}

src/pages/Activities/TaskPlannng.jsx

@@ -7,20 +7,11 @@ import { setProjectId } from "../../slices/localVariablesSlice";
 import { useSelectedProject } from "../../slices/apiDataManager";
 import { useProjectAssignedServices } from "../../hooks/useProjects";
 import { setService } from "../../slices/globalVariablesSlice";
-import { AppFormController } from "../../hooks/appHooks/useAppForm";
-import SelectField from "../../components/common/Forms/SelectField";
-import { useForm } from "react-hook-form";
 
 const TaskPlanning = () => {
   const selectedProject = useSelectedProject();
   const selectedService = useCurrentService();
   const dispatch = useDispatch();
-  const { control } = useForm({
-    defaultValues: {
-      serviceFilter: selectedService ?? ""
-    },
-  });
-
 
   const { projectNames = [], loading: projectLoading } = useProjectName();
 
@@ -38,7 +29,6 @@ const TaskPlanning = () => {
   if (projectLoading) {
     return <div className="text-center py-5">Loading...</div>;
   }
-
   return (
     <div className="container-fluid">
       <Breadcrumb
@@ -53,31 +43,25 @@ const TaskPlanning = () => {
           {data?.length === 0 ? (
             <p className="badge bg-label-secondary m-0">Service not assigned</p>
           ) : (
-            <AppFormController
+            <select
-              name="serviceFilter"
+              name="DataTables_Table_0_length"
-              control={control}
+              aria-controls="DataTables_Table_0"
-              render={({ field }) => (
+              className="form-select form-select-sm"
-                <SelectField
+              aria-label="Select Service"
-                  label="Services"
+              value={selectedService ?? ""}
-                  placeholder="All Services"
+              onChange={(e) => dispatch(setService(e.target.value))}
-                  options={[{ id: "", name: "All Services" }, ...(data ?? [])]}
+            >
-                  labelKey="name"
+              <option value="">All Services</option>
-                  valueKey="id"
+              {!servicesLoading &&
-                  isLoading={servicesLoading}
+                data?.map((service) => (
-                  value={field.value}
+                  <option key={service.id} value={service.id}>
-                  onChange={(val) => {
+                    {service.name}
-                    field.onChange(val);        
+                  </option>
-                    dispatch(setService(val));  
+                ))}
-                  }}
+            </select>
-                  className="m-0"
-                />
-              )}
-            />
           )}
         </div>
 
-
-
         {/* Planning Component */}
         {selectedProject ? (
           <InfraPlanning />

src/pages/DailyProgressReport/DailyProgrssReport.jsx

@@ -10,9 +10,6 @@ import { useFab } from "../../Context/FabContext";
 import SubTask from "../../components/Activities/SubTask";
 import { useProjectAssignedServices } from "../../hooks/useProjects";
 import { useSelectedProject } from "../../slices/apiDataManager";
-import SelectField from "../../components/common/Forms/SelectField";
-import { AppFormController } from "../../hooks/appHooks/useAppForm";
-import { useForm } from "react-hook-form";
 
 const DailyProgrssContext = createContext();
 export const useDailyProgrssContext = () => {
@@ -26,9 +23,9 @@ export const useDailyProgrssContext = () => {
 };
 
 const DailyProgrssReport = () => {
-  const selectedProject = useSelectedProject()
+  const  selectedProject =  useSelectedProject()
   const [service, setService] = useState("");
-  const [filter, setFilter] = useState('')
+  const [filter,setFilter] = useState('')
   const { setOffcanvasContent, setShowTrigger } = useFab();
   const { data, isLoading, isError, error } = useProjectAssignedServices(selectedProject);
 
@@ -44,14 +41,8 @@ const DailyProgrssReport = () => {
     filter,
   };
 
-  const { control } = useForm({
+  const handleFilter = (filterObj)=>{
-    defaultValues: {
+     setFilter(filterObj)
-      serviceFilter: ""
-    }
-  });
-
-  const handleFilter = (filterObj) => {
-    setFilter(filterObj)
   }
 
   useEffect(() => {
@@ -98,38 +89,32 @@ const DailyProgrssReport = () => {
         />
 
         <div className="card card-fullscreen p-5">
-          {data?.length > 0 && (
+            {data?.length > 0 && (<div className="col-sm-4 col-md-3 col-12">
-            <div className="col-sm-4 col-md-3 col-12 text-start">
+            <select
-              <AppFormController
+              className="form-select form-select-sm"
-                name="serviceFilter"
+              value={service ?? ""}
-                control={control}
+              onChange={(e) => setService(e.target.value)}
-                defaultValue={service ?? ""}
+            >
-                render={({ field }) => (
+              {isLoading ? (
-                  <SelectField
+                <option value="lading" disabled>Loading...</option>
-                    label="Services"
+              ) : (
-                    options={[{ id: "", name: "All Projects" }, ...(data ?? [])]} 
+                <>
-                    placeholder="Select Service"
+                  <option value="">
-                    labelKey="name"  
+                    All Services
-                    valueKey="id"
+                  </option>
-                    isLoading={isLoading}
+                  {data?.map((service) => (
-                    value={field.value}
+                    <option key={service.id} value={service.id}>
-                    onChange={(val) => {
+                      {service.name}
-                      field.onChange(val);  
+                    </option>
-                      setService(val);      
+                  ))}
-                    }}
+                </>
-                    className="m-0"
+              )}
-                  />
+            </select>
-                )}
+          </div>)}
-              />
-            </div>
-          )}
-
           <div>
             <TaskReportList />
           </div>
         </div>
-
-
       </DailyProgrssContext.Provider>
     </div>
   );

src/pages/authentication/ChangePassword.jsx

@@ -71,7 +71,8 @@ const ChangePasswordPage = () => {
   const bodyContxt = (
  
    
-        <div className="row">    
+        <div className="row">
+     
 
           <h5 className="mb-2">Change Password</h5>
           <p className="mb-4 text-black">
@@ -85,7 +86,7 @@ const ChangePasswordPage = () => {
               <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
                 <input
                   type={hideOldPass ? "password" : "text"}
-                  className="form-control  border-0 shadow-none"
+                  className="form-control form-control-sm border-0 shadow-none"
                   {...register("oldPassword")}
                   placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                   style={{ flex: 1 }}
@@ -111,7 +112,7 @@ const ChangePasswordPage = () => {
               <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
                 <input
                   type={hideNewPass ? "password" : "text"}
-                  className="form-control  border-0 shadow-none"
+                  className="form-control form-control-sm border-0 shadow-none"
                   {...register("newPassword")}
                   placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                   style={{ flex: 1 }}
@@ -141,7 +142,7 @@ const ChangePasswordPage = () => {
               <div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
                 <input
                   type={hideConfirmPass ? "password" : "text"}
-                  className="form-control  border-0 shadow-none"
+                  className="form-control form-control-sm border-0 shadow-none"
                   {...register("confirmPassword")}
                   placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                   style={{ flex: 1 }}
@@ -167,28 +168,28 @@ const ChangePasswordPage = () => {
               )}
             </div>
 
-            <div className="d-flex justify-content-center my-5 text-muted small text-black">
+            <div className="d-flex justify-content-center pt-2 text-muted small text-black">
               Your password must have at least 8 characters and include a lower
               case letter, an uppercase letter, a number, and a special
               character.
             </div>
             {/* Action Buttons */}
-            <div className="d-flex justify-content-end">              
+            <div className="d-flex justify-content-center pt-4">
+              <button
+                type="submit"
+                className="btn btn-primary btn-sm me-2"
+                disabled={loading}
+              >
+                {loading ? "Please Wait..." : "Change Password"}
+              </button>
               <button
                 type="button"
-                className="btn btn-outline-secondary btn-sm me-2"
+                className="btn btn-outline-secondary btn-sm"
                 onClick={onClose}
                 disabled={loading}
               >
                 Cancel
               </button>
-              <button
-                type="submit"
-                className="btn btn-primary btn-sm"
-                disabled={loading}
-              >
-                {loading ? "Please Wait..." : "Change Password"}
-              </button>
             </div>
           </form>
         </div>

src/pages/master/MasterPage.jsx

@@ -15,9 +15,6 @@ import { changeMaster } from "../../slices/localVariablesSlice";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_MASTER } from "../../utils/constants";
 import GlobalModel from "../../components/common/GlobalModel";
-import { AppFormController } from "../../hooks/appHooks/useAppForm";
-import SelectField from "../../components/common/Forms/SelectField";
-import { useForm } from "react-hook-form";
 
 
 export const MasterContext = createContext();
@@ -36,11 +33,6 @@ const MasterPage = () => {
     (store) => store.localVariables.selectedMaster
   );
   const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
-    const { control, handleSubmit } = useForm({
-    defaultValues: {
-      masterSelection: selectedMaster || "",
-    },
-  });
 
   const {
     data: menuData,
@@ -54,9 +46,9 @@ const MasterPage = () => {
     isError: isMasterError,
   } = useMaster();
   const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();
-  const [isDeleletingServiceItem, setDeleletingServiceItem] = useState({ isOpen: false, ItemId: null, whichItem: null })
+  const [isDeleletingServiceItem,setDeleletingServiceItem] = useState({isOpen:false,ItemId:null,whichItem:null})
-  const { mutate: DeleteSericeGroup, isPending: deletingGroup } = useDeleteServiceGroup()
+  const {mutate:DeleteSericeGroup,isPending:deletingGroup}  =useDeleteServiceGroup()
-  const { mutate: DeleteAcivity, isPending: deletingActivity } = useDeleteActivity()
+  const {mutate:DeleteAcivity,isPending:deletingActivity} = useDeleteActivity()
 
   const [modalConfig, setModalConfig] = useState(null);
   const [deleteData, setDeleteData] = useState(null);
@@ -97,15 +89,15 @@ const MasterPage = () => {
   };
 
 
-  const handleDeleteServiceItem = () => {
+  const handleDeleteServiceItem =()=>{
-    if (!isDeleletingServiceItem.ItemId) return
+    if(!isDeleletingServiceItem.ItemId) return
     debugger
-    if (isDeleletingServiceItem.whichItem === "activity") {
+    if(isDeleletingServiceItem.whichItem === "activity"){
-      DeleteAcivity(isDeleletingServiceItem.ItemId, { onSuccess: () => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null }) })
+        DeleteAcivity(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
-    } else {
+    }else{
-      DeleteSericeGroup(isDeleletingServiceItem.ItemId, { onSuccess: () => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null }) })
+      DeleteSericeGroup(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
     }
-
+  
 
   }
 
@@ -123,7 +115,7 @@ const MasterPage = () => {
     );
 
   return (
-    <MasterContext.Provider value={{ setDeleletingServiceItem }}>
+    <MasterContext.Provider value={{setDeleletingServiceItem}}>
       {modalConfig && (
         <GlobalModel
           size={
@@ -142,6 +134,8 @@ const MasterPage = () => {
           />
         </GlobalModel>
       )}
+      
+
       <ConfirmModal
         type="delete"
         header={`Delete ${selectedMaster}`}
@@ -151,15 +145,15 @@ const MasterPage = () => {
         onSubmit={handleDeleteSubmit}
         onClose={() => setDeleteData(null)}
       />
-
+      
       <ConfirmModal
         type="delete"
         header={`Delete ${isDeleletingServiceItem?.whichItem}`}
         message={`Are you sure you want to delete this ${isDeleletingServiceItem?.whichItem}?`}
         isOpen={!!isDeleletingServiceItem?.isOpen}
         loading={deletingActivity}
-        onSubmit={handleDeleteServiceItem}
+            onSubmit={handleDeleteServiceItem}
-        onClose={() => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null })}
+        onClose={() => setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})}
       />
 
       <div className="container-fluid">
@@ -167,37 +161,31 @@ const MasterPage = () => {
           data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]}
         />
 
-        <div className="">
+        <div className="row page-min-h">
-          <div className="card page-min-h">
+          <div className="card">
             <div
-              className="card-datatable table-responsive py-2 py-md-6 mx-1 mx-md-5 overflow-visible"
+              className="card-datatable table-responsive py-2 py-md-10 mx-1 mx-md-5 "
-
+              style={{ overflow: "hidden" }}
             >
               <div className="row mb-2">
-                <div className="col-12 col-md-3 text-start">
+                <div className="col-12 col-md-3">
-                  <AppFormController
+                  <select
-                    name="masterSelection"
+                    className="form-select py-1 px-2"
-                    control={control}
+                   
-                    render={({ field }) => (
+                    value={selectedMaster}
-                      <SelectField
+                    onChange={(e) => dispatch(changeMaster(e.target.value))}
-                        label="Select Master"
+                  >
-                        options={menuData ?? []}
+                    {menuLoading ? (
-                        placeholder={menuLoading ? "Loading..." : "Choose Master"}
+                      <option value="">Loading...</option>
-                        required
+                    ) : (
-                        labelKey="name"
+                      menuData?.map((item) => (
-                        valueKey="name"
+                        <option key={item.id} value={item.name}>
-                        value={field.value}
+                          {item.name}
-                        onChange={(val) => {
+                        </option>
-                          field.onChange(val); // update form value
+                      ))
-                          dispatch(changeMaster(val)); // update Redux state
-                        }}
-                        isLoading={menuLoading}
-                        className="m-0 w-100 py-1 px-2"
-                      />
                     )}
-                  />
+                  </select>
                 </div>
-
                 <div className="col-12 col-md-9  d-flex justify-content-between justify-content-md-end align-items-center gap-2 mt-2 mt-md-0">
                   <div className="col-8 col-md-3">
                     <input
@@ -216,7 +204,7 @@ const MasterPage = () => {
                       }
                     >
                       <i className="bx bx-plus-circle me-2"></i> <span className="d-none d-md-inline-block">Add{" "}
-                        {selectedMaster}</span>
+                      {selectedMaster}</span>
                     </button>
                   )}
                 </div>
@@ -232,7 +220,7 @@ const MasterPage = () => {
           </div>
         </div>
       </div>
-    </MasterContext.Provider>
+     </MasterContext.Provider>
   );
 };
 

src/pages/master/MasterTable.jsx

@@ -80,7 +80,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
   };
 
   return (
-    <div className="table-responsive mt-5">
+    <div className="table-responsive">
       {loading ? (
         <p>Loading...</p>
       ) : (
@@ -92,14 +92,14 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                 {" "}
                 {selectedMaster === "Activity" ? "Activity" : "Name"}
               </th>
-              <th className="text-start d-none d-md-table-cell">
+    <th className="text-start d-none d-md-table-cell">
 
                 {" "}
                 {selectedMaster === "Activity"
                   ? "Unit"
                   : selectedMaster === "Document Type"
-                    ? "Content Type"
+                  ? "Content Type"
-                    : "Description"}
+                  : "Description"}
               </th>
               <th className={` ${!hasMasterPermission && "d-none"}`}>
                 Actions
@@ -109,15 +109,15 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
           <tbody>
             {currentItems.length > 0 ? (
               currentItems.map((item, index) => (
-                <tr key={index} style={{ height: "40px" }}>
+                <tr key={index} >
-                  <td className="py-3">
+                  <td style={{ width: "20px" }} className="py-3">
                     <i className="bx bx-right-arrow-alt"></i>
                   </td>
                   {updatedColumns.map((col) => (
                     <td className={`text-start mx-2 py-3 ${col.key === "description" && "d-none d-md-table-cell"}`} key={col.key} >
                       {col.key === "description" ? (
                         item[col.key] !== undefined &&
-                          item[col.key] !== null ? (
+                        item[col.key] !== null ? (
                           item[col.key].length > 80 ? (
                             <>{item[col.key].slice(0, 80)}...</>
                           ) : (
@@ -137,7 +137,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
                   <td className={!hasMasterPermission ? "d-none" : "py-3"}>
                     {(selectedMaster === "Application Role" ||
                       selectedMaster === "Work Category") &&
-                      item?.isSystem ? (
+                    item?.isSystem ? (
                       <>
                         <button
                           aria-label="Modify"
@@ -230,8 +230,9 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
             {[...Array(totalPages)].map((_, index) => (
               <li
                 key={index}
-                className={`page-item ${currentPage === index + 1 ? "active" : ""
+                className={`page-item ${
-                  }`}
+                  currentPage === index + 1 ? "active" : ""
+                }`}
               >
                 <button
                   className="page-link"
@@ -242,8 +243,9 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
               </li>
             ))}
             <li
-              className={`page-item ${currentPage === totalPages ? "disabled" : ""
+              className={`page-item ${
-                }`}
+                currentPage === totalPages ? "disabled" : ""
+              }`}
             >
               <button
                 className="page-link"