From 09db1a34114bb008e4b392c21b1d2a7ce33a23a9 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.nexgen.dev@gmail.com>
Date: Tue, 9 Jun 2026 08:14:43 +0530
Subject: [PATCH] feat: Enhance AddMember feature with form validation and
 state management using react-hook-form

---
 src/App.css                                   |  2 +-
 src/Component/ui/DropDown.tsx                 | 14 +++++--
 src/Component/ui/Input.tsx                    |  1 +
 src/Component/ui/Url.tsx                      |  2 +-
 .../v1/Component/AddMemberHeader.tsx          | 15 +++----
 .../v1/Component/Administrative_MetaData.tsx  |  2 +-
 .../v1/Component/Community_Involment.tsx      | 31 ++++++++++++--
 .../AddMember/v1/Component/InterestBox.tsx    |  4 +-
 .../v1/Component/MemberShip_Status.tsx        | 26 ++++++++----
 .../AddMember/v1/Component/SkillChip.tsx      |  2 +-
 .../AddMember/v1/Page/AddMemberPage.tsx       | 33 +++++++++++----
 .../v1/Sections/PersonalInfoCard.tsx          | 33 ++++++++++-----
 .../v1/Sections/ProfessionalDetails.tsx       | 42 ++++++++++++++-----
 .../AddMember/v1/Type/AddMember.Type.ts       | 25 +++++++++++
 .../v1/Validator/AddMember.Validator.ts       | 40 ++++++++++++++++++
 .../AddMember/v1/hook/useAddMember.ts         | 26 ++++++++++++
 16 files changed, 240 insertions(+), 58 deletions(-)
 create mode 100644 src/features/AddMember/v1/Type/AddMember.Type.ts
 create mode 100644 src/features/AddMember/v1/Validator/AddMember.Validator.ts
 create mode 100644 src/features/AddMember/v1/hook/useAddMember.ts

diff --git a/src/App.css b/src/App.css
index dcd5ee2..fe7b0a8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -147,7 +147,7 @@ body {
   --cd-surface-2: #f1f5f9;
   --cd-surface-3: #eef2f7;
   --cd-border: #d8e1ee;
-  --cd-border-subtle: #e9eef6;
+  --cd-border-subtle: rgb(165, 166, 167);
   --cd-text: #1e293b;
   --cd-text-2: #53657d;
   --cd-text-muted: #8392a8;
diff --git a/src/Component/ui/DropDown.tsx b/src/Component/ui/DropDown.tsx
index 96e0857..ff9fe84 100644
--- a/src/Component/ui/DropDown.tsx
+++ b/src/Component/ui/DropDown.tsx
@@ -5,6 +5,7 @@ import { useTheme } from "@/theme";
 type DropDownProps = {
   options: string[];
   label?: string;
+  error?: string;
   onSelect: (option: string) => void;
   className?: string;
   value?: string;
@@ -20,6 +21,7 @@ const DropDown: React.FC<DropDownProps> = ({
   value,
   placeholder = "Select an option",
   disabled = false,
+  error,
 }) => {
   const { theme } = useTheme();
   const [open, setOpen] = useState(false);
@@ -69,7 +71,7 @@ const DropDown: React.FC<DropDownProps> = ({
         className="w-full rounded-lg px-3 py-2 text-left flex justify-between items-center text-sm transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-60"
         style={{
           backgroundColor: theme.bg.surface,
-          border: `1px solid ${theme.border.default}`,
+          border: `1px solid ${error ? "var(--cd-danger)" : "var(--cd-border)"}`,
           color: selected ? theme.text.primary : theme.text.muted,
         }}
       >
@@ -80,12 +82,12 @@ const DropDown: React.FC<DropDownProps> = ({
         />
       </button>
 
-      {open && options.length > 0 && (
+      {!error && open && options.length > 0 && (
         <div
           className="absolute mt-1 w-full rounded-lg z-20 overflow-hidden max-h-60 overflow-y-auto"
           style={{
             backgroundColor: theme.bg.surface,
-            border: `1px solid ${theme.border.default}`,
+            border: `1px solid ${error ? "var(--cd-danger)" : "var(--cd-border)"}`,
             boxShadow: `0 8px 24px ${theme.shadow.md}`,
           }}
           role="listbox"
@@ -115,6 +117,12 @@ const DropDown: React.FC<DropDownProps> = ({
           ))}
         </div>
       )}
+
+      {error && (
+        <p className="text-xs mt-1  text-[var(--cd-danger)]">
+          {error}
+        </p>
+      )}
     </div>
   );
 };
diff --git a/src/Component/ui/Input.tsx b/src/Component/ui/Input.tsx
index 629f819..edf845e 100644
--- a/src/Component/ui/Input.tsx
+++ b/src/Component/ui/Input.tsx
@@ -6,6 +6,7 @@ type InputType = "text" | "email" | "password" | "number" | "url" | "tel" | "tim
 type InputProps = {
   label?: string;
   name: string;
+ 
   placeholder?: string;
   value?: string | number;
   type?: InputType;
diff --git a/src/Component/ui/Url.tsx b/src/Component/ui/Url.tsx
index eb806d7..e120bd8 100644
--- a/src/Component/ui/Url.tsx
+++ b/src/Component/ui/Url.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 interface UrlProps {
   protocol?: string;
-  domain: string;
+  domain: string | undefined;
   themeMode?: "light" | "dark";
   className?: string;
   style?: React.CSSProperties;
diff --git a/src/features/AddMember/v1/Component/AddMemberHeader.tsx b/src/features/AddMember/v1/Component/AddMemberHeader.tsx
index 2f0b3e3..cdae618 100644
--- a/src/features/AddMember/v1/Component/AddMemberHeader.tsx
+++ b/src/features/AddMember/v1/Component/AddMemberHeader.tsx
@@ -3,7 +3,12 @@ import { Link } from "react-router";
 import Button from "../../../../Component/ui/Button";
 import { memo } from "react";
 
-const AddMemberHeader = () => {
+type AddMemberHeaderProps = {
+  onCreate: () => void;
+  onDiscard: () => void;
+};
+
+const AddMemberHeader = ({ onCreate, onDiscard }: AddMemberHeaderProps) => {
   return (
     <div
       className="py-[3vh] w-full border-b flex text-xl font-bold justify-between"
@@ -20,12 +25,8 @@ const AddMemberHeader = () => {
       </Link>
 
       <div className="w-[40%] h-full mr-[3vw] flex justify-end gap-3">
-        <Button
-          text="Discard Draft"
-          variant="secondary"
-          onClick={() => alert("Discard Draft clicked")}
-        />
-        <Button text="Create Member" onClick={() => alert("Create Member clicked")} />
+        <Button text="Discard Draft" variant="secondary" onClick={onDiscard} />
+        <Button text="Create Member" onClick={onCreate} />
       </div>
     </div>
   );
diff --git a/src/features/AddMember/v1/Component/Administrative_MetaData.tsx b/src/features/AddMember/v1/Component/Administrative_MetaData.tsx
index 724e009..36ccf86 100644
--- a/src/features/AddMember/v1/Component/Administrative_MetaData.tsx
+++ b/src/features/AddMember/v1/Component/Administrative_MetaData.tsx
@@ -14,7 +14,7 @@ const Administrative_MetaData = () => {
         Administrative Metadata
       </p>
       <MemberShip_Status />
-      <AccessLevel />
+      {/* <AccessLevel /> */}
     </div>
   );
 };
diff --git a/src/features/AddMember/v1/Component/Community_Involment.tsx b/src/features/AddMember/v1/Component/Community_Involment.tsx
index 24e915b..b6ad07e 100644
--- a/src/features/AddMember/v1/Component/Community_Involment.tsx
+++ b/src/features/AddMember/v1/Component/Community_Involment.tsx
@@ -3,9 +3,24 @@ import { GrGroup } from "react-icons/gr";
 import InterestBox from "./InterestBox";
 import AREA_OF_INTEREST from "../Constant/Interest.constant";
 import { TextArea } from "../../../../Component/ui/TextArea";
+import { useFormContext } from "react-hook-form";
+import type { MemberFormValues } from "../Validator/AddMember.Validator";
 
 const Community_Involvement = () => {
-  const [internalNotes, setInternalNotes] = useState("");
+  const { watch, setValue , formState} = useFormContext<MemberFormValues>();
+
+  const {errors} = formState
+
+  const [internalNotes, setInternalNotes] = useState(watch("internalNotes") ?? "");
+  const areaOfInterest = watch("areaOfInterest") ?? [];
+
+  const toggleInterest = (interest: string, isChecked: boolean) => {
+    const nextInterests = isChecked
+      ? [...areaOfInterest, interest]
+      : areaOfInterest.filter((value) => value !== interest);
+
+    setValue("areaOfInterest", nextInterests, { shouldDirty: true });
+  };
 
   return (
     <div
@@ -30,7 +45,13 @@ const Community_Involvement = () => {
 
         <div className="flex flex-wrap gap-4 mt-3">
           {AREA_OF_INTEREST.map((interest, index) => (
-            <InterestBox key={index} label={interest} isChecked={false} onClick={() => {}} />
+            <InterestBox
+              key={index}
+              label={interest}
+              
+              isChecked={areaOfInterest.includes(interest)}
+              onClick={(clicked) => toggleInterest(interest, clicked)}
+            />
           ))}
         </div>
 
@@ -39,7 +60,11 @@ const Community_Involvement = () => {
           name="internalNotes"
           placeholder="Enter internal notes"
           value={internalNotes}
-          onChange={(_, value) => setInternalNotes(value)}
+          error={errors.internalNotes?.message}
+          onChange={(_, value) => {
+            setInternalNotes(value);
+            setValue("internalNotes", value, { shouldDirty: true });
+          }}
           className="mt-[3vh]"
           rows={5}
         />
diff --git a/src/features/AddMember/v1/Component/InterestBox.tsx b/src/features/AddMember/v1/Component/InterestBox.tsx
index 464069f..67a9a80 100644
--- a/src/features/AddMember/v1/Component/InterestBox.tsx
+++ b/src/features/AddMember/v1/Component/InterestBox.tsx
@@ -15,7 +15,7 @@ const InterestBox = (props: InterestBoxProps) => {
       className={`InterestBox flex p-3 font-bold ${
         Clicked
           ? "bg-blue-100 border-blue-500 text-blue-600"
-          : "bg-gray-100 border-gray-300 text-black"
+          : "bg-[cd-surface] border-gray-300 text-[--cd-text)"
       } border rounded-lg cursor-pointer`}
       onClick={() => {
         props.onClick(!Clicked);
@@ -24,7 +24,7 @@ const InterestBox = (props: InterestBoxProps) => {
     >
       <div
         className={`rounded-md border-2 w-6 h-6  flex items-center justify-center ${
-          Clicked ? "border-blue-500 bg-blue-500" : "border-gray-300"
+          Clicked ? "border-blue-500 bg-blue-500" : "border-[var(cd-border-subtle)] bg-transparent"
         }`}
       >
         {Clicked && <TiTick className="text-white text-lg" />}
diff --git a/src/features/AddMember/v1/Component/MemberShip_Status.tsx b/src/features/AddMember/v1/Component/MemberShip_Status.tsx
index e126fe1..54e6d1d 100644
--- a/src/features/AddMember/v1/Component/MemberShip_Status.tsx
+++ b/src/features/AddMember/v1/Component/MemberShip_Status.tsx
@@ -1,10 +1,11 @@
 import { useState } from "react";
 
+import { useFormContext } from "react-hook-form";
+import type { MemberFormValues } from "../Validator/AddMember.Validator";
+
 type MembershipStatus = "Active" | "Inactive" | "Pending" | "Suspended" | "On Boarding";
 
 const MemberShip_Status = () => {
-  const [membershipStatus, setMembershipStatus] = useState<MembershipStatus>("Active");
-
   const statusColorMap: Record<MembershipStatus, string> = {
     Active: "bg-green-500",
     Inactive: "bg-gray-400",
@@ -13,10 +14,12 @@ const MemberShip_Status = () => {
     "On Boarding": "bg-blue-400",
   };
 
+  const { watch, setValue , formState} = useFormContext<MemberFormValues>();
+  const {errors} = formState
+  const membershipStatus = (watch("membershipStatus") ?? "On Boarding") as MembershipStatus;
+
   return (
     <div className="MemberShip_Status flex flex-col gap-2 mt-4 text-lg">
-      <p className="text-md font-semibold">Membership Status</p>
-
       {/* Active */}
       <div className="flex items-center gap-4">
         <input
@@ -25,7 +28,7 @@ const MemberShip_Status = () => {
           id="Active"
           value="Active"
           checked={membershipStatus === "Active"}
-          onChange={() => setMembershipStatus("Active")}
+          onChange={() => setValue("membershipStatus", "Active", { shouldDirty: true })}
         />
 
         <span
@@ -34,15 +37,20 @@ const MemberShip_Status = () => {
         <label htmlFor="Active">Active</label>
       </div>
 
+      {errors.membershipStatus && (
+        <p className="text-red-500 text-sm">{errors.membershipStatus.message}</p>
+      )}
+
       {/* Inactive */}
       <div className="flex items-center gap-4">
         <input
           type="radio"
           id="Inactive"
           name="membershipStatus"
+          
           value="Inactive"
           checked={membershipStatus === "Inactive"}
-          onChange={() => setMembershipStatus("Inactive")}
+          onChange={() => setValue("membershipStatus", "Inactive", { shouldDirty: true })}
         />
 
         <span
@@ -60,7 +68,7 @@ const MemberShip_Status = () => {
           value="Pending"
           id="Pending"
           checked={membershipStatus === "Pending"}
-          onChange={() => setMembershipStatus("Pending")}
+          onChange={() => setValue("membershipStatus", "Pending", { shouldDirty: true })}
         />
 
         <span
@@ -77,7 +85,7 @@ const MemberShip_Status = () => {
           id="OnBoarding"
           value="On Boarding"
           checked={membershipStatus === "On Boarding"}
-          onChange={() => setMembershipStatus("On Boarding")}
+          onChange={() => setValue("membershipStatus", "On Boarding", { shouldDirty: true })}
         />
         <span
           className={`w-4 h-4 rounded-full ${statusColorMap["On Boarding"]} border border-gray-300`}
@@ -93,7 +101,7 @@ const MemberShip_Status = () => {
           id="Suspended"
           value="Suspended"
           checked={membershipStatus === "Suspended"}
-          onChange={() => setMembershipStatus("Suspended")}
+          onChange={() => setValue("membershipStatus", "Suspended", { shouldDirty: true })}
         />
 
         <span
diff --git a/src/features/AddMember/v1/Component/SkillChip.tsx b/src/features/AddMember/v1/Component/SkillChip.tsx
index efdf238..108743c 100644
--- a/src/features/AddMember/v1/Component/SkillChip.tsx
+++ b/src/features/AddMember/v1/Component/SkillChip.tsx
@@ -4,7 +4,7 @@ type SkillChipProps = {
 
 const SkillChip = (props: SkillChipProps) => {
   return (
-    <div className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">{props.skill}</div>
+    <div className="px-3 py-1 rounded-full text-sm">{props.skill}</div>
   );
 };
 
diff --git a/src/features/AddMember/v1/Page/AddMemberPage.tsx b/src/features/AddMember/v1/Page/AddMemberPage.tsx
index cfa19d6..c92305f 100644
--- a/src/features/AddMember/v1/Page/AddMemberPage.tsx
+++ b/src/features/AddMember/v1/Page/AddMemberPage.tsx
@@ -1,22 +1,37 @@
+import { FormProvider } from "react-hook-form";
 import AddMemberHeader from "../Component/AddMemberHeader";
 import Administrative_MetaData from "../Component/Administrative_MetaData";
 import Community_Involvement from "../Component/Community_Involment";
 import PersonalInfoCard from "../Sections/PersonalInfoCard";
 import ProfessionalDetails from "../Sections/ProfessionalDetails";
+import { useAddMember } from "../hook/useAddMember";
 
 const AddMemberPage = () => {
+  const methods = useAddMember();
+
+  const handleCreateMember = methods.handleSubmit((data) => {
+    try {
+      alert("Member created successfully!");
+      console.log("Add member submit", data);
+    } catch (error) {
+      console.error("Error creating member:", error);
+    }
+  });
+
   return (
-    <div className="w-full flex flex-col cd-page">
-      <AddMemberHeader />
-      <div className="flex p-8 gap-8 w-full flex-col lg:flex-row items-start overflow-x-hidden">
-        <div className="w-full lg:w-[65%] h-full flex-col">
-          <PersonalInfoCard />
-          <ProfessionalDetails />
-          <Community_Involvement />
+    <FormProvider {...methods}>
+      <div className="w-full flex flex-col cd-page">
+        <AddMemberHeader onCreate={handleCreateMember} onDiscard={() => methods.reset()} />
+        <div className="flex p-8 gap-8 w-full flex-col lg:flex-row items-start overflow-x-hidden">
+          <div className="w-full lg:w-[65%] h-full flex-col">
+            <PersonalInfoCard />
+            <ProfessionalDetails />
+            <Community_Involvement />
+          </div>
+          <Administrative_MetaData />
         </div>
-        <Administrative_MetaData />
       </div>
-    </div>
+    </FormProvider>
   );
 };
 
diff --git a/src/features/AddMember/v1/Sections/PersonalInfoCard.tsx b/src/features/AddMember/v1/Sections/PersonalInfoCard.tsx
index 7ddb7d6..2ec0ecb 100644
--- a/src/features/AddMember/v1/Sections/PersonalInfoCard.tsx
+++ b/src/features/AddMember/v1/Sections/PersonalInfoCard.tsx
@@ -1,14 +1,20 @@
-import React, { memo } from "react";
+import { memo } from "react";
 import { Input } from "../../../../Component/ui/Input";
 import Url from "../../../../Component/ui/Url";
 import { CiCamera } from "react-icons/ci";
 import { FaUser } from "react-icons/fa";
+import { useFormContext } from "react-hook-form";
+import type { MemberFormValues } from "../Validator/AddMember.Validator";
 
 const PersonalInfoCard = () => {
-  const [firstName, setFirstName] = React.useState("");
-  const [lastName, setLastName] = React.useState("");
-  const [email, setEmail] = React.useState("");
-  const [profileUrl, setProfileUrl] = React.useState("example.com");
+  const { setValue, watch , formState } = useFormContext<MemberFormValues>();
+
+  const {errors} = formState;
+
+  const firstName = watch("firstName") ?? "";
+  const lastName = watch("lastName") ?? "";
+  const email = watch("email") ?? "";
+  const profileUrl = (watch("publicProfileUrl") ?? "") as string;
 
   return (
     <div
@@ -29,7 +35,7 @@ const PersonalInfoCard = () => {
       <div className="flex gap-4">
         <div className="w-[18%] flex flex-col gap-2 mb-4">
           <div
-            className="w-[130px] h-[150px] border-2 border-dashed rounded-xl flex flex-col items-center justify-center"
+            className="w-32.5 h-37.5 border-2 border-dashed rounded-xl flex flex-col items-center justify-center"
             style={{
               borderColor: "var(--cd-border)",
               backgroundColor: "var(--cd-surface-2)",
@@ -53,21 +59,27 @@ const PersonalInfoCard = () => {
 
       <div className="flex flex-col mt-[3.5vh]">
         <div className="flex gap-[2.5vw]">
+
+        
+
           <Input
             label="First Name"
+            error={errors.firstName?.message}
             name="firstName"
             className="w-[40%]"
             placeholder="Enter first name"
             value={firstName}
-            onChange={(_, value) => setFirstName(value)}
+            onChange={(_, value) => setValue("firstName", value, { shouldDirty: true })}
           />
+         
           <Input
             label="Last Name"
             name="lastName"
+            error={errors.lastName?.message}
             className="w-[40%]"
             placeholder="Enter last name"
             value={lastName}
-            onChange={(_, value) => setLastName(value)}
+            onChange={(_, value) => setValue("lastName", value, { shouldDirty: true })}
           />
         </div>
 
@@ -75,10 +87,11 @@ const PersonalInfoCard = () => {
           <Input
             label="Email"
             name="email"
+            error={errors.email?.message}
             className="w-[40%]"
             placeholder="Enter email"
             value={email}
-            onChange={(_, value) => setEmail(value)}
+            onChange={(_, value) => setValue("email", value, { shouldDirty: true })}
           />
           <div className="w-1/2 flex flex-col gap-2 mb-4">
             <div
@@ -91,7 +104,7 @@ const PersonalInfoCard = () => {
               protocol="http://"
               domain={profileUrl}
               className="w-[80%] text-2xl flex"
-              setDomain={(domain) => setProfileUrl(domain)}
+              setDomain={(domain) => setValue("publicProfileUrl", domain, { shouldDirty: true })}
             />
           </div>
         </div>
diff --git a/src/features/AddMember/v1/Sections/ProfessionalDetails.tsx b/src/features/AddMember/v1/Sections/ProfessionalDetails.tsx
index 3909697..39cd02a 100644
--- a/src/features/AddMember/v1/Sections/ProfessionalDetails.tsx
+++ b/src/features/AddMember/v1/Sections/ProfessionalDetails.tsx
@@ -4,18 +4,24 @@ import { Input } from "../../../../Component/ui/Input";
 import DropDown from "../../../../Component/ui/DropDown";
 import { Roles } from "../Constant/Role.constant";
 import { SkillColor } from "../Constant/Skill.constant";
+import { useFormContext } from "react-hook-form";
+import type { MemberFormValues } from "../Validator/AddMember.Validator";
+import { theme } from "@/theme";
 
 const ProfessionalDetails = () => {
+  const { watch, setValue  , formState} = useFormContext<MemberFormValues>();
+
+  const {errors} = formState
+
   const [skillInput, setSkillInput] = React.useState("");
-  const [, setSelectedRole] = React.useState("");
-  const [location, setLocation] = React.useState("");
-  const [skills, setSkills] = React.useState<string[]>([]);
+  const location = watch("location") ?? "";
+  const skills = watch("skills") ?? [];
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
       const skill = skillInput.trim();
       if (skill !== "" && !skills.includes(skill)) {
-        setSkills((prev) => [...prev, skill]);
+        setValue("skills", [...skills, skill], { shouldDirty: true });
         setSkillInput("");
       }
     }
@@ -47,16 +53,21 @@ const ProfessionalDetails = () => {
           <p className="text-xs font-semibold uppercase" style={{ color: "var(--cd-text-2)" }}>
             Primary Role
           </p>
-          <DropDown options={Roles} onSelect={(opt: string) => setSelectedRole(opt)} />
+          <DropDown
+            options={Roles}
+            error={errors.primaryRole?.message}
+            onSelect={(opt: string) => setValue("primaryRole", opt, { shouldDirty: true })}
+          />
         </div>
 
         <div className="flex flex-col w-[40%]">
           <Input
             label="City / Location"
             placeholder="San Francisco, CA"
+            error={errors.location?.message}
             name="location"
             value={location}
-            onChange={(_, value) => setLocation(value)}
+            onChange={(_, value) => setValue("location", value, { shouldDirty: true })}
           />
         </div>
       </div>
@@ -66,6 +77,7 @@ const ProfessionalDetails = () => {
           <Input
             name="skills"
             label="Skills & Expertise"
+            error={errors.skills?.message}
             placeholder="Type a skill and press Enter"
             value={skillInput}
             className="w-full"
@@ -73,20 +85,28 @@ const ProfessionalDetails = () => {
             onChange={(_, value) => setSkillInput(value)}
           />
 
-          <div className="flex gap-2 mt-2 flex-wrap">
+          <div className="flex gap-2 mt-2 flex-wrap ">
             {skills.map((skill, index) => (
               <div
                 key={index}
-                className="font-semibold px-3 py-1.5 rounded-xl text-sm flex items-center gap-2"
+                className="font-semibold px-3 py-1.5 rounded-xl text-sm flex items-center gap-2 "
                 style={{
-                  backgroundColor: getSkillColor(skill),
-                  color: "var(--cd-text)",
+                  backgroundColor: theme.bg.surfaceTertiary,
+                  boxShadow: theme.shadow.sm,
+                  border: `1.5px solid ${theme.border.subtle}`,
+                  color: "var(--cd-text-primary)",
                 }}
               >
                 {skill}
                 <span
                   className="cursor-pointer text-base leading-none"
-                  onClick={() => setSkills((prev) => prev.filter((_, i) => i !== index))}
+                  onClick={() =>
+                    setValue(
+                      "skills",
+                      skills.filter((_, i) => i !== index),
+                      { shouldDirty: true },
+                    )
+                  }
                 >
                   &times;
                 </span>
diff --git a/src/features/AddMember/v1/Type/AddMember.Type.ts b/src/features/AddMember/v1/Type/AddMember.Type.ts
new file mode 100644
index 0000000..0b6e0b2
--- /dev/null
+++ b/src/features/AddMember/v1/Type/AddMember.Type.ts
@@ -0,0 +1,25 @@
+type onBoardingSourceType =
+  | "website"
+  | "referral"
+  | "social_media"
+  | "event"
+  | "direct_invitation"
+  | "other";
+
+type memberStatusType = "On Boarding" | "Pending" | "Active" | "Inactive" | "Suspended" | "Banned";
+
+export type MemberType = {
+  firstName: string;
+  lastName: string;
+  imageUrl?: string;
+  publicProfileUrl?: string;
+
+  email: string;
+  membershipStatus?: memberStatusType;
+  onboardingSource?: onBoardingSourceType;
+  primaryRole?: string;
+  location?: string;
+  skills?: string[];
+  areaOfInterest?: string[];
+  internalNotes?: string;
+};
diff --git a/src/features/AddMember/v1/Validator/AddMember.Validator.ts b/src/features/AddMember/v1/Validator/AddMember.Validator.ts
new file mode 100644
index 0000000..15ce823
--- /dev/null
+++ b/src/features/AddMember/v1/Validator/AddMember.Validator.ts
@@ -0,0 +1,40 @@
+import z from "zod";
+
+const onboardingSourceEnum = z.enum([
+  "website",
+  "referral",
+  "social_media",
+  "event",
+  "direct_invitation",
+  "other",
+]);
+
+const membershipStatusEnum = z.enum(["On Boarding", "Pending", "Active", "Inactive", "Suspended"]);
+
+const optionalUrl = z.preprocess(
+  (value) => (value === "" ? undefined : value),
+  z.string().url("Invalid URL").optional(),
+);
+
+export const MemberValidationSchema = z.object({
+  firstName: z.string().min(1, "First name is required"),
+  lastName: z.string().min(1, "Last name is required"),
+  imageUrl: optionalUrl,
+  publicProfileUrl: optionalUrl,
+  email: z.string().email("Invalid email format").toLowerCase().trim(),
+  AuthId: z
+    .string()
+    .regex(/^[0-9a-fA-F]{24}$/, "Invalid Mongo ObjectId")
+    .optional(),
+  membershipStatus: membershipStatusEnum.default("On Boarding").optional(),
+  onboardingSource: onboardingSourceEnum.default("website").optional(),
+  primaryRole: z.string().min(1, "Primary role is required"),
+  location: z.string().min(2, "Location is required"),
+  skills: z.array(z.string()).optional(),
+  areaOfInterest: z.array(z.string()).min(1, "Area of interest is required"),
+  internalNotes: z.string().optional(),
+
+});
+
+export type MemberFormValues = z.input<typeof MemberValidationSchema>;
+export type MemberSubmitValues = z.output<typeof MemberValidationSchema>;
diff --git a/src/features/AddMember/v1/hook/useAddMember.ts b/src/features/AddMember/v1/hook/useAddMember.ts
new file mode 100644
index 0000000..b3dea76
--- /dev/null
+++ b/src/features/AddMember/v1/hook/useAddMember.ts
@@ -0,0 +1,26 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  MemberValidationSchema,
+  type MemberFormValues,
+  type MemberSubmitValues,
+} from "../Validator/AddMember.Validator";
+
+export function useAddMember() {
+  return useForm<MemberFormValues, unknown, MemberSubmitValues>({
+    resolver: zodResolver(MemberValidationSchema),
+
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      primaryRole: "",
+      location: "",
+      skills: [],
+      areaOfInterest: [],
+      internalNotes: "",
+      imageUrl: "",
+      publicProfileUrl: "",
+    },
+  });
+}