feat: Enhance AddMember feature with form validation and state manage…

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;

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>
   );
 };

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;

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;

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>
   );

src/features/AddMember/v1/Component/Administrative_MetaData.tsx

@@ -14,7 +14,7 @@ const Administrative_MetaData = () => {
         Administrative Metadata
       </p>
       <MemberShip_Status />
-      <AccessLevel />
+      {/* <AccessLevel /> */}
     </div>
   );
 };

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}
         />

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" />}

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

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>
   );
 };
 

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>
   );
 };