From d17e3387bacbd3bf18c49e4d71dad9bda193b4fe Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Tue, 30 Apr 2024 18:35:15 -0700
Subject: [PATCH 01/17] fixed existing html error regarding form ids and
 labeling

---
 package-lock.json             |   6 +-
 src/app/addNewClient/page.tsx | 268 +++++++++++++++++-----------------
 2 files changed, 141 insertions(+), 133 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 999b91b..9edaff0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -829,9 +829,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001551",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001551.tgz",
-      "integrity": "sha512-vtBAez47BoGMMzlbYhfXrMV1kvRF2WP/lqiMuDu1Sb4EE4LKEgjopFDSRtZfdVnslNRpOqV/woE+Xgrwj6VQlg==",
+      "version": "1.0.30001611",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001611.tgz",
+      "integrity": "sha512-19NuN1/3PjA3QI8Eki55N8my4LzfkMCRLgCVfrl/slbSAchQfV0+GwjPrK3rq37As4UCLlM/DHajbKkAqbv92Q==",
       "funding": [
         {
           "type": "opencollective",
diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index fc951a2..11685d7 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -1,23 +1,20 @@
 "use client";
 import Navbar from "../components/Navbar";
-import styles from "./addNewClient.module.css"
-import { useState } from 'react';
+import styles from "./addNewClient.module.css";
+import { useState } from "react";
 
 export default function AddNewClient() {
-const [ 
-  selectedValue, 
-  setSelectedValue, 
-] = useState("option1"); 
+  const [selectedValue, setSelectedValue] = useState("option1");
 
-const handleRadioChange = (value: any) => { 
-  setSelectedValue(value); 
-};
+  const handleRadioChange = (value: any) => {
+    setSelectedValue(value);
+  };
 
-const [category, setCategory] = useState('');
-const handleCategoryChange = (category: any) => {
-  setCategory(category);
-  console.log(category);
-}
+  const [category, setCategory] = useState("");
+  const handleCategoryChange = (category: any) => {
+    setCategory(category);
+    console.log(category);
+  };
 
   return (
     <>
@@ -25,137 +22,148 @@ const handleCategoryChange = (category: any) => {
       <div>
         <h2 className={styles.header}>Add New Client</h2>
         <h3 className={styles.subheader}> Head of Household Information </h3>
-          <div>
-            <div className={styles.inputGroup}>
-            <label className={styles.inputLabel} htmlFor="first name">
-                  First Name
-                </label>
-                <input className={styles.inputBar}>
-                </input>
-            </div>
-            <div className={styles.inputGroup}>
-              <label className={styles.inputLabel} htmlFor="last name">
-                    Last Name
-                </label>
-                <input className={styles.inputBar}>
-                </input>
-            </div> 
+        <div>
+          <div className={styles.inputGroup}>
+            <label className={styles.inputLabel}>
+              First Name <br></br>
+              <input id="firstName" type="text" className={styles.inputBar} required />
+            </label>
           </div>
           <div className={styles.inputGroup}>
-          <label className={styles.inputLabel} htmlFor="date of birth">
-              Birth Date
+            <label className={styles.inputLabel}>
+              Last Name <br></br>
+              <input id="lastName" type="text" className={styles.inputBar} required />
             </label>
-            <input className={styles.inputBar}>
-            </input>
           </div>
+        </div>
+        <div className={styles.inputGroup}>
+          <label className={styles.inputLabel}>
+            Birth Date <br></br>
+            <input id="birthdate" type="text" className={styles.inputBar} required />
+          </label>
+        </div>
       </div>
       <div>
         <h3 className={styles.subheader}> Household Information </h3>
         <h4 className={styles.insideSubheader}> Household Size </h4>
         <div>
-            <div className={styles.inputGroup}>
-            <label className={styles.inputLabel} htmlFor="first name">
-                  Number of Adults
-                </label>
-            <select className={styles.inputBar} name="category" value={category} onChange={event => handleCategoryChange(event.target.value)}>
-              <option id="0" >1</option>
-              <option id="1" >2</option>
-              <option id="1" >3</option>
-              <option id="1" >4</option>
-              <option id="1" >5</option>
-              <option id="1" >More than 5</option>    {/* drop down menu for num of adults */}
-        </select>
-            </div>
-            <div className={styles.inputGroup}>
-              <label className={styles.inputLabel} htmlFor="children">
-                    Number of Children
-                </label>
-              <select className={styles.inputBar} name="category" value={category} onChange={event => handleCategoryChange(event.target.value)}>
-              <option id="0" >1</option>
-              <option id="1" >2</option>
-              <option id="1" >3</option>
-              <option id="1" >4</option>
-              <option id="1" >5</option>
-              <option id="1" >More than 5</option>   {/* drop down menu for num of children */}
-             </select>
-            </div> 
-          </div>
-          <h4 className={styles.insideSubheader}> Adult 1 </h4>
-          <div>
-            <div className={styles.inputGroup}>
-            <label className={styles.inputLabel} htmlFor="first name">
-                  First Name
-                </label>
-                <input className={styles.inputBar}>
-                </input>
-            </div>
-            <div className={styles.inputGroup}>
-              <label className={styles.inputLabel} htmlFor="last name">
-                    Last Name
-                </label>
-                <input className={styles.inputBar}>
-                </input>
-            </div> 
-            <div className={styles.inputGroup}>
-              <label className={styles.inputLabel} htmlFor="age">
-                    Age
-                </label>
-                <input className={styles.inputBar}>
-                </input>
-            </div> 
+          <div className={styles.inputGroup}>
+            <label className={styles.inputLabel} htmlFor="numAdults">
+              Number of Adults
+            </label>
+            <select
+              id="numAdults"
+              className={styles.inputBar}
+              name="category"
+              value={category}
+              onChange={(event) => handleCategoryChange(event.target.value)}
+            >
+              <option id="0">1</option>
+              <option id="1">2</option>
+              <option id="1">3</option>
+              <option id="1">4</option>
+              <option id="1">5</option>
+              <option id="1">More than 5</option>{" "}
+              {/* drop down menu for num of adults */}
+            </select>
           </div>
-          <h4 className={styles.insideSubheader} > Child 1 </h4>
           <div className={styles.inputGroup}>
-              <label className={styles.inputLabel} htmlFor="age">
-                    Age
-                </label>
-                <input className={styles.inputBar}>
-                </input>
-            </div> 
+            <label className={styles.inputLabel} htmlFor="numChildren">
+              Number of Children
+            </label>
+            <select
+              className={styles.inputBar}
+              id="numChildren"
+              value={category}
+              onChange={(event) => handleCategoryChange(event.target.value)}
+            >
+              <option id="0">1</option>
+              <option id="1">2</option>
+              <option id="1">3</option>
+              <option id="1">4</option>
+              <option id="1">5</option>
+              <option id="1">More than 5</option>{" "}
+              {/* drop down menu for num of children */}
+            </select>
+          </div>
         </div>
+        <h4 className={styles.insideSubheader}> Adult 1 </h4>
         <div>
-          <h4 className={styles.subheader}> Additional Information </h4>
-          <div className={ styles.radioButton}> 
-            <input 
-              type="radio"
-              id="option1"
-              value="option1"
-              checked={ 
-                selectedValue === 
-                  "option1"
-              } 
-              onChange={() => 
-                handleRadioChange("option1") 
-              } 
-              /> 
-              <label htmlFor="option1" className={styles.radioLabel }> 
-              Authorized 
-              </label>      {/* for now, the button is set to being checked always */}
+          <div className={styles.inputGroup}>
+            <label className={styles.inputLabel}>
+              First Name <br />
+              <input type="text" className={styles.inputBar} required />
+            </label>
           </div>
-          <h4 className={styles.insideSubheader} > Authorized pick-up </h4>
           <div className={styles.inputGroup}>
-              <label className={styles.inputLabel} htmlFor="first name">
-                    First Name
-                </label>
-                <input className={styles.inputBar}>
-                </input>
-            </div> 
-            <div className={styles.inputGroup}>
-              <label className={styles.inputLabel} htmlFor="last name">
-                    Last Name
-                </label>
-                <input className={styles.inputBar}>
-                </input>
-            </div> 
-            <div className={styles.inputGroup}>
-              <label className={styles.inputLabel} htmlFor="age">
-                    Age
-                </label>
-                <input className={styles.inputBar}>
-                </input>
-            </div> 
-        </div> 
-        <button className={styles.addButton}> Add Client </button>
+            <label className={styles.inputLabel}>
+              Last Name <br />
+              <input type="text" className={styles.inputBar} required />
+            </label>
+          </div>
+          <div className={styles.inputGroup}>
+            <label className={styles.inputLabel}>
+              Age <br />
+              <input type="text" className={styles.inputBar} required />
+            </label>
+          </div>
+        </div>
+        <h4 className={styles.insideSubheader}> Child 1 </h4>
+        <div className={styles.inputGroup}>
+          <label className={styles.inputLabel}>
+            First Name <br />
+            <input type="text" className={styles.inputBar} required />
+          </label>
+        </div>
+        <div className={styles.inputGroup}>
+          <label className={styles.inputLabel}>
+            Last Name <br />
+            <input type="text" className={styles.inputBar} required />
+          </label>
+        </div>
+        <div className={styles.inputGroup}>
+          <label className={styles.inputLabel}>
+            Age <br />
+            <input type="text" className={styles.inputBar} required />
+          </label>
+        </div>
+      </div>
+      <div>
+        <h4 className={styles.subheader}> Additional Information </h4>
+        <div className={styles.radioButton}>
+          <input
+            type="radio"
+            id="option1"
+            value="option1"
+            checked={selectedValue === "option1"}
+            onChange={() => handleRadioChange("option1")}
+          />
+          <label htmlFor="option1" className={styles.radioLabel}>
+            Authorized
+          </label>{" "}
+          {/* for now, the button is set to being checked always */}
+        </div>
+        <h4 className={styles.insideSubheader}> Authorized pick-up </h4>
+        <div className={styles.inputGroup}>
+          <label className={styles.inputLabel}>
+            First Name <br />
+            <input className={styles.inputBar} />
+          </label>
+        </div>
+        <div className={styles.inputGroup}>
+          <label className={styles.inputLabel}>
+            Last Name <br />
+            <input className={styles.inputBar} />
+          </label>
+        </div>
+        <div className={styles.inputGroup}>
+          <label className={styles.inputLabel}>
+            Age <br />
+            <input className={styles.inputBar} />
+          </label>
+        </div>
+      </div>
+      <button className={styles.addButton}> Add Client </button>
     </>
   );
 }

From beb2e06a58f64dd9928d3bbb9708e01741ce5d09 Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Tue, 30 Apr 2024 19:11:55 -0700
Subject: [PATCH 02/17] refactored name and age input fields

---
 src/app/addNewClient/addNewClient.module.css | 126 +++++++++----------
 src/app/addNewClient/page.tsx                |  84 ++-----------
 src/app/components/NewClientFields.css       |  28 +++++
 src/app/components/NewClientFields.tsx       |  45 +++++++
 4 files changed, 143 insertions(+), 140 deletions(-)
 create mode 100644 src/app/components/NewClientFields.css
 create mode 100644 src/app/components/NewClientFields.tsx

diff --git a/src/app/addNewClient/addNewClient.module.css b/src/app/addNewClient/addNewClient.module.css
index 6f44459..71188d4 100644
--- a/src/app/addNewClient/addNewClient.module.css
+++ b/src/app/addNewClient/addNewClient.module.css
@@ -1,71 +1,71 @@
 .header {
-    font-family: "Avenir";
-    color: #000000;
-  }
-  
-  .subheader {
-    font-family: "Avenir";
-    color: rgb(103, 109, 78)
-  }
+  font-family: "Avenir";
+  color: #000000;
+}
 
-  .insideSubheader {
-    font-family: "Avenir";
-    color: black
-  }
+.subheader {
+  font-family: "Avenir";
+  color: rgb(103, 109, 78);
+}
 
-  /* for boxes to appear side by side */
-  .inputGroup {
-    display: inline-block;
-    margin-bottom: 5px;
-    padding: 5px;
-  }
+.insideSubheader {
+  font-family: "Avenir";
+  color: black;
+}
 
-  /* entire input field with labels and input box */
-  .inputContainer {
-    display: flex;
-    flex-direction: row;
-  }
+/* for boxes to appear side by side */
+.inputGroup {
+  display: inline-block;
+  margin-bottom: 5px;
+  padding: 5px;
+}
 
-  .inputBar {
-    flex: 1;
-  
-    margin-bottom: 20px;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    padding-left: 60px;
-    padding-right: 60px;
-    font-family: "Avenir", sans-serif;
-    background-color: white;
-    border-width: 1px;
-    border-color: rgb(94, 161, 94);
-    border-radius: 3%;
-  }
+/* entire input field with labels and input box */
+.inputContainer {
+  display: flex;
+  flex-direction: row;
+}
 
-  .inputLabel {
-    display: block;
-    text-align: left;
-    margin-bottom: 3px;
-    font-size: 15px;
-    font-family: "Avenir", sans-serif;
-  }
+.inputBar {
+  flex: 1;
 
-  .radioButton {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 5px;
-  }
+  margin-bottom: 20px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  padding-left: 60px;
+  padding-right: 60px;
+  font-family: "Avenir", sans-serif;
+  background-color: white;
+  border-width: 1px;
+  border-color: rgb(94, 161, 94);
+  border-radius: 3%;
+}
 
-  .radioLabel {
-    font-family: "Avenir", sans-serif;
-    color: black;
-  }
-  
-  .addButton {
-    border: 2px;
-    color: white;
-    border-radius: 3px;
-    font-family: "Avenir", sans-serif;
-    background: rgb(103, 109, 78);
-    width: 8em;
-    height: 3em;
-  }
\ No newline at end of file
+.inputLabel {
+  display: block;
+  text-align: left;
+  margin-bottom: 3px;
+  font-size: 15px;
+  font-family: "Avenir", sans-serif;
+}
+
+.radioButton {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 5px;
+}
+
+.radioLabel {
+  font-family: "Avenir", sans-serif;
+  color: black;
+}
+
+.addButton {
+  border: 2px;
+  color: white;
+  border-radius: 3px;
+  font-family: "Avenir", sans-serif;
+  background: rgb(103, 109, 78);
+  width: 8em;
+  height: 3em;
+}
diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index 11685d7..9194db1 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -1,5 +1,6 @@
 "use client";
-import Navbar from "../components/Navbar";
+import Navbar from "@components/Navbar";
+import NewClientFields from "@components/NewClientFields";
 import styles from "./addNewClient.module.css";
 import { useState } from "react";
 
@@ -22,26 +23,8 @@ export default function AddNewClient() {
       <div>
         <h2 className={styles.header}>Add New Client</h2>
         <h3 className={styles.subheader}> Head of Household Information </h3>
-        <div>
-          <div className={styles.inputGroup}>
-            <label className={styles.inputLabel}>
-              First Name <br></br>
-              <input id="firstName" type="text" className={styles.inputBar} required />
-            </label>
-          </div>
-          <div className={styles.inputGroup}>
-            <label className={styles.inputLabel}>
-              Last Name <br></br>
-              <input id="lastName" type="text" className={styles.inputBar} required />
-            </label>
-          </div>
-        </div>
-        <div className={styles.inputGroup}>
-          <label className={styles.inputLabel}>
-            Birth Date <br></br>
-            <input id="birthdate" type="text" className={styles.inputBar} required />
-          </label>
-        </div>
+        <NewClientFields isSelf={true}/>
+
       </div>
       <div>
         <h3 className={styles.subheader}> Household Information </h3>
@@ -88,45 +71,9 @@ export default function AddNewClient() {
           </div>
         </div>
         <h4 className={styles.insideSubheader}> Adult 1 </h4>
-        <div>
-          <div className={styles.inputGroup}>
-            <label className={styles.inputLabel}>
-              First Name <br />
-              <input type="text" className={styles.inputBar} required />
-            </label>
-          </div>
-          <div className={styles.inputGroup}>
-            <label className={styles.inputLabel}>
-              Last Name <br />
-              <input type="text" className={styles.inputBar} required />
-            </label>
-          </div>
-          <div className={styles.inputGroup}>
-            <label className={styles.inputLabel}>
-              Age <br />
-              <input type="text" className={styles.inputBar} required />
-            </label>
-          </div>
-        </div>
+        <NewClientFields isSelf={false} />
         <h4 className={styles.insideSubheader}> Child 1 </h4>
-        <div className={styles.inputGroup}>
-          <label className={styles.inputLabel}>
-            First Name <br />
-            <input type="text" className={styles.inputBar} required />
-          </label>
-        </div>
-        <div className={styles.inputGroup}>
-          <label className={styles.inputLabel}>
-            Last Name <br />
-            <input type="text" className={styles.inputBar} required />
-          </label>
-        </div>
-        <div className={styles.inputGroup}>
-          <label className={styles.inputLabel}>
-            Age <br />
-            <input type="text" className={styles.inputBar} required />
-          </label>
-        </div>
+        <NewClientFields isSelf={false} />
       </div>
       <div>
         <h4 className={styles.subheader}> Additional Information </h4>
@@ -144,24 +91,7 @@ export default function AddNewClient() {
           {/* for now, the button is set to being checked always */}
         </div>
         <h4 className={styles.insideSubheader}> Authorized pick-up </h4>
-        <div className={styles.inputGroup}>
-          <label className={styles.inputLabel}>
-            First Name <br />
-            <input className={styles.inputBar} />
-          </label>
-        </div>
-        <div className={styles.inputGroup}>
-          <label className={styles.inputLabel}>
-            Last Name <br />
-            <input className={styles.inputBar} />
-          </label>
-        </div>
-        <div className={styles.inputGroup}>
-          <label className={styles.inputLabel}>
-            Age <br />
-            <input className={styles.inputBar} />
-          </label>
-        </div>
+        <NewClientFields isSelf={false} />
       </div>
       <button className={styles.addButton}> Add Client </button>
     </>
diff --git a/src/app/components/NewClientFields.css b/src/app/components/NewClientFields.css
new file mode 100644
index 0000000..15294b4
--- /dev/null
+++ b/src/app/components/NewClientFields.css
@@ -0,0 +1,28 @@
+.inputGroup {
+  display: inline-block;
+  margin-bottom: 5px;
+  padding: 5px;
+}
+
+.inputBar {
+  flex: 1;
+
+  margin-bottom: 20px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  padding-left: 60px;
+  padding-right: 60px;
+  font-family: "Avenir", sans-serif;
+  background-color: white;
+  border-width: 1px;
+  border-color: rgb(94, 161, 94);
+  border-radius: 3%;
+}
+
+.inputLabel {
+  display: block;
+  text-align: left;
+  margin-bottom: 3px;
+  font-size: 15px;
+  font-family: "Avenir", sans-serif;
+}
diff --git a/src/app/components/NewClientFields.tsx b/src/app/components/NewClientFields.tsx
new file mode 100644
index 0000000..440180f
--- /dev/null
+++ b/src/app/components/NewClientFields.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import "./NewClientFields.css";
+
+interface Props {
+    isSelf: boolean
+}
+
+const NewClientFields = (props: Props) => {
+  return (
+    <div>
+      <div className="inputGroup">
+        <label className="inputLabel">
+          First Name <br></br>
+          <input
+            type="text"
+            className="inputBar"
+            required
+          />
+        </label>
+      </div>
+      <div className="inputGroup">
+        <label className="inputLabel">
+          Last Name <br></br>
+          <input
+            type="text"
+            className="inputBar"
+            required
+          />
+        </label>
+      </div>
+      <div className="inputGroup">
+        <label className="inputLabel">
+          {props.isSelf ? "Birth Date": "Age"} <br></br>
+          <input
+            type="text"
+            className="inputBar"
+            required
+          />
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default NewClientFields;

From b280270a03e7a450661090517973e06c04bf246e Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Tue, 30 Apr 2024 19:39:42 -0700
Subject: [PATCH 03/17] authorized button is unclicked by default

---
 src/app/addNewClient/page.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index 9194db1..46657ff 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -5,10 +5,10 @@ import styles from "./addNewClient.module.css";
 import { useState } from "react";
 
 export default function AddNewClient() {
-  const [selectedValue, setSelectedValue] = useState("option1");
+  const [selectedValue, setSelectedValue] = useState(false);
 
-  const handleRadioChange = (value: any) => {
-    setSelectedValue(value);
+  const handleRadioChange = () => { 
+    setSelectedValue(!selectedValue);
   };
 
   const [category, setCategory] = useState("");
@@ -82,13 +82,14 @@ export default function AddNewClient() {
             type="radio"
             id="option1"
             value="option1"
-            checked={selectedValue === "option1"}
-            onChange={() => handleRadioChange("option1")}
+            checked={selectedValue}
+            onClick={handleRadioChange}
           />
+          
           <label htmlFor="option1" className={styles.radioLabel}>
             Authorized
           </label>{" "}
-          {/* for now, the button is set to being checked always */}
+          {/* for now, the button is set to being checked always */}    
         </div>
         <h4 className={styles.insideSubheader}> Authorized pick-up </h4>
         <NewClientFields isSelf={false} />

From a9d2d5161a2f37c000e934cb71165991529dc9e4 Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Tue, 30 Apr 2024 19:53:25 -0700
Subject: [PATCH 04/17] bug fix

---
 src/app/addNewClient/page.tsx          | 13 +++++++------
 src/app/components/NewClientFields.tsx |  7 ++-----
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index 46657ff..dd4646f 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -23,7 +23,7 @@ export default function AddNewClient() {
       <div>
         <h2 className={styles.header}>Add New Client</h2>
         <h3 className={styles.subheader}> Head of Household Information </h3>
-        <NewClientFields isSelf={true}/>
+        <NewClientFields />
 
       </div>
       <div>
@@ -71,9 +71,9 @@ export default function AddNewClient() {
           </div>
         </div>
         <h4 className={styles.insideSubheader}> Adult 1 </h4>
-        <NewClientFields isSelf={false} />
+        <NewClientFields />
         <h4 className={styles.insideSubheader}> Child 1 </h4>
-        <NewClientFields isSelf={false} />
+        <NewClientFields />
       </div>
       <div>
         <h4 className={styles.subheader}> Additional Information </h4>
@@ -83,16 +83,17 @@ export default function AddNewClient() {
             id="option1"
             value="option1"
             checked={selectedValue}
-            onClick={handleRadioChange}
+            onClick={handleRadioChange} // handle state with onClick (as opposed to onChange) so users can unclick if they change their minds
+            onChange={() => {}} // no-op onChange field to keep react happy - react expects this when checked is controlled
           />
           
           <label htmlFor="option1" className={styles.radioLabel}>
-            Authorized
+            Authorize pick-up
           </label>{" "}
           {/* for now, the button is set to being checked always */}    
         </div>
         <h4 className={styles.insideSubheader}> Authorized pick-up </h4>
-        <NewClientFields isSelf={false} />
+        <NewClientFields/>
       </div>
       <button className={styles.addButton}> Add Client </button>
     </>
diff --git a/src/app/components/NewClientFields.tsx b/src/app/components/NewClientFields.tsx
index 440180f..9635990 100644
--- a/src/app/components/NewClientFields.tsx
+++ b/src/app/components/NewClientFields.tsx
@@ -1,11 +1,8 @@
 import React from "react";
 import "./NewClientFields.css";
 
-interface Props {
-    isSelf: boolean
-}
 
-const NewClientFields = (props: Props) => {
+const NewClientFields = () => {
   return (
     <div>
       <div className="inputGroup">
@@ -30,7 +27,7 @@ const NewClientFields = (props: Props) => {
       </div>
       <div className="inputGroup">
         <label className="inputLabel">
-          {props.isSelf ? "Birth Date": "Age"} <br></br>
+          Birth Date <br></br>
           <input
             type="text"
             className="inputBar"

From b3a1c942fc30d6f13749b1142f3bc638dff999f8 Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Tue, 30 Apr 2024 23:25:47 -0700
Subject: [PATCH 05/17] adult and child fields appear according to number
 selected

---
 src/app/addNewClient/page.tsx | 90 +++++++++++++++++++++++------------
 1 file changed, 59 insertions(+), 31 deletions(-)

diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index dd4646f..fba48cc 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -2,19 +2,51 @@
 import Navbar from "@components/Navbar";
 import NewClientFields from "@components/NewClientFields";
 import styles from "./addNewClient.module.css";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function AddNewClient() {
   const [selectedValue, setSelectedValue] = useState(false);
+  const [numChildren, setNumChildren] = useState(0);
+  const [numAdults, setNumAdults] = useState(1);
+  const [childFields, setChildFields] = useState<JSX.Element[]>([]);
+  const [adultFields, setAdultFields] = useState<JSX.Element[]>([]);
 
-  const handleRadioChange = () => { 
+  useEffect(() => {
+    let fields = [];
+    for (let i = 0; i < numChildren; i++) {
+      fields.push(
+        <div key={i}>
+          <h4 className={styles.insideSubheader}> Child {i + 1} </h4>
+          <NewClientFields />
+        </div>
+      );
+    }
+    setChildFields(fields);
+
+    fields = [];
+    for (let i = 1; i < numAdults; i++) {
+      fields.push(
+        <div key={i}>
+          <h4 className={styles.insideSubheader}> Adult {i + 1} </h4>
+          <NewClientFields />
+        </div>
+      );
+    }
+    setAdultFields(fields);
+  }, [numChildren, numAdults]);
+
+  const handleRadioChange = () => {
     setSelectedValue(!selectedValue);
   };
 
-  const [category, setCategory] = useState("");
-  const handleCategoryChange = (category: any) => {
-    setCategory(category);
-    console.log(category);
+  const handleChildrenChange = (value: any) => {
+    setNumChildren(value);
+    //console.log(value);
+  };
+
+  const handleParentChange = (value: any) => {
+    setNumAdults(value);
+    //console.log(value);
   };
 
   return (
@@ -24,7 +56,6 @@ export default function AddNewClient() {
         <h2 className={styles.header}>Add New Client</h2>
         <h3 className={styles.subheader}> Head of Household Information </h3>
         <NewClientFields />
-
       </div>
       <div>
         <h3 className={styles.subheader}> Household Information </h3>
@@ -38,15 +69,14 @@ export default function AddNewClient() {
               id="numAdults"
               className={styles.inputBar}
               name="category"
-              value={category}
-              onChange={(event) => handleCategoryChange(event.target.value)}
+              onChange={(event) => handleParentChange(event.target.value)}
             >
-              <option id="0">1</option>
-              <option id="1">2</option>
-              <option id="1">3</option>
-              <option id="1">4</option>
-              <option id="1">5</option>
-              <option id="1">More than 5</option>{" "}
+              <option id="1">1</option>
+              <option id="2">2</option>
+              <option id="3">3</option>
+              <option id="4">4</option>
+              <option id="5">5</option>
+              <option id="6">More than 5</option>{" "}
               {/* drop down menu for num of adults */}
             </select>
           </div>
@@ -57,23 +87,21 @@ export default function AddNewClient() {
             <select
               className={styles.inputBar}
               id="numChildren"
-              value={category}
-              onChange={(event) => handleCategoryChange(event.target.value)}
+              onChange={(event) => handleChildrenChange(event.target.value)}
             >
-              <option id="0">1</option>
-              <option id="1">2</option>
-              <option id="1">3</option>
-              <option id="1">4</option>
-              <option id="1">5</option>
-              <option id="1">More than 5</option>{" "}
+              <option id="0">0</option>
+              <option id="1">1</option>
+              <option id="2">2</option>
+              <option id="3">3</option>
+              <option id="4">4</option>
+              <option id="5">5</option>
+              <option id="6">More than 5</option>{" "}
               {/* drop down menu for num of children */}
             </select>
           </div>
         </div>
-        <h4 className={styles.insideSubheader}> Adult 1 </h4>
-        <NewClientFields />
-        <h4 className={styles.insideSubheader}> Child 1 </h4>
-        <NewClientFields />
+        {adultFields}
+        {childFields}
       </div>
       <div>
         <h4 className={styles.subheader}> Additional Information </h4>
@@ -86,14 +114,14 @@ export default function AddNewClient() {
             onClick={handleRadioChange} // handle state with onClick (as opposed to onChange) so users can unclick if they change their minds
             onChange={() => {}} // no-op onChange field to keep react happy - react expects this when checked is controlled
           />
-          
+
           <label htmlFor="option1" className={styles.radioLabel}>
             Authorize pick-up
-          </label>{" "}
-          {/* for now, the button is set to being checked always */}    
+          </label>
+          {/* for now, the button is set to being checked always */}
         </div>
         <h4 className={styles.insideSubheader}> Authorized pick-up </h4>
-        <NewClientFields/>
+        <NewClientFields />
       </div>
       <button className={styles.addButton}> Add Client </button>
     </>

From a49cd4c754a8d269a64da14280e1a9e359218861 Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Tue, 30 Apr 2024 23:37:16 -0700
Subject: [PATCH 06/17] authorize input only appears when selected + added left
 margin

---
 src/app/addNewClient/addNewClient.module.css |   7 +-
 src/app/addNewClient/page.tsx                | 139 ++++++++++---------
 2 files changed, 79 insertions(+), 67 deletions(-)

diff --git a/src/app/addNewClient/addNewClient.module.css b/src/app/addNewClient/addNewClient.module.css
index 71188d4..8156500 100644
--- a/src/app/addNewClient/addNewClient.module.css
+++ b/src/app/addNewClient/addNewClient.module.css
@@ -1,3 +1,7 @@
+.container {
+  margin-left: 30px;
+}
+
 .header {
   font-family: "Avenir";
   color: #000000;
@@ -52,12 +56,13 @@
 .radioButton {
   display: flex;
   flex-direction: row;
-  margin-bottom: 5px;
+  margin-bottom: 30px;
 }
 
 .radioLabel {
   font-family: "Avenir", sans-serif;
   color: black;
+  
 }
 
 .addButton {
diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index fba48cc..358ded2 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -52,78 +52,85 @@ export default function AddNewClient() {
   return (
     <>
       <Navbar />
-      <div>
-        <h2 className={styles.header}>Add New Client</h2>
-        <h3 className={styles.subheader}> Head of Household Information </h3>
-        <NewClientFields />
-      </div>
-      <div>
-        <h3 className={styles.subheader}> Household Information </h3>
-        <h4 className={styles.insideSubheader}> Household Size </h4>
+      <div className={styles.container}>
         <div>
-          <div className={styles.inputGroup}>
-            <label className={styles.inputLabel} htmlFor="numAdults">
-              Number of Adults
-            </label>
-            <select
-              id="numAdults"
-              className={styles.inputBar}
-              name="category"
-              onChange={(event) => handleParentChange(event.target.value)}
-            >
-              <option id="1">1</option>
-              <option id="2">2</option>
-              <option id="3">3</option>
-              <option id="4">4</option>
-              <option id="5">5</option>
-              <option id="6">More than 5</option>{" "}
-              {/* drop down menu for num of adults */}
-            </select>
-          </div>
-          <div className={styles.inputGroup}>
-            <label className={styles.inputLabel} htmlFor="numChildren">
-              Number of Children
-            </label>
-            <select
-              className={styles.inputBar}
-              id="numChildren"
-              onChange={(event) => handleChildrenChange(event.target.value)}
-            >
-              <option id="0">0</option>
-              <option id="1">1</option>
-              <option id="2">2</option>
-              <option id="3">3</option>
-              <option id="4">4</option>
-              <option id="5">5</option>
-              <option id="6">More than 5</option>{" "}
-              {/* drop down menu for num of children */}
-            </select>
+          <h2 className={styles.header}>Add New Client</h2>
+          <h3 className={styles.subheader}> Head of Household Information </h3>
+          <NewClientFields />
+        </div>
+        <div>
+          <h3 className={styles.subheader}> Household Information </h3>
+          <h4 className={styles.insideSubheader}> Household Size </h4>
+          <div>
+            <div className={styles.inputGroup}>
+              <label className={styles.inputLabel} htmlFor="numAdults">
+                Number of Adults
+              </label>
+              <select
+                id="numAdults"
+                className={styles.inputBar}
+                name="category"
+                onChange={(event) => handleParentChange(event.target.value)}
+              >
+                <option id="1">1</option>
+                <option id="2">2</option>
+                <option id="3">3</option>
+                <option id="4">4</option>
+                <option id="5">5</option>
+                <option id="6">More than 5</option>{" "}
+                {/* drop down menu for num of adults */}
+              </select>
+            </div>
+            <div className={styles.inputGroup}>
+              <label className={styles.inputLabel} htmlFor="numChildren">
+                Number of Children
+              </label>
+              <select
+                className={styles.inputBar}
+                id="numChildren"
+                onChange={(event) => handleChildrenChange(event.target.value)}
+              >
+                <option id="0">0</option>
+                <option id="1">1</option>
+                <option id="2">2</option>
+                <option id="3">3</option>
+                <option id="4">4</option>
+                <option id="5">5</option>
+                <option id="6">More than 5</option>{" "}
+                {/* drop down menu for num of children */}
+              </select>
+            </div>
           </div>
+          {adultFields}
+          {childFields}
         </div>
-        {adultFields}
-        {childFields}
-      </div>
-      <div>
-        <h4 className={styles.subheader}> Additional Information </h4>
-        <div className={styles.radioButton}>
-          <input
-            type="radio"
-            id="option1"
-            value="option1"
-            checked={selectedValue}
-            onClick={handleRadioChange} // handle state with onClick (as opposed to onChange) so users can unclick if they change their minds
-            onChange={() => {}} // no-op onChange field to keep react happy - react expects this when checked is controlled
-          />
+        <div>
+          <h4 className={styles.subheader}> Additional Information </h4>
+          <div className={styles.radioButton}>
+            <input
+              type="radio"
+              id="option1"
+              value="option1"
+              checked={selectedValue}
+              onClick={handleRadioChange} // handle state with onClick (as opposed to onChange) so users can unclick if they change their minds
+              onChange={() => {}} // no-op onChange field to keep react happy - react expects this when checked is controlled
+            />
 
-          <label htmlFor="option1" className={styles.radioLabel}>
-            Authorize pick-up
-          </label>
-          {/* for now, the button is set to being checked always */}
+            <label htmlFor="option1" className={styles.radioLabel}>
+              Authorize pick-up
+            </label>
+          </div>
+          {selectedValue ? (
+            <>
+              <h4 className={styles.insideSubheader}> Authorized pick-up </h4>
+              <NewClientFields />
+            </>
+          ) : (
+            ""
+          )}
         </div>
-        <h4 className={styles.insideSubheader}> Authorized pick-up </h4>
-        <NewClientFields />
+        <button className={styles.addButton}> Add Client </button>
       </div>
-      <button className={styles.addButton}> Add Client </button>
     </>
   );
 }

From d6f4359ba6753b0c8a0f0df545892b63fb06f68a Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Sat, 4 May 2024 12:41:53 -0700
Subject: [PATCH 07/17] optimized useEffect, dynamic form handling, state
 managemeny

---
 src/app/addNewClient/page.tsx          | 144 +++++++++++++++++--------
 src/app/components/NewClientFields.tsx |  18 +++-
 src/database/householdMemberSchema.ts  |   2 +-
 3 files changed, 118 insertions(+), 46 deletions(-)

diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index 358ded2..bf4fd4b 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -2,61 +2,95 @@
 import Navbar from "@components/Navbar";
 import NewClientFields from "@components/NewClientFields";
 import styles from "./addNewClient.module.css";
-import { useEffect, useState } from "react";
+import { useEffect, useState, ChangeEvent } from "react";
+
+export interface Member {
+  firstName: string;
+  lastName: string;
+  birthDate: string;
+  isAdult: boolean;
+}
 
 export default function AddNewClient() {
+
   const [selectedValue, setSelectedValue] = useState(false);
   const [numChildren, setNumChildren] = useState(0);
   const [numAdults, setNumAdults] = useState(1);
-  const [childFields, setChildFields] = useState<JSX.Element[]>([]);
-  const [adultFields, setAdultFields] = useState<JSX.Element[]>([]);
+  const [householdMem, setHouseholdMem] = useState<Member[]>([]);
 
-  useEffect(() => {
-    let fields = [];
-    for (let i = 0; i < numChildren; i++) {
-      fields.push(
-        <div key={i}>
-          <h4 className={styles.insideSubheader}> Child {i + 1} </h4>
-          <NewClientFields />
-        </div>
-      );
-    }
-    setChildFields(fields);
-
-    fields = [];
-    for (let i = 1; i < numAdults; i++) {
-      fields.push(
-        <div key={i}>
-          <h4 className={styles.insideSubheader}> Adult {i + 1} </h4>
-          <NewClientFields />
-        </div>
-      );
-    }
-    setAdultFields(fields);
-  }, [numChildren, numAdults]);
+  const [formData, setFormData] = useState({
+    firstName: "",
+    lastName: "",
+    birthDate: "",
+    entryDates: [],
+    authMem: [],
+    householdMem: [],
+    phoneNumber: "",
+    email: "",
+    address: "",
+  });
 
-  const handleRadioChange = () => {
-    setSelectedValue(!selectedValue);
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setFormData({ ...formData, [e.target.name]: value });
+    console.log(formData);
   };
 
-  const handleChildrenChange = (value: any) => {
-    setNumChildren(value);
-    //console.log(value);
+  const handleMemChange = (e: ChangeEvent<HTMLInputElement>, index: number, isAdult: boolean) => {
+    const { name, value} = e.target;
+    setHouseholdMem(prev => prev.map((mem, idx) => {
+        if (mem.isAdult === isAdult && idx === index) {
+            return { ...mem, [name]: value };
+        }
+        return mem;
+    }));
+
+    console.log(householdMem);
+};
+
+  useEffect(() => {
+    setHouseholdMem((prev) => {
+      let children = prev.filter((mem) => !mem.isAdult).slice(0, numChildren);
+      let adults = prev.filter((mem) => mem.isAdult).slice(0, numAdults);
+
+      while (children.length < numChildren) {
+        children.push({
+          firstName: "",
+          lastName: "",
+          birthDate: "",
+          isAdult: false,
+        });
+      }
+      while (adults.length < numAdults - 1) {
+        adults.push({
+          firstName: "",
+          lastName: "",
+          birthDate: "",
+          isAdult: true,
+        });
+      }
+
+      return [...children, ...adults];
+    });
+
+  }, [numChildren, numAdults]);
+
+  const handleSubmit = () => {
+    console.log(formData);
   };
 
-  const handleParentChange = (value: any) => {
-    setNumAdults(value);
-    //console.log(value);
+  const handleRadioChange = () => {
+    setSelectedValue(!selectedValue);
   };
 
   return (
     <>
       <Navbar />
-      <div className={styles.container}>
+      <form className={styles.container} onSubmit={handleSubmit}>
         <div>
           <h2 className={styles.header}>Add New Client</h2>
           <h3 className={styles.subheader}> Head of Household Information </h3>
-          <NewClientFields />
+          <NewClientFields onAction={handleChange} />
         </div>
         <div>
           <h3 className={styles.subheader}> Household Information </h3>
@@ -70,7 +104,7 @@ export default function AddNewClient() {
                 id="numAdults"
                 className={styles.inputBar}
                 name="category"
-                onChange={(event) => handleParentChange(event.target.value)}
+                onChange={(e) => setNumAdults(parseInt(e.target.value))}
               >
                 <option id="1">1</option>
                 <option id="2">2</option>
@@ -88,7 +122,9 @@ export default function AddNewClient() {
               <select
                 className={styles.inputBar}
                 id="numChildren"
-                onChange={(event) => handleChildrenChange(event.target.value)}
+                onChange={(e) => {
+                  setNumChildren(parseInt(e.target.value));
+                }}
               >
                 <option id="0">0</option>
                 <option id="1">1</option>
@@ -101,8 +137,27 @@ export default function AddNewClient() {
               </select>
             </div>
           </div>
-          {adultFields}
-          {childFields}
+          {householdMem
+            .filter((mem) => mem.isAdult)
+            .map((member, index) => (
+              <div key={"adult-" + index}>
+                <h4>Adult {index + 2}</h4>
+                <NewClientFields
+                  onAction={(e) => handleMemChange(e, index, true)}
+                />
+              </div>
+            ))}
+
+          {householdMem
+            .filter((mem) => !mem.isAdult)
+            .map((member, index) => (
+              <div key={"child-" + index}>
+                <h4>Child {index + 1}</h4>
+                <NewClientFields
+                  onAction={(e) => handleMemChange(e, index, false)}
+                />
+              </div>
+            ))}
         </div>
         <div>
           <h4 className={styles.subheader}> Additional Information </h4>
@@ -123,14 +178,17 @@ export default function AddNewClient() {
           {selectedValue ? (
             <>
               <h4 className={styles.insideSubheader}> Authorized pick-up </h4>
-              <NewClientFields />
+              <NewClientFields onAction={handleChange} />
             </>
           ) : (
             ""
           )}
         </div>
-        <button className={styles.addButton}> Add Client </button>
-      </div>
+        <button type="submit" className={styles.addButton}>
+          {" "}
+          Add Client{" "}
+        </button>
+      </form>
     </>
   );
 }
diff --git a/src/app/components/NewClientFields.tsx b/src/app/components/NewClientFields.tsx
index 9635990..d8d7c9f 100644
--- a/src/app/components/NewClientFields.tsx
+++ b/src/app/components/NewClientFields.tsx
@@ -1,8 +1,13 @@
-import React from "react";
+import React, {ChangeEvent} from "react";
 import "./NewClientFields.css";
+import { Member } from "app/addNewClient/page";
 
+interface Props {
+  onAction: (e:  ChangeEvent<HTMLInputElement>) => void;
+  
+}
 
-const NewClientFields = () => {
+const NewClientFields = ({onAction}: Props) => {
   return (
     <div>
       <div className="inputGroup">
@@ -10,7 +15,10 @@ const NewClientFields = () => {
           First Name <br></br>
           <input
             type="text"
+            name="firstName"
+            
             className="inputBar"
+            onChange={(e) => onAction(e)}
             required
           />
         </label>
@@ -20,7 +28,10 @@ const NewClientFields = () => {
           Last Name <br></br>
           <input
             type="text"
+            name="lastName"
+            //value={member.lastName}
             className="inputBar"
+            onChange={(e) => onAction(e)}
             required
           />
         </label>
@@ -30,7 +41,10 @@ const NewClientFields = () => {
           Birth Date <br></br>
           <input
             type="text"
+            name="birthDate"
+            //value={member.birthDate}
             className="inputBar"
+            onChange={(e) => onAction(e)}
             required
           />
         </label>
diff --git a/src/database/householdMemberSchema.ts b/src/database/householdMemberSchema.ts
index f0d390a..02241da 100644
--- a/src/database/householdMemberSchema.ts
+++ b/src/database/householdMemberSchema.ts
@@ -1,6 +1,6 @@
 import mongoose, { Schema, Types } from "mongoose";
 
-interface IHouseholdMember extends Document {
+export interface IHouseholdMember extends Document {
     firstName: string;
     lastName: string;
     birthDate: Date;

From 839b0958b8e6950fa4b1e1cb44979340aa74b936 Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Sun, 5 May 2024 12:41:35 -0700
Subject: [PATCH 08/17] householdMembers api endpoint

---
 src/app/api/householdMembers/route.ts | 73 +++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/app/api/householdMembers/route.ts

diff --git a/src/app/api/householdMembers/route.ts b/src/app/api/householdMembers/route.ts
new file mode 100644
index 0000000..cdd7ca8
--- /dev/null
+++ b/src/app/api/householdMembers/route.ts
@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from "next/server";
+import connectDB from "../../../database/db";
+import HouseholdMember, {IHouseholdMember} from "../../../database/householdMemberSchema";
+
+export async function GET(req: NextRequest) {
+  try {
+    // Establishing database connection
+    await connectDB();
+
+    // Fetching clients
+    const members = await HouseholdMember.find();
+
+    // Checking if clients are found
+    if (members.length === 0) {
+      return NextResponse.json(
+        { message: "No clients found." },
+        { status: 200 }
+      );
+    }
+
+    // Returning clients if found
+    return NextResponse.json(members);
+  } catch (err) {
+    console.error("Error fetching members:", err);
+    return NextResponse.json(
+      { error: "Error fetching members." },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(req: NextRequest) {
+  await connectDB();
+
+  try {
+    const { members } = await req.json();
+    if (!Array.isArray(members)) {
+      return NextResponse.json(
+        { message: "Expected array of household members." },
+        { status: 400 }
+      );
+    }
+
+    const result = await HouseholdMember.insertMany(members);
+
+    return NextResponse.json(
+      { message: "Successfully added members."},
+      {status: 200}
+
+    )
+
+    
+    // const newMemberData = await req.json();
+
+    // //create a new client using the data in body
+    // const newMember = new IHouseholdMember(newMemberData);
+    // console.log(newMember);
+
+    // //save the new client to the database
+    // await newMember.save();
+    // return NextResponse.json(
+    //   { message: "Operation successful" },
+    //   { status: 200 }
+    // );
+  } catch (err) {
+    //if unable to add client, return error
+    console.log("Error adding members:", err);
+    return NextResponse.json(
+      { error: "Error adding members." },
+      { status: 500 }
+    );
+  }
+}

From 1680df9b647aff239a79f35beb33d540de0b44a2 Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Sun, 5 May 2024 12:42:32 -0700
Subject: [PATCH 09/17] added email and address fields for the client

---
 src/app/components/NewClientFields.tsx | 40 ++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/app/components/NewClientFields.tsx b/src/app/components/NewClientFields.tsx
index d8d7c9f..86cdec0 100644
--- a/src/app/components/NewClientFields.tsx
+++ b/src/app/components/NewClientFields.tsx
@@ -1,13 +1,12 @@
-import React, {ChangeEvent} from "react";
+import React, { ChangeEvent } from "react";
 import "./NewClientFields.css";
-import { Member } from "app/addNewClient/page";
 
 interface Props {
-  onAction: (e:  ChangeEvent<HTMLInputElement>) => void;
-  
+  onAction: (e: ChangeEvent<HTMLInputElement>) => void;
+  isClient: boolean;
 }
 
-const NewClientFields = ({onAction}: Props) => {
+const NewClientFields = ({ onAction, isClient }: Props) => {
   return (
     <div>
       <div className="inputGroup">
@@ -16,7 +15,6 @@ const NewClientFields = ({onAction}: Props) => {
           <input
             type="text"
             name="firstName"
-            
             className="inputBar"
             onChange={(e) => onAction(e)}
             required
@@ -49,6 +47,36 @@ const NewClientFields = ({onAction}: Props) => {
           />
         </label>
       </div>
+      {isClient ? (
+        <div>
+          <div className="inputGroup">
+            <label className="inputLabel">
+              Email <br></br>
+              <input
+                type="text"
+                name="email"
+                className="inputBar"
+                onChange={(e) => onAction(e)}
+                required
+              />
+            </label>
+          </div>
+          <div className="inputGroup">
+            <label className="inputLabel">
+              Address <br></br>
+              <input
+                type="text"
+                name="address"
+                className="inputBar"
+                onChange={(e) => onAction(e)}
+                required
+              />
+            </label>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
     </div>
   );
 };

From 896c8b32e23306d4a4468fdaee5350fb3813f281 Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Sun, 5 May 2024 12:43:29 -0700
Subject: [PATCH 10/17] handle submit makes fetch req to householdMems

---
 src/app/addNewClient/page.tsx | 68 ++++++++++++++++++++++++++++-------
 1 file changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index bf4fd4b..cdd2697 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -4,19 +4,32 @@ import NewClientFields from "@components/NewClientFields";
 import styles from "./addNewClient.module.css";
 import { useEffect, useState, ChangeEvent } from "react";
 
-export interface Member {
+interface Member {
   firstName: string;
   lastName: string;
   birthDate: string;
   isAdult: boolean;
+  headHousehold: string;
 }
 
-export default function AddNewClient() {
+interface AuthMem {
+  firstName: string;
+  lastName: string;
+  birthDate: string;
+  client: string;
+}
 
+export default function AddNewClient() {
   const [selectedValue, setSelectedValue] = useState(false);
   const [numChildren, setNumChildren] = useState(0);
   const [numAdults, setNumAdults] = useState(1);
   const [householdMem, setHouseholdMem] = useState<Member[]>([]);
+  const [authMem, setAuthMem] = useState({
+    firstName: "",
+    lastName: "",
+    birthDate: "",
+    client: "",
+  });
 
   const [formData, setFormData] = useState({
     firstName: "",
@@ -36,17 +49,29 @@ export default function AddNewClient() {
     console.log(formData);
   };
 
-  const handleMemChange = (e: ChangeEvent<HTMLInputElement>, index: number, isAdult: boolean) => {
-    const { name, value} = e.target;
-    setHouseholdMem(prev => prev.map((mem, idx) => {
+  const handleMemChange = (
+    e: ChangeEvent<HTMLInputElement>,
+    index: number,
+    isAdult: boolean
+  ) => {
+    const { name, value } = e.target;
+    setHouseholdMem((prev) =>
+      prev.map((mem, idx) => {
         if (mem.isAdult === isAdult && idx === index) {
-            return { ...mem, [name]: value };
+          return { ...mem, [name]: value };
         }
         return mem;
-    }));
+      })
+    );
 
     console.log(householdMem);
-};
+  };
+
+  const handleAuthMem = (e: ChangeEvent<HTMLInputElement>) => {
+    const { value, name } = e.target;
+    setAuthMem({ ...authMem, [name]: value });
+    console.log(authMem);
+  };
 
   useEffect(() => {
     setHouseholdMem((prev) => {
@@ -59,6 +84,7 @@ export default function AddNewClient() {
           lastName: "",
           birthDate: "",
           isAdult: false,
+          headHousehold: "",
         });
       }
       while (adults.length < numAdults - 1) {
@@ -67,16 +93,30 @@ export default function AddNewClient() {
           lastName: "",
           birthDate: "",
           isAdult: true,
+          headHousehold: "",
         });
       }
 
       return [...children, ...adults];
     });
-
   }, [numChildren, numAdults]);
 
-  const handleSubmit = () => {
-    console.log(formData);
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // TODO: save client and retrieve client id
+
+    // save household members to household mem database
+    fetch("/api/householdMembers", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ members: householdMem }),
+    })
+      .then((response) => console.log(response))
+      .catch((err) => console.log(err));
+
+    //console.log(formData);
   };
 
   const handleRadioChange = () => {
@@ -90,7 +130,7 @@ export default function AddNewClient() {
         <div>
           <h2 className={styles.header}>Add New Client</h2>
           <h3 className={styles.subheader}> Head of Household Information </h3>
-          <NewClientFields onAction={handleChange} />
+          <NewClientFields isClient={true} onAction={handleChange} />
         </div>
         <div>
           <h3 className={styles.subheader}> Household Information </h3>
@@ -143,6 +183,7 @@ export default function AddNewClient() {
               <div key={"adult-" + index}>
                 <h4>Adult {index + 2}</h4>
                 <NewClientFields
+                  isClient={false}
                   onAction={(e) => handleMemChange(e, index, true)}
                 />
               </div>
@@ -154,6 +195,7 @@ export default function AddNewClient() {
               <div key={"child-" + index}>
                 <h4>Child {index + 1}</h4>
                 <NewClientFields
+                  isClient={false}
                   onAction={(e) => handleMemChange(e, index, false)}
                 />
               </div>
@@ -178,7 +220,7 @@ export default function AddNewClient() {
           {selectedValue ? (
             <>
               <h4 className={styles.insideSubheader}> Authorized pick-up </h4>
-              <NewClientFields onAction={handleChange} />
+              <NewClientFields isClient={false} onAction={handleAuthMem} />
             </>
           ) : (
             ""

From 1d7c338458932d139edab02929c1cee4b5fe1b1d Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Sun, 5 May 2024 12:50:33 -0700
Subject: [PATCH 11/17] added phone number ffield for the client

---
 src/app/components/NewClientFields.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/app/components/NewClientFields.tsx b/src/app/components/NewClientFields.tsx
index 86cdec0..0d5ee30 100644
--- a/src/app/components/NewClientFields.tsx
+++ b/src/app/components/NewClientFields.tsx
@@ -61,6 +61,18 @@ const NewClientFields = ({ onAction, isClient }: Props) => {
               />
             </label>
           </div>
+          <div className="inputGroup">
+            <label className="inputLabel">
+              Phone Number <br></br>
+              <input
+                type="text"
+                name="phoneNumber"
+                className="inputBar"
+                onChange={(e) => onAction(e)}
+                required
+              />
+            </label>
+          </div>
           <div className="inputGroup">
             <label className="inputLabel">
               Address <br></br>

From 9985257bfc661765e9cd5707ebe633b41edc76c5 Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Mon, 20 May 2024 10:38:38 -0700
Subject: [PATCH 12/17] household members posted on submit

---
 src/app/addNewClient/page.tsx         | 46 +++++++++++++++++++++++----
 src/app/api/clients/route.ts          |  5 +--
 src/app/api/householdMembers/route.ts |  2 +-
 3 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index cdd2697..40b675f 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -41,6 +41,7 @@ export default function AddNewClient() {
     phoneNumber: "",
     email: "",
     address: "",
+    isFlagged: false,
   });
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
@@ -76,7 +77,7 @@ export default function AddNewClient() {
   useEffect(() => {
     setHouseholdMem((prev) => {
       let children = prev.filter((mem) => !mem.isAdult).slice(0, numChildren);
-      let adults = prev.filter((mem) => mem.isAdult).slice(0, numAdults);
+      let adults = prev.filter((mem) => mem.isAdult).slice(0, numAdults - 1);
 
       while (children.length < numChildren) {
         children.push({
@@ -102,23 +103,56 @@ export default function AddNewClient() {
   }, [numChildren, numAdults]);
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    let headClientId: string;
     e.preventDefault();
     // TODO: save client and retrieve client id
-
-    // save household members to household mem database
-    fetch("/api/householdMembers", {
+    fetch("/api/clients", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({ members: householdMem }),
+      body: JSON.stringify(formData),
     })
-      .then((response) => console.log(response))
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+        headClientId = data.message;
+        console.log(headClientId);
+      })
+      .then(() => {
+        fetchMembers(headClientId);
+      })
       .catch((err) => console.log(err));
 
+    // update household members headhousehold and
+    // save household members to household mem database
+
     //console.log(formData);
   };
 
+  const fetchMembers = (headClientId: string) => {
+    
+    if (householdMem.length !== 0) {
+      
+      householdMem.map((mem) => (mem.headHousehold = headClientId));
+      console.log(householdMem);
+
+      fetch("/api/householdMembers", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ members: householdMem }),
+      })
+        .then((response) => {
+          return response.json();
+        })
+        .then((data) => console.log(data))
+        .catch((err) => console.log(err));
+    }
+  };
+
   const handleRadioChange = () => {
     setSelectedValue(!selectedValue);
   };
diff --git a/src/app/api/clients/route.ts b/src/app/api/clients/route.ts
index e4e7621..80dc00e 100644
--- a/src/app/api/clients/route.ts
+++ b/src/app/api/clients/route.ts
@@ -37,12 +37,13 @@ export async function POST(req: NextRequest) {
 
     //create a new client using the data in body
     const newClient = new IClientSchema(newClientData);
-    console.log(newClient);
 
     //save the new client to the database
     await newClient.save();
+    console.log(newClient._id.valueOf());
+    
     return NextResponse.json(
-      { message: "Operation successful" },
+      { message: newClient._id.valueOf() },
       { status: 200 }
     );
   } catch (err) {
diff --git a/src/app/api/householdMembers/route.ts b/src/app/api/householdMembers/route.ts
index cdd7ca8..2971a10 100644
--- a/src/app/api/householdMembers/route.ts
+++ b/src/app/api/householdMembers/route.ts
@@ -44,7 +44,7 @@ export async function POST(req: NextRequest) {
     const result = await HouseholdMember.insertMany(members);
 
     return NextResponse.json(
-      { message: "Successfully added members."},
+      { message: result},
       {status: 200}
 
     )

From d925b710688ba03d574f9a42ba4372b342888a43 Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Mon, 20 May 2024 11:48:31 -0700
Subject: [PATCH 13/17] household mem id's added to formData

---
 src/app/addNewClient/page.tsx | 36 +++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index 40b675f..2c856dc 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -19,6 +19,19 @@ interface AuthMem {
   client: string;
 }
 
+interface FormData {
+  firstName: string;
+  lastName: string;
+  birthDate: string;
+  entryDates: Date[];
+  authMem: string[];
+  householdMem: string[];
+  phoneNumber: string;
+  email: string;
+  address: string;
+  isFlagged: boolean;
+}
+
 export default function AddNewClient() {
   const [selectedValue, setSelectedValue] = useState(false);
   const [numChildren, setNumChildren] = useState(0);
@@ -31,7 +44,7 @@ export default function AddNewClient() {
     client: "",
   });
 
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState<FormData>({
     firstName: "",
     lastName: "",
     birthDate: "",
@@ -124,11 +137,6 @@ export default function AddNewClient() {
         fetchMembers(headClientId);
       })
       .catch((err) => console.log(err));
-
-    // update household members headhousehold and
-    // save household members to household mem database
-
-    //console.log(formData);
   };
 
   const fetchMembers = (headClientId: string) => {
@@ -136,7 +144,7 @@ export default function AddNewClient() {
     if (householdMem.length !== 0) {
       
       householdMem.map((mem) => (mem.headHousehold = headClientId));
-      console.log(householdMem);
+      //console.log(householdMem);
 
       fetch("/api/householdMembers", {
         method: "POST",
@@ -148,11 +156,23 @@ export default function AddNewClient() {
         .then((response) => {
           return response.json();
         })
-        .then((data) => console.log(data))
+        .then((data) => {
+          const mems: string[] = [];
+          //console.log(data);
+          data.message.map((mem: any) => {
+            //console.log(mem._id);
+            mems.push(mem._id);
+          })
+          setFormData((prevFormData) => ({...prevFormData, householdMem: mems}))
+        })
         .catch((err) => console.log(err));
     }
   };
 
+  const updateClientHousehold = () => {
+
+  }
+
   const handleRadioChange = () => {
     setSelectedValue(!selectedValue);
   };

From 6b3f530945876c402162bb97abcc90156638a496 Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Mon, 20 May 2024 12:51:48 -0700
Subject: [PATCH 14/17] household member field updated with members' ids

---
 src/app/addNewClient/page.tsx         | 32 +++++++++++++-------
 src/app/api/clients/[userId]/route.ts | 43 ++++++++++++++++++++++-----
 2 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index 2c856dc..3faedba 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -140,11 +140,8 @@ export default function AddNewClient() {
   };
 
   const fetchMembers = (headClientId: string) => {
-    
     if (householdMem.length !== 0) {
-      
       householdMem.map((mem) => (mem.headHousehold = headClientId));
-      //console.log(householdMem);
 
       fetch("/api/householdMembers", {
         method: "POST",
@@ -158,20 +155,35 @@ export default function AddNewClient() {
         })
         .then((data) => {
           const mems: string[] = [];
-          //console.log(data);
           data.message.map((mem: any) => {
-            //console.log(mem._id);
+            console.log(mem._id);
             mems.push(mem._id);
-          })
-          setFormData((prevFormData) => ({...prevFormData, householdMem: mems}))
+          });
+
+          updateClientHousehold(mems, headClientId);
+          // setFormData((prevFormData) => ({
+          //   ...prevFormData,
+          //   householdMem: mems,
+          // }));
         })
         .catch((err) => console.log(err));
     }
   };
 
-  const updateClientHousehold = () => {
-
-  }
+  const updateClientHousehold = (mems: string[], clientId: string) => {
+    fetch(`/api/clients/${clientId}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ householdMem: mems }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log("updated client: ", data);
+      })
+      .catch((err) => console.log(err));
+  };
 
   const handleRadioChange = () => {
     setSelectedValue(!selectedValue);
diff --git a/src/app/api/clients/[userId]/route.ts b/src/app/api/clients/[userId]/route.ts
index dfe6f31..5d3017f 100644
--- a/src/app/api/clients/[userId]/route.ts
+++ b/src/app/api/clients/[userId]/route.ts
@@ -41,20 +41,49 @@ export async function GET(req: NextRequest, { params }: IParams) {
 export async function DELETE(req: NextRequest, { params }: IParams) {
   await connectDB();
   const { userId } = params;
-  
+
   try {
     //find the client to delete by the given id
     const client = await IClientSchema.findOne({ _id: userId });
-    await IClientSchema.findByIdAndDelete(client._id); 
-    return NextResponse.json({ message: 'Operation successful' }, { status: 200 });
-  }
-  //return an error if unable to delete the client
-  catch(err) {
+    await IClientSchema.findByIdAndDelete(client._id);
+    return NextResponse.json(
+      { message: "Operation successful" },
+      { status: 200 }
+    );
+  } catch (err) {
+    //return an error if unable to delete the client
     console.error("Error deleting client:", err);
     return NextResponse.json(
       { error: "Error deleting client." },
-      { status: 500}
+      { status: 500 }
     );
   }
 }
 
+export async function PUT(req: NextRequest, { params }: IParams) {
+  await connectDB();
+  const { userId } = params;
+  try {
+    const body = await req.json();
+    const { householdMem } = body;
+
+    const updatedClient = await IClientSchema.findByIdAndUpdate(
+      userId,
+      { householdMem },
+      { new: true }
+    );
+
+    if (!updatedClient) {
+      return NextResponse.json({ error: "Client not found." }, { status: 404 });
+    }
+
+    return NextResponse.json(updatedClient, { status: 200 });
+
+  } catch (err) {
+    console.error("Error updating client:", err);
+    return NextResponse.json(
+      { error: "Error updating client." },
+      { status: 500 }
+    );
+  }
+}

From 04e40ac6d44ed973cfd9301baee9d85c6c568881 Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Mon, 20 May 2024 13:41:15 -0700
Subject: [PATCH 15/17] api endpoint for authmems + authmem posted when form is
 submitted

---
 src/app/addNewClient/page.tsx          | 44 +++++++++++++++-----
 src/app/api/authorizedMembers/route.ts | 57 ++++++++++++++++++++++++++
 src/app/api/clients/[userId]/route.ts  |  4 +-
 src/app/api/clients/route.ts           |  3 +-
 src/app/api/householdMembers/route.ts  | 23 +----------
 5 files changed, 95 insertions(+), 36 deletions(-)
 create mode 100644 src/app/api/authorizedMembers/route.ts

diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index 3faedba..e01ee0d 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -37,7 +37,7 @@ export default function AddNewClient() {
   const [numChildren, setNumChildren] = useState(0);
   const [numAdults, setNumAdults] = useState(1);
   const [householdMem, setHouseholdMem] = useState<Member[]>([]);
-  const [authMem, setAuthMem] = useState({
+  const [authMem, setAuthMem] = useState<AuthMem>({
     firstName: "",
     lastName: "",
     birthDate: "",
@@ -115,10 +115,14 @@ export default function AddNewClient() {
     });
   }, [numChildren, numAdults]);
 
+  // when form is submitted:
+  // 1. client is posted to db, its mongodb-geenrated id is then added to the householdMem array
+  // 2. householdMembers are posted to db, their mongodb-generated id's are returned and stored
+  // 3. the client is updated to hold the ids of their householdMembers
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     let headClientId: string;
     e.preventDefault();
-    // TODO: save client and retrieve client id
+
     fetch("/api/clients", {
       method: "POST",
       headers: {
@@ -131,15 +135,18 @@ export default function AddNewClient() {
       })
       .then((data) => {
         headClientId = data.message;
-        console.log(headClientId);
+        //console.log(headClientId);
+      })
+      .then(() => {
+        postMembers(headClientId);
       })
       .then(() => {
-        fetchMembers(headClientId);
+        postAuthMembers(headClientId);
       })
       .catch((err) => console.log(err));
   };
 
-  const fetchMembers = (headClientId: string) => {
+  const postMembers = (headClientId: string) => {
     if (householdMem.length !== 0) {
       householdMem.map((mem) => (mem.headHousehold = headClientId));
 
@@ -156,15 +163,11 @@ export default function AddNewClient() {
         .then((data) => {
           const mems: string[] = [];
           data.message.map((mem: any) => {
-            console.log(mem._id);
+            //console.log(mem._id);
             mems.push(mem._id);
           });
 
           updateClientHousehold(mems, headClientId);
-          // setFormData((prevFormData) => ({
-          //   ...prevFormData,
-          //   householdMem: mems,
-          // }));
         })
         .catch((err) => console.log(err));
     }
@@ -180,11 +183,30 @@ export default function AddNewClient() {
     })
       .then((response) => response.json())
       .then((data) => {
-        console.log("updated client: ", data);
+        // log to console for testing purposes
+        console.log("client posted: ", data);
       })
       .catch((err) => console.log(err));
   };
 
+  const postAuthMembers = (clientId: string) => {
+    if (selectedValue) {
+      authMem.client = clientId;
+      fetch("/api/authorizedMembers", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(authMem),
+      })
+        .then((response) => response.json())
+        .then((data) => {
+          console.log("auth mem: ", data.message);
+        })
+        .catch((err) => console.log(err));
+    }
+  };
+
   const handleRadioChange = () => {
     setSelectedValue(!selectedValue);
   };
diff --git a/src/app/api/authorizedMembers/route.ts b/src/app/api/authorizedMembers/route.ts
new file mode 100644
index 0000000..12a013d
--- /dev/null
+++ b/src/app/api/authorizedMembers/route.ts
@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from "next/server";
+import connectDB from "../../../database/db";
+import AuthorizedMember from "../../../database/authorizedMemberSchema";
+
+export async function GET(req: NextRequest) {
+  try {
+    // Establishing database connection
+    await connectDB();
+
+    // Fetching clients
+    const members = await AuthorizedMember.find();
+
+    // Checking if clients are found
+    if (members.length === 0) {
+      return NextResponse.json(
+        { message: "No authorized members found." },
+        { status: 200 }
+      );
+    }
+
+    // Returning clients if found
+    return NextResponse.json(members);
+  } catch (err) {
+    console.error("Error fetching authorized members:", err);
+    return NextResponse.json(
+      { error: "Error fetching authorized members." },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(req: NextRequest) {
+  await connectDB();
+
+  
+  try {
+    const newAuthMemData = await req.json();
+
+    //create a new client using the data in body
+    const newAuthMem = new AuthorizedMember(newAuthMemData);
+
+    //save the new client to the database
+    await newAuthMem.save();
+
+    return NextResponse.json(
+      { message: newAuthMem._id.valueOf() },
+      { status: 200 }
+    );
+  } catch (err) {
+    //if unable to add authorized member, return error
+    console.log("Error adding authorized member:", err);
+    return NextResponse.json(
+      { error: "Error adding authorized member." },
+      { status: 500 }
+    );
+  }
+}
diff --git a/src/app/api/clients/[userId]/route.ts b/src/app/api/clients/[userId]/route.ts
index 5d3017f..8f73b43 100644
--- a/src/app/api/clients/[userId]/route.ts
+++ b/src/app/api/clients/[userId]/route.ts
@@ -60,6 +60,7 @@ export async function DELETE(req: NextRequest, { params }: IParams) {
   }
 }
 
+// update a client's household members 
 export async function PUT(req: NextRequest, { params }: IParams) {
   await connectDB();
   const { userId } = params;
@@ -72,13 +73,12 @@ export async function PUT(req: NextRequest, { params }: IParams) {
       { householdMem },
       { new: true }
     );
-
+    
     if (!updatedClient) {
       return NextResponse.json({ error: "Client not found." }, { status: 404 });
     }
 
     return NextResponse.json(updatedClient, { status: 200 });
-
   } catch (err) {
     console.error("Error updating client:", err);
     return NextResponse.json(
diff --git a/src/app/api/clients/route.ts b/src/app/api/clients/route.ts
index 80dc00e..7ab0033 100644
--- a/src/app/api/clients/route.ts
+++ b/src/app/api/clients/route.ts
@@ -40,8 +40,7 @@ export async function POST(req: NextRequest) {
 
     //save the new client to the database
     await newClient.save();
-    console.log(newClient._id.valueOf());
-    
+
     return NextResponse.json(
       { message: newClient._id.valueOf() },
       { status: 200 }
diff --git a/src/app/api/householdMembers/route.ts b/src/app/api/householdMembers/route.ts
index 2971a10..6bdcc83 100644
--- a/src/app/api/householdMembers/route.ts
+++ b/src/app/api/householdMembers/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import connectDB from "../../../database/db";
-import HouseholdMember, {IHouseholdMember} from "../../../database/householdMemberSchema";
+import HouseholdMember from "../../../database/householdMemberSchema";
 
 export async function GET(req: NextRequest) {
   try {
@@ -42,26 +42,7 @@ export async function POST(req: NextRequest) {
     }
 
     const result = await HouseholdMember.insertMany(members);
-
-    return NextResponse.json(
-      { message: result},
-      {status: 200}
-
-    )
-
-    
-    // const newMemberData = await req.json();
-
-    // //create a new client using the data in body
-    // const newMember = new IHouseholdMember(newMemberData);
-    // console.log(newMember);
-
-    // //save the new client to the database
-    // await newMember.save();
-    // return NextResponse.json(
-    //   { message: "Operation successful" },
-    //   { status: 200 }
-    // );
+    return NextResponse.json({ message: result }, { status: 200 });
   } catch (err) {
     //if unable to add client, return error
     console.log("Error adding members:", err);

From 993d473a575ee876def5a867f8a84252e58c64ef Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Mon, 20 May 2024 17:09:53 -0700
Subject: [PATCH 16/17] authorized mem array populated in client

---
 src/app/addNewClient/page.tsx         | 23 ++++++++-
 src/app/api/clients/[userId]/route.ts | 67 ++++++++++++++++++++++++---
 2 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index e01ee0d..dea9ac3 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -184,13 +184,31 @@ export default function AddNewClient() {
       .then((response) => response.json())
       .then((data) => {
         // log to console for testing purposes
-        console.log("client posted: ", data);
+        console.log("client household: ", data);
+      })
+      .catch((err) => console.log(err));
+  };
+
+  const updateClientAuth = (authMems: string[], clientId: string) => {
+    console.log(authMems);
+    fetch(`/api/clients/${clientId}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ authorizedMem: authMems }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        // log to console for testing purposes
+        console.log("client auth: ", data);
       })
       .catch((err) => console.log(err));
   };
 
   const postAuthMembers = (clientId: string) => {
     if (selectedValue) {
+      const authMemArr: string[] = [];
       authMem.client = clientId;
       fetch("/api/authorizedMembers", {
         method: "POST",
@@ -202,6 +220,9 @@ export default function AddNewClient() {
         .then((response) => response.json())
         .then((data) => {
           console.log("auth mem: ", data.message);
+          authMemArr.push(data.message);
+          //console.log(authMemArr);
+          updateClientAuth(authMemArr, clientId);
         })
         .catch((err) => console.log(err));
     }
diff --git a/src/app/api/clients/[userId]/route.ts b/src/app/api/clients/[userId]/route.ts
index 8f73b43..fb40778 100644
--- a/src/app/api/clients/[userId]/route.ts
+++ b/src/app/api/clients/[userId]/route.ts
@@ -66,13 +66,40 @@ export async function PUT(req: NextRequest, { params }: IParams) {
   const { userId } = params;
   try {
     const body = await req.json();
-    const { householdMem } = body;
 
-    const updatedClient = await IClientSchema.findByIdAndUpdate(
-      userId,
-      { householdMem },
-      { new: true }
-    );
+    const updateData: any = {};
+     // Dynamically add fields to updateData if they exist in the request body
+     if (body.householdMem) {
+      updateData.householdMem = body.householdMem;
+    }
+    if (body.authorizedMem) {
+      updateData.authorizedMem = body.authorizedMem;
+    }
+
+
+    //const { householdMem } = body;
+    let updatedClient;
+
+    if (updateData.householdMem) {
+      updatedClient = await IClientSchema.findByIdAndUpdate(
+        userId,
+        { householdMem: updateData.householdMem},
+        { new: true }
+      );
+    }
+    if (updateData.authorizedMem) {
+      updatedClient = await IClientSchema.findByIdAndUpdate(
+        userId,
+        { authMem: updateData.authorizedMem},
+        { new: true }
+      );
+    }
+
+    // const updatedClient = await IClientSchema.findByIdAndUpdate(
+    //   userId,
+    //   {},
+    //   { new: true }
+    // );
     
     if (!updatedClient) {
       return NextResponse.json({ error: "Client not found." }, { status: 404 });
@@ -87,3 +114,31 @@ export async function PUT(req: NextRequest, { params }: IParams) {
     );
   }
 }
+
+
+// export async function PUT(req: NextRequest, { params }: IParams) {
+//   await connectDB();
+//   const { userId } = params;
+//   try {
+//     const body = await req.json();
+//     const { householdMem } = body;
+
+//     const updatedClient = await IClientSchema.findByIdAndUpdate(
+//       userId,
+//       { householdMem },
+//       { new: true }
+//     );
+    
+//     if (!updatedClient) {
+//       return NextResponse.json({ error: "Client not found." }, { status: 404 });
+//     }
+
+//     return NextResponse.json(updatedClient, { status: 200 });
+//   } catch (err) {
+//     console.error("Error updating client:", err);
+//     return NextResponse.json(
+//       { error: "Error updating client." },
+//       { status: 500 }
+//     );
+//   }
+// }

From 6ce4cdcc7c026a64267ab6f0eb1af9343fa46127 Mon Sep 17 00:00:00 2001
From: Melika Dabiri <jalehdabiri@gmail.com>
Date: Mon, 20 May 2024 17:11:56 -0700
Subject: [PATCH 17/17] clean up console log statements

---
 src/app/addNewClient/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/addNewClient/page.tsx b/src/app/addNewClient/page.tsx
index dea9ac3..d082e01 100644
--- a/src/app/addNewClient/page.tsx
+++ b/src/app/addNewClient/page.tsx
@@ -60,7 +60,7 @@ export default function AddNewClient() {
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setFormData({ ...formData, [e.target.name]: value });
-    console.log(formData);
+    //console.log(formData);
   };
 
   const handleMemChange = (
@@ -78,13 +78,13 @@ export default function AddNewClient() {
       })
     );
 
-    console.log(householdMem);
+    //console.log(householdMem);
   };
 
   const handleAuthMem = (e: ChangeEvent<HTMLInputElement>) => {
     const { value, name } = e.target;
     setAuthMem({ ...authMem, [name]: value });
-    console.log(authMem);
+    //console.log(authMem);
   };
 
   useEffect(() => {
@@ -184,7 +184,7 @@ export default function AddNewClient() {
       .then((response) => response.json())
       .then((data) => {
         // log to console for testing purposes
-        console.log("client household: ", data);
+        console.log("client + household: ", data);
       })
       .catch((err) => console.log(err));
   };
@@ -201,7 +201,7 @@ export default function AddNewClient() {
       .then((response) => response.json())
       .then((data) => {
         // log to console for testing purposes
-        console.log("client auth: ", data);
+        console.log("client + auth: ", data);
       })
       .catch((err) => console.log(err));
   };