solved by Mustafa Bahedh

package.json

@@ -31,5 +31,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "web-vitals": "^3.0.4"
   }
 }

public/index.html

@@ -10,6 +10,8 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.js

@@ -1,14 +1,27 @@
-import './App.css';
-
-const App = ()=>{
-  // State here
+import "./App.css";
+import InputForm from "./components/form";
+import Searchfield from "./components/search_field";
+import Table from "./components/table";
+import { PATIENTS } from "./components/patient";
+import { useState } from "react";
+const App = () => {
+  const [filterPatient, setFilterPatient] = useState(PATIENTS);
   return (
     <div className="App">
-      {/* Add new patient FORM */}
-      {/* Search input */}
-      {/* Table */}
+      <InputForm
+        filterPatient={filterPatient}
+        setFilterPatient={setFilterPatient}
+      />
+      <Searchfield
+        filterPatient={filterPatient}
+        setFilterPatient={setFilterPatient}
+      />
+      <Table
+        filterPatient={filterPatient}
+        setFilterPatient={setFilterPatient}
+      />
     </div>
   );
-}
+};
 
 export default App;

src/components/form.css

@@ -0,0 +1,19 @@
+.form{
+    display: flex;
+    justify-content: space-between;
+    width: 90%;
+    padding: 50px 10px;
+}
+
+.submitButton{
+    width: 200px;
+    height: 30px;
+    background-color: #3995FF;
+    border: none;
+    border-radius: 10px;
+    color: white;
+}
+.submitButton:hover{
+    cursor: pointer;
+    border: 1px solid gray;
+}

src/components/form.jsx

@@ -0,0 +1,43 @@
+import Input from "./form_components/input";
+import Select from "./form_components/select";
+import "./form.css";
+import React, { useState } from "react";
+import { PATIENTS, addPatient } from "./patient";
+
+const InputForm = (probs) => {
+  const [fullName, setfullName] = useState("");
+  const [gender, setGender] = useState("m");
+  const [phone, setPhone] = useState("");
+  const [birthDate, setBirthDate] = useState("");
+
+  const newPatient = (e) => {
+    e.preventDefault();
+
+    PATIENTS.push({
+      id: PATIENTS[PATIENTS.length - 1].id + 1,
+      full_name: fullName,
+      birth_date: birthDate,
+      gender: gender,
+      phone: phone,
+    })
+    setfullName('')
+    setGender('m')
+    setPhone('')
+    setBirthDate('')
+    probs.setFilterPatient([...PATIENTS]);
+    console.log(PATIENTS);
+
+  };
+
+  return (
+    <form className="form">
+      <Input var={fullName} set_var={setfullName} placeholder="Full Name" />
+      <Input var={phone} set_var={setPhone} placeholder="Phone" />
+      <Select var={gender} set_var={setGender} />
+      <Input var={birthDate} set_var={setBirthDate} placeholder="Birth Date" />
+      <input value="New" type="submit" className="submitButton" onClick={newPatient} />
+    </form>
+  );
+};
+
+export default InputForm;

src/components/form_components/input.css

@@ -0,0 +1,9 @@
+.input{
+    width: 200px;
+    height: 30px;
+    color: gray;
+    font-size: 12px;
+    border-radius: 10px;
+    padding-left: 5px;
+    border: 1px solid gray;
+}

src/components/form_components/input.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import "./input.css";
+
+const Input = (probs) => {
+  return (
+    <input
+      className="input"
+      value={probs.var}
+          onChange={(e) => { probs.set_var(e.target.value)}}
+      type="text"
+      placeholder={probs.placeholder}
+    />
+  );
+};
+
+export default Input;

src/components/form_components/select.css

@@ -0,0 +1,9 @@
+.select{
+    width: 200px;
+    height: 30px;
+    color: gray;
+    font-size: 12px;
+    border-radius: 10px;
+    padding-left: 5px;
+    border: 1px solid gray;
+}

src/components/form_components/select.jsx

@@ -0,0 +1,11 @@
+import './select.css'
+const Select = (probs) => {
+    return (
+      <select value={probs.var} className="select" onChange={(e) => {probs.set_var(e.target.value);}}>
+        <option value="m">Male</option>
+        <option value="f">Female</option>
+      </select>
+    );
+}
+
+export default Select;

src/components/inputSearch.css

@@ -0,0 +1,11 @@
+.search{
+    width: 300px;
+    height: 30px;
+    border-radius: 10px;
+    border: 1px solid grey;
+    color: grey;
+    padding-left: 10px;
+    display: flex;
+    flex-direction: row;
+    margin-left: 10px;
+}

src/components/patient.js

@@ -0,0 +1,36 @@
+const PATIENTS = [
+    {
+        id:1,
+        full_name:"Ali Ahmed",
+        birth_date:"10/10/1999",
+        gender:"m",
+        phone:"+96477889654"
+    },
+    {
+        id:2,
+        full_name:"Ameer Saad",
+        birth_date:"10/10/2000",
+        gender:"m",
+        phone:"+96477809654"
+    },
+    {
+        id:3,
+        full_name:"Muna Ali",
+        birth_date:"10/10/1998",
+        gender:"f",
+        phone:"+964777809654"
+    }
+]
+
+const addPatient = (id,full_name, birth_date ,gender, phone) => {
+  PATIENTS.push({
+    "id": id,
+    "full_name": full_name,
+    "birth_date": birth_date,
+    "gender": gender,
+    "phone":phone
+  })
+
+}
+
+export {PATIENTS, addPatient};

src/components/search_field.jsx

@@ -0,0 +1,28 @@
+import "./inputSearch.css";
+import { PATIENTS } from "./patient";
+
+const SearchField = (probs) => {
+  const updateTable = (e) => {
+    let result =
+      e.target.value === ""
+        ? PATIENTS
+        : PATIENTS.filter((item) => {
+            return item.full_name
+              .toLowerCase()
+              .includes(e.target.value.toLowerCase());
+          });
+    probs.setFilterPatient(result);
+    console.log(probs.filterPatient);
+  };
+
+  return (
+    <input
+      placeholder="Search By Name"
+      className="search"
+      type="text"
+      onChange={updateTable}
+    />
+  );
+};
+
+export default SearchField;

src/components/table.css

@@ -0,0 +1,6 @@
+.tablePos{
+    margin-top: 25px;
+}
+td{
+    color: white;
+}

src/components/table.jsx

@@ -0,0 +1,41 @@
+
+import {PATIENTS} from "./patient";
+import "./table.css";
+import Row from "./table_components/row";
+const Table = (probs) => {
+  let p = probs.filterPatient? probs.filterPatient:PATIENTS;
+  return (
+    <div className="container-fluid tablePos">
+      <table className="table">
+        <thead>
+          <tr className="bg-primary ">
+            <td>id</td>
+            <td>fullName</td>
+            <td>phone</td>
+            <td>gender</td>
+            <td>birthDate</td>
+            <td>Action</td>
+          </tr>
+        </thead>
+        <tbody>
+          {p.map((item, index) => {
+            return (
+              <Row
+                id={item.id}
+                fullName={item.full_name}
+                phone={item.phone}
+                gender={item.gender}
+                birthDate={item.birth_date}
+                idx={index}
+                key={index}
+                set_var={probs.setFilterPatient}
+              />
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Table;

src/components/table_components/row.css

@@ -0,0 +1,13 @@
+.delete_button{
+    background-color: #FF5353;
+    color: white;
+    border: none;
+    padding: 5px;
+    width: 70px;
+    border-radius: 10px;
+}
+
+td{
+    color: black;
+}
+

src/components/table_components/row.jsx

@@ -0,0 +1,28 @@
+import "./row.css";
+import { PATIENTS } from "../patient";
+
+const Row = (probs) => {
+
+  const deleteRow = (e) => {
+    PATIENTS.splice(e.target.value, 1)
+    probs.set_var([...PATIENTS])
+  };  
+  return (
+    <tr>
+      <td>{probs.id}</td>
+      <td>{probs.fullName}</td>
+      <td>{probs.phone}</td>
+      <td>{probs.gender}</td>
+      <td>{probs.birthDate}</td>
+      <td>
+        <button
+          type="submit"
+          value={probs.idx}
+          className="delete_button"
+          onClick={deleteRow}
+        >Delete </button>
+      </td>
+    </tr>
+  );
+};
+export default Row;

src/reportWebVitals.js

@@ -1,6 +1,6 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);