From 35095b49bc67337219385623705af0eb6c2f4793 Mon Sep 17 00:00:00 2001
From: Marcos Frony <mfrony@yahoo.com>
Date: Tue, 2 Sep 2025 17:04:06 -0700
Subject: [PATCH 1/4] Fix bugs on src/app/page.tsx

---
 src/app/page.tsx | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 11a598f..5dedb4d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,9 +2,21 @@
 
 import { useEffect, useState } from "react";
 
+interface Advocate {
+  id: number;
+  firstName: string;
+  lastName: string;
+  city: string;
+  degree: string;
+  specialties: string[];
+  yearsOfExperience: number;
+  phoneNumber: number;
+  createdAt?: string;
+}
+
 export default function Home() {
-  const [advocates, setAdvocates] = useState([]);
-  const [filteredAdvocates, setFilteredAdvocates] = useState([]);
+  const [advocates, setAdvocates] = useState<Advocate[]>([]);
+  const [filteredAdvocates, setFilteredAdvocates] = useState<Advocate[]>([]);
 
   useEffect(() => {
     console.log("fetching advocates...");
@@ -16,10 +28,13 @@ export default function Home() {
     });
   }, []);
 
-  const onChange = (e) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const searchTerm = e.target.value;
 
-    document.getElementById("search-term").innerHTML = searchTerm;
+    const searchTermElement = document.getElementById("search-term");
+    if (searchTermElement) {
+      searchTermElement.innerHTML = searchTerm;
+    }
 
     console.log("filtering advocates...");
     const filteredAdvocates = advocates.filter((advocate) => {
@@ -28,8 +43,8 @@ export default function Home() {
         advocate.lastName.includes(searchTerm) ||
         advocate.city.includes(searchTerm) ||
         advocate.degree.includes(searchTerm) ||
-        advocate.specialties.includes(searchTerm) ||
-        advocate.yearsOfExperience.includes(searchTerm)
+        advocate.specialties.some(specialty => specialty.includes(searchTerm)) ||
+        advocate.yearsOfExperience.toString().includes(searchTerm)
       );
     });
 
@@ -75,8 +90,8 @@ export default function Home() {
                 <td>{advocate.city}</td>
                 <td>{advocate.degree}</td>
                 <td>
-                  {advocate.specialties.map((s) => (
-                    <div>{s}</div>
+                  {advocate.specialties.map((s: string, index: number) => (
+                    <div key={index}>{s}</div>
                   ))}
                 </td>
                 <td>{advocate.yearsOfExperience}</td>

From ae97ee5bea3a000ae215652a1468a1ca7e47a5f8 Mon Sep 17 00:00:00 2001
From: Marcos Frony <mfrony@yahoo.com>
Date: Tue, 2 Sep 2025 17:16:02 -0700
Subject: [PATCH 2/4] Added a tr between thead and th

---
 src/app/page.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5dedb4d..c25281f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -58,11 +58,11 @@ export default function Home() {
 
   return (
     <main style={{ margin: "24px" }}>
-      <h1>Solace Advocates</h1>
+      <h1 className="text-xl md:text-3xl text-white font-bold bg-green-700 px-4 py-5 rounded-md">Solace Advocates</h1>
       <br />
       <br />
       <div>
-        <p>Search</p>
+        <p className="text-lg font-bold">Search</p>
         <p>
           Searching for: <span id="search-term"></span>
         </p>
@@ -73,13 +73,15 @@ export default function Home() {
       <br />
       <table>
         <thead>
-          <th>First Name</th>
-          <th>Last Name</th>
-          <th>City</th>
-          <th>Degree</th>
-          <th>Specialties</th>
-          <th>Years of Experience</th>
-          <th>Phone Number</th>
+          <tr>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>City</th>
+            <th>Degree</th>
+            <th>Specialties</th>
+            <th>Years of Experience</th>
+            <th>Phone Number</th>
+          </tr>
         </thead>
         <tbody>
           {filteredAdvocates.map((advocate) => {

From 20664f7fda6483e3a713e04a15fae46c3c808b93 Mon Sep 17 00:00:00 2001
From: Marcos Frony <mfrony@yahoo.com>
Date: Tue, 2 Sep 2025 17:38:17 -0700
Subject: [PATCH 3/4] Style top header and search section. Align tds to the top

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

diff --git a/src/app/page.tsx b/src/app/page.tsx
index c25281f..cf76e82 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -58,16 +58,16 @@ export default function Home() {
 
   return (
     <main style={{ margin: "24px" }}>
-      <h1 className="text-xl md:text-3xl text-white font-bold bg-green-700 px-4 py-5 rounded-md">Solace Advocates</h1>
-      <br />
-      <br />
+      <div className="w-full">
+        <h1 className="text-xl md:text-3xl text-white font-bold bg-green-700 px-4 py-5 rounded-md mb-8 w-full">Solace Advocates</h1>
+      </div>
       <div>
-        <p className="text-lg font-bold">Search</p>
-        <p>
+        <p className="text-lg md:text-2xl font-bold mb-2">Search</p>
+        <p className="text-sm md:text-lg">
           Searching for: <span id="search-term"></span>
         </p>
-        <input style={{ border: "1px solid black" }} onChange={onChange} />
-        <button onClick={onClick}>Reset Search</button>
+        <input style={{ border: "1px solid black" }} onChange={onChange} className="w-1/2 md:w-1/3" />
+        <button onClick={onClick} className="bg-green-700 text-white px-2 md:px-4 py-2 rounded-md ml-2 text-sm md:text-lg">Reset Search</button>
       </div>
       <br />
       <br />
@@ -87,17 +87,17 @@ export default function Home() {
           {filteredAdvocates.map((advocate) => {
             return (
               <tr>
-                <td>{advocate.firstName}</td>
-                <td>{advocate.lastName}</td>
-                <td>{advocate.city}</td>
-                <td>{advocate.degree}</td>
-                <td>
+                <td className="align-top">{advocate.firstName}</td>
+                <td className="align-top">{advocate.lastName}</td>
+                <td className="align-top">{advocate.city}</td>
+                <td className="align-top">{advocate.degree}</td>
+                <td className="align-top">
                   {advocate.specialties.map((s: string, index: number) => (
                     <div key={index}>{s}</div>
                   ))}
                 </td>
-                <td>{advocate.yearsOfExperience}</td>
-                <td>{advocate.phoneNumber}</td>
+                <td className="align-top">{advocate.yearsOfExperience}</td>
+                <td className="align-top">{advocate.phoneNumber}</td>
               </tr>
             );
           })}

From 0821fa21c2cf042a85b7a72de7be60b0ee1b9947 Mon Sep 17 00:00:00 2001
From: Marcos Frony <mfrony@yahoo.com>
Date: Tue, 2 Sep 2025 18:06:03 -0700
Subject: [PATCH 4/4] Style the result table

---
 src/app/page.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index cf76e82..52a5b16 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -74,30 +74,30 @@ export default function Home() {
       <table>
         <thead>
           <tr>
-            <th>First Name</th>
-            <th>Last Name</th>
-            <th>City</th>
-            <th>Degree</th>
-            <th>Specialties</th>
-            <th>Years of Experience</th>
-            <th>Phone Number</th>
+            <th className="whitespace-nowrap text-xs md:text-sm px-2 md:px-4">First Name</th>
+            <th className="whitespace-nowrap text-xs md:text-sm px-2 md:px-4">Last Name</th>
+            <th className="whitespace-nowrap text-xs md:text-sm px-2 md:px-4">City</th>
+            <th className="whitespace-nowrap text-xs md:text-sm px-2 md:px-4">Degree</th>
+            <th className="whitespace-nowrap text-xs md:text-sm px-2 md:px-4">Specialties</th>
+            <th className="whitespace-nowrap text-xs md:text-sm px-2 md:px-4">Years of Experience</th>
+            <th className="whitespace-nowrap text-xs md:text-sm px-2 md:px-4">Phone Number</th>
           </tr>
         </thead>
         <tbody>
-          {filteredAdvocates.map((advocate) => {
+          {filteredAdvocates.map((advocate, index) => {
             return (
-              <tr>
-                <td className="align-top">{advocate.firstName}</td>
-                <td className="align-top">{advocate.lastName}</td>
-                <td className="align-top">{advocate.city}</td>
-                <td className="align-top">{advocate.degree}</td>
+              <tr key={advocate.id} className={index % 2 === 0 ? "bg-gray-100" : "bg-gray-300"}>
+                <td className="align-top px-2 md:px-4">{advocate.firstName}</td>
+                <td className="align-top px-2 md:px-4">{advocate.lastName}</td>
+                <td className="align-top px-2 md:px-4">{advocate.city}</td>
+                <td className="align-top px-2 md:px-4">{advocate.degree}</td>
                 <td className="align-top">
                   {advocate.specialties.map((s: string, index: number) => (
                     <div key={index}>{s}</div>
                   ))}
                 </td>
-                <td className="align-top">{advocate.yearsOfExperience}</td>
-                <td className="align-top">{advocate.phoneNumber}</td>
+                <td className="align-top px-2 md:px-4">{advocate.yearsOfExperience}</td>
+                <td className="align-top px-2 md:px-4">{advocate.phoneNumber}</td>
               </tr>
             );
           })}