Adding dropdown in directory.

src/components/Directory/ManageContact.jsx

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

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 = [] }) => {
+const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [],size="sm" }) => {
   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 p-1"
+        className={`form-control form-control-sm-${size}`}
         style={{ minHeight: "33px", position: "relative" }}
       >
         <div className="d-flex flex-wrap align-items-center gap-1">