solved

src/App.css

@@ -1,38 +1,57 @@
-.App {
-  text-align: center;
+.app-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 1rem;
 }
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+#we {
+  font-family: Arial, Helvetica, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+#we td, #we th {
+  border: 1px solid #ddd;
+  padding: 8px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+#we tr:nth-child(even){background-color: #f2f2f2;}
+
+#we tr:hover {background-color: #ddd;}
+
+#we th {width: auto;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #04AA6D;
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
+form {
+  gap: 5px;
+  padding: auto;
+  margin: auto;
+text-align: center;
+
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+
+
+form * {  border-radius: 20px;
+  border: none;
+  padding: 10px;
+  margin: 20px;
+  color:gray;
+  font-size: 28px;
+}
+.search{
+  border-radius: 20px;
+  display: flex;
+  font-size: 28px;
+margin: auto;
 }
+select {
+  border: none;
+  border-radius: 20px;
+  background-color: #f1f1f1;
+}

src/App.js

@@ -1,14 +1,137 @@
 import './App.css';
+import { useState } from "react"
+import {nanoid} from 'nanoid';
+import PCards from './Components/PCards';
 
-const App = ()=>{
-  // State here
-  return (
-    <div className="App">
-      {/* Add new patient FORM */}
-      {/* Search input */}
-      {/* Table */}
-    </div>
-  );
-}
+const App =  (props)=>{
+
+    const [patients, setPatients] = useState(null) 
+    const [filtered, setfiltered] = useState(null)
+    const [Search, setSearch] = useState('')
+    const [fullName , setFullName] = useState('')
+    const [birth_date , setBirth] = useState('')
+    const [gender, setGender] = useState('m')
+    const [phone, setPhone] = useState('')
+    const addNew = ()=>{
+        if(!fullName)
+        {
+            alert('Please fill your name')
+            return;
+        }
+        let pTemp = !patients?[]:patients
+        pTemp.push({
+            id:nanoid(),
+                    full_name:fullName,
+                    birth_date:birth_date,
+                    gender:gender,
+                    phone:phone,
+        })
+        setPatients([...pTemp])
+        setfiltered([...pTemp])
+
+    }
+    const changePhone = (e)=>{
+        let v = e.target.value
+        console.log()
+        setPhone(v)
+    }
+    const changeFullName = (e)=>{
+        let v = e.target.value
+        console.log(v)
+        setFullName (v)
+    }
+    const changeBirth = (e)=>{
+        let v = e.target.value
+        console.log(v)
+        setBirth (v)}
+        const deleteTd=(e)=>{
+            const copy = [...patients]
+
+            const index = copy.findIndex((item) => item.id === e);
+            copy.splice(index, 1);
+            console.log(copy,"newcopy")
+            setfiltered([...copy]);
+            setPatients([...copy]);
+            setSearch('')
+
+                }
+
+
+    const genderOnChange = (e)=>{
+        setGender(e.target.value)
+    }
+    const SearchM = (e)=>{setSearch(e.target.value.toLowerCase())
+        const temp = patients;
+        console.log(temp);
+        var nlist = [...temp];
+        nlist = nlist.filter((item) => {
+            return (item.full_name.toLowerCase().includes(Search))||(item.phone.toLowerCase().includes(Search));
+          });
+          if(!e.target.value.toLowerCase()){
+            setfiltered([...patients]);
+          }
+          else{
+            setfiltered([...nlist]);
+          }
+    //   ff(patients);
+  }
+    const submit = (e)=>{
+        e.preventDefault()
+        addNew()
+       setFullName('')
+       setGender('m')
+       setPhone('')
+       setBirth('')
+    }
+
+    // const ff =(v)=>{       setfiltered(patients)
+
+    //   if (Search)
+    //    setfiltered(v.filter((val)=>{return val.full_name.toLowerCase().includes(Search);console.log(val.full_name);}))
+
+    // }
+
+
+    return (<div>
+
+
+    <form onSubmit={submit}>
+        <input value={fullName} onChange={changeFullName} type="text" placeholder="Full Name"/>
+        <input value={phone} onChange={changePhone} type="number" placeholder="Phone number"/>
+        <select value={gender} onChange={genderOnChange}>
+            <option value='m'>Male</option>
+            <option value="f">Female</option>
+        </select>
+        <input value={birth_date} onChange={changeBirth} type="date" placeholder="Birth date"/>
 
-export default App;
+        <input type="submit"/>
+    </form>
+    <input className='search' value={Search} onChange={SearchM} type="text" placeholder='filter by name or phone'
+/>
+
+     <table id="we">
+         <thead>
+    <th >
+      <td>full_name</td> 
+        <td>phone</td>
+        <td>gendeh</td>
+        <td>birth_date</td>
+    </th>
+
+    </thead>
+    <tbody>
+       {filtered?filtered.map((item,index)=>{
+     return <PCards key={index} deleteTd={deleteTd} item={item}/>
+    })
+    :
+    <p>No Data</p>}
+    </tbody>
+    </table>
+
+          </div>
+           );
+
+
+
+}
+export default App;

src/Components/PCards.jsx

@@ -0,0 +1,19 @@
+const PCards = (props)=>{
+
+    console.log(props)
+    const patient = props.item
+
+   return <tr >
+        <td>{patient.full_name}</td> 
+        <td>{patient.phone}</td>
+        <td>{patient.gender}</td>
+        <td>{patient.birth_date}</td>
+
+        <td><button  type="button" onClick={(()=>props.deleteTd(patient.id))}>deleted</button></td>
+
+    </tr>
+
+
+}
+
+export default PCards;

src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -14,4 +13,3 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();